๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

ํ•ด์ปคํ†ค

์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค ์—ญ์‚ฌ์ƒ ์ฒซ ํ•ด์ปคํ†ค

๊ฐ ํ”„๋กœ์ ํŠธ ์กฐ๊ฐ€ ์ •ํ•œ ์ฃผ์ œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ ๋’ค, ๋‹ค์Œ ๋‚  ์˜คํ›„ 2์‹œ์— ์‹œ์—ฐ์„ ์ง„ํ–‰ํ•œ๋‹ค.

ํ•ด์ปคํ†ค

ํ•ต์‹ฌ๊ธฐ๋Šฅโ€‹

  1. ํ•ด์ปคํ†ค์—์„œ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ ์ •ํ•˜๊ธฐ

    • FE - ๋ฆฌ๋ทฐ ์ž‘์„ฑ, ์ œ์ถœ, ์ƒ์„ธ ๋ณด๊ธฐ
    • BE - API ๋ฌธ์„œ
  2. ํ•ด์ปคํ†ค์˜ ๋ชฉํ‘œ ์ •ํ•˜๊ธฐ (e.g. ๋‹ค๋ฅธ๊ฑฐ ๋‹ค ๋ชจ๋ฅด๊ฒ ๊ณ  ๊ทธ๋ƒฅ ๊ตฌํ˜„ / ๊ทธ๋ž˜๋„ ์ตœ์†Œํ•œ์˜ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋Š” ์งœ๋ฉฐ ๊ตฌํ˜„)

  3. ์—ญํ•  ๋ถ„๋‹ด, ์†Œ์š” ์‹œ๊ฐ„, ์Šค์ผ€์ค„ ์ •ํ•˜๊ธฐ

    • e.g. API ๋ฌธ์„œ ์ž‘์„ฑ์€ ์•„๋ฃจ์™€ ์ปค๋น„๊ฐ€ ERD๋Š” ํ…Œ๋“œ ๊ทธ ๋™์•ˆ ๊นƒํ—ˆ๋ธŒ Oauth ๋Š” ์‚ฐ์ดˆ ๋“ฑ๋“ฑ
  4. ์Šค์ผ€์ค„ ์ค‘๊ฐ„ ์ค‘๊ฐ„ ์ ๊ฒ€

ํ”„๋ก ํŠธ์—”๋“œโ€‹

์›นํŒฉ ์„ค์ • ์ˆ˜์ •์‚ฌํ•ญ

  • http-server๋ฅผ ์—†์• ๊ณ  webpack-dev-server๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.
    • ๊ฐœ๋ฐœ ์ค‘์— ์ฝ”๋“œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์‹ค์‹œ๊ฐ„์„ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜์„œ ๋ณ„๋„์˜ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์„œ๋ฒ„๋ฅผ ์šด์˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค. ์ฆ‰, preview๊ฐ€ ํ•„์š”์—†๋‹ค.
    • http-server ๋Œ€์‹  webpack-dev-server๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, preview๊ฐ€ ํ•„์š” ์—†๋Š” ์ด์œ ๋Š” webpack-dev-server๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ ๊ธฐ๋Šฅ๊ณผ ํ•ซ ๋ชจ๋“ˆ ๋ฆฌํ”Œ๋ ˆ์ด์Šค๋จผํŠธ(Hot Module Replacement, HMR) ๋•๋ถ„์ด๋‹ค.

ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋‹ด๋‹น(ํŽ˜์–ด๋กœ ์ง„ํ–‰)

  • ๋ฆฌ๋ทฐ ์ž‘์„ฑ ํ™”๋ฉด(์‚ฌ์ด๋“œ๋ฐ” ์—ด๋ ธ์„ ๋•Œ ๊ธฐ์ค€)
    • ์—ํ”„์ด, ์‘ค์‘ค
  • ๋ฆฌ๋ทฐ ์ƒ์„ธ ๋ณด๊ธฐ ํ™”๋ฉด
    • ๋ฐ”๋‹ค, ์˜ฌ๋ฆฌ

ํŽ˜์ด์ง€

๋ฐฑ์—”๋“œโ€‹

API ๋ฌธ์„œ(๋…ธ์„  ๊ณต์œ )

  • ๋ฆฌ๋ทฐ ์“ฐ๊ธฐ
  • ๋ฆฌ๋ทฐ ์ƒ์„ธ ๋ณด๊ธฐ
  • ๋ฆฌ๋ทฐ ์“ฐ๊ธฐ ์œ„ํ•ด ๋ฐ›์•„์˜ค๋Š” ์ •๋ณด
  • ํ‚ค์›Œ๋“œ ๋ชฉ๋ก ๋ฐ›์•„์˜ค๊ธฐ

๊ณตํ†ตโ€‹

ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐ์ž ๋งก์€ ์—…๋ฌด๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ , ๋‹ค์Œ ๋‚  API ํ†ต์‹ ์„ ์‹œ๋„ํ•ด๋ณด๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.