Next.js를 사용하게 된 이유
현재 진행하려는 프로젝트에 대해 조금 고민이 있었다.
-
일단, 새로운걸 접해보고 싶었다.
음악 전공에서 디자인 업무, 그리고 그 시작점에서 개발 공부까지 1년째.
개발과는 너무나도 머나먼 여정을 걸어온 나에게 빡센 공부였지만,
계속 사용하던 프레임워크만 사용할 수는 없었다. -
가성비 (?)
원래 백엔드를 GO로, 프론트는 원래 하던대로 React - ts를 사용할 예정이었지만
따지고보면 그렇게 큰 프로젝트는 아니라는 생각에 Next.js로 퉁치는게 가성비가 좋다고 느꼈다.
가성비가 좋다는것은, 백엔드를 전혀 모르는 언어로 구성하고 아는것을 붙이는것보다,
차라리 아는것을 응용하고 현업에서 요구하는 스택을 쌓는게 더 낫지 않느냐의 문제였다.
React와 Next.js는 뭐가 다른가
React
React는 UI를 컴포넌트로 만드는 라이브러리다.
예를 들면:
- 버튼 컴포넌트
- 카드 컴포넌트
- 화면 컴포넌트
이런 식으로 UI를 조립하는 도구라고 보면 된다.
Next.js
Next.js는 React를 기반으로 페이지 구조와 앱 기능을 더 쉽게 관리하게 해주는 프레임 워크다.
즉 비유하면:
- React = 부품 만들기
- Next.js = 부품으로 집 짓는 규칙까지 포함한 설계 도구
그래서 Next.js 안에서는 React 컴포넌트를 그대로 쓰지만,(jsx, tsx)
추가로 "페이지는 어디에 두는지", "URL은 어떻게 생기는지" 같은 규칙이 생긴다.\
오늘 한 일
- Next 프로젝트 생성
처음에npx create-next-app@latest 프로젝트 명으로 프로젝트를 만들었다.
이 과정에서:
- React
- Next
- TypeScript
- Tailwind
- ESLint
같은 기본 세팅이 같이 설치된다.
즉, 그냥 빈 폴더를 만든 게 아니라
Next.js 개발을 시작할 수 있는 기본 환경을 만들었다.
-
개발 서버 실행
기존 React 프로젝트와 동일하게npm run dev로 서버를 실행했고,
이걸 켜면localhost:3000에서 지금 만든 앱을 바로 볼 수 있다. -
app 폴더 확인
Next.js App Router를 쓰면app폴더가 핵심이 된다.
여기서 중요한건:
- app/page.tsx
- app/plan/page.tsx
- app/summary/page.tsx
같이 폴더 구조 자체가 URL 경로가 된다는 점이다.
이게 React Router랑 다른 핵심 포인트 중 하나다.
- features 폴더 구성
그 다음에features폴더를 만들었다.
이건 Next.js가 강제하는 구조는 아니고,
내가 프로젝트를 보기 좋게 정리하기 위해 직접 만든 구조다.
예를 들면:
- features/landing
- features/plan
- features/summary
- features/pdf
이렇게 기능 단위로 나누면,
나중에 파일이 많아져도 덜 헷갈린다.
Next.js에서 제일 중요한 개념: page.tsx
page는 무엇인가
해당 경로에서 실제로 보여줄 페이지 컴포넌트 파일이다.
예를 들어
app/
page.tsx
plan/
page.tsx
summary/
page.tsx이 구조는 URL로 보면 이렇게 된다.
- app/page.tsx → /
- app/plan/page.tsx → /plan
- app/summary/page.tsx → /summary
즉 폴더 이름이 URL이 되고,
그 안의 page.tsx 가 그 화면의 진입점이 되는것이다.
→ 결국은 폴더가 경로다 정도로 이해하고 넘어갔다.
그럼 page.tsx 안에 모든 걸 다 쓰나?
그렇진 않다.
page.tsx는 페이지의 입구 역할만 하게 두었다.
실제 화면 내용은 features폴더에 분리해서 넣는게 깔끔해보였다.
예를 들어
app/page.tsx
import LandingPage from "@/features/landing/components/LandingPage";
// @/ = 일종의 alias. 상대 경로를 적지 않아도 루트부터 시작하는 깔끔한 경로 표기
export default function Page() {
return <LandingPage />;
}여기서 실제 랜딩 화면은 LandingPage.tsx 가 담당한다.
즉 역할 분리는 이렇다.
- app/.../page.tsx = URL 연결용
- features/... = 실제 화면 구현
이렇게 분리하면 나중에 파일이 커져도 나름 뭐...OK
이번에 만든 폴더 구조에 대해서
app/
page.tsx
plan/page.tsx
summary/page.tsx
features/
landing/components/
odyssey-plan/components/
plan/model/
plan/store/
summary/components/
summary/model/
pdf/components/
pdf/model/app
라우트 진입점.
즉 URL 경로 담당.
features
기능별 묶음.
랜딩, 플랜 작성, 요약, PDF 같은 실제 도메인 단위.
componemts
화면 조각들
ex: LandingPage, SummaryPage, 카드, 버튼, 섹션 등.
model
타입, 상수, 계산 함수(Utils) 같은 것들.
store
zustand 같은 상태 관리 파일.
즉 한마디로 하면:
app은 길 안내, features는 실제 방 구조라고 보면 된다.
Next.js를 처음 접하며 이해한 점
처음에는 page.tsx 가 여러개 생기고, app 폴더와 features 폴더가 도잇에 존재하는 구조가 낯설었다.
React에서는 보통 라우팅을 직접 설정하고, 컴포넌트 파일을 자유롭게 배치하는 경우가 많았기 때문에 "왜 같은 이름의 파일이 여러 개 인가"라는 혼란이 있었다.
하지만 App Router 구조를 이해하고 나니 흐름이 정리됐다.
app폴더는 URL과 직접 연결되는 라우트 진입점page.tsx는 각 경로에서 실제로 렌더링될 페이지features폴더는 기능 단위로 화면과 로직을 정리하기 위한 사용자 정의 구조
즉 app은 경로를 연결하는 입구이고, features 는 실제 페이지 내용을 구성하는 공간이라는 점을 이해하면서 구조가 명확하게 보이기 시작했다.
