webpack이란? 웹팩(Webpack)은 모던 웹 개발에서 매우 중요한 도구 중 하나입니다. React나 Vue 등 요즘 대세인 javascript 프레임워크로 개발을 할때도 사용합니다. 간단하게 설명하면 javascript 기반의 프로젝트 번들링하기 위해 사용합니다. 번들링이라고 하면, 여러개의 나눠진 파일들을 하나의 파일로 묶어주는 역할을 합니다. (물론 html, scss 등 javascript가 아닌 파일들도 번들링이 가능합니다) pug란? html 코드를 좀 더 간략하게 작성할 수 있도록 도와줍니다. 파이썬과 같이 indent를 사용하여 depth를 구분하기 때문에 꺽새를 사용하는 html 코드에 비해 더 간략합니다. 코드로 예를들면, Google 위 html 을 pug로 작성하면, 아래와 같..

Object.assign() map 형태의 자료형 object를 2개 이상을 합치고 싶을때, Object.assign() 함수를 사용할 수 있습니다. 예를들어, 아래와 같이 2개의 object가 있을때, Object.assign() 을 사용하면 하나의 object로 합칠 수 있습니다. const userInfo = { name: '길동', age: 28 }; const address = { address: '서울특별시', addressDetail: '강남구' }; const nextUserInfo = Object.assign(userInfo, address); console.log(nextUserInfo); // Object { name: "길동", age: 28, address: "서울특별시", add..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..

nextjs를 사용하는 이유 Link 컴포넌트를 사용하는 이유에 대해 알아보기 전에 CSR과 SSR에 용어 정리가 필요합니다. nextjs를 사용하는 이유 중 가장 큰 이유는 서버 사이드 렌더링(Server Side Rendering) 이라고 할 수 있습니다. 서버 사이드 렌더링은 줄여서 SSR이라고 부르기도 합니다. 반대로 React의 경우는 Client Side Rendering, CSR 입니다. 단어에서도 알 수 있듯이 SSR은 서버에서 미리 렌더링하여 html 파일을 만들어주고, 만들어진 html 파일을 사용자에게 전달하는 방식으로 동작합니다. 반면에 CSR의 경우는 javascript에 의해 클라이언트에서 화면을 렌더링한다는 차이점이 있습니다. SSR은 서버에서 미리 html 파일을 만들어주기 ..

타입스크립트 요즘은 웹 개발을 하기 위해서 꼭 배워야 할 언어 중에 typescript가 있습니다. javascript로도 잘 개발해왔는데, 왜 typescript를 사용할까요? 본 글에서는 javascript와 typescript의 차이를 살펴보면서 typescript에 대해 살펴봅니다. javascript vs typescript javascript 예전부터 사용해오던 javascript는 타입이라는게 없어서 편하기도 하면서, 많은 버그들을 만들어 우리들을 괴롭혀왔습니다. 예를들면, 두 수를 더해주는 메소드를 구현해보겠습니다. function sum(numA, numB) { return numA + numB; } 일반적으로는 우리는 numA와 numB에 숫자 형태의 값을 넣어서 사용할 것입니다. 아래..

이벤트 버블링 (Event Bubbling) 이벤트 버블링은 한 요소에 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 실행이 되고, 부모 요소의 이벤트 핸들러도 순차적으로 실행이되는 현상을 말합니다. 예시 코드로 설명해보면 FORM DIV P 만약 사용자가 P를 클릭했습니다. 간단하게 생각하면 p 라는 글씨만 표시가 될거라고 생각 할 수 있습니다. 하지만, 실제로는 아래와 같이 부모 요소의 이벤트 핸들러가 실행되는 것을 볼 수 있습니다. 요약하면 이벤트가 자식 요소부터 시작해서 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 이벤트 버블링(Event Bubbling)이라고 합니다. 버블링 중단하기 원치 않은 이벤트 버블링을 막는 방법이 있는데, event.stopPropagation()을 이용할 수 ..