Skip to content

wafflestudio20-5/team3-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

team3-web

๐Ÿง‡ Waffle-Market

๐Ÿฅ• ๋‹น๊ทผ๋งˆ์ผ“ ํด๋ก  ์ฝ”๋”ฉ, ์™€ํ”Œ๋งˆ์ผ“ Client

  • ๋‹น๊ทผ๋งˆ์ผ“ ๊ธฐ๋Šฅ์„ ํด๋ก  ์ฝ”๋”ฉํ•œ ์™€ํ”Œ๋งˆ์ผ“ client์ž…๋‹ˆ๋‹ค.
  • ๋‹จ์ˆœ ๊ฒŒ์‹œํŒ ๊ธฐ๋Šฅ ์™ธ์— ์˜ˆ์•ฝ, ๊ฑฐ๋ž˜, ์ฑ„ํŒ… ๋“ฑ์˜ ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ์ด ๋”ํ•ด์ง„ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด๋ฉด์„œ ๊ตฌ์„ฑ์›๋“ค์˜ ๊ฐœ๋ฐœ ์‹ค๋ ฅ ์„ฑ์žฅ์„ ์ด๋ฃจ๊ณ ์ž ํ–ˆ๊ณ , ์„œ๋น„์Šค ๊ธฐํš์— ์ธํ’‹์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ๊ธฐ์กด์— ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํด๋ก  ์ฝ”๋”ฉ์„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ˜Ž ์„œ๋น„์Šค ์†Œ๊ฐœ ์˜์ƒ ๋ฐ ์‚ฌ์ง„

A1 (300 DPI)


๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ ๋ˆ„๊ฐ€ ๋งŒ๋“ค์—ˆ๋‚˜์š”?

๊น€์˜ˆ์ง€(lerrybe) ๋ฐฑ๋ฏผํ™(roddywhite) ์œ ์ฐฝ๋ฏผ(fluentmin)

๐Ÿ“š ๊ธฐ์ˆ  ์Šคํƒ




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

  • ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „ ์•„๋ž˜์™€ ๊ฐ™์€ ์ปจ๋ฒค์…˜์„ ์ •ํ•จ์œผ๋กœ์จ ์ฝ”๋“œ ๊ด€๋ฆฌ์— ํšจ์œจ์„ฑ์„ ๋†’์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ‘” Code Convention

  • ํŒ€์› ๊ฐ„ ์ฝ”๋“œ ์Šคํƒ€์ผ์„ ๋งž์ถ”๊ณ  ๊ฐ€๋…์„ฑ์„ ๋†’์—ฌ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์›ํ• ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด eslint์™€ Prettier๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • husky๋ฅผ ํ†ตํ•ด, ์ปค๋ฐ‹ ์ „ ์ฝ”๋“œ ํฌ๋งทํŒ…์„ ์ž๋™ํ™”ํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ ํšจ์œจ์„ ๋†’์ด๊ณ ์ž ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Github Action ์„ ์ด์šฉํ•˜์—ฌ main ๋ธŒ๋žœ์น˜์— PR ์˜ฌ๋ฆด๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ์Šคํƒ€์ผ ๊ฒ€์‚ฌ๋ฅผ ํ•˜๋„๋ก ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ˜Ž Commit Convention

  • ์•„๋ž˜์™€ ๊ฐ™์€ ์ปค๋ฐ‹ ์ปจ๋ฒค์…˜์„ ํ†ตํ•ด ์„œ๋กœ์˜ ์ž‘์—…๋ฌผ์ด ์–ด๋–ค ์œ ํ˜•์˜ ๊ฒƒ์ธ์ง€ ํŒŒ์•…ํ•˜๊ธฐ ์‰ฝ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2023-02-01 แ„‹แ…ฉแ„’แ…ฎ 11 26 44

โ›™ Git Branch ์ „๋žต ๋ฐ Merge ์ „๋žต

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2023-02-01 แ„‹แ…ฉแ„’แ…ฎ 11 43 46

  • Github-flow๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํฌ์ง€ ์•Š์€ ์‚ฌ์ด์ฆˆ์˜ ํ† ์ดํ”„๋กœ์ ํŠธ์˜€๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ„๋‹จํ•œ Branching ์ „๋žต์ธ Github-flow๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ๊ฐ์ž์˜ ์ž‘์—…๋ฌผ์€ feature ๋ธŒ๋žœ์น˜๋ฅผ ๋งŒ๋“ค์–ด ๊ด€๋ฆฌํ–ˆ์œผ๋ฉฐ, ์™„์„ฑํ•œ ์ž‘์—…๋ฌผ์€ main ๋ธŒ๋žœ์น˜์— Squash Merge ์ „๋žต์„ ์‚ฌ์šฉํ•ด ํ•ฉ์ณค์Šต๋‹ˆ๋‹ค.
  • ์•„๋ž˜์™€ ๊ฐ™์€ ๊ทผ๊ฑฐ๋กœ Merge ์ „๋žต์€ Squash Merge ์ „๋žต์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ๊ฐ์ž ์ž‘์—…ํ•œ ๊ฒฐ๊ณผ๋ฌผ์˜ ์™„์„ฑ๋ณธ์ด main ๋ธŒ๋žœ์น˜์˜ ๊ด€์‹ฌ์‚ฌ์˜€๋˜ ์ 
    • PR์„ ๋‚ ๋ฆฌ๋Š” ๋‹จ์œ„๋ฅผ ์ž‘๊ฒŒ ํ•˜์ž๊ณ  ๋ฏธ๋ฆฌ ํ˜‘์˜ํ•œ ์ 
    • ๊ฐ์ž ์ž‘์—…๋ฌผ์˜ ํžˆ์Šคํ† ๋ฆฌ๋Š” main ๋ธŒ๋žœ์น˜์— ๋‚จ๊ธฐ๊ธฐ๋ณด๋‹ค๋Š” ๋กœ์ปฌ์— ๋‚จ๊ฒจ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ํŽธํ•˜๊ฒ ๋‹ค๊ณ  ํŒ๋‹จํ•œ ์ 

๐Ÿ’Œ ์„œ๋น„์Šค ์†Œ๊ฐœ ์˜์ƒ

https://www.youtube.com/watch?v=MHO3Fofvu3A


๐Ÿ“– ๊ธฐ์ˆ ์ ์ธ ์ด์Šˆ ๋ฐ ๊ฐœ๋ฐœ ๊ณผ์ •์„ ๊ฒช์œผ๋ฉฐ ์ •๋ฆฌํ•œ ๊ธ€

๐Ÿš€ ๊ธฐ์ˆ  ์Šคํƒ ์„ ์ • ์ด์œ 

  • Typescript
    • ์ปดํŒŒ์ผ ๋‹จ๊ณ„์—์„œ ํƒ€์ž… ์ •๋ณด์™€ ๊ด€๋ จ๋œ ์˜ค๋ฅ˜๋ฅผ ํฌ์ฐฉํ•  ์ˆ˜ ์žˆ์–ด, ๊ฐœ๋ฐœ ๊ฒฝํ—˜์— ์ข‹์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
  • styled-component
    • no className bugs & ์ฝ”๋“œ์— className ์—†์–ด ๊น”๋”ํ•ด๋ณด์ž…๋‹ˆ๋‹ค.
    • ํŠน์ • ์ปดํฌ๋„ŒํŠธ์™€ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์–ด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฝ๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.
  • redux / redux toolkit
    • ๊ฐ€์žฅ ๋„๋ฆฌ ์“ฐ์ด๊ณ  ์ •๋ณด๊ฐ€ ๋งŽ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
    • redux์— ๋น„ํ•ด ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๊ฐ€ ์ ๊ณ , redux-toolkit์—๋Š” ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜์กด์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’Œ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ & ๊ฐœ๋ฐœํ•˜๋ฉฐ ๋งŒ๋‚ฌ๋˜ ์ด์Šˆ

1. ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ณ‘๋ ฌ์  ๊ฐœ๋ฐœ ์ƒํ™ฉ์—์„œ์˜ ํ•ด๊ฒฐ๋ฐฉ์•ˆ - msw๋กœ ๊ฐœ๋ฐœ ์ธํ”„๋ผ ํ™•์ถฉ

  • msw๋ž€?
    • MSW(Mock Service Worker)๋Š” ๋ชจ์˜ ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ์‚ฌ์šฉํ•ด ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์„ ๊ฐ€๋กœ์ฑ„๋Š” API mocking ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
    • msw๋Š” ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ์‹ค์ œ api ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด, ๋„คํŠธ์›Œํฌ ๋‹จ์—์„œ ํ•ด๋‹น ์š”์ฒญ์„ ๊ฐ€๋กœ์ฑ„ ๋ฐฑ์—”๋“œ api์ธ ์ฒ™ ์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ๊ฐ€์งœ ๋ฐ์ดํ„ฐ(mock data)๋ฅผ ์‘๋‹ต์œผ๋กœ ๋ณด๋‚ด์ค๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ ๊ณ„๊ธฐ
    • ๋ฐฑ์—”๋“œ์˜ api๊ฐ€ ์™„์„ฑ๋˜์ง€ ์•Š์€ ๋ถ€๋ถ„์€ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์ฝ”๋“œ๋ฅผ ๋ฏธ๋ฆฌ ์ž‘์„ฑํ•ด๋‘๊ธฐ๊ฐ€ ์–ด๋ ค์šด๋ฐ, ๋ช…์„ธ๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์–ด๋„ ๋”๋ฏธ ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ๊ณ  ์ œ๊ฑฐํ•˜๋Š” ์ผ์ด ๊ฐ™์€ ์ผ์„ ์ค‘๋ณตํ•ด์„œ ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋Š๊ปด์กŒ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋„์ฐฉํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์œ„ํ•œ ๋กœ๋”ฉ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ ํ•˜๋Š”๋ฐ, ๋”๋ฏธ ๋ฐ์ดํ„ฐ๊ฐ€ ์†Œ์Šค์ฝ”๋“œ ๋‚ด๋ถ€์— ์žˆ์œผ๋ฉด ์‘๋‹ต์ด ์•„์ง ๋„์ฐฉํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ์ง„ํ–‰๋˜์–ด์•ผ ํ•˜๋Š” ๋กœ์ง์ด ์ œ๋Œ€๋กœ ์‹คํ–‰๋˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐฑ์—”๋“œ api ๊ฐœ๋ฐœ๊ณผ ํ”„๋ก ํŠธ UI ๊ฐœ๋ฐœ์„ ๋ณ‘๋ ฌ์ ์œผ๋กœ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ์ž„์‹œ๋กœ ๊ฐ€์งœ ์‘๋‹ต์„ ๋‚ด๋ ค์ฃผ๋Š” ๋ชจ์˜ ์„œ๋น„์Šค์›Œ์ปค๋ฅผ ๋„์ž…ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ ํ›„๊ธฐ
    • ์‚ฌ์‹ค ๊ฐ์‚ฌํ•˜๊ฒŒ๋„ ์šฐ๋ฆฌ ํŒ€์˜ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ ์†๋„๊ฐ€ ๋นจ๋ผ์„œ ์‚ฌ์šฉํ•  ์ผ์ด ๊ทธ๋ ‡๊ฒŒ ๋งŽ์ง€๋Š” ์•Š์•˜๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ดˆ๊ธฐ API๊ฐ€ ์™„์„ฑ๋˜์ง€ ์•Š๊ณ  ๋ช…์„ธ๊ฐ€ ๊ณ„์† ๋ฐ”๋€” ๋•Œ๋„ msw ๋•๋ถ„์— ์•ˆ์ •์ ์œผ๋กœ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค๊ณ  ๋Š๋ผ๋Š”๋ฐ์š”, ํŠนํžˆ๋‚˜ ๋ณ‘๋ ฌ์ ์œผ๋กœ UI ์ž‘์—…์ด๋‚˜ API ์—ฐ๊ฒฐ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•  ๋•Œ ๋งค์šฐ ์œ ์šฉํ–ˆ๊ณ  ๋•๋ถ„์— ๊ธธ์ง€ ์•Š์€ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์— ๋งž์ถฐ ์ž‘์—…์„ ๋งˆ๋ฌด๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

2. ํ† ํฐ ์ €์žฅ ์œ„์น˜ + ๊ด€๋ฆฌ + ์ž๋™๊ฐฑ์‹  + ์ธํ„ฐ์…‰ํ„ฐ

  • ํ˜„์žฌ ํ† ํฐ ๊ด€๋ฆฌ ๋ฐฉ๋ฒ• (accessToken + refreshToken)
    • ๋กœ๊ทธ์ธ์„ ํ•˜๋ฉด accessToken๊ณผ refreshToken์„ ๋ฐœ๊ธ‰๋ฐ›๊ณ , ๋‘˜ ๋‹ค ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•ฉ๋‹ˆ๋‹ค. (p2; ๊ฐœ์„ ํ•ด์•ผํ•  ์ ์ž…๋‹ˆ๋‹ค.) ์ด๋•Œ, expiryTime(ํ˜„ ์‹œ๊ฐ์œผ๋กœ๋ถ€ํ„ฐ 60๋ถ„ ๋’ค)๋„ ํ•จ๊ป˜ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค. accessToken์˜ ๋งŒ๋ฃŒ ์‹œ๊ฐ„์€ 60๋ถ„, refreshToken์€ 2์ฃผ์ž…๋‹ˆ๋‹ค.
    • ๋งŒ์•ฝ refreshToken์ด ์žˆ๋‹ค๋ฉด ๋งŒ๋ฃŒ 1๋ถ„ ์ „(59๋ถ„ ๊ฒฝ๊ณผ)์— /auth/refresh ๋กœ ํ† ํฐ ๋ฆฌํ”„๋ ˆ์‹œ ์š”์ฒญ์„ ํ†ตํ•ด accessToken์„ ์žฌ๋ฐœ๊ธ‰ ๋ฐ›์•„ ๋กœ๊ทธ์ธ์„ ์—ฐ์žฅํ•ฉ๋‹ˆ๋‹ค. (๋งŒ๋ฃŒ 1๋ถ„์ „ ๊ฐ์ง€๋Š” setTimeout ์ด์šฉ, ๊ธฐ์ค€์€ ๋กœ๊ทธ์ธํ•  ๋•Œ ๋ฐ›์•˜๋˜ expiryTime ์ž…๋‹ˆ๋‹ค.)
    • ์ด ๋•Œ, refreshToken๋„ ์žฌ๋ฐœ๊ธ‰ ๋ฐ›์•„ ์ƒˆ๋กœ ์ €์žฅํ•˜๋ฉฐ expiryTime๋„ 1์‹œ๊ฐ„ ๋’ค๋กœ ๊ฐ’์„ ๋ฐ”๊ฟ”์ค๋‹ˆ๋‹ค.
    • ํ˜น์‹œ๋‚˜ accessToken์ด ๋งŒ๋ฃŒ๋œ ์ƒํƒœ์—์„œ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฒฝ์šฐ (๊ธ€ ์ž‘์„ฑ ์ค‘์— ์•ก์„ธ์Šค ํ† ํฐ์ด ๋งŒ๋ฃŒ๋œ ๊ฒƒ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ) axios interceptor๋กœ ์š”์ฒญ์„ ๊ฐ€๋กœ์ฑ„ ํ† ํฐ ๊ฐฑ์‹  ํ›„ ์žฌ์‹œ๋„, 401 ์—๋Ÿฌ ์‘๋‹ต์„ ์œ ์ €์—๊ฒŒ ์ฃผ์ง€ ์•Š๊ณ  ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋†’์ด๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํด๋ผ์ด์–ธํŠธ์— ์™„๋ฒฝํžˆ ์•ˆ์ „ํ•œ ๊ณต๊ฐ„์€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ, ์ง€๊ธˆ์ฒ˜๋Ÿผ ์Šคํ† ๋ฆฌ์ง€ ๊ฐ™์€ ๊ณต๊ฐœ์ (?) ๊ณต๊ฐ„์— ํ† ํฐ ๋‘ ๊ฐœ๊ฐ€ ์žˆ๋Š” ๊ฒƒ์€ ์œ„ํ—˜ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ๋Š” refreshToken๊ฐ€ ๊ฐˆ์ทจ๋˜์—ˆ์„ ๋•Œ๊ฐ€ ๋” ํฐ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•ด, refresh ์š”์ฒญ์—์„œ accessToken๊ณผ ๋”๋ถˆ์–ด refreshToken๊นŒ์ง€ ๊ฐฑ์‹ ํ•ด์ค๋‹ˆ๋‹ค. ์•„์ง ์ˆ˜์ •ํ•˜์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ ์ถ”ํ›„์— ์ฟ ํ‚ค์— ํ† ํฐ๋“ค์„ ์ €์žฅํ•˜๊ณ  & http only๋ฅผ ๊ฑธ์–ด๋†” js๊ฐ€ ์ฟ ํ‚ค ์ ‘๊ทผ ๋ชปํ•˜๊ฒŒ ํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ, ๊ทธ๋ ‡๋‹ค๋ฉด ๋กœ๊ทธ์ธ ์œ ๋ฌด๋Š” ์–ด๋–ป๊ฒŒ ํŒ๋ณ„ํ•ด์•ผํ• ์ง€ ๊ณ ๋ฏผ ์ค‘์— ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ™

3. ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ

  • ๋ฐฐํฌ ํ›„ QA๋ฅผ ํ•˜๋Š” ๋„์ค‘ ๊ฐ‘์ž๊ธฐ ์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŽ˜์ด์ง€๊ฐ€ ๋ณด์ด์ง€ ์•Š์•˜๋˜ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ •๊ทœํ‘œํ˜„์‹ ์ค‘ lookbehind ๋ฌธ๋ฒ•์ด ์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ฌธ๋ฒ•์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— main.js๋ฅผ ๋งŒ๋“ค์–ด๋‚ด์ง€ ๋ชปํ•ด ๋นˆ ํ™”๋ฉด๋งŒ ๋ณด์˜€๋˜ ๊ฒƒ์ด์—ˆ๋Š”๋ฐ์š”,
  • ์ฝ”๋“œ ์ˆ˜์ • ์ƒ์œผ๋กœ๋Š” ์ž‘์€ ๋ถ€๋ถ„์ด์—ˆ์ง€๋งŒ ๋””๋ฒ„๊น…์„ ํ•˜๋ฉด์„œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ…Œ์ŠคํŠธํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์˜ ์ค‘์š”ํ•˜๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋„ค์š”..! ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋˜๋Š” ํ™˜๊ฒฝ์ด๋‹ˆ๋งŒํผ ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์— ๋Œ€ํ•ด, ๋ชจ๋“  ์ฐจ์ด์™€ ์†์„ฑ์„ ์™ธ์šฐ์ง„ ๋ชปํ•˜๋”๋ผ๋„ ๋ฌธ์ œ๋ฅผ ์ธ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ์ž์„ธ + ์‚ฌ์ „์— ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ์ง€ ์•Š๊ฒŒ ๋Œ€๋น„ํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.

4. ์†Œ์…œ๋กœ๊ทธ์ธ ๋ฐ ํšŒ์›๊ฐ€์ž…

  • ๋จผ์ € ํ˜„์žฌ์˜ ์†Œ์…œ๋กœ๊ทธ์ธ ํ”Œ๋กœ์šฐ๋ฅผ ์ •๋ฆฌํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ํ˜„์žฌ ์†Œ์…œ๋กœ๊ทธ์ธ ํ”Œ๋กœ์šฐ ์ •๋ฆฌ
    • ์นด์นด์˜ค ๋กœ๊ทธ์ธ
    1. ์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธ ์‹œ๋„
    2. ํ”„๋ก ํŠธ์—์„œ ์œ ์ €๋ฅผ redirect ํŽ˜์ด์ง€ (/login/kakao)๋กœ ์ด๋™์‹œํ‚ด
    3. redirectํŽ˜์ด์ง€ url์—๋Š” ์นด์นด์˜ค๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ ์ธ๊ฐ€ ์ฝ”๋“œ๊ฐ€ ์ฟผ๋ฆฌ๋กœ ๋‹ด๊ฒจ์žˆ์Œ. ์ด๋ฅผ ๋ฐฑ์—”๋“œ์— ์ „๋‹ฌ
    4. ๋ฐฑ์—”๋“œ์—์„œ๋Š” ์ „๋‹ฌ๋ฐ›์€ ์ธ๊ฐ€์ฝ”๋“œ๋ฅผ ์นด์นด์˜ค์— ๋ณด๋‚ด๊ณ  ํ† ํฐ(์นด์นด์˜ค)์„ ๋ฐ›์•„์˜ด
    5. ๋ฐ›์•„์˜จ ์นด์นด์˜ค ํ† ํฐ๋กœ ์™€ํ”Œ๋งˆ์ผ“ ์ž์ฒด ํ† ํฐ ์ƒ์„ฑ
    6. ํ”„๋ก ํŠธ์—์„œ ์ž์ฒด ํ† ํฐ์„ ๋ฐ›์•„์™€ ๋ณด๊ด€ + ๋กœ๊ทธ์ธ ์ฒ˜๋ฆฌ
    • ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ
    1. ๊ธฐ๋ณธ์ ์ธ ํ˜•ํƒœ๋Š” ์นด์นด์˜ค ๋กœ๊ทธ์ธ๊ณผ ๊ฐ™๊ณ , ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ react-google-login ์‚ฌ์šฉ
    2. ์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธ ์‹œ๋„ํ•˜๋ฉด ๊ตฌ๊ธ€ ๊ณ„์ • ๋กœ๊ทธ์ธ ํ™”๋ฉด์œผ๋กœ ์ด๋™
    3. ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ•˜๋ฉด ์‘๋‹ต์œผ๋กœ ์œ ์ €์˜ ์ด๋ฉ”์ผ ๋“ฑ ๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•˜๋Š” ์œ ์ € ์ •๋ณด๋ฅผ ๋ฐ›์•„์˜ด
    4. ๋ฐฑ์—”๋“œ์— ์ด๋ฉ”์ผ ์ „๋‹ฌํ•˜์—ฌ ๊ฐ€์ž…ํ•œ ์ ์ด ์žˆ๋Š” ์œ ์ €๋ผ๋ฉด accessToken, refreshToken์„ ๋ฐ›์•„ ๋กœ๊ทธ์ธ ์ฒ˜๋ฆฌ, ์‹ ๊ทœ ์œ ์ €๋ผ๋ฉด /signup ํŽ˜์ด์ง€๋กœ ์ด๋™
  • ์ฃผ์š” ์ด์Šˆ

    • ์†Œ์…œ๋กœ๊ทธ์ธ ์œ ์ €์™€ ์ผ๋ฐ˜ ๋กœ๊ทธ์ธ ์œ ์ €์˜ ํšŒ์›๊ฐ€์ž… ํ”„๋กœ์„ธ์Šค๋ฅผ ํ†ต์ผํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?
    • ์ผ๋ฐ˜ ์œ ์ €๋Š” ์ด๋ฉ”์ผ ์ธ์ฆ๊ณผ ๋น„๋ฐ€๋ฒˆํ˜ธ ์ž…๋ ฅ์ด ํ•„์š”ํ•œ ๋ฐ˜๋ฉด, ์†Œ์…œ ์œ ์ €๋Š” ํ•„์š” ์—†๋‹ค. ๋‚˜๋จธ์ง€ ํ”„๋กœ์„ธ์Šค๋Š” ๋™์ผ
  • ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

    • ์†Œ์…œ ์œ ์ €์˜ ๊ฒฝ์šฐ ์ด๋ฉ”์ผ, ๋น„๋ฐ€๋ฒˆํ˜ธ input ๋ฐ•์Šค๋ฅผ ์ด๋ฏธ ์ž…๋ ฅ๋œ ๊ฒƒ์œผ๋กœ, read only๋กœ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. (๋น„๋ฐ€๋ฒˆํ˜ธ๋Š” ๋‚œ์ˆ˜๋กœ ์ง€์ •)
    • ์†Œ์…œ๋กœ๊ทธ์ธ ์œ ์ €์˜ ๊ฒฝ์šฐ ๋“ฑ๋ก๋œ ์œ ์ € ์ •๋ณด๊ฐ€ ์—†์„ ๊ฒฝ์šฐ ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€๋กœ navigate ์‹œ์ผœ์ฃผ๋ฉด์„œ useNavigate์˜ state ์ „๋‹ฌ ๊ธฐ๋Šฅ์œผ๋กœ ์ด๋ฉ”์ผ ์ฃผ์†Œ, ์†Œ์…œ๋กœ๊ทธ์ธ ์œ ์ €๋ผ๋Š” ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•ด์ค๋‹ˆ๋‹ค. ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€์—์„œ๋Š” useLocation์„ ์ด์šฉํ•ด ๊ฐ’์„ ๋ฐ›์•„ ์ด๋ฉ”์ผ์„ ๋ฏธ๋ฆฌ ์ž…๋ ฅํ•ด์ค๋‹ˆ๋‹ค.

5. ์†Œ์…œ ๋กœ๊ทธ์ธ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ / ๋ฐฑ์—”๋“œ์˜ ์—ญํ•  ๋ถ„๋‹ด์ด ์• ๋งคํ–ˆ๋˜ ๋ถ€๋ถ„ ์–ด๋–ป๊ฒŒ ์ •๋ฆฌํ–ˆ๋Š”์ง€

  • ํšŒ์›๊ฐ€์ž…์„ ๊ตฌํ˜„ํ•˜๋˜ ์ž…์žฅ์—์„œ ์ฒ˜์Œ์—๋Š” ๋‹ค๋ฅธ ์ž‘์—…๊ณผ์˜ ์—ฐ๊ฒฐ์ด ์ด๋ฉ”์ผ ์ธ์ฆ ๋ฟ์ด๋ผ ์ƒ๊ฐํ•˜๊ณ  ๋”ฐ๋กœ ์ธ์ฆ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ž‘์—… ๋„์ค‘์— ์†Œ์…œ ๋กœ๊ทธ์ธ์˜ ๊ฒฝ์šฐ์—๋„ ๋‹‰๋„ค์ž„๊ณผ ์œ„์น˜ ์ •๋ณด๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ํšŒ์›๊ฐ€์ž… ํ™”๋ฉด์œผ๋กœ ๋“ค์–ด์™€์•ผ ํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ์†Œ์…œ ๋กœ๊ทธ์ธ์„ ๋งก์•˜๋˜ ๋ฏผํ™๋‹˜๊ณผ ํ•จ๊ป˜ ํ”Œ๋กœ์šฐ๋ฅผ ์ •๋ฆฌํ•˜์˜€๋Š”๋ฐ์š”, ๊ทธ ๊ณผ์ •์—์„œ ๊ธฐ์กด์˜ ์ด๋ฉ”์ผ ์ธ์ฆ ๋ฐฉ์‹์„ ๋ณ„๋„์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๋Œ€์‹  ํšŒ์›๊ฐ€์ž…์ด๋ผ๋Š” ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€์—์„œ ํ•ด๊ฒฐํ•˜๋ฉด ๋”์šฑ ์ข‹๊ฒ ๋‹ค๋Š” ์˜๊ฒฌ์ด ๋‚˜์™”๊ณ , ์ด๋ฅผ ๋ฐฑ์—”๋“œ์—์„œ ํ•ด๋‹น ๋ถ€๋ถ„์„ ๋งก์€ ์ค€ํ˜•๋‹˜๊ป˜ ์ „๋‹ฌ๋“œ๋ ธ์Šต๋‹ˆ๋‹ค.
  • ํ”„๋ก ํŠธ์—”๋“œ ์ž…์žฅ์—์„œ๋Š” ๋น„์Šทํ•œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต์„ ๋ฐ›์œผ๋‹ˆ ๊ฐ„๋‹จํ•œ ์ž‘์—…์ด๋ผ ์ƒ๊ฐํ–ˆ์ง€๋งŒ, ์•Œ๊ณ  ๋ณด๋‹ˆ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” DB์— ํšŒ์› ์ •๋ณด๋ฅผ ๋“ฑ๋กํ•œ ํ›„ ์ด๋ฉ”์ผ ์ธ์ฆ์„ ๋‹ค๋ฃจ๋Š” ๊ธฐ์กด์˜ ๋กœ์ง์„ ๋งŽ์ด ์ˆ˜์ •ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ณด๋‹ค ์ž์„ธํ•œ ๋‚ด์šฉ์— ๋Œ€ํ•ด์„œ๋Š” ์ด ๊ฒŒ์‹œ๋ฌผ์— ์ž˜ ์„ค๋ช…๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์˜ ๋‹จ๊ณ„์—์„œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๋Š” ์ธ์›๋“ค ๊ฐ„์— ์ด์— ๋Œ€ํ•œ ํ•ฉ์˜๊ฐ€ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์œผ๋ฉด ์ž‘์—…์„ ๋‘ ๋ฒˆ(ํ˜น์€ ๊ทธ ์ด์ƒ) ํ•  ์ˆ˜ ์žˆ์Œ์„ ๋ชธ์†Œ ์ฒดํ—˜ํ•˜์˜€๊ณ , ์ดํ›„์—” ์ •๊ธฐ ํšŒ์˜์—์„œ ๊ตฌํ˜„๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ „์ฒด์ ์ธ ํ”Œ๋กœ์šฐ์— ๋Œ€ํ•œ ๊ตฌ์„ฑ์›๋“ค ๊ฐ์ž์˜ ์ƒ๊ฐ์„ ๊ณต์œ ํ•˜๊ณ ์ž ๋…ธ๋ ฅํ•˜๋ฉฐ ๋ณด๋‹ค ์›ํ™œํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค!

6. ํ˜‘์—… ๊ณผ์ •์—์„œ conflict๋ฅผ ์ค„์ด๊ณ ์ž ํ–ˆ๋˜ ์ž‘์—… ๋ฐฉ์‹์— ๋Œ€ํ•œ ์„ค๋ช…

  • ํŽ˜์ด์ง€๋ณ„๋กœ ์—ญํ• ์„ ๋ถ„๋‹ดํ•˜๊ณ  ํ•ด๋‹น ํŽ˜์ด์ง€ ๋‚ด์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ์ž‘์—…ํ•จ์œผ๋กœ์จ ๊ฒน์นจ๊ณผ conflict๋ฅผ ์ค„์ด๊ณ ์ž ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋ ‡๊ฒŒ ์ž‘์—…ํ•˜๋‹ค๋ณด๋‹ˆ ๊ธฐ๋Šฅ ํ˜น์€ ์Šคํƒ€์ผ์— ๋Œ€ํ•œ ํ†ต์ผ์„ฑ์ด ๋ถ€์กฑํ•˜์—ฌ ๋งˆ์ง€๋ง‰ ์ฃผ์— ๋‹ค๋“ฌ๋Š” ์ž‘์—…์„ (์ฃผ๋กœ ์˜ˆ์ง€๋‹˜๊ณผ ๋ฏผํ™๋‹˜์ด) ํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์ง€๋‹˜ ๋ฏผํ™๋‹˜ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค..ใ… ใ… 
  • ์ค‘๊ฐ„์ค‘๊ฐ„ ์ž‘์—…ํ•˜๋ฉฐ ์„œ๋กœ ๊ณต์œ ํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค(ex. ๋ฒ„ํŠผ, ๋ชจ๋‹ฌ ๋“ฑ)์€ ์ด๋ฅผ ์œ„ํ•œ ๋””๋ ‰ํ† ๋ฆฌ์— ์˜ฌ๋ ค๋‘๊ณ  pr ํ˜น์€ ์Šฌ๋ž™์ด๋‚˜ ์นดํ†ก ๋“ฑ์„ ํ†ตํ•ด ์•Œ๋ ค์ฃผ๋ฉฐ conflict๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

7. ์œ„์น˜ ์ •๋ณด api ์‚ฌ์šฉ๊ธฐ

  • ํด๋ก ํ•˜๋Š” ์„œ๋น„์Šค ๋Œ€์ƒ์ด ๋‹น๊ทผ๋งˆ์ผ“์ด๋‹ค๋ณด๋‹ˆ ๋‹น์‹  โ€˜๊ทผ์ฒ˜โ€™์— ์žˆ๋Š” ๊ฒŒ์‹œ๋ฌผ๋“ค๊ณผ ์ด์›ƒ๋“ค์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ์ด์šฉ์ž์˜ ์œ„์น˜ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•  ํ•„์š”๊ฐ€ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” โ€˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์žˆ๋Š” geolocation ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ฒ ๊ฑฐ๋‹ˆ..โ€™ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ,
  • ํšŒ์›๊ฐ€์ž… ํ˜น์€ ํ”„๋กœํ•„์—์„œ ์œ„์น˜๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ์œ ์ €์˜ ํ˜„์žฌ ์œ„์น˜๋ฅผ ๋ฐ›์•„์˜ค๋‹ˆ ๊ทธ ์œ„์น˜๊ฐ€ ์œ ์ €๊ฐ€ ์‹ค์ œ ์ƒํ™œํ•˜๋Š” ์œ„์น˜์™€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๊ฒ ๋‹ค๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ์–ด์š”. ๊ทธ๋ž˜์„œ ๊ธฐ์กด์— ๋‹ค๋ฅธ ์„œ๋น„์Šค๋“ค์„ ์‚ฌ์šฉํ–ˆ๋˜ ๊ฒฝํ—˜์„ ๋˜์งš์–ด๋ณด๋ฉฐ ํ•ด๋‹น ์„œ๋น„์Šค์— ๋‚˜์˜ ์œ„์น˜ ์ •๋ณด๋ฅผ ์–ด๋–ป๊ฒŒ ์ „๋‹ฌํ–ˆ๋Š”์ง€ ๋– ์˜ฌ๋ ค๋ณด๊ณ , ์ด์™€ ๊ด€๋ จ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ˜น์€ ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์—†๋‚˜ ์ฐพ์•„๋ณด์•˜๋Š”๋ฐ์š”, ๋‹คํ–‰ํžˆ daum postcode์—์„œ ์‚ฌ์šฉ์ž์˜ ์ฃผ์†Œ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์ด์™€ ๊ด€๋ จ๋œ ์œ„์น˜ ์ •๋ณด๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ฃผ๋Š” api๋ฅผ ์ฐพ์•„, ์ด๋ฅผ ์ด์šฉํ•˜์—ฌ ํšŒ์›๊ฐ€์ž… ๋ถ€๋ถ„์—์„œ ์œ ์ €์˜ ์œ„์น˜๋ฅผ string ํ˜•ํƒœ๋กœ ๋ฐ›์•„์™”์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ๊นŒ์ง„ ์ž˜ ๋˜์—ˆ๊ฒ ๊ฑฐ๋‹ˆ ์‹ถ์—ˆ๋Š”๋ฐ..22
  • ๋ฐฑ์—”๋“œ์—์„œ ์œ„์น˜ ์ •๋ณด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์ œ ๋™๋„ค ๋ฒ”์œ„๋ฅผ ์กฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด์„  string ํ˜•ํƒœ์˜ ์œ„์น˜ ์™ธ์—๋„ ์ขŒํ‘œ ์ •๋ณด๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์œ„์—์„œ ์‚ฌ์šฉํ•œ api์™ธ์— ์˜ˆ์ง€๋‹˜์˜ ๋งŽ์€(๊ฑฐ์˜ ์ „๋ถ€) ๋„์›€์„ ๋ฐ›์•„ ์นด์นด์˜ค maps api ๋ฅผ ํ†ตํ•ด string์œผ๋กœ ๋ฐ›์•„์˜จ ์œ„์น˜ ์ •๋ณด์˜ ์ขŒํ‘œ๋ฅผ ๊ตฌํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
  • api ๋‘ ๊ฐœ๋ฅผ ์ด์–ด์„œ ์‚ฌ์šฉํ•ด๋ณด๋Š” ๊ฒฝํ—˜์ด ์ฒ˜์Œ์ด์—ˆ๋Š”๋ฐ, ๊ทธ ๊ณผ์ •์—์„œ ํ˜ผ๋™์ด ์ƒ๊ธฐ์ง€ ์•Š๋„๋ก input๊ณผ output์˜ ํƒ€์ž…์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•˜๊ณ  ์œ„์น˜ ์ •๋ณด๊ฐ€ ์ฒ˜๋ฆฌ๋˜๋Š” ํ”Œ๋กœ์šฐ๋ฅผ ๊ณ ๋ฏผํ•˜๋Š” ๊ณผ์ •์ด ๊ฝค ์žฌ๋ฐŒ์—ˆ์Šต๋‹ˆ๋‹ค. ๋น„๋ก ์ขŒํ‘œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ์ฃผ์†Œ์™€ ๊ฐ™์ด ์•„์ง ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ•œ ๋ฌธ์ œ๋“ค๋„ ์žˆ์ง€๋งŒ, ๊ทธ๋ž˜๋„ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์œ ์ €์˜ ์ž…์žฅ๊ณผ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ธฐํš ๋ฐ ๊ฐœ๋ฐœ์ž์˜ ์ž…์žฅ์„ ์˜ค๊ฐ€๋ฉฐ ํ•„์š”ํ•œ api๋ฅผ ์ฐพ์•„๋ณด๊ณ  ์ ์šฉํ–ˆ๋˜ ๊ฒƒ์€ ์ข‹์€ ๊ฒฝํ—˜์ด ๋  ๊ฒƒ ๊ฐ™์•„์š”.

8. CI / CD, github actions, aws s3 cloudfront

  • ๊ธฐ๋ณธ์ ์ธ ํ”Œ๋กœ์šฐ

    • ์„œ๋น„์Šค(main) ๋ธŒ๋žœ์น˜ / ๊ฐœ๋ฐœ ๋ธŒ๋žœ์น˜์™€ ๋ฐฐํฌ ์‚ฌ์ดํŠธ์™€์˜ ์•ˆ์ •์ ์ธ ๋™๊ธฐํ™”, ์žฆ์€ merge ๋“ฑ์œผ๋กœ ๋ณต์žกํ•œ ์ƒํ™ฉ์ผ ๋•Œ ๋ถˆํ•„์š”ํ•œ ์‹ค์ˆ˜๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•˜์—ฌ github actions๋ฅผ ์ด์šฉํ•ด ๋ฐฐํฌ๋ฅผ ์ž๋™ํ™”.
    • ๋ฐฐํฌ์— ํ•„์š”ํ•œ AWS key ๋“ฑ์€ github secrets์— ๋ณด๊ด€ํ•˜๊ณ , workflowํŒŒ์ผ์—์„œ ์ด๋ฅผ ํ˜ธ์ถœํ•ด ์‚ฌ์šฉ
    • main ๋ธŒ๋žœ์น˜์— pr์ด closed(merge) ๋์„ ๋•Œ main.yml workflow ํŒŒ์ผ์ด ๋™์ž‘๋˜๋„๋ก ํ•จ
    • dev ๋ธŒ๋žœ์น˜์™€ ๋™๊ธฐํ™”๋œ dev ์‚ฌ์ดํŠธ๋„ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ์š”, dev ๋ธŒ๋žœ์น˜์— pr์ด closed(merge)๋˜์—ˆ์„ ๋•Œ๋Š” dev.yml์ด ๋™์ž‘
    • Cloudfront์˜ ๊ฒฝ์šฐ, ๋ฐฐํฌํ•˜๊ณ  24์‹œ๊ฐ„ ๋™์•ˆ์€ ์บ์‹œ๊ฐ€ ์œ ์ง€๋˜์–ด 24์‹œ๊ฐ„ ๋‚ด์— ์žฌ ๋ฐฐํฌ๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด ๋™๊ธฐํ™”๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋ฐ, ์ด ๊ฒฝ์šฐ์— ์บ์‹œ๋ฅผ ์ง€์šฐ๋Š” invalidation ์ž‘์—…๋„ aws ์ฝ˜์†”์—์„œ ํ•˜์ง€ ์•Š๊ณ  workflow ์Šคํฌ๋ฆฝํŠธ์— ํฌํ•จ์‹œ์ผœ ์ž๋™ํ™”
  • ๊ฒช์—ˆ๋˜ ๋ฌธ์ œ

    • ๋งค๋‰ด์–ผ๋Œ€๋กœ workflow ํŒŒ์ผ์„ ์„ธํŒ…ํ–ˆ๊ณ , ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๋‹ค๋ฅธ ๋ ˆํฌ์—์„œ๋„ ๋ฐฐํฌ ์ž๋™ํ™”์— ์„ฑ๊ณตํ–ˆ๋Š”๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์‹ค์ œ workflow๊ฐ€ ๋™์ž‘ํ–ˆ์„ ๋•Œ aws ์ธ์ฆ๊ณผ์ •์—์„œ ์—๋Ÿฌ๊ฐ€ ๋‚ฉ๋‹ˆ๋‹ค.
    • ์‚ฌ์‹ค ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ํ•œ๋™์•ˆ์€ ๋ณธ ๋ ˆํฌ๋ฅผ ํฌํฌํ•œ ๊ฐœ์ธ ๋ ˆํฌ์—์„œ ์ž‘์—…์„ ํ•œ ๋’ค ๋ณธ ๋ ˆํฌ๋กœ pr์„ ์˜ฌ๋ ธ๋Š”๋ฐ, ์ด๊ฒƒ์ด ์›์ธ
    • ์ด ๋•Œ ๋Œ์•„๊ฐ€๋Š” workflow ํŒŒ์ผ์€ origin ๋ ˆํฌ์˜ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ forked ๋ ˆํฌ ์†Œ์œ ์ด๊ธฐ ๋•Œ๋ฌธ. (์ฒ˜์Œ์—” origin ๋ ˆํฌ์˜ workflowํŒŒ์ผ์ด ์‹คํ–‰๋œ๋‹ค๊ณ  ์ฐฉ๊ฐ)
    • forked ๋ ˆํฌ๋Š” origin ๋ ˆํฌ์˜ secrets์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๊ฐ€ ๋‚ฉ๋‹ˆ๋‹ค.
  • ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

    • ์ดํ›„์—๋Š” origin ๋ ˆํฌ์— ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•ด ์ž‘์—…ํ–ˆ๊ณ , ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

9. ๋ฐ˜์‘ํ˜• UI

  • ๋ชจ๋ฐ”์ผ ๋ทฐ / pc ๋ทฐ (breakpoint: 712px)
  • ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ฅผ ์งค ๋•Œ ๋ชจ๋ฐ”์ผ ๋ทฐ๋ฅผ ์—ผ๋‘์— ๋‘๊ณ  ์ž‘์—…ํ•œ๋‹ค๋ฉด ์ƒ๊ฐ๋งŒํผ ๋ณต์žกํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ํ•˜์ง€๋งŒ ๋””ํ…Œ์ผ, ๋งˆ๊ฐ ์ž‘์—…์— ์†Œ์š”๋˜๋Š” ๋…ธ๋ ฅ์ด ๋‘ ๋ฐฐ ์ด์ƒ์œผ๋กœ ๋Š˜ ์ˆ˜ ์žˆ์–ด์š”..(!)
  • ๊ตฌ์กฐ๊ฐ€ ๋ˆˆ์— ๋„๊ฒŒ ๋‹ค๋ฅธ ๋ชจ๋ฐ”์ผ๋ทฐ / ์›น๋ทฐ๋ผ๋ฉด ๊ฐ๊ฐ ์š”์†Œ๋“ค์— ๋Œ€ํ•œ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋„ ์ข‹์ง€๋งŒ ์•„์˜ˆ DesktopWrapper * MobileWrapper๋ฅผ ๋‘ฌ์„œ ๋ถ„๋ฆฌํ•  ์ˆ˜๋„ ์žˆ์ง€ ์•Š์„๊นŒ์š”?

๐ŸŽ‰ ๊ฐ์ž ์†Œ๊ฐ ๋ฐ ์„œ๋กœ์—๊ฒŒ..

  • ์˜ˆ์ง€: ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด ์ง€๋‚˜๋‹ค๋‹ˆ ๋ฏฟ์„ ์ˆ˜ ์—†์–ด์š” ๋•ƒ์‰ฌ.. ์‚ฌ์‹ค ์„œ๋น„์Šค ํ•˜๋‚˜๋ฅผ ํ†ต์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ณธ๋‹ค๋Š” ๊ฒŒ ์‰ฌ์›Œ๋ณด์ด์ง„ ์•Š์•˜์–ด์„œ, ์ฒ˜์Œ์—๋Š” ์ •๋ง ๋งŽ์ด ๊ฑฑ์ •ํ–ˆ๋Š”๋ฐ ํ˜‘์—…์€ ์ง„์งœ ๋†€๋ผ์šด ๊ฒƒ์ธ ๊ฒƒ ๊ฐ™์•„์š”..! ํ˜ผ์ž์„œ๋Š” ์ ˆ๋Œ€ ๋ชปํ•ด๋‚ผ ์–‘ ์ด์—ˆ๋Š”๋ฐ ๋จธ๋ฆฌ ๋งž๋Œ€๊ณ  ๊ฐ™์ด ๊ณ ๋ฏผํ•˜๋‹ค๋ณด๋‹ˆ๊นŒ ํ•˜๋‚˜ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์ง€๋”๋ผ๊ณ ์š”. ์‚ฌ์‹ค ์•„์ง๋„ ๋ถ€์กฑํ•œ๊ฒŒ ๋งŽ์ง€๋งŒ ์‰ฝ๊ฒŒ ์–ป์ง€๋ชปํ•  ์ •๋ง ๊ฐ’์ง„ ๊ฒฝํ—˜ ๋งŽ์ด ํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ผ๋‹จ '์–ด.. ํ•ด๋ณผ๊ฒŒ์š”'ํ•˜๋”๋‹ˆ ์–ผ๋งˆ ์•ˆ์ง€๋‚˜์„œ ๋‹ค ํ•ด๋ฒ„๋ฆฌ๋Š” ๋š๋”ฑ์ขŒ ๋ฏผํ™๋‹˜.. ์‚ด์ธ์ ์ธ ์Šค์ผ€์ค„์—๋„ ์ €๊ฑธ ํ•ด๋‚ธ๋‹ค๊ณ ..?์‹ถ์€ ํ—ค๋ฅด๋ฏธ์˜จ๋Š ์ฐฝ๋ฏผ๋‹˜.. ์šฐ๋ฆฌ ์„œ๋น„์Šค๋ฅผ 180๋„ ๋‹ฌ๋ผ์ง€๊ฒŒ ํ•ด์ค€ ์ตœ๊ณ ๋‹คํ˜œ๋‹˜, ๊ทธ๋ฆฌ๊ณ  ํญ๋ฐœ์ ์ธ ๊ฐœ๋ฐœ์†๋„๋กœ API ๊ฑฑ์ •์€ ํ•œ ๋ฒˆ๋„ ํ•˜์ง€ ์•Š๊ฒŒ ํ•ด์ฃผ์‹  3ํŒ€ ๋ฐฑ์—”๋“œ ๋ถ„๋“ค ์ •๋ง ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์ด๋ฒˆ ํ˜‘์—…์—์„œ ์ข‹์€ ์—๋„ˆ์ง€ ๋ฐ›์•„์„œ ๋„ˆ๋ฌด ํ–‰๋ณตํ•ฉ๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ํ™”์ดํŒ…!!!

  • ๋ฏผํ™: ์‚ฌ์‹ค ์ €ํฌ๊ฐ€ ์ด๊ฒƒ์ €๊ฒƒ ๊ตฌํ˜„ํ•ด์•ผ ํ•  ํŽ˜์ด์ง€, ๊ธฐ๋Šฅ๋“ค์ด ๋งŽ์•„์„œ ๋‹ค ๊ผผ๊ผผํ•˜๊ฒŒ ์‹ ๊ฒฝ์“ฐ๋Š” ๊ฒƒ์ด ์‰ฝ์ง€ ์•Š์„๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ •๋ง ์‹ค์ œ ์„œ๋น„์Šค ์˜คํ”ˆํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋นˆํ‹ˆ ์—†๋Š” ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋ ค๊ณ  ๋‹ค๋“ค ์—ด์„ ์˜ฌ๋ฆฌ๋Š” ๋ชจ์Šต์ด ๋„ˆ๋ฌด ๋ฉ‹์žˆ์—ˆ๊ณ  โ€˜๋ญ˜ ํ•ด๋„ ๋  ์‚ฌ๋žŒ๋“คโ€™์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋„ค์š”.. ์˜ˆ์ง€๋‹˜.. ๋ผˆ๋Œ€๋ฅผ ๋„ˆ๋ฌด ์ž˜ ์žก์•„์ฃผ์…”์„œ ํŽธํ•˜๊ฒŒ ์ฝ”๋“œ ์งฐ๋„ค์š”.. ์ฐฝ๋ฏผ๋‹˜.. ๋ชธ์ด ๋‘ ๊ฐœ์ธ ๊ฒƒ์ฒ˜๋Ÿผ ์‚ด์•„์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ด์š”.. ๋ฐฑ์—”๋“œ ๋ถ„๋“ค๊ป˜๋„ ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•œ๊ฒŒ ์ •๋ง ๋น ๋ฅด๊ฒŒ ๋นˆํ‹ˆ์—†์ด ์ž‘์—…ํ•ด์ฃผ์…”์„œ ์ž‘์—…ํ•˜๊ธฐ ๋„ˆ๋ฌด ์ˆ˜์›”ํ–ˆ์Šต๋‹ˆ๋‹ค.. ๋‹คํ˜œ๋‹˜๋„ ํ•ฉ๋ฅ˜ ์ „๊ณผ ํ›„ ํ€„๋ฆฌํ‹ฐ๊ฐ€ ํ™• ์ฐจ์ด๋‚˜๋Š”๊ฑธ ๋ณด๊ณ  ์ƒ๋‹นํ•œ ์กด์žฌ๊ฐ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.. ๋„ˆ๋ฌด ๋งŽ์ด ๋ฐฐ์šฐ๊ณ  ์ข‹์€ ์—๋„ˆ์ง€๋ฅผ ์–ป์–ด์„œ ๊ธฐ๋ถ„์ด ์ข‹์Šต๋‹ˆ๋‹คโ€ฆ!!!

  • ์ฐฝ๋ฏผ: ๐Ÿ™‡โ€โ™‚๏ธ๋จผ์ € ํŒ€์›๋ถ„๋“ค๊ป˜ ์ ˆ ํ•œ ๋ฒˆ ํ•˜๊ณ  ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค๐Ÿ™‡โ€โ™‚๏ธ ์ธํ„ดํ•˜๋ฉฐ ํ† ์ดํ”Œ์ ์„ ํ•˜๋‹ค๋ณด๋‹ˆ ํŒ€์›๋ถ„๋“ค, ํŠนํžˆ FE ์˜ˆ์ง€๋‹˜๊ณผ ๋ฏผํ™๋‹˜์œผ๋กœ๋ถ€ํ„ฐ ์ •๋ง ๋งŽ์€ ๋„์›€ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹คใ… ใ… ใ…  ๋ฐฑ์—”๋“œ ๋ถ„๋“ค ๋ฐ ๋””์ž์ด๋„ˆ ๋‹คํ˜œ๋‹˜๊ป˜๋„ ์—„์ฒญ ๋งŽ์€ ๋„์›€ ๋ฐ›์•˜์–ด์š”,, ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๋””์ž์ธ ๋น„ํฌ์• ํ”„ํ„ฐ ์‚ฌ์ง„์„ ์ฒจ๋ถ€ํ•˜๊ณ  ์‹ถ์€๋ฐ ๋ถ€๋„๋Ÿฌ์›Œ์„œ ๋ชป ํ•˜๊ฒ ์Šต๋‹ˆ๋‹คใ…‹ใ…‹ใ…‹ ๊ทธ๋™์•ˆ์€ ํ˜ผ์ž ์ฝ”๋”ฉ์„ ํ•ด์™”๋‹ค๋ณด๋‹ˆ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ํ˜‘์—…์„ ๊ฒฝํ—˜ํ•ด๋ณธ ๊ฒƒ์ด ์ฒ˜์Œ์ด์—ˆ๋Š”๋ฐ, ํ˜‘์—…์˜ ์ˆœ๊ธฐ๋Šฅ์„ ๋ชธ์†Œ ์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ”Œ์ ์„ ํ•˜๋Š” ๋„์ค‘ ํ•จ๊ป˜ ์ผํ•˜๋Š” ๊ฑด ์ปดํ“จํ„ฐ ํ™”๋ฉด ๋„ˆ๋จธ์˜ ์‚ฌ๋žŒ๋“ค์ด๋ผ๋Š” ๊ฑธ ๋Š๋ผ๋Š” ์ˆœ๊ฐ„์ด ๊ฝค ๋งŽ์•˜๊ณ , ์นญ์ฐฌ์„ ์—ฌ๋Ÿฌ๋ฒˆ ํ–ˆ๋Š”๋ฐ๋„ ๋ถ€์กฑํ•  ๋งŒํผ ๋Œ€๋‹จํ•œ ํŒ€์›๋ถ„๋“ค ๋งŒ๋‚˜์„œ ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค..! ํ”Œ์  ๋๋‚˜๊ณ  ๋‚˜๋ฉด ์กฐ๊ธˆ ํ—ˆ์ „ํ•  ๊ฒƒ ๊ฐ™๋„ค์š”..

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •