Portfolio

☑️ 코드 컨벤션

폴더명

🐫

함수명, 변수명은 Camel Case로 작성합니다.

🔡

기본 폴더명은 Lower Case로 작성합니다.

🔠

자식 폴더명은 Pascal Case로 작성합니다.

타입 및 인터페이스는 Pascal Case로 작성합니다.

함수명

💡

함수명은 동사+명사 로합니다. ex) getName

🤘🏻

이벤트 핸들러는 handle + 명사 + 동사로 입니다.

⚠️

export default 방식은 rsf 단축키를 사용합니다.

🚧

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

➕

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

🗿

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

변수명

🧡

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

style

🫧

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

🔍

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"]
}

💱

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

🍀

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

🖤 커밋 메시지 컨벤션

❗

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

🙋🏻‍♀️

모든 커밋은 [추가, 삭제, 이동, 수정, 구현]으로 끝내야합니다.

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

➕

Gitmoji 사용법

🫧 Branch 전략

브랜치 관리


main > dev > feature (기능 단위)

브랜치 명명


feat/#이슈번호/기능명

ex) feat/#12/make-post

주의사항

브랜치는 삭제하지 않는다. (브랜치가 너무 많아져 복잡해질 경우 회의를 통해 삭제합니다)

기능명 작성 시, 단어가 여러 개면 - 로 구분합니다.

dev → main: squash and merge / feature → dev : merge pull request

📝 PR 템플릿


## 📑 구현 사항 

- [ ] 구현한 사항 작성

<br/>

## 🚧 특이 사항

- [ ] 

</br>

## 🚨관련 이슈

#이슈번호

⛔️ 디렉토리 구조

1️⃣

alias 절대 경로를 사용합니다. ( /src ⇒ @ , /src/components ⇒ )

2️⃣

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

3️⃣

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

4️⃣

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

5️⃣

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


├─ 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