노트폴리오

📌 합동 세미나 - 노트폴리오

• 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
• 웹 4팀은 노트폴리오 리디자인을 진행했어요!

✨ OUR TEAM

정우	건휘	신지
@jungwoo3490	@KIMGEONHWI	@sinji2102

🛠 기술스택

역할	종류
Library
Programming Language
Styling
Data Fetching
Formatting
Package Manager
Version Control
Deployment

🌳 구현 View

🌿 Home View

🌿 Community View

🌿 Recruit View

🌿 Search View

👥 역할 분담

👨🏻‍💻 정우

종류	목록
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 컨벤션

commit 규칙

키워드: 내용

• 예시:
  • init: 초기 세팅
  • feat: 기능 개발

Commit 메시지 종류 설명

제목	내용
init	초기 세팅
feat	새로운 기능을 추가할 경우
style	기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋
fix	버그를 고친 경우
refactor	프로덕션 코드 리팩토링
docs	문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md
chore	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review	코드 리뷰 반영

2️⃣ Branch 전략

브랜치 전략

페이지명/#이슈번호-기능명

Git Branch

• 브랜치 운영
  • main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치
  • develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)
  • feature/페이지명: 각 페이지별 기능 개발 브랜치, 개발이 완료되면 develop 브랜치로 병합
  • 페이지명/#이슈번호-기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 feature/페이지명 브랜치로 병합

3️⃣ 코딩 컨벤션

1. 상수는 영문 대문자 스네이크 표기법 (예를 들면 키값)
2. 클래스나 컴포넌트는 대문자 파스칼 케이스 사용 (함수형 컴포넌트)
3. 컴포넌트는 rfce, 나머지 함수는 화살표 함수 이용
4. 암시적 반환을 최대한 활용 (early return)
5. axios 쓸 때 then & catch, async await 쓸 때 try & catch 사용
6. 구조분해할당 적극 이용

  // 구조분해 사용 X
  const SearchBar = (props) => {
    const { a, b, c } = props;
    ...
    
  // 구조분해 사용 O
  const SearchBar = ({ a, b, c }) => {
    ...

7. 구조분해할당 적극 이용
8. 변수 등을 조합해서 문자열을 생성할 때는 반드시 리터럴을 이용
9. switch-case 사용시 break 강제
10. 조건문은 반드시 삼항 연산자 사용
11. for는 지양하고 forEach, map을 사용
12. 주석은 작성하려고 하는 대상 바로 위에 작성
13. button 태그에는 type을 명시
14. 버튼, 헤더와 같이 common component에서는 children 적극 활용
15. styleds-components 는 tsx 맨 아래에 선언
16. 컴포넌트 최상단에 감싸는 것은 {컴포넌트명}Wrapper
17. 컴포넌트 선언과 처음 styled-components 선언 사이 한줄 띄어쓰기
18. 컴포넌트에서 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