1. SSR : getServerSideProps 함수 - Server에서만 실행 / 브라우저에서 실행 x (콘솔에서 확인 x) - runtime에서만 실행 - context 객체를 통해 쉽게 query에 접근 가능 - Context 객체를 통해, 클라이언트 부분에서는 useRouter()를 사용해서 접근하기 - Post Page에서는 next router를 통해 URL Query 파라미터에 접근 가능 - getServerSideProps의 반환 값은 Post page의 props로 전달 // pages/ssr/[id].tsx import { GetServerSideProps } from 'next'; import { useRouter } from 'next/router'; import React fro..

* 중첩 라우터 * 다이나믹 라우터 * 페이지 이동 ( Link & router ) * api 폴더 (외부API 주소 은닉) 1. Node 설치 (설치 확인) node -v 2. create-next-app 설치 npx create-next-app pages-route . > npx (node로 만들어진 프로그램을 설치없이 실행 하는 프로그램) > . : 현재폴더 3. package.json > 개발 : yarn dev > 배포 : yarn build + yarn start 4. index.tsx파일 5. pages폴더 > 안에 폴더 만들면 라우터 안에 폴더 = 중첩 라우터 6. pages폴더 > posts 폴더 > 안에 [postId].tsx 파일 생성 = 다이나믹 라우터 * useRouter 사용하기..

1. 넥스트 장점 > SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원 > 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현 가능 (react-router-dom 설치 x) > 복잡한 Server 구축 없이도 API를 배포 > 최적화 (lazy loading / 코드 split / 이미지 최적화 / 웹폰트 최적화) => 자동으로 지원 > 웹팩이나 바벨 신경 x > 개발자 리액트에만 집중할 수 있게 도와주는 프레임워 [둘 다 배워야함] 넥스트 13 : App Router => 아직은 불안정한 이슈도 있음 넥스트 13 이전 : Pages Router => 6년간 많이 사용되고 있음 [MPA에서 SSR까..

1. 좋아요 버튼: 하트 10번 계속 클릭하기 (Optimistic Update 사용) * Priority : Normal ➡️ Immediate * Commited at : 0.5 s ➡️ 1.8 s * Render : 38.5 ms ➡️17.4 ms * Layout effects : 8.2 ms ➡️ 0.2 ms * Passive effects : 2 ms ➡️ 0.6 ms 2. 카테고리 - 습관 인증 * Render : 41.8 ms ➡️26.8 ms * Layout effects : 6 ms ➡️ 3.7 ms * Passive effects : 2.2 ms ➡️ 1.7 ms 3. 카테고리 - 전체보기 * Render : 45.7 ms ➡️ 29.9 ms * Layout effects : 4.8 m..

리액트 : SPA는 JS 파일을 실행시켜서 동적으로 보여주는 것 => 더 빨리 실행해서 사용자화면에 더 빨리 나타나게 하기 위함 1. Format 최적화 * Rendered Size: 사용자 화면에 보여지는 사이즈 * Intrinsic Size : 다운로드된 실제 원본 사이즈 => Rendered Size의 2배정도가 적당함 * jpg보다는 webp 형식으로 변환 (1) 파일 이미지 하나씩 직접 변형하기 (배너 이미지 변경) https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller f..

* 콜백함수 + role & setRole 과 같이 set로 들어가있는지 확인 필요 문제 : useEffect의 dependency array에서 무한루프 => 글쓰기에서 입력할때마다 해당 콘솔이 계속 찍힘 해결 : useEffect의 dependency array의 값을 확인해야함