1. 책 정리 - 실전에서 바로 쓰는 Next.js Chapter4 -> 책 읽고 정리 도중에 너무 졸려서 그만뒀다. 최근에 저녁에 커피를 조금 마시면 안졸리고 공부에 집중이 됐었는데, 약발이 다 떨어져서 인지 졸아버렸다. 카페에서 졸다가 그냥 그만두고 집에 들어왔다. -> 책 내용은 atomic design pattern 에 대해 기본적으로 다룬 내용이었다. 이번 프로젝트로 atomic design pattern을 처음 접했었는데, 책 내용에 나올 정도면 꽤 트렌디한 패턴인 것 같다. 결국에 디자인 시스템을 잘 구축하기 위한 주요 철학인 것 같았다.
1. 책 정리 - 실전에서 바로 쓰는 Next.js Chapter 3 => 이 책은 좀 예전 버젼의 Next.js를 기반으로 쓰여진 것 같다. 현재 공식문서와 차이가 좀 있는데, Next.js의 기본 구조와 기본 파일을 파악하기에는 좋은 듯 하다. 생각보다 글이 많지 않고, 코드가 많아서 쉽게 읽힌다. 2. Next.js atom 만들어보기 => styled-component를 써서 실제로 처음 만들어봤는데, 하도 css를 안만지다가 이제야 만지려니 좀 힘들었다. 피그마에서 실제 컴포넌트를 만들어내는 과정과 기존 코드 스타일을 따라가야하는게 조금 힘들었다. 하나 만들어보니 자신감이 좀 생겼다.
이번 장에서 알아볼 것 클라이언트와 서버에서의 라우팅 시스템 작동 방식 페이지 간 이동 최적화 Next.js가 정적 자원을 제공하는 방법 자동 이미지 최적화와 새로운 Image 컴포넌트를 사용한 이미지 제공 최적화 기법 컴포넌트에서 HTML 메타데이터를 처리하는 방법 _app.js와 _document.js 파일 내용 및 커스터마이징 방법 3.1 라우팅 시스템 파일시스템 기반 페이지와 라우팅을 사용하는 Next.js pages index.js → localhost:3000 contact-us.js → localhost:3000/contact-us posts index.js → localhost:3000/posts [slug].js → 동적라우팅 → localhost:3000/posts/my-first-po..
Next.js 에서는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것이지 쉽게 정할 수 있습니다. Chapter 2에서 다루는 내용 서버 사이드 랜더링을 사용해서 각 요청별로 페이지를 동적으로 랜더링하는 방법 특정 컴포넌트를 클라이언트에서만 랜더링하는 다양한 방법 빌드 시점에 정적 페이지를 생성하는 방법 증분 정적 재생성으로 정적 페이지를 재생성하는 방법 2.1 서버 사이드 랜더링 php, 루비, 파이썬과 같은 언어는 서버에서 html 페이지를 전부 랜더링한다. next.js도 마찬가지로 html 페이지를 동적으로 랜더링하고 브라우저로 전송할 수 있다. 또한 서버에서 랜더링한 페이지에 스크립트 코드를 집어넣어서 나중에 웹 페이지를 동적으로 처리할 수도 있는데 이..
Next.js 란 Next.js는 리액트를 위해 만든 웹 프레임워크로, 리액트로 서버 사이드 랜더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 기능을 제공합니다. https://nextjs.org/ Next.js by Vercel - The React Framework Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-performance e-commerce sites. nextjs.org ..
