Timeline

* redux 설명 지도 이 지도가 어떤 흐름을 나타내는 걸까요? 핵심은 store!! store 안에 state와 reducer가 있음 그리고 중요한 건 render render와 dispatch, subscribe, getState가 어떻게 상호작용하는지 알아야 함 render은 state가 바뀔 때마다 ui 바꿔줌 render를 subscribe에 등록해줌으로써 state변경을 render가 감지할 수 있음 action과 reducer action으로 dispatch 호출 reducer는 state를 입력값으로 받고 action을 참조해서 새로운 state 값을 만들어내서 return => state 가공자 state가 변경됐으니 render가 호출되면서 getState로 가서 state를 가져오고..

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