Portfolio


// ISSUE

TODO
- [ ] sdaf
- [ ] sdaf
- [ ] sdaf
- [ ] sdaf


type Function = (args: number) => void;
type UT = ReturnType<Function>


type A = {
	a: number;
}

type A = {
	b: number;
} // errror


export interface B {
	a: number;
}

interface B {
	b: number
}

{
	a: number;
	b: number;
}


- 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

- 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/ # 라우터 관련 파일


## 🌍 이슈 번호 <!-- - #number -->

- 이슈 번호

## ✅ 작업 내용

- 구현한 내용
  - 세부 작업

## 📝 참고 자료

- 작업한 내용에 대한 부연 설명

## ♾️ 기타

- 추가로 필요한 작업 내용


## 배경

- 문제
- 팀원들과 이야기 해보고 싶은 부분
- 등을 설명해주세요

## TODO

- 해야 할 일을 작은 단위로 구별해서 작성해주세요

ex)
- [x] React 프로젝트 생성
- [x] TS 설치
- [] eslint 설치
- [ ] prettier 설치

## ETC

팀프로젝트

브랜치 전략

`Type Alias` vs `Interface`

디자인 툴

ESLint & Prettier 룰

디렉토리 구조

PR & ISSUE

스타일 라이브러리

팀프로젝트

브랜치 전략

Type Alias vs Interface

디자인 툴

ESLint & Prettier 룰

디렉토리 구조

PR & ISSUE

스타일 라이브러리

`Type Alias` vs `Interface`