원티드 프리온보딩 인턴십 프론트엔드 9차 2주차 과제
yarn install
yarn dev
&&
npm install
npm run dev
/src
├── components // 페이지를 구성하는 컴포넌트
│ ├── Header.tsx
│ ├── main
│ │ ├── FilterBox.tsx
│ │ ├── ModalBox.tsx
│ │ ├── function
│ │ │ └── dataFilter.ts // 지역, 가격 필터링 함수
│ │ └── types
│ │ └── types.ts
│ └── reservations
│ └── EmptyBox.tsx
├── pages // 라우팅 경로 별 페이지
│ ├── MainPage.tsx
│ ├── NotFoundPage.tsx
│ ├── ReservationsPage.tsx
│ └── SkeletonPage.tsx
├── redux // redux-toolkit 상태 관리
│ ├── function
│ │ └── fetchData.ts // 비동기 작업 처리 함수
│ ├── hook
│ │ └── redux.hook.ts
│ ├── index.ts
│ ├── slice
│ │ ├── cartSlice.ts // 장바구니 상태 관리
│ │ └── dataSlice.ts // 상품 데이터 상태 관리
│ └── types.ts
├── App.tsx // 라우팅 처리
├── main.tsx
└── vite-env.d.ts
| 사용처 | 사용 기술 | 결정 사유 |
|---|---|---|
| 프레임워크 | React (Vite) | - CRA와 비교했을 때 매우 효율적으로 번들링 작업 진행 |
| 언어 | Typescript(Javascript) | - 더 안정적인 코드 작성: 컴파일 과정에서 버그를 사전에 찾을 수 있음 - 개발 생산성 향상: 자동완성, 타입체크, 에러 표시 도구 제공 - 코드 가독성 향상: 개발자가 코드를 이해하고 유지보수하기 쉽게 만듦 |
| 스타일 | Chakra UI | - 웹 응용 프로그램을 위해 액세스 가능하고 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축 가능 |
| 라우팅 처리 | react-router-dom | |
| 비동기 통신 | axios | - 비동기적 HTTP 통신 방법으로 response 데이터를 다룰 수 있으며 Promise 객체화 가능 |
| 상태 관리 | Redux Toolkit | - 프로젝트 데이터를 전역적으로 관리 - 프로미스 생명 주기 기반 액션 타입 생성 |
| 코드 포매팅 | ESLint | |
| 배포 | Vercel | - Github 레포지토리와 연동하여 배포 |
- 초기 렌더링 시, CSR의 단점을 보완하고자 Skeleton 레이아웃을 데이터를 가져오는 동안 표시
- 최대 수량 초과 시 toast를 통해 피드백 제공
- 404 페이지에 접근 시 메인 페이지로 이동할 수 있는 링크 버튼 안내
- 상태관리 폴더, 컴포넌트 폴더 그리고 페이지 폴더를 구분하여 구성
- 여행상품 목록과 필터 옵션을 받아 필터링 된 목록을 반환하는 함수를 별도로 작성
- 리덕스 관련 폴더를 필요도에 따라 구별해서 세분화 시킴
- 각각의 파일 관련 타입의 경우 관련 폴더 안에 개별적으로 생성하여 사용
메인
default.mov
- 예약버튼을 통해 장바구니에 저장
default.mov
- 여행 상품 정보 클릭시 모달창
default.mov
- 가격필터
- 공간필터
장바구니
default.mov
- 저장한 상품 삭제
default.mov
- 구매수량 변경 & 총금액
추가적인 부분
default.mov
- 로딩시 스켈레톤 화면 구현
이지연 |
김예지 |
오강산 |
최은서 |
최선재 |
김지원 |
한지은 |
오혁상 |
오준석 |
2팀 |
| Tag Name | Description |
|---|---|
| feat | 새로운 기능 추가 |
| design | UI style 변경 |
| refactor | 코드 리팩토링 |
| fix | 에러, 버그 수정 |
| docs | 문서수정 |
| chores | 기타 수정사항 |
- 노션(회의록)
- 디스코드
- 깃헙 팀 레포지토리의 PR 코멘트, 커밋메시지
-
기업과제 요구사항 3가지를 이슈 3가지로 할당
- 기업과제 전체를 한번에 리뷰하기에는 범위가 커서 요구사항 단위로 작업하고 공유하기로 결정함
-
프로젝트 진행 규칙을 세우고 각자의 브랜치에서 이슈 단위로 작업 진행
# **팀 repository 에 PR 방법 1. organization repository에 각자의 이름으로 branch 생성 및 main branch를 개인 개정의 repository로 fork 2. 각자의 fork된 개인 개정의 repository에서 기능(이슈)단위의 branch 생성 및 구현 3. organization repository에 각자의 이름 branch에 기능(이슈)단위로 PR 및 merge 4. 최종 제출 직전에 토론으로 하나의 branch만 main branch로 merge 5. 나머지 branch들은 삭제 (PR만 남아있게끔)**
-
이슈마다 PR를 생성하여 자신의 코드에 대한 설명을 남기고 팀원들의 코드를 리뷰
- PR 내용과 브랜치의 커밋으로 팀원의 작업상황을 확인
-
디스코드에서 회의를 진행하여 본인의 작업물, 경과, 고민점 등을 공유
- 자신의 코드를 설명하고 Best Practice에 대한 의견 교환 및 소통하는 연습 🤗
-
디스코드 회의 이후 다른 팀원의 코드와 작업방식, PR에서 받은 코멘트를 참고하여 자신의 프로젝트를 개선
-
마지막에 팀원끼리 투표를 진행하여 과제로 제출할 코드 선정
- 다음부터는 ‘기업 과제’로서 팀원들의 코드가 어떤지 객관적으로 평가해 볼 수 있도록 채점표를 만들어 이야기를 나눠볼 예정