1. 프로젝트 생성 및 GitHub 템플릿 설정
1) 프로젝트 생성
$ npx create-react-app web-front --template typescript
$ cd web-front
2. GitHub 템플릿 설정
1) 폴더 및 파일 생성
프로젝트 루트 경로에 .github 폴더 생성하여 위 구조와 같이 세팅
프로젝트 루트 경로에 .gitmessage 파일 생성
📦web-front
┣ 📂.github
┃ ┣ 📂ISSUE_TEMPLATE
┃ ┃ ┣ 📜bug_report.md
┃ ┃ ┗ 📜issue_template.md
┃ ┗ 📂PULL_REQUEST_TEMPLATE
┃ ┃ ┗ 📜pull_request_template.md
┣ 📂public
┣ 📂src
┣ 📜.gitignore
┣ 📜.gitmessage
┣ 📜README.md
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜tsconfig.json
2) 템플릿 작성
📜bug_report.md
---
name: Bug Report Template
about: 버그 리포트 이슈 템플릿
title: ''
labels: bug
assignees: ''
milestone: ''
---
## 버그 설명
버그에 대한 대한 설명을 간결하게 적어주세요.
## 재현 방법
버그를 재현하는 단계: (Given-When-Then)
1. '...'로 이동
2. '....'를 클릭
3. '....'까지 스크롤
4. 에러 확인
## 예상 결과
예상했던 정상적인 결과를 설명해주세요.
## 실제 결과
버그로 인해 실제 발생한 결과를 설명해주세요.
## 스크린샷
문제를 설명하는 데 도움이 되는 스크린샷을 추가해주세요.
## 환경
- 운영 체제: [예: Windows 10, macOS 11.2]
- 브라우저: [예: Chrome 90, Firefox 89]
- 버전: [예: 1.0.0]
## 추가 정보 (선택)
추가로 필요한 정보가 있다면 작성해주세요.
📜issue_template.md
---
name: Feature Template
about: 기능 추가 이슈 템플릿
title: ''
labels: feat
assignees: ''
milestone: ''
---
## 이슈 설명
이슈에 대한 설명을 간결하게 적어주세요.
## 작업 상세 내용
- [] TO DO
- [] TO DO
- [] TO DO
## 스크린샷
문제를 설명하는 데 도움이 되는 스크린샷을 추가해주세요.
## 추가 정보(선택)
추가로 필요한 정보가 있다면 작성해주세요.
📜pull_request_template.md
## 관련 이슈 번호
이 PR이 관련된 이슈 번호를 적어주세요. 예: #123
## 변경 사항
변경된 주요 사항을 나열해주세요:
- 변경 사항 1
- 변경 사항 2
## 테스트
변경 사항이 잘 작동하는지 확인한 방법을 설명해주세요:
1. 테스트 방법 1
2. 테스트 방법 2
## 추가 정보 (선택)
추가로 필요한 정보가 있다면 작성해주세요.
📜.gitmessage
# [타입] 제목 (50자 이내)
# 커밋 메시지 본문
# 변경 사항에 대한 자세한 설명을 작성하세요. (필요한 경우)
# 변경 사항 요약
# - 변경 사항 1
# - 변경 사항 2
# 꼬리말 (필요한 경우)
# BREAKING CHANGE, Fixes, Closes 등
# 타입 목록:
# feat : 새로운 기능 추가
# fix : 버그 수정
# docs : 문서 수정
# style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
# refactor : 코드 리팩토링
# test : 테스트 코드, 리팩토링 테스트 코드 추가
# chore : 빌드 업무 수정, 패키지 매니저 수정
3) 템플릿 설정 및 커밋 에디터 설정
# git이 이 템플릿을 사용하도록 설정
$ git config --local commit.template .gitmessage
# 커밋 에디터를 nano로 설정 (설정하지 않는 경우 기본값은 vim)
$ git config --local core.editor "nano"
# 커밋 템플릿 사용하여 커밋하기
$ git commit
ℹ️ config options
git은 기본값으로 --local 옵션을 설정하므로 상황에 따라 맞는 옵션을 설정하도록 하자
설정 파일은 .gitconfig(전역), config(로컬, 저장소 수준), 또는 시스템 전체의 /etc/gitconfig 파일에서 관리
- --system: 시스템 전체의 /etc/gitconfig 파일에 설정된다. 모든 사용자의 모든 저장소에 적용
- --global: 사용자의 홈 디렉토리에 있는 .gitconfig 파일에 설정된다. 해당 사용자의 모든 저장소에 적용
- --local: 특정 저장소의 .git/config 파일에 설정돤다. 해당 저장소에만 적용
3. 프로젝트 폴더 구조 세팅
📦web-front
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┣ 📂constants
┃ ┣ 📂contexts
┃ ┣ 📂hooks
┃ ┣ 📂pages
┃ ┣ 📂services
┃ ┣ 📂states
┃ ┣ 📂styles
┃ ┣ 📂types
┗ ┗ 📂utils
- 📂 assets: 이미지, 폰트 등의 에셋을 저장
- 📂 components: 재사용 가능한 UI 컴포넌트들을 저장
- 📂 constants: 상수들을 저장합
- 📂 contexts: React Context 관련 파일들을 저장
- 📂 hooks: 커스텀 훅들을 저장
- 📂 pages: 라우트에 해당하는 페이지 컴포넌트들을 저장
- 📂 services: API 통신 등의 서비스 로직을 저장
- 📂 states: Recoil 상태 관련 파일들을 저장
- 📂 styles: 전역 스타일이나 테마 관련 파일들을 저장
- 📂 types: 타입 선언 파일들을 저장
- 📂 utils: 유틸리티 함수들을 저장
4. src 내부 폴더 절대 경로 설정
1) craco 설치
CRA는 기본적으로 경로 별칭(path aliases)을 지원하지 않기 때문에 추가 설정이 필요하다.
CRA의 설정을 오버라이드하기 위해 CRACO(Create React App Configuration Override)를 사용하였다.
$ npm install @craco/craco --save-dev
2) 프로젝트 루트 디렉토리에 craco.config.js 파일 생성
📜craco.config.js
const path = require('path');
module.exports = {
webpack: {
alias: {
'@components': path.resolve(__dirname, 'src/components'),
'@pages': path.resolve(__dirname, 'src/pages'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@services': path.resolve(__dirname, 'src/services'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@styles': path.resolve(__dirname, 'src/styles'),
'@types': path.resolve(__dirname, 'src/types'),
'@constants': path.resolve(__dirname, 'src/constants'),
'@contexts': path.resolve(__dirname, 'src/contexts'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@states': path.resolve(__dirname, 'src/states')
}
},
};
3) package.json 파일의 scripts 섹션 수정
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
4) tsconfig.json 파일에 paths 설정 추가
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"@components/*": ["components/*"],
"@pages/*": ["pages/*"],
"@hooks/*": ["hooks/*"],
"@services/*": ["services/*"],
"@utils/*": ["utils/*"],
"@styles/*": ["styles/*"],
"@types/*": ["types/*"],
"@constants/*": ["constants/*"],
"@contexts/*": ["contexts/*"],
"@assets/*": ["assets/*"],
"@states/*": ["states/*"]
}
},
"include": ["src"]
}
