- 규칙:
const
를 기본으로 사용, 필요할 때만let
사용,var
는 사용하지 않음.
- 변수 및 함수: 카멜 케이스(camelCase)
const userName = "baby";
- 클래스 및 생성자 함수, 컴포넌트: 파스칼 케이스(PascalCase)
class User { ... } const UserProfile = () => { return <div>User Profile</div>; };
- 상수: 대문자와 언더스코어(UPPER_SNAKE_CASE)
const API_URL = "https://api.example.com";
- 규칙: 코드의 의도를 설명할 때만 사용, 코드 자체를 설명하는 주석은 지양.
구분 | 내용 | 예시 |
---|---|---|
들여쓰기 | 2 spaces | if (condition) { doSomething(); } |
세미콜론 | 항상 사용 | const a = 10; |
변수 이름 | camelCase | let myVariable; |
상수 이름 | UPPER_SNAKE_CASE | const MY_CONSTANT = 5; |
함수 이름 | 동사로 시작하고 camelCase | function fetchData() {} |
클래스 이름 | PascalCase | class MyClass {} |
주석 사용 | 복잡한 코드에 설명 추가 | // This function fetches data |
가독성 | 80~120자 제한, 줄 바꿈 | const longVariableName = '...'; // explanation |
공백 | 연산자와 괄호 주변에 공백 사용 | if (condition) { } |
구분 | 내용 | 예시 |
---|---|---|
BEM 구조 | Block Element Modifier 방식 사용 | .button , .button--primary , .button__icon |
파일 이름 | kebab-case | my-component.scss |
기본 클래스명 | 의미 있는 이름 사용 | .header , .footer , .card |
네이밍 규칙 | 모든 클래스는 소문자 사용, 단어는 하이픈(-)으로 구분 | .nav-menu , .user-profile |
{
"singleQuote": true, // 작은따옴표(')를 사용
"semi": true, // 세미콜론을 항상 사용
"tabWidth": 2 // 들여쓰기 시 탭 너비를 2칸으로 설정
}
{
"env": {
"browser": true, // 브라우저 환경을 사용 (window, document 객체 사용 가능)
"es2021": true, // 최신 ECMAScript 2021 문법을 사용
"node": true // Node.js 환경을 지원 (module.exports 등 사용 가능)
},
"extends": [
"eslint:recommended", // ESLint 기본 추천 규칙 사용
"prettier" // Prettier와 ESLint 규칙 충돌 방지
],
"rules": {
"no-unused-vars": "warn", // 사용하지 않는 변수가 있을 경우 경고
"semi": ["error", "always"], // 세미콜론을 반드시 사용 (없으면 오류)
"quotes": ["error", "single"] // 작은따옴표(')를 사용하지 않으면 오류
}
}
{
"editor.formatOnSave": true, // 파일 저장 시 자동으로 코드 포맷팅 실행
"editor.codeActionsOnSave": {
"source.fixAll": true // 저장 시 가능한 모든 코드 문제 자동 수정
}
}
- main: 배포 가능한 안정적인 버전.
- develop: 모든 기능이 통합되는 개발 버전.
각 기능은 feature/*
브랜치에서 작업한 후, 완료되면 develop
에 병합합니다.
-
회원가입 / 로그아웃:
feature/authentication
- 회원가입과 로그아웃 기능을 통합하여 작업.
- 하위 브랜치:
feature/authentication-signup
,feature/authentication-login
,feature/authentication-logout
-
게시글 목록:
feature/post-list
- 게시글 목록 기능 담당.
-
마이페이지:
feature/my-page
- 사용자 개인 정보 관리 기능.
-
상세페이지:
feature/detail-page
- 게시글의 상세 내용을 보여주는 페이지 작업.
-
등록페이지:
feature/create-post
- 게시글 작성 기능 담당.
-
알림 기능:
feature/notification
- 알림 시스템 구현을 위한 브랜치.
-
전체 기능:
feature/full-functionality
- 모든 기능이 정상적으로 동작하는지 통합 테스트 및 마무리 작업을 위해 사용하는 브랜치.
-
기능 개발 시작:
develop
에서 새로운 feature 브랜치를 만듭니다.
git checkout -b feature/authentication
-
각 기능을 개발할 때 feature/authentication, feature/post-list 등과 같은 개별 브랜치에서 작업합니다.
-
하위의 하위 기능을 개발할 때는 feature/authentication-signup과 같이 하이픈(-)을 사용하여 브랜치를 구분합니다.
-
하위의 하위 브랜치 생성:
- feature/authentication에서 하위의 하위 브랜치를 만듭니다.
git checkout -b feature/authentication-signup
-
하위의 하위 브랜치에서 작업:
- 기능 구현을 완료한 후, 하위 브랜치로 병합합니다.
git checkout feature/authentication git merge feature/authentication-signup
-
하위 브랜치를 feature/full-functionality에 병합:
- 이제 하위 브랜치를 feature/full-functionality에 병합합니다.
git checkout feature/full-functionality git merge feature/authentication
-
-
- 각 하위 기능이 완료되면 feature/full-functionality 브랜치로 병합하여 모든 기능이 잘 동작하는지 확인합니다.
git checkout feature/full-functionality
git merge feature/authentication
git merge feature/post-list
# 필요한 모든 기능 브랜치를 병합합니다.
- feature/full-functionality에서 모든 기능을 테스트하여 문제가 없다면 develop 브랜치로 병합합니다.
git checkout develop
git merge feature/full-functionality
- 마지막으로 develop 브랜치를 원격 저장소에 푸시합니다.
git push origin develop
- feature/full-functionality 브랜치는 여러 하위 기능의 통합과 테스트를 위한 브랜치입니다.
- 모든 하위 기능 작업이 완료되면 feature/full-functionality에 머지하고, 최종적으로 develop으로 병합하여 배포 준비를 할 수 있습니다.