프론트 엔드 규칙 정하기! EP.4

6월 27일 해야 하는 것

• CI/CD 연결 확인
• 기술 스택 선정
• 코드 규칙 정하기
• 커밋 규칙 정하기

 

** 기술 스택 선정 **
- Redux Toolkit → 이걸 쓴다 O / 전역 상태 관리
- 전역적으로 사용할 전역 데이터도 사용
- 미들웨어를 통해서 axios 에서 가져온 데이터를 툴킷에 넣어서 사용
- React Query → 리덕스를 기준으로 작성을 하고 시간 남을 때 쿼리로 재작성 (자기파트)
- Styled-Components / tailwind → 같이 

* 코드 규칙
- camelCase → 첫글자는 소문자 단어마다 대문자

* 코드포매터 prettier

* 태그 id는 camelCase, 클래스명 (_)

* 커밋 규칙
 https://jason-api.tistory.com/89
 https://www.inbogi.com/bok/2020/04/1/
- 뒤에 #이슈번호
- 자기 작업 이슈 올리기
- 풀받고 브랜치 만들고 코드 짜고 커밋하고 푸쉬하고 Pull Request 한 뒤 푸쉬했다고 알려주기
- 단위는 너무 크게 작업하지 말고 페이지 하나 완성했을때나 기능 구현했을 때, 버그 고쳤을 때

** 기능 정리 **

* 로그인 / 회원가입
- 로그인 화면에서 회원가입 버튼 클릭시 회원가입 화면으로 이동
- 로그인 화면에서 로그인 버튼 클릭시 로그인 체크 후 홈화면으로 이동
- 회원가입 화면에서 회원가입시 유효성 체크, 이메일과 닉네임 중복체크 이후 로그인 화면으로 이동
- 로그인 이후 부터는 서버에 요청시마다 토큰을 가지고 요청
- 새로고침이 되면 쿠키 혹은 로컬스토리지에서 토큰이 있는지 체크하여 로그인 여부를 리덕스에 보관하여 로그인 체크 사용
- Refresh 토큰 적용

* 소셜로그인
- 소셜 로그인 버튼 클릭시 서버측에 소셜 로그인 요청
- 서버측에서 소셜 로그인 토큰을 발급받아 보관후 로그인과 같이 사용

* 홈화면
- 게시물과 폴더 목록 표시
- 추가/편집/삭제 버튼
- 추가 / 편집 버튼 클릭시 작성 화면으로 이동
- 삭제버튼 클릭시 확인 팝업 뜨기
- 작성화면 (컴포넌트로 할지 페이지로 할지는 정해지지 않음)

* 작성 / 편집
- 편집 버튼으로 넘어온 경우 현재 입력된 데이터 표시
- 링크 입력 후 엔터 누르거나 버튼 클릭시 이미지 크롤링하여 가져오기
- 크롤링 이미지가 대신 직접 이미지 등록 가능
- 크롤링 이미지도 없고, 이미지도 없을 경우 임시 이미지 표시하기
- 작성 기능 구현

오후 2시 회의에서 나온 내용으로

• 찜하기는 검색페이지가 MVP에 들어있지 않아서 2차 목표로 수정
• 이미지 업로드 : 게시글쓰기에서만 1차 구현
• 전체 우선순위 : 로그인, 회원가입, 메인페이지 = 로그인도 토큰이 받아져야 메인으로 들어갈 수 있기 때문에
• 2차 : 검색과 리스트 나열, 마이페이지 수정 등

 

현재 완료 목룍

- 기본 클래스 생성 및 세팅

- 기능 별 브랜치 생성 ( practice로 연습용 깃헙 사용중 )