🧸 왜 Next.js를 사용할까?
Next.js는 React의 서버 사이드 렌더링(Server Side Rendering, SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크이다.
SSR을 이용하면 초기 로딩 속도가 굉장히 빨라지고, 검색 엔진 최적화에 유리해진다.
하지만 리액트 라우터(Router)와 호환되지 않는다는 단점이 있다. 그렇기 때문에 이미 작성된 프로젝트에 적용하는 것이 매우 까다롭다.
🧸 과제 수행 중 발생한 문제
react로 만든 4주차 과제의 src 폴더를 가져올 때 발생한 문제
React의 components 폴더가 위치하고 있는 src 폴더를 5주차 과제 폴더 (my-app 폴더) 안에 복사하면 src 폴더에 접근할 수 있다.
기존의 파일에 src 또는 components 폴더에 대한 경로가 작성되어있다면, 바뀐 경로를 올바르게 수정해주어야 한다.
경로를 제대로 설정하지 않아 오류가 계속 발생했다.
- 기존 코드
import Header from ".components/Header";
import Todo from ".components/todo/Todo";- 수정한 코드
import Header from "../src/components/Header";
import Todo from "../src/components/todo/Todo";기존에 작성했던 index.js 코드를 Next.js로 작성해주기 위해, "pages" 폴더의 index.js로 옮긴다.
단, 맨 위에는 아래의 코드를 추가로 작성해주어야 한다.
import Head from "next/head";또한 function 이름을 Home으로 바꿔주는 것이 좋다.
styled-components가 적용이 되지 않는 문제
styled-components 스타일이 적용 되기 전에 렌더링이 되기 때문에 발생하는 문제이다. css가 입혀지기 전에 html 파일이 그대로 노출되는 것이다.
아래의 과정을 따라하면 된다.
- 링크 클릭
ꜱɪɴᴄᴇ ２０２１.０９.０１