๋ธ๋์น ์ ๋ต
- GitHub Flow
- Squash Merge
- ๋ธ๋์น๋ช
:
[type]/#ISSUE-NUMBER_snake_case
- ex) feature/#1_์ด๊ธฐ_์ธํ
- ๋จธ์งํ ๋ธ๋์น๋ ์ญ์ ํ ๊ฒ
// ISSUE TODO - [ ] sdaf - [ ] sdaf - [ ] sdaf - [ ] sdaf
Type Alias
vs Interface
Type Alias
vs Interface
์ฐ๋ฆฌ ํ ๊ธฐ์ค
- ๊ฐ์ฒด ํ์
์
interface
โ ์์ ๋ฐ๋ ๊ฒฝ์ฐ๊ฐ ์์ฃผ ์๋๋ฐ ์ด ๊ฒฝ์ฐ ์ฑ๋ฅ์ด ์ข๋ค๊ณ ํจ
- ํจ์, union type, util type ๋ฑ์
type
โ ๊ฐ๋ ์ฑ์ด ๋์
์ ํ์ง
- type
- ํจ์ ํ์ ์ ์ง์ ํ ๋ ๊ฐ๋ ์ฑ์ด ์ข์
- ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฑ์ ์ข ๋ ์ ์ง์ํ๋ค๊ณ ํจ
- ์ ์ธ ๋ณํฉ์ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ํผ๋์ ์ฌ์ง๊ฐ ์ค์ด๋ฆ
type Function = (args: number) => void; type UT = ReturnType<Function>
type A = { a: number; } type A = { b: number; } // errror
- 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 - 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 โค ๐ โค