뒤죽박죽 공책 뒤죽박죽 공책

NextJS 프로젝트를 하면서 기존 React에서 하던 방식 대로 사용해도 괜찮지만 NextJS는 React와 다르게 동작하기 때문에 앱을 초기화하는 기존 코드를 약간 커스텀해서 작성해줘야 한다. 앱 초기화 단계 기존 리액트에서 사용하는 코드는 아래와 같다. 만약 리액트 혹은 순수 자바스크립트로 이루어진 프로젝트에서 firebase를 사용한다면 아래와 같이 작성해도 무관하다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://fireb..

NextJs를 사용하기 전에는 이미지를 넣어야 한다면 태그를 사용하여 이미지를 넣고는 하였다. 하지만 Next 자체에서 컴포넌트가 존재하기 때문에 이를 사용하여 이미지를 넣을 수 있다. 그렇다면 어떨 때 컴포넌트를 사용하고, 왜 사용하는 것인지에 대해 공부한 내용을 작성해보고자 한다. 컴포넌트는 lazy-loading이 지원되며 기본적으로 width와 heigth를 작성해줘야 한다. 또한 alt값을 필수로 작성해야만 오류가 발생하지 않는다. 또한 해당 컴포넌트는 이미지를 최적화해서 보여주기 때문에 사용처에 따라 이미지의 크기를 원본과 다르게 보여준다. 위의 값을 설정하기 위해 지원하는 옵션을 적어보고자 한다. width, heigth // 300px X 300px 괄호 안에 들어간 값은 픽셀로 이미지가 ..