- 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
- 데스크탑 웹 2팀은 알리 익스프레스 리디자인을 진행했습니다.
 |
 |
 |
 |
|---|---|---|---|
성희 |
태욱 |
영경 |
예림 |
| @seong-hui | @Taew00k | @bykbyk0401 | @yarimu |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | 리액트 초기 설정 절대경로 vercel 배포 |
| view 📱 | 상품 구매 페이지 |
| api 📡 | 상품 정보 조회(GET) 주문 완료(POST) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | Github template eslint icon svgr |
| view 📱 | 주문상세 페이지 |
| api 📡 | 주문내역 조회(GET) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | stylelint theme |
| view 📱 | 상품 컴포넌트, 상품 구매 페이지 |
| api 📡 | 연관 상품 조회(GET) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | 절대경로 prettier |
| view 📱 | 공통 컴포넌트(상단 Header 2종류, Footer) 상품 구매 페이지 |
| api 📡 | 리뷰 조회(GET) |
| 역할 | 종류 |
|---|---|
| Library |  |
| Programming Language |  |
| Styling |  |
| Data Fetching |   |
| Formatting |    |
| Package Manager |  |
| Version Control |   |
| Deployment |  |
1️⃣ Commit 컨벤션
키워드: 내용
- 예시:
init: 초기 세팅feat: 기능 개발
Commit 메시지 종류 설명
| 제목 | 내용 |
|---|---|
| feat | 새로운 기능을 추가할 경우 |
| style | 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 |
| fix | 버그를 고친 경우 |
| refactor | 코드 리팩토링 |
| docs | 문서를 수정한 경우 |
| chore | 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore |
| design | CSS 등 사용자 UI 디자인 변경 |
| comment | 필요한 주석 추가 및 변경 |
| rename | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| remove | 파일을 삭제하는 작업만 수행한 경우 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 |
| !HOTFIX | 급하게 치명적인 버그를 고쳐야 하는 경우 |
2️⃣ Branch 전략
feat/#이슈번호/이슈이름
- GitHub-Flow 전략 + develop
- 브랜치 운영
feat/#이슈번호/이슈이름(케밥 케이스): 기능을 개발하면서 각자가 사용한 브랜치main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)feat/#이슈번호/기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합fix/#이슈번호/기능명: feature 브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치- PR 머지 후 톡방 메세지 보내기
- approve 2명 이상 받아야 머지 가
3️⃣ 코딩 컨벤션
-
rafce 화살표 함수로 컴포넌트, 함수 다 쓰기
-
네이밍 컨벤션
- 변수 함수는 소문자 카멜 케이스로 선언
- 배열은 복수형으로 선언
- 상수는 스네이크 케이스를 활용해 대문자와 _ 를 사용해 선언합니다.
-
React & TypeScript
- 컴포넌트는 항상 파스칼 케이스로 선언합니다. (예: SmallBanner)
- Inline Style 을 하지 않습니다.
- 스타일 변수는 기본적으로 하단에 작성
- any 사용금지
-
Styling
- Emotion 의 css 를 선언 시 식별자 명은 변수의 카멜 케이스로 선언합니다.
- css 를 사용할 땐 가급적 object 가 아닌 template string 을 활용합니다.
- Emotion 의 styled 를 활용해 스타일링을 할 때 변수명은 컴포넌트와 마찬가지로 파스칼 케이스로 선언합니다.
- interface 선언 : 컴포넌트명+props
- 기본적으로 rem 사용, border, border-radius : px
-
Function
- 함수의 식별자명은 항상 시멘틱하게 선언합니다. (어떤 기능을 하는 함수인지 함수명을 보고 알 수 있도록 선언합니다.)
- 이벤트를 핸들링 하는 함수는 handle 접두사를 이용합니다.
- 반환값이 boolean 인 함수는 is 접두사를 활용하며, 어떤 값을 리턴하는 함수는 get 접두사를 활용합니다.
- 함수는 함수 표현식만 사용합니다
|-- 📁 .github
|-- 📁 .husky
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
|-- 📁 apis
|-- 📁 assets
|-- 📁 components
|-- 📁 constants
|-- 📁 layout
|-- 📁 pages
|-- 📁 route
|-- 📁 styles
|-- 📁 types
|-- App.tsx
|-- main.tsx
|-- queryClient.ts
|-- svg.d.ts
|-- vite-env.d.ts
|-- .env
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- .stylelintignore
|-- .stylelintrc.json
|-- index.html
|-- package.json
|-- README.md
|-- tsconfig.app.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- vercel.json
|-- vite.config.ts
|-- yarn.lock