๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

ํŒ€ํ”„๋กœ์ ํŠธ

 
๐Ÿ“„
์˜ค์™“(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 โค ๐Ÿ˜œ โค
์ปค๋ฐ‹ ์ปจ๋ฒค์…˜