[24.11.23 / TASK-34] Feature - 프로젝트 Init #1
Conversation
Walkthrough이 변경 사항은 Next.js 애플리케이션을 위한 여러 구성 파일을 추가하고, ESLint 및 Prettier 설정을 통합하며, Jest 테스트를 위한 구성을 포함합니다. 새로운 Changes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
src/app/layout.tsx (2)
30-30: HTML lang 속성을 검토해주세요현재 HTML lang 속성이 "en"으로 설정되어 있습니다. 웹사이트의 주 사용 언어가 한국어인 경우 "ko"로 변경하는 것이 좋겠습니다.
- <html lang="en"> + <html lang="ko">
24-34: 루트 레이아웃에 오류 처리와 분석 기능 추가를 고려해주세요대시보드 애플리케이션의 안정성과 모니터링을 위해 다음 기능들의 추가를 고려해보시기 바랍니다:
- 전역 에러 바운더리 구현
- 애널리틱스 설정 (예: Google Analytics, Amplitude 등)
- 성능 모니터링 도구 통합
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/favicon.pngis excluded by!**/*.png
📒 Files selected for processing (20)
.eslintrc.json(1 hunks).gitignore(1 hunks).npmrc(1 hunks).prettierrc(1 hunks).vscode/settings.json(1 hunks)eslint.config.mjs(1 hunks)jest.config.ts(1 hunks)jest.setup.ts(1 hunks)next.config.mjs(1 hunks)package.json(1 hunks)postcss.config.mjs(1 hunks)readme.md(1 hunks)src/__test__/app.test.ts(1 hunks)src/app/(login)/page.tsx(1 hunks)src/app/(main)/page.tsx(1 hunks)src/app/globals.css(1 hunks)src/app/layout.tsx(1 hunks)src/app/page.tsx(1 hunks)tailwind.config.ts(1 hunks)tsconfig.json(1 hunks)
✅ Files skipped from review due to trivial changes (18)
- .eslintrc.json
- .gitignore
- .npmrc
- .prettierrc
- .vscode/settings.json
- jest.config.ts
- jest.setup.ts
- next.config.mjs
- package.json
- postcss.config.mjs
- readme.md
- src/test/app.test.ts
- src/app/(login)/page.tsx
- src/app/(main)/page.tsx
- src/app/globals.css
- src/app/page.tsx
- tailwind.config.ts
- tsconfig.json
🔇 Additional comments (4)
src/app/layout.tsx (1)
16-22: favicon 파일의 존재 여부를 확인해주세요
메타데이터에서 참조하고 있는 favicon.png 파일이 public 디렉토리에 존재하는지 확인이 필요합니다.
✅ Verification successful
favicon 파일이 정상적으로 존재합니다
public 디렉토리에서 favicon.png 파일을 확인했습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if favicon exists in the public directory
fd "favicon.png" ./public
Length of output: 46
eslint.config.mjs (3)
11-11: 타입 어노테이션이 적절히 설정되었습니다
ESLint 설정에 대한 타입 정의가 명확하게 되어있어 TypeScript 지원이 잘 될 것으로 보입니다.
24-26: react-in-jsx-scope 규칙 비활성화 확인
React 17+ 버전에서는 이 규칙이 필요하지 않으므로, 비활성화가 적절합니다. 다만 프로젝트의 React 버전을 확인해주세요.
✅ Verification successful
react-in-jsx-scope 규칙 비활성화가 적절합니다
React 18 버전을 사용하고 있으므로, JSX 사용 시 React를 명시적으로 import할 필요가 없습니다. 해당 ESLint 규칙 비활성화는 적절한 설정입니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# React 버전 확인
cat package.json | jq '.dependencies.react, .devDependencies.react'
Length of output: 80
1-10: 임포트 구문 개선 제안
임포트 구문을 다음과 같이 그룹화하여 가독성을 향상시키는 것이 좋습니다:
- 코어 ESLint/TypeScript
- React 관련
- 테스트 관련
- 코드 스타일 관련
또한 각 플러그인의 호환성을 확인하는 것이 중요합니다.
✅ Verification successful
The previous script showed the package versions, but let's verify the actual ESLint configuration structure and any potential warnings. This will help us confirm if there are any compatibility issues between the plugins before making the final recommendation.
ESLint 플러그인 구성이 적절히 설정되어 있습니다
package.json과 eslint.config.mjs를 검토한 결과:
- 모든 플러그인이 최신 버전으로 설치되어 있으며 서로 호환됩니다
- ESLint v8.57.1과 함께 사용되는 플랫 설정이 올바르게 구성되어 있습니다
- 플러그인들이 논리적인 순서로 이미 잘 구성되어 있습니다:
- 코어 (globals, @eslint/js)
- TypeScript
- React
- 테스트 관련 (Jest, Testing Library)
- 코드 스타일 (Prettier)
임포트 구문 재구성이 불필요하며 현재 구성이 최적의 상태입니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 패키지 버전 호환성 확인
# package.json에서 관련 의존성 버전 확인
echo "Checking package versions:"
cat package.json | jq '.dependencies, .devDependencies'
Length of output: 924
Script:
#!/bin/bash
# Check if there are any version compatibility warnings in the logs
echo "Checking for any ESLint warnings in recent logs:"
fd -e log -e out . | xargs cat 2>/dev/null | grep -i "warn.*compatibility"
# Check ESLint configuration validation
echo -e "\nValidating ESLint configuration:"
cat eslint.config.mjs
Length of output: 1231
There was a problem hiding this comment.
전체 세팅 매우 잘 봤습니다, 2가지 궁금한게 있습니다!
리뷰
- api repo 와 linting 이나 rule 을 맞추는 것은 어떨까요? @HA0N1 논의가 필요해 보이긴 하지만, 굳이 FE 와 api 둘 다른 스타일링을 할 필요는 없어 보입니다.
README.md파일은 제 3자가 누구나 따라 세팅할 수 있도록, 가이드라인이 있으면 좋을 것 같아요. next 에서 자동으로 만들어 주는 것 말구요!
좋았던 점
- 미리 meta data 세팅을 (favicon 과 같은) 잡아 두신게 좋았습니다!
- jest 도 일단 간단한 테스팅이지만 미리 붙여 놓고, config 도 잘 확인했습니다!
- app 에 핵심 페이지 빼놓은 것도 좋았습니다~
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/app/layout.tsx (1)
16-22: 메타데이터 구성을 개선해주세요메타데이터 구성이 기본적인 수준으로 되어있습니다. SEO 최적화와 더 나은 사용자 경험을 위해 다음 속성들을 추가하는 것이 좋겠습니다:
export const metadata: Metadata = { title: 'Velog Dashboard', description: 'Velog 통계를 확인할 수 있는 Velog Dashboard', + viewport: 'width=device-width, initial-scale=1', + robots: 'index, follow', + openGraph: { + title: 'Velog Dashboard', + description: 'Velog 통계를 확인할 수 있는 Velog Dashboard', + type: 'website', + }, icons: { icon: '/favicon.png', + apple: '/apple-touch-icon.png', }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/app/layout.tsx(1 hunks)
🔇 Additional comments (1)
src/app/layout.tsx (1)
24-34: 레이아웃 구현이 깔끔합니다
Next.js의 레이아웃 컴포넌트가 간단하고 명확하게 구현되었습니다. lang 속성도 적절하게 "ko"로 설정되어 있습니다.
There was a problem hiding this comment.
첫 PR 잘 봤습니다!
제가 두 부분에 리뷰 남겨두었는데 해당 부분이 반드시 변경되어야하는 것은 아닐 수도 있어서 우선 'Comment'로 리뷰 남깁니다. 기준님 의견도 적어주시면 최종 결정 후에 'Approve' 드리겠습니다! 수고하셨습니다!
좋았던 점
- next를 활용한 프로젝트의 구조화에 대해 잘 알지 못하지만, 조금 찾아보니 app router에서 router group을 사용했을 때 그룹마다 레이아웃을 다르게 적용할 수 있고 유지보수에도 좋다는 것을 알게 됐습니다. 해당 부분들을 염두에 두고 프로젝트를 세팅하신 점이 좋았습니다!
리뷰
논의하고 싶은 점ESLint 설정과 관련하여 몇 가지 규칙을 제안드리고 싶습니다!
'@typescript-eslint/promise-function-async' // Promise 반환 함수에 async 강제
'@typescript-eslint/explicit-function-return-type' // 함수 반환 타입 명시
'@typescript-eslint/consistent-type-assertions' //타입 단언보다 타입 선언 사용 권장
'@typescript-eslint/naming-convention' // 네이밍 컨벤션 (현재 `변수, 함수 : 카멜`, `typeLike : 파스칼` 로 구성 되어있습니다) 사용에 불필요하거나 불편하신 게 있다면 같이 수정해가면 좋겠습니다! 좋았던 점전체적인 코드 구조가 매우 깔끔하게 나누어져 있어서 이해하기 쉬웠습니다! ( )가 무엇인지 찾아보던 중 라우트 그룹화 기능을 처음 접하게 되었는데 이번 기회에 새로운 Next.js 기능을 배우게 되어 좋았습니다! |
주석 처리된 코드는 폰트 관련 코드인데, 현재 feature/login 브랜치에서 세팅한 상태입니다! 또한, 유명 ESLint 세팅 중 유기(?)된 것으로 추측되는 것들이 좀 많이 보여서 적용하지 못했습니다. (eslint-config-airbnb는 typescript 지원 버전이 archived, 본가 버전은 flat이라는 신형 ESLint 세팅 파일 미지원 / eslint-config-google은 5년 전이 마지막 커밋. 최근 다운로드 기록이 꽤 많긴 하지만 뭔가 애매한 상황) Typescript 관련 규칙은 전부 warn으로 적용하였습니다! |
|
맞습니다 기준님 말씀대로 eslint-config-airbnb-typescript 는 사용하게 되면 오류가 치덕치덕 생깁니다!. airbnb-base(or airbnb)의 불필요한 JS 규칙들을 사용하지 않는다면 tslint.strict + tslint.recommended 정도로 사용해보는건 어떨까요?! strict 설정 : https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/strict.ts |
|
말씀해주신 부분들 전부 반영했습니다! |
4 participants
프로젝트 초기 세팅을 완료하였습니다.
프로젝트를 세팅하는 과정에서 ESLint를 React에서만 세팅해봐서 그런가 세팅할 때마다 오류가 터져서 조금 오래 걸렸던 것 같습니다.
로그인 페이지 테스팅 구성 및 퍼블리싱은 오늘 내로 완료하겠습니다!
Summary by CodeRabbit
새로운 기능
package.json파일이 생성되었습니다.버그 수정
문서화
구성