Timeline

* 범위 : 13~17 * 13. cache https://nextjs.org/docs/app/building-your-application/caching Building Your Application: Caching | Next.js Next.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. nextjs.or..

* 범위 : 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..

* 범위 : 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' 이렇게 숫자가 붙는데..

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR는 클라이언트가 모든 것을 처리하는 방식입니다. app.js를 서버로부터 다운받아 이것들을 기반으로 동적으로 HTML을 생성해 사용자에게 최종적인 애플리케이션을 보여줍니다. 아래 코드와 같이 서버에서는 body에 app과 script 태그를 보내주고 클라이언트에서 이것들을 동작시켜 완성된 페이지를 보여주는 방식입니다. 장점은 첫 번째 이후 페이지 렌더링이 빠르고 데이터 비용을 아낄 수 있는 여지가 높습니다. 하나의 동작이 이루어질 때마다 필요없는 부분까지 한번에 불러와야하는 SSR과 달리 CSR는 변화된 부분만을 로딩해올 수 있어 빠르고 효율적입니다. 단점은 사용자가 첫 화면을 보기까지 로딩 시..