์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์ฝ”๋กœ๋‚˜๋งต ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” React + Express๋กœ ์ง€๋„์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ (Typescript)

MERN stack (feat. TypeScript) ์„ ํ™œ์šฉํ•œ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋งŒ๋“ค์–ด๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. API ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๋ฉฐ ์ฐจ๊ทผ์ฐจ๊ทผ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ’€์Šคํƒ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • React + TypeScript ๊ฐœ๋ฐœ

  • Express + TypeScript ๊ฐœ๋ฐœ

  • MongoDB + Mongoose ํ™œ์šฉ

  • ์นด์นด์˜ค ๋งต API ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  • ๋„ค์ด๋ฒ„ ๋งต API ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

4,400๋งŒ ์กฐํšŒ์ˆ˜์˜ ์ฝ”๋กœ๋‚˜๋งต ๊ฐœ๋ฐœ์ž์™€ ํ•จ๊ป˜
์ง€๋„ ์„œ๋น„์Šค ๊ฐœ๋ฐœ์— ๋„์ „ํ•˜์„ธ์š” ๐Ÿ’ป

<์ถœ์ฒ˜: KTV>
<์ถœ์ฒ˜: EBS>

์ง€๋„ ์„œ๋น„์Šค ๊ฐœ๋ฐœ, MERN ์Šคํƒ๊ณผ ํ•จ๊ป˜ ๐Ÿ—บ๏ธ

์•ˆ๋…•ํ•˜์„ธ์š”, ๊ฐœ๋ฐœ์ž ์ด๋™ํ›ˆ์ž…๋‹ˆ๋‹ค.
์ €๋Š” ์ด๋ฒˆ์— 1,600๋งŒ ๋ช…์ด ์ด์šฉํ•˜๊ณ , 4,400๋งŒ ์กฐํšŒ์ˆ˜๋ฅผ ๋„˜๊ธด ์ฝ”๋กœ๋‚˜๋งต๊ณผ ๋งˆ์Šคํฌ ์‹ค์‹œ๊ฐ„ ์žฌ๊ณ  ํ˜„ํ™ฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ๋งˆ์Šคํฌ๋งต์„ ๊ธฐํšํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ๋Š” ์Šคํƒ€ํŠธ์—…์—์„œ GIS ๊ด€๋ จ ํ”„๋กœ๋•ํŠธ๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๋„ ์„œ๋น„์Šค๋Š” ์œ„์น˜ ์ •๋ณด๊ฐ€ ์ค‘์š”ํ•ด ์ง์— ๋”ฐ๋ผ ์•ž์œผ๋กœ ํ•„์ˆ˜์ ์ธ ๊ธฐ์ˆ  ์Šคํƒ ์ค‘ ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ฒ˜์Œ ์ง€๋„ ์„œ๋น„์Šค ๊ฐœ๋ฐœ์„ ํ•˜๋ ค๋ฉด ์•„๋ฌด๋ž˜๋„ ์ง„์ž…์žฅ๋ฒฝ์ด ๋†’์€ ๊ฒƒ์ด ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด์„œ ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค์ด ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ์ œ์ž‘ํ•˜๊ณ , ๋” ๋‚˜์•„๊ฐ€์„œ ์ง€๋„ ์„œ๋น„์Šค์˜ ๋งค๋ ฅ์„ ๋А๊ผˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ณธ ๊ฐ•์˜๋Š” React, Express, MongoDB ๋“ฑ์„ ํ™œ์šฉํ•ด์„œ ์ง์ ‘ ์ดˆ๊ธฐ ํ™˜๊ฒฝ ์„ธํŒ…๋ถ€ํ„ฐ ์ง€๋„ ์„œ๋น„์Šค ๊ตฌํ˜„๊นŒ์ง€ ์•Œ๋ ค์ฃผ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์„œ๋น„์Šค๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด ๋ณด๋ฉฐ ํ”„๋ก ํŠธ์—”๋“œ ๋ฐฑ์—”๋“œ, ์ฆ‰ ํ’€์Šคํƒ์— ๋Œ€ํ•œ ์ œ์ž‘ ๊ณผ์ •์„ ๊ฒฝํ—˜ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

๋„ค์ด๋ฒ„ ๋งต, ์นด์นด์˜ค ๋งต API์˜ ๊ฒฝ์šฐ ๋‹จ์ˆœํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์™œ ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€๋ฅผ ๊ฐ™์ด ๋ฐฐ์›Œ๊ฐ€๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์ˆ˜๊ฐ•์ƒ ์—ฌ๋Ÿฌ๋ถ„๋“ค์ด ๊ณต์‹ ๋ฌธ์„œ์™€ ์กฐ๊ธˆ ๋” ์นœํ•ด์งˆ ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

ํ•ด๋‹น ๊ฐ•์˜๋Š” ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ง€๋„ ๊ด€๋ จ ์ง€์‹์„ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ดˆ๋ณด์ž๋ถ„๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๊ฐ•์˜ ๋‚œ์ด๋„๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋ชจ๋“  ๊ฐ•์˜์— ์ž๋ง‰์„ ์ถ”๊ฐ€ํ•˜์˜€๊ธฐ ๋•Œ๋ฌธ์— ๋ถ€๋‹ด ์—†์ด ๋“ค์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค์˜ ์ดˆ๊ธฐ ์„ธํŒ… ๋ถ€๋‹ด์„ ์ค„์ด๊ธฐ ์œ„ํ•œ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

โ˜…โ˜…โ˜…โ˜…โ˜…

์กฐ๊ธˆ์”ฉ ์งฌ ๋‚ด์„œ ๋“ฃ๊ธฐ ์ข‹๊ณ  ์ž๋ง‰์ด ์žˆ์–ด์„œ ์†Œ๋ฆฌ ์—†์ด๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๊ฐ™์ด ์ง„ํ–‰ํ•˜๋ฉด์„œ ์„ค๋ช…ํ•ด ์ฃผ์‹œ๊ธฐ ๋•Œ๋ฌธ์— ์ดํ•ดํ•˜๊ณ  ๋”ฐ๋ผ ํ•˜๊ธฐ๋„ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค.

โ˜…โ˜…โ˜…โ˜…โ˜…

์„ค๋ช…์ด ์ง„์งœ ๋„ˆ๋ฌด๋„ˆ๋ฌด ์ข‹์•„์„œ ์ง„์งœ ์ตœ๊ณ ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค๊ป˜ ํŒ์„ ๋“œ๋ฆฌ์ž๋ฉด ๊ฐ•์˜๋งŒ ๋“ฃ๊ณ  ๋˜‘๊ฐ™์ด ์™„์„ฑํ•œ ์ž…์žฅ์œผ๋กœ์จ, ๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„๋งŒ ์ž˜ํ•˜์‹ ๋‹ค๋ฉด ๋ฌธ์ œ์—†์ด ์™„์„ฑํ•˜์‹ค ์ˆ˜ ์žˆ์„ ๊ฑฐ์˜ˆ์š”. ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

โ˜…โ˜…โ˜…โ˜…โ˜…

์ „๋ฐ˜์ ์œผ๋กœ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค๊ณ  ํ™œ์šฉํ•˜๋Š”์ง€ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฐ•์˜์˜€์Šต๋‹ˆ๋‹ค. ์ธ์ƒ๊นŠ์—ˆ๋˜ ์ ์€ Q&A์— ๋Œ€ํ•œ ๋‹ต๋ณ€ ์†๋„์™€ ์„ธ์„ธํ•˜๊ฒŒ ๋ด์ฃผ์‹œ๋Š” ์นœ์ ˆํ•จ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์œ ์ตํ•œ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ์ง„์‹ฌ์œผ๋กœ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™†โ€โ™€๏ธ

React, Express๋กœ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„๋“ค

ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„๋“ค

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ API๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค


๊ฐ•์˜ ํŠน์ง• โœจ

์ด๋ฒˆ ๊ฐ•์˜์—์„œ๋Š” React, Expres, MongoDB, mongoose, TypeScript, ์—…๋กœ๋“œ ๊ธฐ๋Šฅ, ์กฐํšŒ ๊ธฐ๋Šฅ, ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๋“ฑ์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•˜๊ณ , ๋งˆ์ปค์™€ ์ธํฌ์œˆ๋„์šฐ๋ฅผ ์ง€๋„ ์œ„์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ

์นด์นด์˜ค ํ‚ค์›Œ๋“œ ๊ฒ€์ƒ‰ API๋ฅผ ํ™œ์šฉํ•œ ์œ„์น˜ ์ •๋ณด ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ

์œ„์น˜ ์ •๋ณด ์—…๋กœ๋“œ ๊ธฐ๋Šฅ

  • ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋„ค์ด๋ฒ„, ์นด์นด์˜ค ๋งต API๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • React, Express, MongoDB, TypeScript๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ํ”„๋ก ํŠธ, ๋ฐฑ์—”๋“œ, DB์˜ ์—ญํ• ์„ ์ดํ•ดํ•˜๊ณ  ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์›Œ์š” ๐Ÿ“š

#0.
๊ฐ•์˜ ์†Œ๊ฐœ ๋ฐ
์ดˆ๊ธฐ ํ™˜๊ฒฝ ๊ตฌ์ถ•

๋ณธ ๊ฐ•์˜์™€ ์•ž์œผ๋กœ ๋งŒ๋“ค๊ฒŒ ๋  ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ์†Œ๊ฐœ์™€ ๊ฐ•์˜ ์ง„ํ–‰์„ ์œ„ํ•œ ์ดˆ๊ธฐํ™˜๊ฒฝ ๊ตฌ์ถ•์„ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค

#1.
Frontend.
๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๋งŒ๋“ค๊ธฐ

ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์— ํ•„์š”ํ•œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. Button๊ณผ Input์„ ๋น„๋กฏํ•œ ๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋จผ์ € ์ž‘์„ฑํ•˜๊ณ  ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

#2.
Frontend.
๋„ค์ด๋ฒ„ ์ง€๋„ ๋„์šฐ๊ธฐ

์ง€๋„ ์„œ๋น„์Šค์˜ ํ•ต์‹ฌ์ธ ์ง€๋„ api๋ฅผ ์„ค์ •ํ•˜๊ณ  ์ ์šฉํ•˜๋Š” ๊ฐ•์˜๋ฅผ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜์—์„œ๋Š” ๋„ค์ด๋ฒ„ ์ง€๋„ api๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด, application ์ƒ์„ฑ ๋ฐ api key ๋ฐœ๊ธ‰, ๊ทธ๋ฆฌ๊ณ  React์—์„œ ๋„ค์ด๋ฒ„ ์ง€๋„ api๋ฅผ ๋„์šฐ๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ๋งต ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

#3.
Frontend. Jotai

์ „์—ญ ์ƒํƒœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ Jotai๋ฅผ ์†Œ๊ฐœํ•˜๊ณ  ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋‹ค๋ฃจ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

#4.
Frontend.
๋งˆ์ปค ์ƒ์„ฑํ•˜๊ธฐ

์ง€๋„ ์„œ๋น„์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ธ ๋งˆ์ปค์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ์„น์…˜์ž…๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋งˆ์ปค๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ง€๋„ ์œ„์— ํ‘œ์‹œํ•˜๊ณ , ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋งˆ์ปค๋ฅผ ํด๋ฆญ ์‹œ ์ธํฌ์œˆ๋„์šฐ๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ์‚ฌ๋ผ์ง€๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค๊ณ , ์ง€๋„์—๋„ ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

#5.
Frontend.
์ธํฌ ์œˆ๋„์šฐ ์ƒ์„ฑํ•˜๊ธฐ

์ง€๋„ ์„œ๋น„์Šค์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ํ™œ์šฉ๋˜๊ณ , ๊ธฐ๋ณธ์ด ๋˜๋Š” ํ˜„์žฌ์œ„์น˜๋ฅผ ๋ฐ›๊ณ  ์ด๋ฅผ ์ง€๋„์œ„์— ๋งˆ์ปค๋ฅผ ํ†ตํ•ด ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ์„น์…˜์ž…๋‹ˆ๋‹ค.

#6.
Frontend.
SearchBoard
๊ฒ€์ƒ‰์ฐฝ ๋งŒ๋“ค๊ธฐ

๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•œ SearchBoard๋ฅผ ๋งŒ๋“ค๊ณ  hook์„ ํ™œ์šฉํ•˜์—ฌ ๊ฒ€์ƒ‰์ฐฝ์„ ๋งŒ๋“œ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์นด์นด์˜ค์—์„œ ์ œ๊ณตํ•˜๋Š” keyword search api๋ฅผ ํ™œ์šฉํ•˜์—ฌ, ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ชฉ์ ์ง€๋ฅผ ์ž…๋ ฅ๋ฐ›์•„ ์ง€๋„ ์œ„์— ํ‘œ์‹œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๋ชฉ์ ์ง€์˜ ์œ„๋„์™€ ๊ฒฝ๋„๋ฅผ ๊ฒฐ๊ด๊ฐ’์œผ๋กœ ๋ฐ›์€ ํ›„ ์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ง€๋„ ์œ„์— ํ•œ ๊ฐœ์˜ marker๋งŒ ๋„์šฐ๊ฒŒ ํ•˜๋Š” ์—๋Ÿฌํ•ธ๋“ค๋ง์— ๋Œ€ํ•ด์„œ๋„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

#7.
Database. MongoDB

NoSQL Database์ธ MongoDB๋ฅผ ์„ค์น˜ํ•˜๊ณ  ์„ธํŒ…ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. docker-compose๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋กœ์ปฌํ™˜๊ฒฝ์—์„œ DB ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œํ‚ค๊ณ , MongoDB GUI ํˆด์ธ Compass๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

#8.
Backend. Express

Express๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์œ„์น˜ ๋ฐ์ดํ„ฐ ์ €์žฅ, ์ „์ฒด ์œ„์น˜ ๋ฐ์ดํ„ฐ ์กฐํšŒ, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์กฐํšŒ API๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์ด์ „์— ์„ค์ •ํ•œ MongoDB์— mongoose๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

#9.
Frontend )
React-Query

React Query๋ฅผ ํ™œ์šฉํ•ด์„œ ์œ„์น˜ ๋ฐ์ดํ„ฐ ๋ฐ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์กฐํšŒ, ์œ„์น˜ ๋ฐ์ดํ„ฐ ์ƒ์„ฑ API ํ†ต์‹ ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃจ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.


์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

Q. React, Express, MongoDB, Node๋ฅผ ๋ฐฐ์šฐ๋ฉด ์ข‹์€ ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๊ฐ€์žฅ ํฐ ์žฅ์ ์€ ์–ธ์–ด ํ•˜๋‚˜๋กœ ํ”„๋ŸฐํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ๋™์‹œ์— ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. React์™€ Express๋Š” Node ํ™˜๊ฒฝ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ์ด๊ณ , MongoDB๋Š” NoSQL ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ Node์™€ ๊ถํ•ฉ์ด ์ข‹์œผ๋ฉฐ mongoose๋ผ๋Š” ํŒจํ‚ค์ง€๋ฅผ ํ†ตํ•ด ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ดˆ๋ณด์ž๊ฐ€ ๋“ฃ๊ธฐ์— ๊ฐ•์˜์˜ ๋‚œ์ด๋„๋Š” ์–ด๋–ค๊ฐ€์š”?

ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ ๋•Œ๋ฌธ์— ์ฒœ์ฒœํžˆ ๋”ฐ๋ผ์˜ค์‹œ๋ฉด ๋ชจ๋‘๊ฐ€ ์™„๋ฒฝํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋‚œ์ด๋„์ž…๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๊ฐ•์˜ ํŠน์„ฑ์ƒ ๊ธฐ๋ณธ ์ง€์‹(TypeScript, React hooks, Express ๊ตฌ์กฐ ๋“ฑ)์— ๋Œ€ํ•ด์„œ๋Š” ๋‹ค๋ฃจ์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ฏธ๋ฆฌ ํ•™์Šตํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ๋„ค์ด๋ฒ„ ๋งต, ์นด์นด์˜ค ๋งต API๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋น„์šฉ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋‚˜์š”?

๊ฐ•์˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ๋Š” ๋น„์šฉ์ด ๋“ค์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ฑฑ์ •ํ•˜์ง€ ์•Š์œผ์…”๋„ ๋ฉ๋‹ˆ๋‹ค. :) ๋„ค์ด๋ฒ„ ๋งต API๋Š” ์›” 10,000,000๊ฑด์„ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์นด์นด์˜ค๋งต API๋Š” ์ผ 300,000๊ฑด์„ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ํŠธ๋ž˜ํ”ฝ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ํ•œ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • React๋กœ ์ง€๋„ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • ๊ณต์‹๋ฌธ์„œ ํ™œ์šฉ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React ๊ธฐ๋ณธ ๋ฌธ๋ฒ• (hooks, jsx)

  • Express ๊ธฐ๋ณธ ๊ตฌ์กฐ (router)

  • TypeScript ๋ฌธ๋ฒ•

  • yarn or npm

์•ˆ๋…•ํ•˜์„ธ์š”
์ด๋™ํ›ˆ์ž…๋‹ˆ๋‹ค.

1,293

๋ช…

์ˆ˜๊ฐ•์ƒ

115

๊ฐœ

์ˆ˜๊ฐ•ํ‰

165

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š” ๊ฐœ๋ฐœ์ž ์ด๋™ํ›ˆ์ž…๋‹ˆ๋‹ค.

4400๋งŒ ์กฐํšŒ์ˆ˜๊ฐ€ ๋„˜๋Š” ์ฝ”๋กœ๋‚˜๋งต์„ ์ตœ์ดˆ๋กœ ๊ธฐํšํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜์˜€์œผ๋ฉฐ, ๋งˆ์Šคํฌ๋งต, ์ฝ”๋กœ๋‚˜๋ฏธ๋ฅผ ํ†ตํ•ด ๋งŽ์€ ์‚ฌ์šฉ์ž๋ถ„๋“ค์˜ ๋ถˆํŽธํ•จ์„ ํ•ด์†Œํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ์ž‘์€ ์Šคํƒ€ํŠธ์—…์„ ์ฐฝ์—…ํ•˜์—ฌ CTO๋กœ์„œ ์—ด์‹ฌํžˆ ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

45๊ฐœ โˆ™ (4์‹œ๊ฐ„ 24๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

4๊ฐœ

5.0

4๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ksh990913

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

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

    • ACACIA

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 5

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ฐธ... ์• ๋งคํ•˜๋„ค์š”. ๊ณ ์ƒํ•˜์…จ์Šต๋‹ˆ๋‹ค.

      • JH

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 3

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ์ •๋ง๋„์›€์ด๋งŽ์ด๋ฌ์Šต๋‹ˆ๋‹ค.

        • baby4

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 57

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์ง€๋„ api๋Š” ์–ด๋ ค์šด ๋А๋‚Œ์ด ์žˆ์–ด์„œ ์‹œ๋„ํ•˜์ง€ ๋ชปํ–ˆ๋Š”๋ฐ ์žฌ๋ฐŒ๊ฒŒ ์ˆ˜๊ฐ• ํ–ˆ์Šต๋‹ˆ๋‹ค

          ๋น„์Šทํ•œ ๊ฐ•์˜

          ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

          โ‚ฉ23,100

          30%

          โ‚ฉ33,000