Style: 각종 컨벤션 모음

[이우재]

💅 작업사항

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

📖 세부내용

일반

• 컴포넌트는 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 부분을 조금 더 풀어 썼어요.