[메인프로젝트] 개발규칙 확인 및 리액트 폴더 초기설정

프로젝트 개발 관련 규칙

• 커밋 자주 하기
• PR 자주 하기
• 메인 브랜치에 직접 커밋하지 말기
  • dev
    • fe
      • feat: ㅇㅇ기능
        • feat: ㅁㅁ기능
        • be
          • feat: ㅇㅇ 기능
            • feat: ㅁㅁ기능

(브랜치 네임에 /가 안들어가져서 fe/feat: ㅁㅁ기능 => feat: ㅁㅁ기능 으로 변경하기로 했어요~)

• 커밋 메시지 양식 통일
  • feat : 새로운 기능에 대한 커밋
    • fix : 버그 수정에 대한 커밋
    • build : 빌드 관련 파일 수정에 대한 커밋
    • chore : 그 외 자잘한 수정에 대한 커밋
    • ci : CI관련 설정 수정에 대한 커밋
    • docs : 문서 수정에 대한 커밋
    • style : 코드 스타일 혹은 포맷 등에 관한 커밋
    • refactor : 코드 리팩토링에 대한 커밋
    • test : 테스트 코드 수정에 대한 커밋

 

• PR 양식 통일
  • 제목
    • feat : 000 기능
    • 내용
      • ## 작업분류
        • [ ] 버그 수정
          • [ ] 신규 기능
            • [ ] 리팩토링
            • [ ] 스타일
            • [ ] 코드포매팅
        • ## 작업개요
        • ## 작업 상세 내용
        • ## 기타 메세지
        • ## Preview 이미지 업로드

 

 

 

FE 기술스택

• 언어: JavaScript
• 프레임워크: React
• 라이브러리: Prettier, React-calendar
• 아이콘 라이브러리: FontAwesome
• 통신 라이브러리: axios
• 상태 관리 라이브러리 : Redux
• 그래프 라이브러리 : chart.js
• CSS: 별도 파일 생성
• 코드 컨벤션
  • 폴더명: pages, components
  • 파일명: MainPage.jsx
  • 클래스명: answer_button (스네이크케이스)
  • 함수명: 소문자, 동사형, 카멜케이스

 

 

 

 

폴더 초기 파일 설정

FE는 client폴더에, BE는 server폴더에 작업을 하기로 하였다.

branch는 main, dev, fe, be로 나뉘어서 fe에서 작업한다면 fe 브랜치를 하나 따서 거기서 feat/00기능 으로 하기로 정했다.

 

assets 이미지 혹은 폰트와 같은 파일들이 저장되는 폴더입니다. 이미지와 같은 파일들을 public에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부입니다. 파비콘과 같이 index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에 반면, 컴포넌트 내부에서 사용하는 이미지 파일인 경우 이 assets 폴더에 위치시켜야 합니다.

 

참고 : https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0

 

이 부분을 참고하여서 assets 폴더를 생성하고, 거기에 우리 팀 로고 등 필요한 이미지 파일을 추가로 넣기로 하였다.