- 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
- 모바일 웹 1팀은 스카이스캐너 리디자인을 진행했어요!
 |
 |
 |
 |
|---|---|---|---|
건휘 |
가연 |
민정 |
희선 |
| @KIMGEONHWI | @ayla-12 | @minjeoong | @heesunee |
| 역할 | 종류 |
|---|---|
| Library |  |
| Programming Language |  |
| Styling |  |
| Data Fetching |  |
| Formatting |   |
| Package Manager |  |
| Version Control |   |
| Deployment |  |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | eslint & prettier 절대경로 |
| view 📱 | 위시 리스트 페이지 |
| api 📡 | 위시 리스트 조회(GET) 좋아요(PATCH) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | GlobalStyle theme |
| view 📱 | Home 페이지 |
| api 📡 | 홈페이지 항공권 호출(GET) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | 폴더 구조 라우팅 |
| view 📱 | 공통 컴포넌트(상단 Header) 캘린더 검색 필터 모달 |
| api 📡 | 캘린더 호출(GET) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | VITE svg |
| view 📱 | 공통 컴포넌트(Footer) 항공권 페이지 |
| api 📡 | 항공권 조회(GET) 좋아요(PATCH) |
1️⃣ Commit 컨벤션
키워드: 내용
- 예시:
init: 초기 세팅feat: 기능 개발
Commit 메시지 종류 설명
| 제목 | 내용 |
|---|---|
| init | 초기 세팅 |
| feat | 새로운 기능을 추가할 경우 |
| style | 기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋 |
| fix | 버그를 고친 경우 |
| refactor | 프로덕션 코드 리팩토링 |
| docs | 문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md |
| chore | 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정 |
| code review | 코드 리뷰 반영 |
2️⃣ Branch 전략
페이지명/#이슈번호-기능명
- 브랜치 운영
main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)feature/페이지명: 각 페이지별 기능 개발 브랜치, 개발이 완료되면develop브랜치로 병합페이지명/#이슈번호-기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면feature/페이지명브랜치로 병합
3️⃣ 코딩 컨벤션
- 상수는 영문 대문자 스네이크 표기법 (예를 들면 키값)
- 클래스나 컴포넌트는 대문자 파스칼 케이스 사용 (함수형 컴포넌트)
- 컴포넌트는 rfce, 나머지 함수는 화살표 함수 이용
- 암시적 반환을 최대한 활용 (early return)
- axios 쓸 때 then & catch, async await 쓸 때 try & catch 사용
- 구조분해할당 적극 이용
// 구조분해 사용 X
const SearchBar = (props) => {
const { a, b, c } = props;
...
// 구조분해 사용 O
const SearchBar = ({ a, b, c }) => {
...- 구조분해할당 적극 이용
- 변수 등을 조합해서 문자열을 생성할 때는 반드시 리터럴을 이용
- switch-case 사용시 break 강제
- 조건문은 반드시 삼항 연산자 사용
- for는 지양하고 forEach, map을 사용
- 주석은 작성하려고 하는 대상 바로 위에 작성
- button 태그에는 type을 명시
- 버튼, 헤더와 같이 common component에서는 children 적극 활용
- styleds-components 는 tsx 맨 아래에 선언
- 컴포넌트 최상단에 감싸는 것은 {컴포넌트명}Wrapper
- 컴포넌트 선언과 처음 styled-components 선언 사이 한줄 띄어쓰기
- 컴포넌트에서 props로 전달받은 interface를 선언해줄 때, 컴포넌트명 + Props로 선언
|-- 📁 .github
|-- 📁 .husky
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
|-- 📁 apis
|-- 📁 assets
|-- 📁 components
|-- 📁 constants
|-- 📁 hooks
|-- 📁 libs
|-- 📁 pages
|-- 📁 styles
|-- 📁 types
|-- 📁 utils
|-- 📁 Router.tsx
|-- .env
|-- .eslintignore
|-- .eslintrc.json
|-- .gitignore
|-- .prettierignore
|-- .prettierrc
|-- .stylelintrc.json
|-- index.html
|-- package.json
|-- svg.d.ts
|-- README.md
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts
|-- yarn.lock