기술스택 선정

 

NextJS:
 App vs Page

주요 차이점

차이점

 

추가 고려사항:

• SEO: 앱 디렉토리의 페이지는 기본적으로 서버에서 렌더링되므로 잠재적으로 SEO에 더 좋습니다.
• 성능: 앱 디렉터리의 서버 구성 요소는 성능상의 이점을 제공할 수 있습니다.
• 유연성: 앱 라우터는 중첩된 레이아웃과 데이터 가져오기에 더 많은 유연성을 제공합니다.
• 마이그레이션: 기존 프로젝트를 앱 라우터로 마이그레이션하려면 약간의 노력이 필요할 수 있습니다.

권장사항:

• 새 프로젝트: 최신 기능과 유연성을 갖춘 App Router로 시작하세요.
• 기존 프로젝트: 앱 라우터로 마이그레이션하기 전에 잠재적 이점을 평가합니다.
• 단순 라우팅: 간단한 라우팅이 필요한 소규모 프로젝트에는 페이지 라우터가 충분할 수 있습니다.
• 복잡한 라우팅 및 데이터 요구 사항: 앱 라우터가 더 나은 선택일 가능성이 높습니다

 

Nextjs에 대한 여러 의견

 

앱 라우터에 대해 정말 기대가 되었지만 Next.js 13 및 14에 대한 문서(일반적인 사용 사례에 대한), 성능 및 안정성이 부족합니다 .

 

앱 라우터.
첫째, 시작하는 데에는 최소한의 노력만 필요합니다. 현재 페이지 라우터 페이지를 클라이언트 구성 요소로 앱 라우터 레이아웃(서버) 구성 요소로 가져오기만 하면 됩니다. 모든 것이 여전히 작동합니다(약간의 조정 포함). 처음부터 다시 점검하는 것이 아니며 신속하게 변환하는 것이 매우 간단합니다.
그런 다음 필요에 따라 이전 페이지 항목을 리팩터링할 수 있습니다. 명심하세요. 앱 라우터가 제공하는 기능을 활용하기 위해서만 그렇게 하는 것이므로 여전히 자발적입니다.
이것은 Pages Router로 프로젝트를 시작한 다음 1년 후에 App Router로 전환한 사람이 말한 것입니다.

 

저는 3개월 전부터 Next를 사용하기 시작했습니다. 
먼저 페이지 라우터를 사용하는 YouTube의 일부 Twitter/Spotify 복제 튜토리얼을 따랐습니다. 
그런 다음 그 중 하나를 앱 라우터에 직접 이식하기로 결정했습니다. 
처음에는 정말 이상하게 느껴졌지만 일단 앱 라우터가 클릭되면 솔직히 Pages로 돌아갈 수 없습니다.

 

많은 외부 라이브러리에서는 제대로 작동하지 않습니다.
처음 시도했을 때 몇 가지 버그가 있어서 실망스러웠는데, 이제는 고쳐졌으면 좋겠습니다.
또한 pre-next(어떤 이유로든 한 단계 뒤로 물러난 것처럼 느껴지지만) 반응 라우터 설정과 너무 비슷하다고 느껴지지만 마법이 많이 추가되어 대규모 프로젝트에 사용하는 것이 불안해집니다.
언젠가는 위험성이 낮은 프로젝트에 다시 시도해 보고 재평가할 것 같습니다. 다음에도 더 나은 경험을 하시길 바라겠습니다.

 

결정

결론적으로, 사용 환경 및 개발자의 선호도에 따라 다를 수 있지만 여러 이유로 페이지 라우터를 사용하기로 결정했습니다. 

1. 편의성 :  페이지 라우터를 사용하면 각 페이지마다 다른 레이아웃을 쉽게 구성할 수 있습니다. 이는 새로운 페이지별로 다양한 레이아웃을 적용할 수 있어서 유연성을 제공합니다.

2. 레퍼런스 부족 : App Router에 대한 문서 및 레퍼런스가 부족하다고 느꼈습니다. 이는 원하는 기능을 구현하려면 페이지 라우터의 작동 방식을 이해하고 적용해야 하는데, 이는 추가적인 노력을 요구할 수 있습니다.

그러므로 페이지 라우터를 사용함으로써, 편의성과 문서의 부족으로 인한 불편함을 최소화하고 유지보수 측면에서 더 유리한 선택을 한 것입니다. Verce(Next.js)에서는 App Router를 추천하지만, 현재 상황에서는 페이지 라우터를 선호하고 있습니다.

 

폴더 구조

 

 

src
│
├── page/        	  	# 어플리케이션의 페이지
│   ├── auth/       	
│   └── board/   	
│
├── components/        	# 재사용 가능한 UI 컴포넌트
│   ├── chat/           # 채팅 관련 컴포넌트 (메시지, 채팅 입력창 등)
│   └── common/         # 일반 UI 컴포넌트 (버튼, 모달 등)
│
├── store/              # 상태 관리 (Recoil)
│
├── public/             # 정적 파일 (이미지, 아이콘 등)
│   ├── fonts/   	
│   └── images/
│   └── svgs/
│
├── styles/             # 스타일 시트 (globals.css)
│
├── hooks/  	        # 사용자 정의 훅을 저장합니다. 
│
├── utils/              # 유틸리티 함수 및 헬퍼
│
├── lib/                # 외부 라이브러리 및 프레임워크 통합
│
├── middleware/         # 서버/클라이언트/엣지 실행 코드
│
├── .env.local          # 환경변수
│
├── .gitignore          # Git에서 무시할 파일 목록
│
└── package.json        # 프로젝트 의존성 및 스크립트

 

 

코드 스타일

Prettier & ESLint

코드 스타일을 맞추지 않고 개발을 진행하다보면 에러가 생길 확률이 프로젝트가 진행하면 할 수록 커질 수 밖에 없어진다. 이 점을 방지하기 위해 코드 스타일을 컨벤션으로 정하고 프로젝트를 진행하게되는데 문서화된 컨벤션만으로는 강제성을 띄우기 힘들어진다. 강제성을 높이기 위해 ESLint와 Prettier를 같이 사용한다. 
Prettier는 문법 오류는 아니지만 미관상의 이유로 가독성이 낮아지는 것을 방지하기 위해 코드를 자동 정렬하고 다듬어준다. ESLint는 문법적으로 오류가 생길 수 있는 부분들에 대해서 에러나 워닝을 띄우고 일부의 에러는 강제변환을 도와준다. ESLint의 코드 스타일은 airbnb 스타일 가이드를 기본으로 채택하여 사용하고 필요하지 않은 룰을 삭제해서 사용하고 있다. 

 

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "plugins": ["prettier", "@tanstack/query"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "react/jsx-props-no-spreading": "off",
    "import/no-unresolved": "error",
    "object-curly-newline": "off",
    "react/jsx-one-expression-per-line": 0,
    "react/function-component-definition": [
      2,
      { "namedComponents": ["arrow-function", "function-declaration"] }
    ],
    "@tanstack/query/exhaustive-deps": "error",
    "@tanstack/query/no-rest-destructuring": "warn",
    "@tanstack/query/stable-query-client": "error"
  },

  "extends": [
    "next/core-web-vitals",
    "prettier",
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:@tanstack/eslint-plugin-query/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2018
  }
}

 

husky & lint-staged

코드 스타일 컨벤션을 강제하기 위해 ESLint를 사용한다면 Husky와 Lint-staged는 Git을 통한 코드 공유를 할 때 ESLint 규정에 어긋나지 않은 코드만 배포할 수 있도록 강제성을 부여한다. husky와 lint-staged를 이용하여 git commit이 명령어가 실행되기 직전에 Staged된 파일들에 우리가 원하는 검사를 하게된다. 여기서 우리가 원하는 검사란 ESLint 체크다. 만약 ESLint 체크를 했을 때 에러를 띄우면 git commit이 실행되지 않고 멈추게 되고 통과를 해야지 git commit 명령어가 끝까지 완료하게 된다.

 //package.json
 
 "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

//.husky/_/pre_commit

. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

 

사용이유 정리

ESLint와 Prettier를 사용하는 이유는 코드의 일관성과 품질 향상을 도모하기 위함입니다.

1. 코드 일관성 유지: ESLint는 코드의 문법 오류와 스타일 가이드 위반을 감지하여 개발자들이 일관된 코드 스타일을 유지할 수 있도록 도와줍니다. 이는 프로젝트 전체에서 일관된 코드 형식을 유지하여 가독성을 향상시키고 유지 보수를 용이하게 만듭니다.
2. 가독성 향상: Prettier는 코드를 자동으로 정렬하여 일관된 형식으로 표현하므로 가독성을 높여줍니다. 이로 인해 코드를 이해하기 쉬워지고 실수를 줄일 수 있습니다.
3. 학습과 성장: ESLint와 Prettier를 사용하면 코드의 품질과 스타일에 대해 지속적으로 피드백을 받을 수 있습니다. 이는 주니어 개발자가 더 나은 코딩 습관을 형성하고 자신의 기술을 향상시킬 수 있는 기회를 제공합니다.

이러한 ESLint와 Prettier의 사용은 프로젝트의 코드 품질을 향상시키고 개발자들의 생산성을 향상시키는데 기대됩니다. 일관된 코드 스타일은 협업을 원할하게 만들어주고, 코드의 가독성을 높여 오류 발생 가능성을 줄입니다. 또한 자동으로 코드를 정렬하고 문제를 감지하여 개발자들이 더 나은 코드를 작성할 수 있도록 돕습니다.

 

 

Storybook & Jest

1. 품질 향상을 위한 테스트 환경 구축: Jest를 사용하면 단위 테스트부터 통합 테스트까지 다양한 테스트를 작성하여 코드의 품질을 검증할 수 있습니다. 이를 통해 버그를 발견하고 수정하며 코드의 안정성을 향상시킬 수 있습니다.
2. UI 개발 및 디자인 시스템 구축: Storybook은 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공합니다. 이를 통해 UI 개발을 빠르게 진행하고 디자인 시스템을 구축할 수 있습니다. 또한, 다양한 UI 컴포넌트를 시각적으로 확인하고 테스트할 수 있어 디자이너와의 협업을 원활하게 할 수 있습니다.
3. 생산성 향상: Storybook과 Jest를 사용하면 개발자는 코드 변경에 따른 영향을 쉽게 파악할 수 있습니다. 이는 코드 리팩토링 및 기능 개발 시에 신속하게 피드백을 받을 수 있도록 도와줍니다. 또한, 테스트를 자동화하여 개발자의 시간과 노력을 절약할 수 있습니다.
4. 신뢰성 있는 소프트웨어 개발: Storybook과 Jest를 사용하면 소프트웨어의 신뢰성을 높일 수 있습니다. 단위 테스트와 UI 테스트를 통해 버그를 사전에 발견하고 예방할 수 있으며, 이는 사용자에게 더 나은 사용 경험을 제공할 수 있도록 도와줍니다.

요약하면, Storybook과 Jest를 사용하면 소프트웨어의 품질을 향상시키고 개발 생산성을 높일 수 있으며, 신뢰성 있는 소프트웨어를 개발하는 데 도움이 됩니다.

 

 

 

 

 

레퍼런스

https://stackoverflow.com/questions/76570208/what-is-different-between-app-router-and-pages-router-in-next-js

What is different between App Router and Pages Router in Next.js?

https://github.com/vercel/next.js/discussions/59373

An honest opinion about the `App` vs `Pages` router · vercel next.js · Discussion #59373

https://www.reddit.com/r/nextjs/comments/16fn1oq/app_router_or_pages_router/

From the nextjs community on Reddit

https://www.reddit.com/r/nextjs/comments/17rq3ug/why_do_you_use_pages_instead_of_app_router/

From the nextjs community on Reddit