컨벤션 | Notion

☑️ 코드 컨벤션

폴더명

<aside> 🐫 함수명, 변수명은 Camel Case로 작성합니다.

</aside>

<aside> 🔡 기본 폴더명은 Lower Case로 작성합니다.

</aside>

<aside> 🔠 자식 폴더명은 Pascal Case로 작성합니다.

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/e937a7f9-dece-4540-8e1e-3c5966896424/99c2c5c8-dc1b-4560-b91a-1b080bb68c38/ts.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/e937a7f9-dece-4540-8e1e-3c5966896424/99c2c5c8-dc1b-4560-b91a-1b080bb68c38/ts.png" width="40px" /> 타입 및 인터페이스는 Pascal Case로 작성합니다.

</aside>

함수명

<aside> 💡 함수명은 동사+명사 로합니다. ex) getName

</aside>

<aside> 🤘🏻 이벤트 핸들러는 handle + 명사 + 동사로 입니다.

</aside>

<aside> ⚠️ export default 방식은 rsf 단축키를 사용합니다.

</aside>

<aside> 🚧 import 정렬 순서는 react > 라이브러리 > component > hook이며, eslint로 설정합니다.

</aside>

<aside> ➕ 함수 표현 방식은 default 함수만 function 키워드 사용하고 나머지는 **화살표 함수 + 함수 표현식**을 사용합니다.

</aside>

<aside> 🗿 복잡한 함수 앞에 **/** */**으로 문서 주석을 작성한다.

</aside>

변수명

<aside> 🧡 btn(button), img(image), wrap(wrapper), bg(background), e(event) 를 제외한 모든 변수명은 fullname을 사용하는 것을 원칙으로 합니다. ~~변수 축약 시 한번 더 고민해야 할 이름은 축약하지 않고 대중적으로 많이 사용되는 것들은 축약할 수 있습니다(ex: btn, img, wrap, bg, 등)~~

</aside>

style

<aside> 🫧 container는 하나 이상의 요소를 포괄하는 개체를 지칭하는 의미를 지니며, wrapper는 하나의 개체만을 포함합니다.

</aside>

<aside> 🔍 ESLint 규칙은 아래와 같습니다

{
"semi": true,
"singleQuote": true,
"endOfLine": "lf",
"singleAttributePerLine": true,
"jsxBracketSameLine": true,
"trailingComma": "none",
"importOrder": [
"^react",
"<THIRD_PARTY_MODULES>",
"^@/components/(.*)$",
"^@/hooks/(.*)$",
"^@/(.*)$",
"^@emotion/(.*)$",
"^[./]"
],
"importOrderSortSpecifiers": true,
"plugins": ["@trivago/prettier-plugin-sort-imports"]
}

</aside>

<aside> 💱 borde(px), border-radius(px, %)를 제외한 모든 단위는 rem입니다.

</aside>

<aside> 🍀 css 속성 선언 순서는 Naver 순서를 참고합니다.

</aside>

🖤 커밋 메시지 컨벤션

<aside> ❗

**"헤더: 제목"**의 형태이며, : 뒤에만 space가 있음에 유의합니다.

</aside>

<aside> 🙋🏻‍♀️ 모든 커밋은 **[추가, 삭제, 이동, 수정, 구현]**으로 끝내야합니다.

</aside>

헤더 이름	설명
`init`	프로젝트 첫 세팅
`feat`	기능 구현
사용자 입장에서 변화가 있을 경우
`refactor`	사용자 입장에서 변화가 없는 코드
파일명 폴더명 변경 및 이동
`chore`	주석
추가적인 의존성 설치
기타
`design`	CSS만 수정(UI수정)
`fix`	버그 수정
`docs`	문서를 수정한 경우(README)
`coment`	주석 추가 및 제거
`setting`	개발 환경 변경
`rename`	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
`remove`	파일을 삭제하는 작업만 수행한 경우

<aside> ➕ Gitmoji 사용법

</aside>

🫧 Branch 전략

Untitled

브랜치 관리
```
main > dev > feature (기능 단위)
```

브랜치 명명

**feat/#이슈번호/기능명**

****ex) feat/#12/make-post

주의사항
- 브랜치는 삭제하지 않는다. (브랜치가 너무 많아져 복잡해질 경우 회의를 통해 삭제합니다)
- 기능명 작성 시, 단어가 여러 개면 - 로 구분합니다.
- dev → main: squash and merge / feature → dev : merge pull request

📝 PR 템플릿

## 📑 구현 사항 

- [ ] 구현한 사항 작성

<br/>

## 🚧 특이 사항

- [ ] 

</br>

## 🚨관련 이슈

#이슈번호

⛔️ 디렉토리 구조

<aside> 1️⃣ alias 절대 경로를 사용합니다. ( /src ⇒ @ , /src/components ⇒ )

</aside>

<aside> 2️⃣ **types**폴더에서는 api 관련 등 공통되는 타입만 관리, 나머지 타입은 각 파일에서 정의합니다.

</aside>

<aside> 3️⃣ **apis**폴더에서는 공통된 target에 대하여 한 파일로 해당 관련 함수들 작성합니다. (ex. post관련 api는 post.ts 한 파일에서 관리)

</aside>

<aside> 4️⃣ components 폴더에서는 각 컴포넌트 폴더안의 컴포넌트 파일은 index.tsx파일에 작성합니다.

</aside>

<aside> 5️⃣ components 폴더에서는 각 컴포넌트 폴더안의 이모션 스타일은 각 폴더에서 index.style.tsx 생성한다.

</aside>

├─ public
│  ├─ assets
│  │  ├─ fonts
│  │  └─ images
├─ apis
├─ src
│  ├─ assets
│  │  └─ images
│  ├─ components
│  │  ├─ Channel
│  │  ├─ ChannelList
│  │  ├─ Common
│  │  ├─ Message
│  │  ├─ MyPage
│  │  ├─ Post
│  │  ├─ Comment 
│  │  ├─ SignIn
│  │  ├─ SignUp
│  │  └─ Splash
│  ├─ hooks
│  │  ├─ api
│  │  └─ common
│  ├─ pages
│  ├─ store
│  ├─ styles
│  ├─ types
└─ └─ utils

참고 내용

CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기

[React] public폴더 src폴더 어디에 넣어야 되는걸까? / react에서 img불러오기

초기 내용