umilove98의 블로그

화면이 스크롤되어 일정 위치에 도달하면 요소를 보이지 않게 하고 싶다. window.scrollY 속성을 이용하면 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환해준다. window.addEventListener( 'scroll', _.throttle(function () { console.log(window.scrollY); if (window.scrollY > 500) { // 배지 숨기기 badgeEl.style.display = 'none'; } else { // 배지 보이기 badgeEl.style.display = 'block'; } }, 300) ); lodash.js를 사용하였다. 화면을 스크롤하면 300ms 간격으로 문서가 수직으로 스크롤 된 크기를 콘솔에 출력하고 500px 넘게 ..

화면 스크롤 시 이벤트를 발생시켜 콘솔에 출력하는 코드를 작성해 보았다. window.addEventListener('scroll', function () { console.log('scroll!'); }); 브라우저 창을 스크롤 할 경우 이벤트가 발생하여 콘솔에 scroll! 이라고 출력하는 코드이다. 아주 잠깐 스크롤을 움직였을 뿐인데 굉장히 많은 콜백함수 호출이 일어났다. 이런 간단한 기능 하나라면 상관없겠지만 기능이 많아지고 복잡해지면 이런 잦은 콜백함수 호출로 인해 사이트의 반응이 느려질 수 있다. 이를 해결하기 위해 lodash.js 라이브러리를 사용할 수 있다. lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to ..

BEM이란 Block Element Modifier의 약칭으로 html 의 요소에 클래스 속성을 부여할 때 그 이름을 지어주는 규칙을 말한다. 요소__일부분 (underscore 2개 사용) 요소--상태 (hyphen 2개 사용) 형태가 있는데 예를 들어 이러한 형태의 코드가 작성되어 있다고 할 때, container 라는 클래스를 가진 요소의 자식으로 name(1번), item 클래스를 가진 요소들이 있고 item 클래스의 요소는 다시 name(2번)이라는 클래스를 가진 자식 요소가 있다. css에서 container 의 자식요소인 name(1번)을 지정하고자 할 때 .container .name{ } 위와 같이 사용하는 경우가 많은데 이런 경우 item의 자식 요소인 name(2번) 까지 지정되어 불..

다음과 같이 작성된 HTML 문서가 있다. hello main.js 에 이런 내용을 입력해 보았다. let boxEl = document.querySelector('.box'); console.log(boxEl); querySelector를 통해 문서 내부의 box클래스를 가진 요소를 가져와 boxEl 이라는 함수 내부에 저장 후 그 내용을 콘솔에 출력하는 코드이다. 해당 요소의 정보를 확인하기 위해 실행시켜보았는데.. 의도한 것과 다르게 null값이 콘솔에 출력되었다. 기본적으로 브라우저가 HTML문서를 위에서 아래로 읽어가며 실행하기 때문에 이런 현상이 발생하게 되었는데 자바스크립트를 불러와 동작시키는 해당 코드는 문서의 윗 부분인 head 부분에 작성되어 있고 hello 자바스크립트 문서에서 찾고 ..

create-react-app은 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구입니다. 터미널을 열고 프로젝트를 만들고 싶은 디렉터리로 이동합니다. 저는 바탕화면에 react라는 폴더를 생성한 후 이곳에 프로젝트를 생성해 보기로 했어요 그 후 명령어를 입력하여 리액트 프로젝트를 생성합니다. yarn create react-app hello-react 여기서 hello-react는 자신이 원하는 프로젝트 이름을 써 주면 됩니다 그러면 이거 뭐 잘못된 거 아닌가 싶은 느낌으로 엄청나게 긴 메시지들이 출력되면서 프로젝트가 생성됩니다. 저는 총 51.87초가 걸렸네요 이렇게 생성이 완료 된 후에는 프로젝트 디렉터리로 이동 후 리액트 개발 ..

Node.js 설치 시 패키지 관리 도구인 npm 이 함께 설치되어 있는데요, 공부 중인 책에서 yarn 이라는 패키지 관리자 도구를 사용하여 설명을 하고 있기 때문에 저도 yarn 을 설치합니다. 아직 npm 도 모르는데 yarn을 사용해도 괜찮을지는 모르겠으나 일단 해보려고 해요 한 가지에 익숙해지면 다른 녀석은 쉽게 익힐 수 있을 테니까요 yarn은 npm보다 더 빠르고 효율적인 캐시 시스템과 부가 기능을 제공합니다. 다운로드 페이지로 이동하고 Installation | Yarn (yarnpkg.com) Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 스크롤을 조금 내린 뒤 이곳을 클릭하면 Download Inst..