[FE/next js] 프론트 스택 정하기 및 next js 설치 (app router)

배경

2023.11.29 - [개발/프로젝트] - [BE/restful] 백엔드 스택, DB 정하기

다시 한번 프로젝트의 목적을 쓰자면,

1. 나의 학습!! 새로운거 배우고, 해봤던건 더 잘 쓸 수 있는 방법 찾아보기

2. 사용자(우리 언니)가 원하는 서비스를 제공하기

크게 두가지 큰 목표가 있다.

프론트엔드 스택은 크게 2가지를 고민했다.

React vs Next 이렇게 두가지

사실 좀 더 익숙한 React를 사용하면 분명 원하는 대로 개발이 가능할 것이고 더 빨랐을 것이다. 그치만 Next의 SSR이 호평을 많이 받았기 때문에 안해볼 수 없었다. 사실 문서만 읽어서는 감이 안와서 꼭 한번 프로젝트로 진행하고 싶다는 생각을 했다.

그래서 Next를 골랐다.

1. 라이브러리인 React는 개발자가 구조를 정하고 자유도가 높다. 그치만 Next는 프레임워크기 때문에 자유도는 좀 낮아도 코드를 이해하기에는 더 쉬울거라고 생각했다.

2. SSR 서버 사이드 렌더링 체험하기, React에서는 제공하고 있지 않기 때문에 Next를 써야했다.

3. 사전 조사로 알게 된 정보는 적지만 직접 체험해보며 React와 비교해보고 싶다는 욕구가 생겼다.

Contents: Next js 프로젝트 세팅

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

npx create-next-app household-ledger-client
#tailwind css No
#Approuter Yes

 

간단하게 프로젝트 설정할 수 있다. (tailwind 말고 styled-component 사용하려고 tailwind는 설치하지 않음. 그냥 쓸걸...)

 

Next js에서 파일 구조를 어떻게 가져갈지 좀 고민을 했는데 친절하게도 그 부분 관련해서도 문서가 있었다.

https://nextjs.org/docs/app/building-your-application/routing/colocation#project-organization-strategies

Routing: Project Organization | Next.js

우선은 Store project files outside of app 방식을 사용할 예정, app 안에는 next가 제공하는 layout.tsx, page.tsx 등등의 파일만 포함하도록 하고 싶었다.

 

아주아주 기본 프로젝트 설치는 끝. 다음에는 삽질 시작......엉엉...