next.js가 뭐지 프론트엔드 개발을 공부하면서 next.js에 대해 들어봤지만 정확한 용도에 대해 알지는 못했다. 회사에서 next.js를 사용하기 때문에 이에 대해 잘 알아둬야 할 필요성이 생겨서 글을 남기면서 공부해보자! 하지만 누가 뭐라해도 공식문서가 최고이긴 하다! https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org https://nextj..

falsy value Javascript에서 Boolean 문맥(if 문)에서 boolean이 아닌 다른 타입의 값을 false로 사용할 수 있는 값이다! 아래 표에 나온 값들 이외에는 모두 truty value이다! [](빈 array), {}(빈 object), "false"(문자열 false), "0"(문자열 0)등은 truty value! 헷갈리지말자 이 값들은 동등 비교 연산자를 사용할 때 falsy value false boolean false 0 숫자 0 -0 negative zero 0n bingint zero "". '', `` empty string null undefined NaN Not A Number 아래 코드를 보면 쉽게 이해된다! !! 모르는 사람은 없겠지? console.lo..

nextTick Vue.js에서 reactive한 상태가 변할 때, 그 상태 변화에 대한 DOM 업데이트는 비동기적으로 이루어진다! 아래의 예시를 살펴보자. reactive한 state가 변경되는 부분 바로 아래에 reactive한 state를 사용하는 h1 태그의 textContent를 console로 출력해보면 항상 이전의 값이 출력되는 모습을 보인다! 방금 말했다시피, DOM 업데이트가 끝나기 전에 먼저 DOM에 대한 내용을 출력하기 때문이다. count: {{ count }} count ++ 위와 같은 문제를 nextTick을 이용해서 해결할 수 있다! DOM 업데이트가 끝나야 nextTick이 실행되므로 reactive한 상태의 변화에 따른 올바른 DOM의 내용을 구 할 수 있다. DOM 업데이..

debounce? debounce란 연속되는 함수의 호출(이벤트 리스너) 흐름 속에서 마지막 함수 호출(or 처음)만 일어나게 하는 것이다! throttle? throttle이란 일정한 주기마다 함수(이벤트 리스너)를 한번만 실행시키는 것이다 debounce와 throttle이 없을 때 debouce와 throttle 없이 평소처럼 input, resize, scroll 같이 이벤트 핸들러가 굉장히 짧은 주기로 실행되는 이벤트를 사용하면 저하를 불러올 수 있다! 예를 들어, 어떠한 요소의 input/scroll/resize 이벤트의 이벤트 핸들러를 통해 가장 마지막 시점의 정보만 필요하다면 그 이전의 정보는 모두 필요 없게 되고 이러한 경우 debounce를 사용하면 쉽게 맨 마지막 시점의 정보만 얻을 ..

$data 컴포넌트에서 data 속성에 정의(return)한 reactive한 값들을 객체로 뽑아준다. {{ $data }} this.a = 1은 reactive하지 않으므로 화면에 나타나지 않는다. $props 부모로부터 건내받은 props를 object 형식으로 받을 수 있다. 부모 컴포넌트 자식 컴포넌트 props 속성을 통해 부모로부터 받은 props를 명시해야 $props로 받을 수 있다 props: {{ $props }} $el 해당 컴포넌트의 HTML(element들)을 뽑아준다. $el을 통해 현재 컴포넌트의 HTML을 조회해서 querySelector를 사용할 수 있다. 최상위 엘리먼트가 하나만 존재해야 정상적으로 작동한다! Hi, i'm duckgugong $el test! $optio..

Mixin 만약 여러 컴포넌트가 같은 형식의 data나 methods를 사용한다면 모듈화를 시키는 것이 굉장히 편할 것이다. 컴포넌트마다 똑같은 형식의 data나 methods를 일일이 치고 있다면 생산성이 굉장히 떨어지고 비효율적일 것이다. 특히 겹치는 부분이 많을수록 더욱 그럴것이다! Vue.js에서 Mixin을 통해 이러한 문제를 해결할 수 있다! 컴포넌트들이 공유할 mixin 파일 (MixinTest.js) 컴포넌트들이 공통으로 사용할 data 속성과 methods 속성을 작성한 파일을 하나 만들자 const MixinTest = { data() { return { num: 1 } }, methods: { plus_one() { this.num++; }, minus_one() { this.num-..