1. 프로젝트 세팅

프로젝트 인원이 사용하는 툴으로 아래 3가지가 있습니다.

이중 본인이 사용하기 좋은 툴을 골라 사용하면 됩니다.

깃헙에서 클론 받아옵니다.
git flow를 사용하기 위해서 필요한 develop 브랜치도 로컬로 들고 옵니다.
feature를 만들기 위해 소스트리에서 develop로 가서 alt+shift+f 눌러줍니다.

제품 브랜치에는 기본으로 지정된 master가 아닌 main 우리 프로젝트에서 사용하는 main으로 브랜치 명을 변경하고 확인을 눌러줍니다.
develop에서 feature를 따기 위해서는 develop에 체크아웃한 후 alt+shift+f 눌러 새 기능 시작을 하면 됩니다.

Prettier

우리 프로젝트에 살펴보면

Configuration file에 prettier로 적용할 스타일을 지정해두었다.

alt+shift+f 눌러 기본 포매터를 프리티어로 설정해주자!

스타일을 적용하기 위해 alt+shift+f 를 눌러 매번 적용해주어도 되나, 저장할 때마다 자동으로 반영하기 위해 settings.json파일에 "editor.formatOnSave": true를 추가하여 준다.
ESLint
- 자동으로 프로젝트에 ESLint를 적용하고, 문제로 보이는 부분에 밑줄을 쳐주는 등 코딩 작업 도중 어느 부분이 ESLint 규칙에 어긋나는지 바로 확인 가능
Tailwind CSS IntelliSense
- 유틸리티 클래스 자동완성, hover시 미리보기, 중복 체크 등
기타 확장프로그램 설치하기
1. GitLens
  - 깃 히스토리 조회, 각 라인에 대한 커밋 확인 가능 등등 굉장히 다양하고 유용한 기능 제공
2. Reactjs code snippets
  - ReactJS 코드 템플릿 자동 완성
  - rsc - 화살표 함수형 컴포넌트 생성
3. Auto Rename Tag
  - 태그 변경 시 여는 태그, 닫는 태그 동시 변경 가능

18.12.1

env 파일 보안 상의 이유로 gitignore 처리해두어 각자 파일 생성해주어야 합니다. 최상위 경로에 .env 파일 만들고 아래 내용 넣어주면 됩니다.

*보안 상의 이유로 위키에 게시하지 않았습니다. 노션을 참고해주시길 바랍니다.

Provide feedback