FE Code Convention

👯 Code Convention

🐱 공통

• 불필요한 코드 주석처리는 커밋하지 않기 👍
• 읽는 사람 생각하며 코드 작성해보기 👍

🐱 주석으로 소통해요

TODO

• 주석을 활용해 나중에 반드시 해야할 일을 명시

// TODO: 회원 인증 상태를 반영하여 인증된 사용자만 접근할 수 있게 하는 처리 필요

FIXME

• 주석을 활용해 반드시 고쳐져야 하는 부분(버그같은)을 명시

// FIXME: typescript를 무시 처리하고 임시로 작성한 부분 수정이 필요

XXX

• 주석을 활용해 내가 생각하기에 안전하지 않은 코드를 공유

// XXX: 해당 로직으로 컴포넌트 무한 렌더링 발생 가능성이 우려됨

🐱 변수명

• camelCase
• 상수: SNAKE_CASE_RO_JAK_SUNG
• boolean: is + 대상 + 상태 => isUploadSuccess
• 변수의 이름이 의도를 잘 드러내나 고민해볼 것

🐱 함수명

• camelCase
• 동사로 시작할 것.
• 함수 이름이 본인의 책임을 잘 대표하는지 고민해볼 것
• 함수 하나가 너무 많은 책임을 가지고 있지는 않은지 고민해볼 것

🐱 컴포넌트

• PascalCase

• 반드시 컴포넌트에는 tsx 확장자를 사용할 것

• 하나의 파일에는 하나의 컴포넌트만 만들 것

• 컴포넌트 코드 구성 순서

  import
  component
  styled-component
  export

🐱 Import Order

• 박동석은 ESLint Import Order를 설정하고 체크를 해야한다.

1. 시스템 라이브러리, 외부 라이브러리, 내부 프로젝트 import로 그룹화한다. (각 그룹 사이에 빈 줄로 시각적인 분리)
2. 그룹 내에선 import의 source 별로 다시 sort 해준다.
3. 2번에서 source별 import를 다시 sort 해준다.

- 내부 모듈(또는 리액트 관련) `EX) react, react-router, react-router-dom`
- 외부 라이브러리 모듈
- 내부 파일 모듈 (type-alias 설정된)
- 내부 컴포넌트 모듈
- 내부 타입 모듈
- `sibiling 등 내부 모듈`

🐱 Styled-Component 네이밍

Styled~~ 붙이기 금지, ~~Wrapper 금지

• 예시

  div 태그: '컴포넌트명'Box
  section 태그: '컴포넌트명'Section
  ul 태그: '컴포넌트명'List
  li 태그: '컴포넌트명'Item
  p 태그: '컴포넌트명'Paragraph
  span 태그: '컴포넌트명'Span

div는 반드시 지키도록 하며 그 외에는 역할과 의미만 잘 부여되면 됨

• wrapper, wrap, div 등 일관성 없는 사용으로 가독성을 저해하는 상황을 막아보고 이름에 무엇을 사용해야할지 고민하는 1초조차 아껴보기 위함입니다.
• 그 외에는 무슨 역할을 하는 styled-component인지 명확하게 나타내줄 수만 있다면 OK라고 생각함다!

최상위 컴포넌트에는 컴포넌트명+layout을 붙임

• 최상위 컴포넌트의 경우 네이밍 하기가 애매한데 Styled, St, Wrapper 등 일관적이지 않은 사용을 막기 위함입니다.

⚠️ 한계 & 고민

• 해당 컴포넌트의 Styled-component인지 외부 컴포넌트를 import하여 사용하는지 한 눈에는 알 수 없다.
• 국룰 같은게 없을까?
  • 고수들의 Best-Practice를 찾아보며 고민해보자

🐱 파일

• 컴포넌트가 아닌 자바스크립트 파일은 camelCase로 작성
• 폴더 이름은 소문자로 작성할 것

🐱 디렉터리

• 폴더는 필요하다면 우선 생성하여 사용하고 추후 필요 시 리팩터링, 구조 재조정
• (특히 컴포넌트 디렉터리 내부에는) 구조에 얽매이지 말고 자유롭게 생성하여 구성하되 늘 안의 내용물들의 사용처 와 응집도를 고민해볼 것

🐱 타입 네이밍

• 컴포넌트의 props 타입을 커스텀하여 선언할 때는 Props 를 뒤에 붙입니다.

  EX) Button 컴포넌트의 props 타입 이름은 ButtonProps

• Api Request, Response 에 대응되는 타입을 커스텀하여 정의할 때는 Request, Response를 뒤에 붙입니다.

• 여러 컴포넌트에서 사용이 고려된다면 types 폴더에 집중화 하기!