HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🧵
박병현팀
/
🧑🏻‍💻
팀프로젝트
🧑🏻‍💻

팀프로젝트

 
📄
오왓(Owhat) 프로젝트 기획서
📝
중간 회고
💡
API 응답 결과
📑
최종 회고
 

브랜치 전략

  • GitHub Flow
  • Squash Merge
  • 브랜치명: [type]/#ISSUE-NUMBER_snake_case
    • ex) feature/#1_초기_세팅
  • 머지한 브랜치는 삭제할 것
// ISSUE TODO - [ ] sdaf - [ ] sdaf - [ ] sdaf - [ ] sdaf
 
 
 

Type Alias vs Interface

우리 팀 기준
  • 객체 타입은 interface → 상속 받는 경우가 자주 있는데 이 경우 성능이 좋다고 함
  • 함수, union type, util type 등은 type → 가독성이 높음
 
선택지
  1. type
      • 함수 타입을 지정할 때 가독성이 좋음
      type Function = (args: number) => void; type UT = ReturnType<Function>
      • 미리보기 등을 좀 더 잘 지원한다고 함
      • 선언 병합을 지원하지 않기 때문에 혼돈의 여지가 줄어듦
      type A = { a: number; } type A = { b: number; } // errror
  1. Interface
      • 상속에 유리하도록 동작
      export interface B { a: number; } interface B { b: number } { a: number; b: number; }

디자인 툴

Framer!
  • 대략적인 와이어프레임을 AI에게 위임할 수 있다
  • 우리는 디자이너가 아니니까.. 😿

ESLint & Prettier 룰

- eslint // 코드 스타일 및 문법을 강제하는 툴 - prettier // 코드 포매터 - eslint-config-prettier // eslint formatting 기능을 없애주는 설정 - eslint-plugin-prettier // eslint에서 prettier의 formatting 기능을 사용하도록 도와주는 기능 - eslint-plugin-jsx-a11y // 웹 접근성과 관련한 eslint 플러그인 - eslint-plugin-react-hooks // react hooks 사용과 관련하여 지켜야 할 사항을 알려주는 플러그인 - eslint-plugin-import // import, export 순서를 정렬해준다. - eslint-plugin-simple-import-sort // import, export 순서를 정렬해준다. - eslint-import-resolver-typescript // 절대 경로를 사용하는 경우 ESLint에게 알려주는 설정 - @typescript-eslint/eslint-plugin // TypeScript의 문법을 이해하고 규칙에 맞게 수정해주는 eslint 플러그인 - @typescript-eslint/parser // TypeScript 환경에서 Babel 보다 더 적합한 파서
{ "singleQuote": true, // 홑따옴표 사용 여부 "semi": true, // 세미콜론 사용 여부 "useTabs": false, // 들여쓰기에 tab 사용 여부 "tabWidth": 2, // 들여쓰기 간격 설정 "trailingComma": "all", // 마지막 줄 comma 사용 여부 "printWidth": 80, // 코드 한 줄 당 최대 너비 "arrowParens": "avoid", // 화살표 함수에서 소괄호 사용 여부 "endOfLine": "auto" // EOL 설정 }
 

디렉토리 구조

  1. 비슷한 역할 별로 묶기
✨ 1 - api/ |- types/ # API 요청 및 응답 관련 타입 |- post.ts - common - components # 공용 컴포넌트 - hooks |- queries/ # Tanstack Query - query 파일 |- mutations/ # Tanstack Query - mutation 파일 |- useLogin.ts |- useLogout.ts - pages |- loginPage/ |- index.tsx |- components/ |- LoginButton/ |- index.tsx |- LoginButton.variants.ts |- loginInput/ |- index.tsx |- logoutPage/ - constants/ # 상수 관련 파일 - stories/ # 스토리북 관련 파일 - utils/ # 다양한 유틸 함수 - styles/ # 스타일 관련 파일 |- global.css - routes/ # 라우터 관련 파일

PR & ISSUE

PR TEMPLATE
## 🌍 이슈 번호 <!-- - #number --> - 이슈 번호 ## ✅ 작업 내용 - 구현한 내용 - 세부 작업 ## 📝 참고 자료 - 작업한 내용에 대한 부연 설명 ## ♾️ 기타 - 추가로 필요한 작업 내용
 
ISSUE TEMPLATE
## 배경 - 문제 - 팀원들과 이야기 해보고 싶은 부분 - 등을 설명해주세요 ## TODO - 해야 할 일을 작은 단위로 구별해서 작성해주세요 ex) - [x] React 프로젝트 생성 - [x] TS 설치 - [] eslint 설치 - [ ] prettier 설치 ## ETC

스타일 라이브러리

  • tailwind ❤ 😜 ❤
커밋 컨벤션