๐Ÿ“ธ photoday project ํšŒ๊ณ 

์œ ์•„ํ˜„ยท2023๋…„ 5์›” 23์ผ
1

๊ธฐ๋ก

๋ชฉ๋ก ๋ณด๊ธฐ
29/29
post-thumbnail

๐ŸŒฑ Intro

์ด ํฌ์ŠคํŒ…์€ ๋ถ€ํŠธ์บ ํ”„ ์ˆ˜๋ฃŒ๋ฅผ ์•ž๋‘” ์‹œ์ ์—์„œ ๋งˆ์ง€๋ง‰์œผ๋กœ ์ง„ํ–‰๋˜๋Š” ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ ์ด๋‹ค. ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ ํ•˜๊ธฐ ์ „์— Stack Overflow ์‚ฌ์ดํŠธ๋ฅผ ํด๋ก ํ•˜๋Š” free project ๋ฅผ ํ–ˆ์—ˆ๋‹ค. ์ž‘๋…„ 10์›”๋ถ€ํ„ฐ 1์›” ์ดˆ๊นŒ์ง€ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ๋ฐ”๋กœ ํด๋ก  ์ฝ”๋”ฉ์„ ์ง„ํ–‰ํ•˜๋Š”๋ฐ 3-4๊ฐœ์›”์˜ ์ง€์‹์œผ๋กœ ๋ฌด์–ผ ํ•  ์ˆ˜ ์žˆ์„๊นŒ๋ผ๋Š” ์ƒ๊ฐ์ด ๊ฐ€์žฅ ๋งŽ์ด ๋“ค์—ˆ๋‹ค. ์ด๋Ÿฐ ์ƒ๊ฐ์— ๊ฐ€์žฅ ํฐ ์˜ํ–ฅ์„ ์ค€ ๊ฒƒ์€ ๋‚˜์— ๋Œ€ํ•œ ์ž์‹ ๊ฐ๊ณผ ๋ฌด์ง€์—์„œ ๋‚˜์™”๋‹ค. ์ž์‹ ์ด ๋„ˆ๋ฌด ์—†์—ˆ๊ณ , ํ•˜๋ฃจ ๋ฐฐ์›Œ ๋‹ค์Œ ๋‚ ์— ์ ์šฉํ•˜๋ ค๊ณ  ํ–ˆ๋˜ ๊ฒƒ๋“ค์€ ๊ธฐ์–ต์ด ์•ˆ ๋‚˜๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ๋ž˜๋„ ํฌ๊ธฐํ•˜์ง€ ์•Š๊ณ  ํ–ˆ๋˜ ์ด์œ ๋Š” ๋‚˜์˜ ์ด๊ธฐ์‹ฌ๊ณผ ๊ณ ์ง‘์—์„œ ๋‚˜์™”๋‹ค. ์ˆ˜๋ฃŒ๊ณ  ๋‚˜๋ฐœ์ด๊ณ  ๊ฐœ๋ฐœ์ด ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค! ๋‚˜๋„ ์ข‹์€ ์„œ๋น„์Šค๋ฅผ ์ฐฝ์ถœํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. ์‹ค๋ ฅ์€ ๋ชจ์ž๋ฅด์ง€๋งŒ ํ•˜๊ณ  ์‹ถ์€ ์ผ์€ ๋งŽ์•˜๊ณ , ์กฐ๊ธˆ๋งŒ ๋” ์ฐธ๊ณ  ์—ฌ๋Ÿฌ ๋ฒˆ ํ•˜๋‹ค๋ณด๋ฉด ๋˜์ง€ ์•Š๊ฒ ๋ƒ๋ฉฐ ํ•˜๊ณ  ์‹ถ์œผ๋ฉด ๋” ์—ด์‹ฌํžˆ ํ•ด ๋ณด์ž๊ณ ! ๋ชจ์ž๋ฅด๋‹ค๊ณ  ์ž์‹ ์„ ๊ฐ‰์•„๋จน๋Š” ์ผ์€ ๊ทธ๋งŒ ๋‘์—ˆ๋‹ค!

์•…์œผ๋กœ ๊นก์œผ๋กœ ํ•˜๋Š” ๊ฑฐ์•ผ~~~




๐Ÿช„ photoday ๊ธฐํš ๋ฐ ๋‚ด์šฉ ๊ตฌ์„ฑ

ํŒ€์— ๋„์›€๋˜๋Š” ํŒ€์›์ด ๋˜์ž๋Š” ๋งˆ์Œ์ด ์ œ์ผ ์ปธ๋‹ค. ๋˜ ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ๊ฒƒ๋„ ํ•ด ๋ณด์ž๋ผ๋Š” ๋„์ „ ์˜์‹์ด ๊ฐ•ํ–ˆ๋‹ค!
์ œ๋Œ€๋กœ ํ•ด ๋ณด๊ณ  ์‹ถ์–ด์„œ ์ดˆ๊ธฐ์— ์•ž์žฅ ์„œ์„œ ๊ณ„ํš์„ ์งฐ๊ณ , ์ค€๋น„ํ–ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ ๋…ธ์…˜ ์ƒ์„ฑ
  • ํ”„๋กœ์ ํŠธ ์บ˜๋ฆฐ๋” ์ •๋ฆฌ
  • ํšŒ์˜๋ก ํ…œํ”Œ๋ฆฟ ์ƒ์„ฑ
  • FE ํšŒ์˜ ๋•Œ ์ง„ํ–‰ํ•  ๋ชฉ๋ก ์ •๋ฆฌ(๊ธฐ์ˆ  ์Šคํƒ, ์•„์ด๋””์–ด, ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ)
  • Github ์ดˆ๊ธฐ ์„ธํŒ…
  • Github ์นธ๋ฐ˜ ๋ณด๋“œ ์„ค์ •
  • Issue, PR ํ…œํ”Œ๋ฆฟ ์„ค์ •
  • ์ปจ๋ฒค์…˜ (git flow, commit message ๋“ฑ) ์ƒ๊ฐํ•ด ๋‘๊ธฐ

์ดˆ๊ธฐ์— ๋‚ด๊ฐ€ ํ–ˆ๋˜ ์ผ์ด๋‹ค ๊ธฐ์–ต ๋‚˜๋Š” ๊ฒŒ ์ด ์ •๋„๊ฐ€ ๋... ๐Ÿ˜…

ํ”„๋กœ์ ํŠธ ์•„์ด๋””์–ด ๋ธŒ๋ ˆ์ธ ์Šคํ† ๋ฐ, ๊ธฐ์ˆ  ์Šคํƒ, ๊ฐœ๋ฐœ ํ™˜๊ฒฝ

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

  • yarn + TypeScript + Vite ์‚ฌ์šฉ
  • Styled-Component ์‚ฌ์šฉ
    • Component ํŒŒ์ผ๋ช… ๋’ค์— .styles ์ถ”๊ฐ€ํ•˜์—ฌ import ํ›„ ์‚ฌ์šฉ
    • .styles ํŒŒ์ผ์˜ styled-component์ธ ๊ฒฝ์šฐ ๋„ค์ด๋ฐ์€ style ์•ฝ์ž S_ + pascal case ์‚ฌ์šฉ
  • eslint + prettier ์‚ฌ์šฉ
  • React Router ์‚ฌ์šฉ
  • Axios ์‚ฌ์šฉ
  • Redux-tookit && React Context API ์‚ฌ์šฉ
  • Github Action ์ž๋™ ๋ฐฐํฌ + FrontCloud, Route53, S3 ์‚ฌ์šฉ

๐Ÿ“ธ photoday | ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€ ๊ณต์œ  ์›น ์„œ๋น„์Šค

FE ๋ผ๋ฆฌ ๋ธŒ๋ ˆ์ธ ์Šคํ† ๋ฐ์œผ๋กœ ์•„์ด๋””์–ด ํšŒ์˜๋ฅผ ํ–ˆ์„ ๋•Œ ํšŒ์˜๋ก์„ ์ž‘์„ฑํ–ˆ๋‹ค. ํšŒ์˜๋ก์„ ๋ณด๋ฉด์„œ ํ”„๋กœ์ ํŠธ ์ฒซ ๋‚ ์— ํŒ€ ๋นŒ๋”ฉ์„ ์œ„ํ•ด ์•„์ด๋””์–ด ์„ ์ •์„ ์ œ์ผ ์ฒ˜์Œ์œผ๋กœ ํ–ˆ๋‹ค. ์—ฌ๋Ÿฌ ํ›„๋ณด๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ ์˜ค๋Š˜์˜ ์‚ฌ์ง„ ์ด๋ž€ ์•„์ด๋””์–ด๊ฐ€ ์ฑ„ํƒ ๋˜์—ˆ๋‹ค. ๋ฐฑ์—”๋“œ ์ธก์—์„œ ์ด๋ฏธ์ง€ ๊ด€๋ จ ๊ธฐ๋Šฅ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค๊ณ  ํ•˜์˜€๊ณ , ์šฐ๋ฆฌ๋„ ํ•ด๋‹น ์•„์ด๋””์–ด์— ๋Œ€ํ•ด ๊ธ์ •์ ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

  • ํ”„๋กœ์ ํŠธ๋ช…: photoday
  • ์ง์ ‘ ์ฐ์€ ์‚ฌ์ง„๋“ค์„ ๊ณต์œ ํ•˜๊ณ , ์ €์ž‘๊ถŒ ์—†์ด ์‚ฌ์ง„์„ ๋ฌด๋ฃŒ๋กœ ๋‹ค์šด๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ

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

์ €์ž‘๊ถŒ ๋ถ€๋ถ„์„ ์–ด๋–ป๊ฒŒ ํ• ๊นŒ ํ•˜๋‹ค๊ฐ€ ๊ฐ€์ž…ํ•  ๋•Œ ์ €์ž‘๊ถŒ ๊ด€๋ จ ์•ฝ๊ด€์— ๋™์˜ํ•˜๋ฉด ๊ฐ€์ž…์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์˜€๋‹ค. ๋˜ํ•œ ์•ฝ๊ด€ ๋™์˜์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ €์ž‘๊ถŒ์„ ์นจํ•ดํ•˜๋Š” ์œ ์ €๊ฐ€ ์žˆ๋‹ค๋ฉด ์‹ ๊ณ  ์ œ๋„๋ฅผ ๋„์ž…ํ•˜๋ฉฐ ํ•ด๋‹น ์œ ์ €๋ฅผ ์‹ ๊ณ ํ•˜์—ฌ ์ด์šฉ ์ •์ง€ ํ˜น์€ ํƒˆํ‡ด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค. ํ”„๋กœ์ ํŠธ๋ช…์œผ๋กœ ์˜ค๋Š˜์˜ ์‚ฌ์ง„์ด๋ผ๋Š” ์ด๋ฆ„์€ ์ž„์‹œ๋กœ ์ง€์–ด๋†“์€ ์ด๋ฆ„์ด์—ˆ๊ธฐ์— ์ƒˆ๋กœ ์ •ํ–ˆ์–ด์•ผ ๋๋Š”๋ฐ, ์‚ฌ์ง„ photo ์™€ ์˜ค๋Š˜์˜ today ๋ฅผ ํ•ฉ์น˜๋ฉด ๊ดœ์ฐฎ์€ ๊ฒƒ ๊ฐ™์•„ ๋‚˜์˜ ์•„์ด๋””์–ด์ธ photoday ๋กœ ์ •ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค!

๋‹ค์Œ์€ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•œ ๊ธฐ์ˆ  ์Šคํƒ๋“ค์ด๋‹ค.


๐ŸŽ‰ KPT

๐Ÿƒโ€โ™€๏ธ Keep

  • ๋ฐฐ์›€์„ ๋‘๋ ค์›Œํ•˜์ง€ ์•Š๋Š” ์ž์„ธ

    ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ๋ฐฐ์›€์— ๋Œ€ํ•ด์„œ ๋‘๋ ค์›Œํ•˜์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค. Redux-toolkit ๊ณผ TypeScript ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ•œ ๊ฒƒ์— ๊ต‰์žฅํžˆ ๋งŒ์กฑํ•œ๋‹ค! ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋ฉ˜ํ† ๋ง์„ ํ†ตํ•ด ๋ฉ˜ํ† ๋‹˜์ด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ์ต์ˆ™ํ•ด์ง€๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์— ์–ป๋Š” ๊ฒŒ ๋งŽ์„ ๊ฒƒ์ด๋ผ๊ณ  ํ–ˆ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•œ ๋‘๋ ค์›€์ด ์žˆ์—ˆ์ง€๋งŒ, ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ•˜๊ธธ ์ž˜ํ–ˆ๋‹ค๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

  • ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์ƒ๊ฐํ•˜๋Š” ์ƒˆ๋กœ์šด ์Šต๊ด€

    ๋ฆฌ๋•์Šค์˜ ๊ฒฝ์šฐ์—๋Š” ํˆดํ‚ท์„ ์‚ฌ์šฉํ–ˆ๋‹ค๋Š” ๊ฒƒ์— ๋งŒ์กฑ๋ณด๋‹ค๋Š” ์ด ํˆด์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ƒํƒœ ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ์ •๋ง ๋งŽ์ด ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ์ƒˆ๋กœ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•  ๋•Œ๋ถ€ํ„ฐ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์—ผ๋‘ํ•ด ๋‘๊ณ  ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๊ฒŒ ๋œ ๋‚˜์˜ ์ƒˆ๋กœ์šด ์Šต๊ด€์„ ์–ป๊ฒŒ ๋˜์—ˆ๋‹ค.

  • ์‹œ๋ฉ˜ํ‹ฑ ์›น์„ ์œ„ํ•œ ํ•™๊ตฌ์ ์ธ ์ž์„ธ

    ๋ฉ˜ํ† ๋‹˜๊ป˜์„œ๋Š” ์‹œ๋ฉ˜ํ‹ฑํ•œ ์›น์„ ์œ„ํ•ด์„œ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ์˜ ์ ์ ˆํ•œ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜์…จ๋‹ค. ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์ด ๋ถ€๋ถ„๋„ ์˜์‹ํ•˜๋ฉด์„œ ํ•˜๋‹ค๋ณด๋‹ˆ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ์™€๋Š” ์กฐ๊ธˆ ๋” ์นœํ•ด์ง„ ๊ฒƒ ๊ฐ™๋‹ค ๐Ÿคญ๐Ÿ‘

  • ์ปจ๋””์…˜ ๊ด€๋ฆฌ & ๋ฉ˜ํƒˆ ๊ด€๋ฆฌ

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

๐Ÿ”Ž Promblem

  • github action yml ํŒŒ์ผ ์ˆ˜์ •

    github action์„ ํ†ตํ•ด ์ž๋™๋ฐฐํฌ๋ฅผ ํ–ˆ๋Š”๋ฐ, yml ํŒŒ์ผ์ด ์ž˜๋ชป๋˜์—ˆ๋˜ ๊ฑด์ง€, ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์„ค์ • ๋ถ€๋ถ„์ด ์ธ์‹์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋ฉ˜ํ† ๋‹˜์—๊ฒŒ ๋ฌผ์–ด๋„ ๋ณด๊ณ  ๊ตฌ๊ธ€๋ง๋„ ์—ด์‹ฌํžˆ ํ–ˆ๋Š”๋ฐ ์—ฌ์ „ํžˆ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ์ด ๋ถ€๋ถ„์€ ๋‹ค์‹œ ๋„์ „ํ•ด ๋ณด์•„์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

  • ํ•œ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๋ ค๊ณ  ํ–ˆ๋˜ ์  (feat. ๊ท€์ฐจ๋‹ˆ์ฆ˜...)

    form์—์„œ ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๋ฐ›๋Š” input component๋ฅผ ๋ชจ์–‘์ด ๊ฐ™์•„ ๊ฐ™์€ component๋กœ ์žฌ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ฅผ ๋ฌถ์–ด์„œ ํ–ˆ์—ˆ๋‹ค. type์ด id, password๋กœ ๋‚˜๋ˆ„์–ด ์กฐ๊ฑด ์ฒ˜๋ฆฌํ•ด ๋‘์—ˆ๋Š”๋ฐ ์ด๋ ‡๊ฒŒ ๋ณด๋‹ค๋Š” ๋ถ„๋ฆฌํ•ด ๋‘๋Š” ๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ชจ์–‘์ด ๊ฐ™๋‹ค๊ณ  ํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฅ˜๋˜๋Š” ๊ฒŒ ์•„๋‹Œ ์ ์„ ์•Œ๊ณ  ์žˆ์Œ์—๋„ ๊ท€์ฐฎ๋‹ค๋Š” ์ด์œ ๋กœ ๋ฌถ์–ด์„œ ์ฒ˜๋ฆฌํ•œ ์  ๋ฐ˜์„ฑํ•˜์ž ๐Ÿ˜…

๐Ÿ’ƒ Try

  • api ์š”์ฒญ ๋กœ์ง์„ ์ฒ˜๋ฆฌํ•˜๋Š” hooks ์ ์šฉ

    ์—ฌ๊ธฐ์„œ ํšŒ๊ณ ํ•˜๋Š” ๋ฉ”์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ๊ฐ™์ด ํ•˜๊ณ  ์žˆ๋˜ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ๋Š”๋ฐ ์ด ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” api ์š”์ฒญํ•˜๋Š” ๋ถ€๋ถ„์„ hooks๋ฅผ ํ†ตํ•ด์„œ ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ถ„์„ ์ค„์ผ ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ, ์ด ํ”„๋กœ์ ํŠธ์—๋„ ์ ์šฉํ•ด์„œ ๋ฆฌํŒฉํ† ๋งํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค.

  • ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ

    ํ”„๋ฆฌ์™€ ๋ฉ”์ธ ๋‘ ๊ฐ€์ง€ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ ์ ์ด ์—†๋‹ค. ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ, ํ•„ํ„ฐ ๋ถ€๋ถ„์„ ๊ตฌํ˜„ํ•ด ๋ณด๊ณ  ์‹ถ๋‹ค.

  • node.js๋กœ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•ด ๋ณด๊ธฐ

    ๋ฉ˜ํ† ๋‹˜๊ป˜์„œ ํ”„๋ก ํŠธ๋ผ๋„ ํ•ด๋‹น ๋ถ€๋ถ„์€ ํ•ด ๋ณด๋ฉด ์ •๋ง ์ข‹๋‹ค๊ณ  ๋งํ•ด ์ฃผ์‹  ๋ถ€๋ถ„์ด๋‹ค. ํ”„๋ก ํŠธ๋ผ๋„ ์–ด๋–ป๊ฒŒ ์„œ๋ฒ„๊ฐ€ ๋Œ์•„๊ฐ€๋Š”์ง€์— ๋Œ€ํ•œ ํ๋ฆ„์„ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒƒ๊ณผ ๋ชจ๋ฅด๋Š” ๊ฒƒ์€ ๋‹ค๋ฅด๋‹ค๊ณ  ํ•˜์…จ๊ธฐ ๋•Œ๋ฌธ์— node.js์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด ๋ณด๊ณ  ์‹ถ๋‹ค!




๐Ÿ‘ ๋งˆ๋ฌด๋ฆฌ

free project ์—์„œ๋Š” ์™„๋ฒฝํ•œ ํŒ”๋กœ์›Œ ์„ฑํ–ฅ์„ ๋ณด์—ฌ ์คฌ๋‹ค๋ฉด ์ด๋ฒˆ main project ์—์„œ๋Š” ๋ฆฌ๋”์˜ ์„ฑํ–ฅ์„ ๋งŽ์ด ๋ณด์—ฌ์คฌ๋‹ค. ๋ฆฌ๋“œ๋ฅผ ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋งŽ์ด ๊ท€์ฐฎ๊ณ  ์‹ ๊ฒฝ ์“ธ ๊ฒƒ๋„ ๋งŽ๊ณ  ๊ทธ๋งŒํผ ์ผ๋„ ๋งŽ์ด ํ•œ๋‹ค. ์•„๋‹Œ ๊ณณ๋„ ์žˆ๊ฒ ์ง€๋งŒ ๋‚œ ์ด ํ”„๋กœ์ ํŠธ์— ๋งŽ์€ ์ผ๊ณผ ์ฑ…์ž„๊ฐ์„ ๊ฐ€์กŒ๋‹ค. FE ๋ฆฌ๋“œ๋ฅผ ๋งก์•„์„œ ํž˜๋“ค์—ˆ๋˜ ๊ฒƒ๋„ ๋งž์ง€๋งŒ ๋งŽ์€ ์ผ์„ ๋งก์•„์„œ ๊ทธ๋งŒํผ ์–ป์€ ๊ฒƒ๋„ ๋งŽ์•˜๋‹ค. ๋ณธ์ธ์ด ํ•œ ์ž‘์—…๋Ÿ‰ ๋Œ€๋น„ ํ”„๋กœ์ ํŠธ ๊ฒฐ๊ณผ๋ฌผ ์™„์„ฑ๋„๋ฅผ ๋งํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋‹ค. ๋งŽ์€ ์ž‘์—…์„ ํ•œ ๋งŒํผ ๋งŽ์€ ์–ด๋ ค์›€์„ ๋งˆ์ฃผํ–ˆ๊ณ , ํ•ด๊ฒฐํ•  ๋•Œ๋งˆ๋‹ค ๋‚œ ํฌ๋“  ์ž‘๋“  ์˜๋ฏธ์žˆ๋Š” ๋ฐฐ์›€์„ ์–ป์—ˆ๋‹ค.

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 6์›” 1์ผ

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

์•ž์œผ๋กœ์˜ ๋” ์ข‹์€ ๋ชจ์Šต์„ ๊ธฐ๋Œ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค !

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ