원티드 프리온보딩 FE 인턴십 2주차 과제물 입니다.
‘라이크어로컬’ 브랜드의 기업 과제를 진행하였습니다.
작업 기간 : 3/7 ~ 3/10 (4일간 진행)
https://pre-onboarding-9th-2-10-git-develop-wanted-onboarding-10team.vercel.app/
$ git clone https://github.com/wanted-onboarding-10team/pre-onboarding-9th-2-10.git
$ npm i
$ npm start
- 코드컨벤션
- 협업툴
📦
├─ public
│ └─ data
│ └─ mock_data.json
├─ src
│ ├─ components
│ │ ├─ context
│ │ │ └─ BasketProvider.tsx
│ │ ├─ modal
│ │ │ └─ TravelDetailModal.tsx
│ │ ├─ FilterContainer.tsx
│ │ ├─ MainLayout.tsx
│ │ ├─ NavBar.tsx
│ │ ├─ ReservationItem.tsx
│ │ └─ TravelContent.tsx
│ ├─ constant
│ │ └─ index.ts
│ ├─ pages
│ │ └─ ReservationPage.tsx
│ │ └─ Root.tsx
│ │ └─ TravelListPage.tsx
│ ├─ router
│ │ ├─ loader
│ │ │ ├─ mainLoader.ts
│ │ │ └─ rootLoader.ts
│ │ └─ index.tsx
│ ├─ types
│ ├─ utils/api
│ ├─ index.js
└─ └─ App.js
| Type | Description |
|---|---|
| Feat | 새로운 기능 추가 |
| Fix | 버그 수정 |
| Design | CSS 등 UI 디자인 변경 |
| Refactor | 코드 리팩토링 |
| Docs | 문서 작업, 수정 |
| Style | 코드 스타일 및 포맷 변경(코드 자체의 변경은 없는 경우, 함수/ 변수명 변경 포함) |
| Chore | 소스 코드를 건들지 않는 작업 - 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우 |
| Rename | 파일 혹은 폴더명을 수정하거나 옮기는 작업만 수행 |
| Remove | 파일을 삭제하는 작업만 수행 |
- main : 배포 브랜치
- develop : 개발 브랜치
- feature/#1 : 각 기능을 개발하는 브랜치
- feature/#1-팀원이름
- feature/#2
- feature/#2-팀원이름
- feature/#3
- feature/#3-팀원이름
- feature/#4
- feature/#4-팀원이름module.exports = {
printWidth: 100,
singleQuote: true,
arrowParens: 'avoid',
semi: true,
tabWidth: 2,
endOfLine: 'auto',
trailingComma: 'all',
useTabs: false,
bracketSpacing: true,
jsxSingleQuote: true,
};module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
'no-var': 'error', // var 금지
'no-multiple-empty-lines': 'error', // 여러 줄 공백 금지
'no-console': ['warn', { allow: ['warn', 'error', 'info'] }], // console.log() 금지
eqeqeq: 'error', // 일치 연산자 사용 필수
'dot-notation': 'error', // 가능하다면 dot notation 사용
'no-unused-vars': 'warn', // 사용하지 않는 변수 금지
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
};주된 커뮤니케이션 툴로 팀 노션 페이지와 Discord, Figma를 사용했습니다.
-
기능별로 팀원 개개인의 코드 리뷰
-
토론을 통해 Best Practice 선정
-
노션 페이지 / Figma
-
회의를 통해 팀원들의 코드를 분석하고, 그 중에서 Best Practice 정하고,
commit message convention, git flow 전략 등 Team Rules를 정하기 위해 활용
-
-
Discord
- 팀원들의 의사소통 및 화면 공유를 통한 협업을 위해 활용
Issue와 Mileston, PR을 통해 코드 리뷰를 진행하며 프로젝트를 진행하였습니다.
Issue를 정의하고 하루에 한가지의 이슈를 다같이 진행한 후 피드백하는 식으로 동료 협업을 진행하였습니다.
| 날짜 | 제목 |
|---|---|
| 3/7 | #1 개발환경 세팅 |
| 3/8 | #2 main page 기능 구현 |
| 3/9 | #4 reservations 기능 구현 |
| 3/10 | #3 filter 기능 구현 |
| #25 style 수정 | |
| #24 refactoring |
-
Redux vs Context API
장바구니 기능 중 예약을 한 상품이 새로고침을 할 때, 그대로 남아있어야할 것 같다는 의견
둘 다 다른 목적을 가지고 있는 도구지만 컴포넌트에서 복잡한 상태 관리가 필요한 경우 사용한다.
Redux는 보통 여러 컴포넌트에 많은 양의 상태를 관리하기 위해 사용되지만 지금 우리가 하고 있는 프로젝트는 많은 양의 상태를 관리하지 않는다(장바구니 기능에 한정적으로 사용함). 또한,
props drilling문제를 해결하기 위한 것이므로,Context API로 결정 -
상품의 남은 수량 계산 방식
-
localStorge에 담긴 배열의 길이 vs property 추가
배열의 길이로 체크하는 방식은 데이터를 중복으로 담아 계산하는 방식이었으며, 프로퍼티에 추가하는 방식은 상품에 대한 수량을 직접적으로 담고 있어 명확하게 그 속성을 알 수 있어 property 결정
-
-
필터 작동방식 및 디자인
-
silder vs input vs checkbox
이미 정해져 있는 구간을 클릭 하는 것은 사용자 입장에서 원하는 값이 없을 경우도 있기 때문에
쉽고 편하게 사용할 수 있는
silder와input으로 결정 -
실시간 렌더 vs 검색 버튼
실시간 렌더는 바로바로 보이는 장점이 있지만 필터를 누를 때마다 렌더링 다시하기 때문에 성능상 좋지 않다고 판단 하여
사용자가 원하는 필터를 클릭, silde를 하고
검색버튼을 눌러야 원하는 결과값이 나오도록 하기로 결정
-
| 박수완 | 유시온 | 이새미 | 한동룡 | 홍수민 | 황서영 |
|---|---|---|---|---|---|
| @skdoqj | @yoosion030 | @shinpanda | @Ryong-E | @hongsoom | @Seo0H |
 |
 |
 |
 |
 |
 |