개발 일지

💪 기술 스택

라이브러리

개발 환경

👍 코딩 컨벤션

prettier

//.prettierrc.js

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
  endOfLine: 'auto',
  jsxSingleQuote: true,
  bracketSameLine: true,
  quoteProps: 'as-needed',
  trailingComma: 'es5',
  arrowParens: 'always',
  bracketSpacing: true,
};

컴포넌트

• 컴포넌트 파일 → `camelCase.tsx` : ie. `MyComponent.tsx`

• 컴포넌트 선언 방식

  const MyComponent = ({ propA, propB }) => {
  
  }
  
  export default MyComponent;
  
  const Container = styled.div`
  `;

페이지

• 페이지 파일→ `kebab-case.tsx` : ie. `about-us.tsx`

• 페이지 선언 방식

  const AboutUsPage = ({ propA, propB }) => {
  
  }
  
  export default AboutUsPage;

이벤트 핸들러

1. 컴포넌트 내에서 → handle[동작][기능] : ie. handleClickUpdate
2. props로 받을때 → on[동작] : ie. onSubmit

파일 구조

Git

커밋메세지

• prefix: 메세지 내용

  feature	새로운 기능을 추가할 경우
  fix	버그를 고친 경우
  rename	파일 혹은 폴더명을 수정하거나 옮기는 경우
  remove	파일을 삭제하는 작업만 수행한 경우
  design	CSS등 사용자 UI 디자인 변경
  comment	필요한 주석 추가/삭제/수정한 경우
  docs	문서를 수정한 경우
  style	코드 포맷(세미 콜론, prettier) 수정한 경우
  refactor	프로덕션 코드 리팩토링(변수명 개선 등)
  chore	빌드 태스크 업데이트, 패키지 매니저 설정

이슈 템플릿

💡 이슈 제목은 prefix없이 label을 통해서 카테고리를 명시합니다!

//이슈 템플릿 양식

작업 내용: 도메인 관련.

상세 작업 내용: 작업의 상세한 내용.

이슈 카테고리를 명시할 label은 다음과 같습니다.

• feature
• refactor
• style
• bug
• design
• docs
• test
• chore
• fix

PR 템플릿

💡 PR제목은 변경없이 브랜치명을 그대로 사용합니다. 브랜치명을 `이슈라벨/작업내용`으로 맞춰서 작성하고, PR제목에 그대로 사용합니다.

//PR 템플릿 양식

#이슈 번호
1. 작업내용: 포스트 curd 기능 만들었음.
2. 작업 하면서 겪은 이슈
3. PR 포인트