✅ 동일한 개발 환경 구축이 필요한 이유
1. 코드 일관성 유지
- 들여쓰기, 줄 바꿈, 공백 처리 등에서 차이가 발생할 수 있는데 이를 사전에 통일시켜야 합니다.
코드 리뷰 시 스타일 관련 피드백을 줄이고, 일관된 스타일의 코드를 공유함으로써 가독성을 향상시킬 수 있습니다.
2. 불필요한 코드 변경 기록 방지
- Git에 불필요한 코드 변경 기록을 남기게 되면 코드 Push / Commit 기록 확인에 어려움을 유발합니다.
- Code Review 과정에서 불필요한 피드백을 전달하게 됩니다.
3. 패키지 매니저의 버전 통일
- 패키지의 의존성이나 설정으로 인한 프로젝트가 서로 다른 환경에서 다르게 동작하는 문제를 예방할 수 있습니다.
- 의존성 충돌을 예방할 수 있습니다.
✅ 필요한 설정 파일 추가하기
1. VSCode 환경 설정 및 Git 관련 코드 일관성 설정
.vscode/settings.json
- Editor 코드 일관성 관련 설정
- Typescript 버전이 Editor의 버전을 따르지 않고 Package.json에 명시된 버전을 따르도록 설정
VSCode 명령 팔레트를 열고 (
Ctrl + Shift + P또는Cmd + Shift + P) - Use Workspace Version을 지정
.vscode/css_custom.json
- Tailwindcss 관련 경고가 발생하지 않게 설정
.vscode/extensions.json
- 프로젝트 내에서 사용해야하는 extension을 추천하여 다른 개발자들에게 설치를 알림
- 현재 프로젝트에서는 Eslint, Prettier, Tailwindcss를 확장
.gitattributes
- Git이 모든 텍스트 파일을 자동으로 인식하고, 줄 끝을 LF로 강제하여 저장소 내에서 일관된 줄 끝 표기 방식을 유지하는 설정
.editorconfig
- 줄 끝을 LF로 설정
- 파일의 끝에 빈 줄을 자동으로 추가
2.ESLint를 통한 코드 스타일 통일
- Tailwindcss의 class sort는 Docs의
prettier-plugin-tailwindcss를 사용하지 않고,eslint-plugin-tailwindcss를 사용합니다.
3. 패키지 매니저 버전 통일
- 현재 프로젝트에서는 Yarn 1을 사용하고 있는데 Yarn 1의 최종 버전은 v1.22.22
- 패키지 매니저를 변경하는 것이 아니라면 모두 같은 버전을 새용해야 합니다.
✅ 추가할 파일들
1. .vscode/settings.json
1{ 2 "editor.tabSize": 2, 3 "editor.codeActionsOnSave": { 4 "source.fixAll": "always" 5 }, 6 "css.customData": [ 7 ".vscode/css_custom.json" 8 ], 9 "typescript.tsdk": "node_modules/typescript/lib", 10 "tailwindCSS.experimental.classRegex": [ 11 [ 12 "cva\\(([^)]*)\\)", 13 "[\"'`]([^\"'`]*).*?[\"'`]" 14 ], 15 [ 16 "cx\\(([^)]*)\\)", 17 "(?:'|\"|`)([^']*)(?:'|\"|`)" 18 ] 19 ] 20}
editor.tabSize로 들여쓰기 크기를 통일하고, 저장 시 자동으로 코드 스타일을 수정합니다.
또한, TypeScript의 버전을 프로젝트에 명시된 버전을 따르도록 하여, VSCode와 프로젝트 간 버전 불일치를 방지할 수 있습니다.
2. .vscode/extensions.json
1{ 2 "recommendations": [ 3 "dbaeumer.vscode-eslint", 4 "bradlc.vscode-tailwindcss" 5 ] 6}
3. .vscode/css_custom.json
1{ 2 "version": 1.1, 3 "atDirectives": [ 4 { 5 "name": "@tailwind", 6 "description": "Use the @tailwind directive to insert Tailwind's `base`, `components`, `utilities`, and `screens` styles into your CSS." 7 }, 8 { 9 "name": "@apply", 10 "description": "Use @apply to inline any existing utility classes into your own custom CSS." 11 } 12 ] 13}
4. .gitattributes
1* text=auto eol=lf
Git이 모든 텍스트 파일의 줄 끝을 LF로 통일하도록 강제합니다. 결과적으로는 개발자가 사용하는 OS 간 발생할 수 있는 줄끝 관련 차이를 제거하여 문제를 방지할 수 있습니다.
5. .editorconfig
1# 최상위에 있는 파일로 명시 2root = true 3 4# 모든 파일에 적용 5[*] 6end_of_line = lf 7insert_final_newline = true 8charset = utf-8 9indent_style = space 10indent_size = 2 11trim_trailing_whitespace = true 12 13# TypeScript와 JavaScript 파일에 대한 특별 설정 14[*.{ts,tsx,js,jsx}] 15indent_size = 2
에디터마다 다를 수 있는 기본 설정을 통일하여, 코드 작성 시 일관된 스타일을 유지합니다.