Duckgugong

Assets, Metadata, CSS

Assets(img, Image) next.js의 가장 상위에 있는 public 디렉토리에 프로젝트에 쓰일 static 데이터를 넣을 수 있다. 만약 public 아래 있는 image 디렉토리에 뚱이.jpg라는 파일이 있다면 아래처럼 img 태그에 사용할 수 있다. Image Component img 태그 대신 next.js에서 제공하는 Image 컴포넌트를 이용할 수도 있다. lint를 사용하면 img 엘리먼트 대신 Image 컴포넌트를 이용하라고 경고가 뜸! Image 컴포넌트의 장점은 view port에 보일 때만 이미지를 불러오도록 lazy loading을 할 수 있고 이미지 용량의 최적화, placeholder 제공 등이 있다. Local Image 로컬에 있는 이미지를 import해서 사용하는..

next.js 시작해보기

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, == vs === 연산자

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

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