Afterburner-Frontend 협업가이드
우리 어플리케이션은 사용자 친화적인 UI와 관리 편의성을 중점으로 개발된 웹 플랫폼입니다.
프론트엔드에서는 React를 기반으로 하여 빠른 렌더링과 컴포넌트 재사용성을 극대화하였으며,
Redux를 통해 전역 상태 관리를 효율적으로 처리하고 있습니다.
또한, Supabase를 활용해 실시간 데이터 동기화와 통신을 원활하게 처리하여 데이터의 즉각적인 반영이 가능하도록 설계하였습니다.
-
1st Flow
-
애플리케이션 소개 페이지: 프로젝트 애플리케이션에 대한 비전과 기능설명, 설치링크등을 제공
-
어드민 페이지: 어드민 페이지에서는 다양한 데이터 처리와 대시보드 UI를 제공하여 관리자들이 효율적으로 작업을 처리할 수 있도록 설계
-
-
2nd Flow
- 기획 예정입니다.
- 리포지토리 클론:
git clone https://github.com/Afterburner2024/Afterburner-Front.git
- 프로젝트 디렉토리로 이동:
cd afterburner-front - 의존성 설치:
npm install
- 개발 서버 실행:
npm start
- 애플리케이션 접속:
브라우저에서
http://localhost:3000에 접속하여 확인합니다.
프로젝트 버전 관리는 Github Actions으로 Pipeline이 구축되어 있습니다.
변경 내역을 프로젝트 package.json에서version,releaseNotes에 내용을 추가하여
적용할수 있습니다.
-
"version"
-
주 버전.부 버전.수정 버전EX) 1.0.0 -
주 버전
- 주 버전은 하위 호환성이 깨지는 큰 변경 사항이 있을 때 업데이트됩니다.
-
부 버전
- 부 버전은 하위 호환성을 유지하는 새로운 기능이 추가되었을 때 업데이트됩니다.
-
수정 버전
- 수정 버전은 버그 수정과 같은 사소한 변경 사항이 있을 때 업데이트됩니다.
-
-
"releaseNotes"
- 릴리즈 변경내역을 기술합니다.
main: 안정적인 릴리스 브랜치develop: 기능들이 병합되는 개발 브랜치feature/{feature-name}: 새로운 기능을 위한 브랜치fix/{issue-name}: 버그 수정을 위한 브랜치
- 형식:
[태그]: (변경 사항) - 태그 종류:
feat: 새로운 기능 추가fix: 버그 수정refactor: 코드 리팩토링style: 코드 스타일 수정 (공백, 세미콜론 등)docs: 문서 관련 변경
본 프로젝트는 네이버 ESLint 가이드를 이용합니다
-
ESLint: Linting 도구로, 코드 품질을 향상시키고 일관성을 유지하기 위해 코드 스타일을 검사합니다.
- 프로젝트에서는 eslint-config-naver 설정을 기반으로 네이버의 코드 스타일 가이드를 준수하고 있습니다.
- 주요 규칙:
- 모듈화: 모든 파일은 적절히 모듈화되어 있어야 하며, 불필요한 의존성을 피해야 합니다.
- 코드 간결성: 불필요한 주석 및 공백을 제거하고 코드를 간결하게 유지합니다.
- Lint를 실행하여 코드 검사를 진행하려면 다음 명령어를 사용하세요:
npm run lint
-
Prettier: 코드 포매팅 도구로, 모든 코드의 스타일을 일관되게 유지하는 데 사용됩니다.
-
프로젝트에서는 Prettier와 ESLint를 함께 사용하여 코드 포매팅을 자동으로 적용합니다.
-
파일을 저장할 때 자동으로 포매팅이 적용되도록 다음과 같은 VS Code 설정을 활성화하세요 (setting.json):
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } -
수동으로 모든 파일을 포맷하려면 다음 명령어를 사용하세요:
npx prettier --write .
-
- 자세한 Tailwind CSS 사용법과 스타일 가이드는 공식 문서를 참고해 주세요:
- Tailwind Docs
AFTERBURNER-FRONT/
├── node_modules/ # 프로젝트에서 사용하는 모든 npm 패키지가 설치되는 디렉토리
├── public/ # 정적 파일들이 위치하는 디렉토리 (favicon, index.html 등)
├── src/ # 소스 코드가 담긴 디렉토리
│ ├── actions/ # Redux 액션을 정의한 파일들이 있는 디렉토리
│ │ └── dataActions.js # 데이터를 다루는 액션들이 정의된 파일
│ ├── app/ # 애플리케이션 전역 상태 관련 파일들이 위치한 디렉토리
│ │ ├── store.js # Redux 스토어 설정 파일
│ ├── assets/ # 이미지, 스타일 파일 등의 정적 자원이 포함된 디렉토리
│ ├── components/ # 재사용 가능한 컴포넌트들이 위치한 디렉토리
│ ├── features/ # 각 기능(feature)에 대한 상태 관리를 담당하는 디렉토리
│ │ └── dataSlice.js # 데이터를 다루는 Redux 슬라이스가 정의된 파일
│ ├── utils/ # 유틸리티 함수 또는 설정 파일들이 포함된 디렉토리
│ │ └── supabase.js # Supabase와의 통신을 설정하는 파일
│ ├── App.js # React 애플리케이션의 루트 컴포넌트
│ ├── index.js # ReactDOM을 사용해 애플리케이션을 렌더링하는 진입점 파일
│ └── postcss.config.js # PostCSS 설정 파일 (TailwindCSS와 함께 사용)
├── .env.local # 환경 변수를 설정하는 파일
├── .eslintrc.json # ESLint 설정 파일
├── .gitignore # Git에서 추적하지 않을 파일 목록
├── eslint.config.mjs # ESLint의 추가 설정 파일
├── netlify.toml # Netlify 배포 설정 파일
├── package-lock.json # 프로젝트에서 설치된 npm 패키지 버전 잠금 파일
├── package.json # 프로젝트 정보 및 npm 스크립트, 의존성 목록 파일
├── README.md # 프로젝트에 대한 설명 및 설치 가이드가 포함된 파일
└── tailwind.config.js # TailwindCSS 설정 파일
