Next.js를 활용하면 페이지별로 Pre-rendering 방식을 선택할 수 있다 특정 페이지 별로 이곳은 SSG, 저기는 SSR 이런 식으로 가변적으로 사용할 수 있습니다. 또 아예 Pre-render를 안 하고 싶다고 하고 CSR에서 하도록도 선택할 수 있습니다. getStaticProps를 사용하면 SSG getServerSideProps를 사용하면 SSR SSG(Static Site Generation)를 사용하면 좋은 페이지 Marketing pages Blog posts E-commerce product listings Help and documentation 위 네 가지 모두 전반적으로 정적일 수 있고 자주 바뀌지 않는 데이터들일 것입니다. 정적으로 만든다면 새로 배포하기 전까지 새로 바뀔..
public 정적 리소스를 Next.js로 서빙하기 위한 디렉토리입니다. Image Component vs 이미지를 화면에 렌더링할 수 있는 방법은 위와 같이 두 가지입니다. 1. 로드될 때 유형과 크기가 다르다 아래 이미지는 제가 컴포넌트에 ``와 ``를 같이 렌더링하여 네트워크 탭에서 확인한 결과입니다. 보시면 형식 자체가 달라졌는데요. 태그로 이미지를 로드한 경우는 png, 컴포넌트로 로드한 경우에는 webp라는 유형으로 로드가 되었는데요. webp는 구글에서 만든 이미지의 포멧입니다. png나 jpeg보다 훨씬 가볍게 동일 혹은 더 좋은 화상의 이미지를 제공할 수 있는 포멧입니다. 크롬에서는 wepb를 알아서 제공하기 때문에 최적화된 이미지 포멧으로 제공을 하게 됩니다. 용량도 좀 더 적도 더 좋..
Next.js가 제공하는 여러 기능들 1. page-based routing system(with dynamic routes) pages 하위에 있는 파일들을 가지고 Routing을 구현했었습니다. 그리고 Slug를 통해 Dynamic한 routes도 제공하고 있었습니다. 2. Pre-rendering SSG / SSR Next.js에서 Data Fetching 하는 방식을 말하면서 pre-rendering에 대해서도 이야기 했었고, 그 중에서도 SSG와 SSR이 있었죠? SSG는 Static Side Generation이고, SSR은 Server Side Render였죠. 그래서 빌드하는 타이밍에 먼저 렌더해 놓을 것인가 아니면 요청이 올 때마다 새로 렌더해서 줄 것인가의 차이였습니다. 그렇지만 둘 다..
Router Routing은 흔히 네트워크 용어로 많이 사용되며, 특정 주소가 있고 그 주소에 접근하면 그 주소와 매칭되어 있는 데이터들을 받아서 사용하는 일련의 과정을 Routing이라고 합니다. 그 일을 도와주는 도구를 Router라고 합니다. React에서는 별도의 Router를 제공하지 않기 때문에 react-router라는 라이브러리릍 통해 구현합니다. Next.js의 Router는 file-system 기반입니다. 즉, file을 만들면 그것이 즉각적으로 router로 인지되어 주소와 매핑됩니다. pages/ 혹은 src/pages/ 에서 Router 기능을 사용할 수 있습니다. ❓pages/index.js 와 src/pages/index.js 둘 다 있다면? 뭐가 우선순위를 가질까? 직접 해..
Pages Next.js 프로젝트 구조 안에서 pages 안에 있는 폴더가 url과 1:1 혹은 1:N 매칭이 됩니다. Pre-rendeers와 SEO Next.js는 모든 페이지를 기본적으로 pre-render 합니다. pre-render는 말 그대로 미리 그려놓는다는 의미인데요. pre-rendering은 처음 클라이언트 쪽에서 html을 로드할 때 이미 많은 부분이 그려진 상태에서 로드를 하는 것이고, 이후에 JS 번들이 load가 되면 그제서야 Hydration이라는 과정을 거쳐 사용자와 app이 인터랙션을 할 수 있게 됩니다. html만을 가지고는 인터랙션을 할 수 없습니다(JS 코드들이 있어야 하죠?). JS 코드를 적용하는 것을 Hydration이라고 합니다. pre-render가 없는 경우..
Data Fetching Fetching = 가져오기 즉, Data Fetching은 데이터를 가져오는 작업을 말합니다. 왜 시작부터 Data Fetching인가? 화면에 무엇인가 그리려면 결국 어디선가 Data를 가져와야 합니다. 즉, 화면을 구성하기에 앞서 Data Fetching이 먼저다 !라고 생각하면 되겠습니다. Next.js가 제시하는 3+1 가지 Data Fetching 방법 ▪️ SSR ▪️ CSR ▪️ SSG ▪️ ISR 1) SSR (Server Side Render) 서버가 그린다라는 의미로, 서버가 어디선가로부터 데이터를 가져와서 그린다라는 의미 정도가 되겠습니다. Next.js에서 SSR을 담당하는 함수 : getServerSideProps 1 2 3 4 5 6 7 8 9 10 1..
- Total
- Today
- Yesterday
- TypeScript
- react-query
- jest
- 디프만
- rtl
- 딥러닝
- frontend
- 리액트 훅
- 프론트엔드 공부
- next.js
- 자바스크립트 기초
- 인프런
- styled-components
- 프로젝트 회고
- 리액트
- 데이터분석
- 파이썬
- react
- JSP
- 자바
- 스타일 컴포넌트 styled-components
- 머신러닝
- 프론트엔드
- HTML
- 프론트엔드 기초
- Python
- CSS
- 자바스크립트
- testing
- 타입스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |