🛠️ FE 코드 컨벤션

prettier 설정 ( .prettierrc )

{
  "singleQuote": "true",
  "semi": "true",
  "useTabs": "false",
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

☑️ 코드 컨벤션

📁 폴더 구조

컴포넌트 별로 분리를 하되, list 와 Item같이 연관성이 있는 컴포넌트 파일의 경우 하나의 폴더로 관리할 수 있다. 또한 css는 따로 파일로 만들지 않고 js 파일 밑에다가 작성합니다.

📁 경로 표기

임포트 경로는 모두 설정된 절대 경로로 사용한다.

🍃 브랜치명(branch)

feat/72-기능명 으로 브랜치를 파서 작업을 합니다. 푸시할 때는 dev 브랜치에 하고, pr을 날리며 최종 배포시에 main에 병합합니다.

👒 문자열을 처리할 때는 작은따옴표를 사용하도록 합니다.

➡️ 처음 탭은 2칸을 띄웁니다.

🐫 함수명, 변수명은 카멜케이스로 작성합니다.

⭕ boolean값은 접두어 is-를 붙여 카멜케이스로 작성합니다.

💡 이벤트 핸들러 함수는 바로 쓸 때는 접두어 on-을 붙여 카멜케이스로 작성하고, 함수로 따로 빼서 쓸 때는 handle- 을 붙여 씁니다.

🎨 스타일 코드는 emotion css를 스타일드 컴포넌트 형식으로 작성한다. 컴포넌트는 S 객체를 사용하여 구분한다. 자주 사용되는 스타일은 common style 로 css 객체를 사용하여 제작한다.

➰ api의 endpoint 는 상수화(큰 알파벳)하여 사용하기. router path 도 상수화하여 사용하기

➡️ 함수 스타일은 화살표 함수로 통일합니다.

const Header = () ⇒ {}

🧩 컴포넌트는 폴더명(카멜케이스)/파일명(파스칼케이스, 폴더명과 동일) 은 대문자고 나머지는 소문자로 시작한다.

• ex) components/Header/Header.js
• 컴포넌트 이외는 카멜케이스 적용 ex) useInputs.js

🐥 주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

// Good
const someFunction = () => {
  ...

  // statement에 관한 주석
  statements
}

🐰 연산자 사이에는 공백을 추가하여 가독성을 높입니다.

a + b + c + d; // bad
a + b + c + d; // good

🍿 콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.

var arr = [1, 2, 3, 4]; //bad
var arr = [1, 2, 3, 4]; //good

🥩 png, jpg, env를 사용하거나 svg를 태그형태로 사용할 경우 delcare를 사용해줍니다.
파일은 src/d.ts를 사용합니다 (declare.ts의 줄임말)