개발환경 및 컨벤션 가이드

[KimKwon]

15조 클디세미나 대비 개발환경 세팅

Repo 클론하기

순서대로 따라하시면 별 문제 없을거에요.
yarn start 하는 과정에서 오류 발생하면 말씀해주세요 😃

a. git clone https://github.com/sopt-CwithD-15/frontend.git
b. cd frontend
c. yarn && yarn start

---

ESLint, Prettier

협업 간에 코딩 컨벤션을 통일하기 위한 도구들이에요.
ESLint는 저희가 작성하는 코드의 스타일을 특정 규칙에 의해 강제해줘요.

ESLint를 사용해보지 못한 분들이라면 조금 귀찮고 어렵게 느껴질 수도 있어요.
하지만 협업 간 코딩 컨벤션을 통일하는 것 은 굉장히 중요해요.

그러니까 왜 안되는거야 하는 마음으로 ESLint의 Rule을 냅다 disable 하는 일은 없길 바랍니다.

본인이 작성한 코드에 대해 ESLint가 왜 에러를 반환하는지 읽어보시면 몰랐던 지식을 깨닫게 될 때도 있답니다.

아무튼 현재 프로젝트에는 ESLint와 Prettier에 대한 사전설정이 되어있는 상태에요.
우선 최소한의 룰만 적용했으니 여러분들도 이번 기회에 ESLint와 친해지면 좋을 것 같아요.

저는 ESLint Airbnb의 빡센 룰을 굉장히 좋아합니다. 나중에 꼭..

---

.vscode

프로젝트 디렉토리에 보시면 .vscode 디렉토리가 있어요.
이 디렉토리는 폴더, 즉 한 프로젝트에 대한 vscode 설정이 파일로 담겨있어요.

formatOnSave 설정이 되어있는데 이 속성은 여러분들이 코드를 작성하고 저장을 누르면
자동으로 코드를 포맷팅해줘요.

---

yarn lint

위처럼 저장할 때마다 자동으로 포맷을 해주지만 확실한게 좋잖아요?

yarn lint 명령어를 실행하면 프로젝트의 src 폴더안에 있는 모든 js, jsx 파일에 대해 ESLint 를 체크하고 가능한 부분에 대해서만 자동으로 고쳐줘요.

즉 auto fix가 불가능한 부분에 대해서는 여러분들이 직접 수정해주어야해요.

우리는 커밋을 올리기 전에 무조건 yarn lint 를 실행한 뒤에 올리는 것으로 합니다.

---

컨벤션

커밋 메시지

commitType emoji <message>

example) feat: ✨ Sign In Page 구현

Commit type	Emoji	Situation
Initial commit	🎉 :tada:	따단~~~~~
feat	✨ :sparkles:	새로운 기능, UI 등
bug	🐛 :bug:	버그 수정/리포트
Documentation	📝 :memo:	문서화
refactor	🔨 :hammer:	구조 변경, 리팩토링
css	🎨 : :art:	css 관련
remove or edit	🔥 :fire:	파일 삭제 및 수정
fix lint	👕 :shirt:	eslint 에러 수정
chore	⚙️ :gear:	기능상 변경 없는 수정
init	🚧 :construction:	브랜치 첫 커밋

Reference