c-h-w-h/cds

Style: 각종 컨벤션 모음

prayinforrain opened this issue · 0 comments

prayinforrain commented

💅 작업사항

노션의 컨벤션 페이지 내용을 옮겨왔어요.

📖 세부내용

일반

  • 컴포넌트는 components 하위 디렉토리에서 폴더 별로 관리해요.
    • 내부에는 index.tsx 그리고 [Component].stories.tsx 파일을 생성해요.
    • 스타일은 우선 별도 파일로 분리하지 않았어요.

브랜치 전략

  • main 하나 두고 기능 별로 feat/[기능] 브랜치 따서 개발해요.
    • 사이트 배포 계획은 없고
    • 패키지로 배포할 예정인데 버전 업데이트 하고싶을 때 main에서 바로 publish하면 돼요.

네이밍 컨벤션

항목 규칙 예시 비고
변수 camelCase
상수 UPPER_SNAKE_CASE    
함수 camelCase const fn = () ⇒ { }  
핸들러 onVerbObjective    
컴포넌트 PascalCase const Component = () ⇒ { } ComponentProps 및 관련 타입은 tsx 파일 상단, 컴포넌트 위쪽에 정의
타입 / 인터페이스 / enum PascalCase    
파일명 kebab-case    
폴더명 Component: PascalCase
다른거: kebab-case		    
HTML 속성 kebab-case    
  • React. 네임스페이스 붙이지 않고 import해서 사용하기
  • Context API
    • ${ComponentContext} 인터페이스 네이밍을 ${ComponentContext}Interface 로 하기
    • createContext<Interface | null>(null) 로 초기값 설정하고 사용처에서는 null check 하고 early return 해주기
      • 이 부분은 #81 에서 커스텀 훅으로 정의되었습니다. useSafeContext(context: Context)로 사용해주세요!
  • DOM Element
    • getElementById, ChildNodes, querySelector… 등등 DOM 요소에 직접 접근하는 코드의 경우
      • ${tagName} 으로 사용, li같은 축약어도 예외 없이 $li로 표시해주세요.
      • 여러 종류의 태그일 수 있는 요소는 $trigger처럼 역할명으로 사용해 주세요.
      • 같은 종류의 태그를 여러 개 참조해야 하는 경우는 ${tagName}{Adjective}
        • 이 규칙은 권고 사항입니다. 이를 준수하는 것이 가독성을 되려 해친다면 어느 정도의 예외는 허용하지만, 되도록이면 애초에 이런 상황이 없도록 해주세요!

⚙️ 갱신내역

변경일 변경한 사람 내용
23/03/30 우재 useSafeContext가 머지됨에 따라 내용을 갱신하고, DOM Element 부분을 조금 더 풀어 썼어요.