nextjs 3

[next.js] 생활코딩 Next.js 13 2일차

* 범위 : 8~12 * 8. css global.css 파일에 아래와 같이 코드 작성 h1 a { text-decoration: none; } * 9. backend - json server를 사용해 백엔드 구축 npx json-server --port 9999 --watch db.json - db.json에 아래와 같은 형식으로 db 추가할 수 있음 "topics": [ { "id": 1, "title": "html", "body": "html is ..." }, { "id": 2, "title": "css", "body": "css is ..." } ], - 크롬 개발자도구에서 콘솔을 통해 통신하려면, fetch문을 사용해 통신할 수 있음 fetch('http://localhost:9999/topi..

[next.js] 생활코딩 Next.js 13 1일차

* 범위 : 0~7 * 0. Next.js 란 무엇인가? - React 기능을 기반으로 한 풀스택 웹 어플리케이션 프레임워크 - React + Expressjs - SSR 지원 => 검색 엔진 친화적 + 초기 로딩 속도 빠름 - 13 버전 이후 App router 지원 => Server Component라는 새로운 기능 사용 * 3. 빌드와 배포 - npm run dev : 개발 서버 켜기 - npm run build : 배포 서버 만들기 - npm run start : 배포 서버 켜기 => 배포 서버를 따로 만드는 이유는 배포 서버를 이용하면 페이지 로딩 시 통신에 사용되는 resources가 훨씬 줄어들기 때문 * 5. 라우팅 - 다이나믹 라우팅 : 경로가 '.../read/1' 이렇게 숫자가 붙는데..