- 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
- 웹 4팀은 노트폴리오 리디자인을 진행했어요!
 |
 |
 |
|---|---|---|
정우 |
건휘 |
신지 |
| @jungwoo3490 | @KIMGEONHWI | @sinji2102 |
| 역할 | 종류 |
|---|---|
| Library |  |
| Programming Language |  |
| Styling |  |
| Data Fetching |  |
| Formatting |    |
| Package Manager |  |
| Version Control |   |
| Deployment |  |
 |
 |
|---|
 |
 |
|---|
 |
 |
|---|
 |
 |
|---|
| 종류 | 목록 |
|---|---|
| setting ⚙️ | husky & lint-staged 폴더 구조 라우팅 |
| view 📱 | 공통 컴포넌트(Chip 리스트) Recruit 페이지 Search 페이지 |
| api 📡 | 크리에이티브 검색 (GET) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | GlobalStyle VITE svg eslint & prettier |
| view 📱 | 공통 컴포넌트(상단 Header) Home 페이지 |
| api 📡 | 크리에이티브 조회 (GET) 크리에이티브 좋아요 (POST) 크리에이티브 좋아요 취소 (DELETE) |
| 종류 | 목록 |
|---|---|
| setting ⚙️ | stylelint theme |
| view 📱 | 공통 컴포넌트(Sticky Navigation 바) Community 페이지 |
| api 📡 | 워크샵 전체 조회(GET) 프로그램 전체 조회 (GET) |
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