Portfolio

폴더 구조.코드 스타일 선언 순서 라우팅 구조 레이어 분리 네이밍 husky & lint-staged eslint : linter prettier : formatter config 경로 별칭 브랜치 커밋 메세지 PR 템플릿 이슈 템플릿

폴더 구조.

common
pages

코드 스타일

선언 순서

컴포넌트 내부

훅, 커스텀 훅 최상단

변수 중간에 두고

함수 가장 밑에 두고

라우팅 구조

레이어 분리


<LocalErrorBoundary> //여기서 지역적인 에러처리
	<Suspense fallback={<Spinner/>}> //여기서 fetching isLoading, isError react-quuery랑 errorboundary, suspense
//isLoading중일땐 다른 컴포넌트
		<SomePage data={usePost()}/> //페이지도 가능 => 컴포넌트에서는 데이터를 무조건 받음 => 타입체크
	</Suspense>
</LocalErroBoundary>


//Compound Component, Function as Child Component, Custom hook 등으로 로직 적절히 분리

const SomePage = ({data}) => {
	const user = data.user.read()

	return (
		<div>
			{data}
		</div>
	)
}

git config core.ignorecase false 으로 대소문자 구분 가능하게 설정 후

git rm -r --cached . 로 현재경로의 캐시를 지워주신뒤 add, commit 등 진행해주시면 됩니다

네이밍

'@typescript-eslint/naming-convention'

분류	규칙	예시	eslint 강제
상수	UPPER_SNAKE_CASE	const MAX_USERS = 10;	X
변수	camelCase boolean은 접두사 사용	let userName = 'JohnDoe'; let isActive = true; let hasLoggedIn = false;	✅
함수	camelCase, 동사+명사 boolean 반환은 'is' 접두사, api 요청 함수는 동사에 메서드, api 요청 함수에 명사 없을시 생략	const getUserProfile = () ⇒ { ... } const isUserActive = () ⇒ { ... } const async getPost = () ⇒ { … } const async login = () ⇒ { … }	⚠ 이름 규칙만
이벤트 핸들러	camelCase handle+명사+동사 props는 on 사용	const handleButtonClick = () ⇒ { ... } <button onClick={handleButtonClick}>Click me</button>	ㅤ
컴포넌트	PascalCase ~~표현식! export 붙임~~	const UserList = () ⇒ { ... } ~~export const Component = () => { }~~	ㅤ
type 별칭	PascalCase Type 접미사	type UserResponseType = ... type ButtonClickType = ...	✅
interface	PascalCase 컴포넌트에만 Props 접미사 그외 (스타일드컴포넌트포함) 모두 I_ 접두사	interface UserProps { ... } interface I_UserOptions { ... }	X
함수 인자 구조분해	구조분해 해서 쓰기	const createUser = ({ userName, userEmail }) ⇒ { ... }	ㅤ


// 명시적으로 import 하자 !

import {
  ReactElement,
  MouseEvent as ReactMouseEvent,
  ReactNode,
  RefObject,
} from 'react';

husky & lint-staged

commit 전에 검사

eslint : linter


"plugins": ["unused-imports", "simple-import-sort"],
unused-imports : 안쓰는 변수 등을 삭제
simple-import-sort : import 구문 정리 
...
curly: 2, //0: off, 1: warn, 2: error
'no-console': ['error'], //콘솔로그 사용시 에러...,
'react/react-in-jsx-scope': 'off', //react 17버전이후로 import react안해도되는데 오류발생하는것 제거

prettier : formatter


{
  "endOfLine": "auto",
  "printWidth": 80,
  "tabWidth": 2,
	"useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "singleAttributePerLine": true,
  "trailingComma": "es5"
  "bracketSameLine": true, 
}

config

경로 별칭


/* tsconfig.json path alias */
    "baseUrl": "./src", 
    "paths": {
      "@/*": ["./*"]
    }

npm install -D vite-tsconfig-paths으로 설치 후 vite.config.js의 plugins에 추가한다.


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

브랜치

main

dev (default)

feat-#이슈 번호-기능

ex) feat-#3-Login

커밋 메세지

.gitmessage.txt


# <타입>: <제목> 형식으로 작성하며 제목은 최대 50글자 정도로만 입력
# 제목을 아랫줄에 작성, 제목 끝에 마침표 금지, 무엇을 했는지 명확하게 작성
# 본문 작성시 한줄 밑에 -본문 내용 작성

################
# [✨feat]: 새로운 기능 추가
# [🐛fix]: 버그 수정
# [📝docs]: 문서 수정
# [♻️refactor]: 코드 리팩토링 (기능에 영향을 주지 않을 때)
# [🎨style]: css 스타일링
# [🔨chore]: 빌드 부분 혹은 패키지 매니저 수정사항
# [🗑️remove]: 코드 또는 파일 제거할 때
# [🚚change]: 파일 혹은 폴더 구조, 이름을 변경할 때
################

이외 필요사항은 그때 협의합시당~

PR 템플릿

이슈

close #~

구현한 기능

스크린샷

고민사항 (하면서 생기는 막히는 부분, 모르는 점, 궁금한 점) ex) 현재 이렇게 했는데 더 좋은 방법이 있을 것 같은데 모르겠다 , 여기 부분을 해결하지 못했는데 어떻게 하면 될까요?

제출 전 체크리스트 ((주석))


## 📋 Issue Number
close #

## 💻 구현 내용

-
-

## 📷 Screenshots


## 🤔 고민사항
<!-- PR에서 중점적으로 봐야할 부분이나 질문 & 애로사항 공유 -->
<!-- 궁금한 점, 팀원들의 의견이 필요한 부분, 크로스체크가 필요한 부분 등 -->
<!-- 하면서 생기는 막히는 부분, 모르는 점, 궁금한 점 -->

<!-- 
📋 제출 전 check list

- 이슈 내용을 전부 적용했나요?
- 산정한 작업 기간 내에 개발했나요?
- 코드 정리를 한번 하셨나요?
	- 컨벤션 확인하셨나요?
	- UI와 도메인 로직을 잘 분리했나요?
	- depth가 너무 깊지는 않나요?
-->

이슈 템플릿

체크박스로 태스크 쪼개기

- [ ] 하위 태스크1 => 이슈화 또 할수있고... - [ ] 하위 태스크2 => 이슈화 또 할수있고...


### 📋 개요

### 💻 ToDoList
- [ ] 할일                                                  (convert issue)
- [ ] 할일
- [ ] #Issue 멘션

### 🔍 point
<!-- 해당 이슈에서 중요한 포인트 -->