Next.js 프로젝트를 생성할 때마다 개발 환경 초기 세팅을 다시 찾아보는 것이 귀찮아서, 이번 포스팅에서는 해당 과정을 정리해 보았다. 이 포스팅에서는 Next.js(v.15.0.3), TypeScript, 그리고 eslint(airbnb)를 기준으로 설정 방법을 다룬다. 01. Next.js 설치먼저 아래 명령어(create-next-app)을 통해 Next.js 초기 세팅을 한다.npx create-next-app@latest 설치 조건은 아래와 같이 선택하였다.프로젝트 이름 설정TypeScript 사용 여부 선택 → 해당 프로젝트에서는 TypeScript를 사용하려 하였으므로 Yes 선택ESLint 적용할지 여부 → 문법 틀린 부분 지적해주는 Linter 적용하기 위해 Yes 선택Tailwin..
Next.JS는 CSR인 React를 SSR 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 01. CSR과 SSR#1. CSR모든 렌더링이 클라이언트에서 발생한다.초기 HTML은 거의 비어있고, 브라우저는 JavaScript를 로드하여 UI를 빌드한다.자바스크립트를 비활성화하면 UI가 렌더되지 않는다. #2. SSRNext.JS는 기본적으로 SSR 방식을 사용한다.모든 페이지와 컴포넌트가 서버에서 먼저 렌더링되고, 그 결과가 HTML로 변환되어 브라우저에서 전송된다.이렇게 전송된 HTML은 정적이므로 자바스크립트를 활성화하지 않아도 UI가 보인다.페이지를 이동할 때마다 서버에서 새 HTML을 받아오고, 브라우저에서 UI를 즉시 표시한다.서버는 렌더링을 끝마친 HTML파일을 응답으로 보내며, 클라이언..
Front-End/Next.js 2024. 11. 22. 20:51
Next.js 프로젝트를 생성할 때마다 개발 환경 초기 세팅을 다시 찾아보는 것이 귀찮아서, 이번 포스팅에서는 해당 과정을 정리해 보았다. 이 포스팅에서는 Next.js(v.15.0.3), TypeScript, 그리고 eslint(airbnb)를 기준으로 설정 방법을 다룬다. 01. Next.js 설치먼저 아래 명령어(create-next-app)을 통해 Next.js 초기 세팅을 한다.npx create-next-app@latest 설치 조건은 아래와 같이 선택하였다.프로젝트 이름 설정TypeScript 사용 여부 선택 → 해당 프로젝트에서는 TypeScript를 사용하려 하였으므로 Yes 선택ESLint 적용할지 여부 → 문법 틀린 부분 지적해주는 Linter 적용하기 위해 Yes 선택Tailwin..
Front-End/Next.js 2024. 10. 8. 12:00
Next.JS는 CSR인 React를 SSR 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 01. CSR과 SSR#1. CSR모든 렌더링이 클라이언트에서 발생한다.초기 HTML은 거의 비어있고, 브라우저는 JavaScript를 로드하여 UI를 빌드한다.자바스크립트를 비활성화하면 UI가 렌더되지 않는다. #2. SSRNext.JS는 기본적으로 SSR 방식을 사용한다.모든 페이지와 컴포넌트가 서버에서 먼저 렌더링되고, 그 결과가 HTML로 변환되어 브라우저에서 전송된다.이렇게 전송된 HTML은 정적이므로 자바스크립트를 활성화하지 않아도 UI가 보인다.페이지를 이동할 때마다 서버에서 새 HTML을 받아오고, 브라우저에서 UI를 즉시 표시한다.서버는 렌더링을 끝마친 HTML파일을 응답으로 보내며, 클라이언..