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

๐Ÿ“ [2024-10-30] ์ผ์ • ๋ฐ ๊ธฐํš ํšŒ์˜

image

๐Ÿ“ย ํšŒ์˜ ๋‚ด์šฉ ์ •๋ฆฌโ€‹

๐Ÿ“ย ์ฃผ์ œโ€‹

์ค‘์žฅ๋…„์ธต์„ ์œ„ํ•œ ์ง€๋„ ์„œ๋น„์Šค

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

๐Ÿ“ย ํ•ต์‹ฌ ๊ธฐ๋Šฅโ€‹

์‹ค์‹œ๊ฐ„ ์œ„์น˜ ๊ณต์œ  ์„œ๋น„์Šค

  • 5๋ช… ๋™์‹œ์ ‘์†์ด ๊ฐ€๋Šฅํ•ด์•ผ ํ•จ

๐Ÿ“ย ๊ธฐ์ˆ ์  ๋ชฉํ‘œโ€‹

โš™๏ธย ๊ณตํ†ต์˜ ๋ชฉํ‘œ :: ๋ฌธ์„œํ™”โ€‹

  • TSDoc, JSDoc ์„ ์ด์šฉํ•ด์„œ ๋ฌธ์„œ๋กœ ๋ฐ”๊ฟ”์„œ ํผ๋ธ”๋ฆฌ์‹ฑํ•œ๋‹ค. (์ •์ ํŽ˜์ด์ง€ ํผ๋ธ”๋ฆฌ์‹ฑ์ด๋‹ˆ vercel ์•„๋‹ˆ๋ฉด github docs ์ด์šฉ) โ‡’ 6์ฃผ์ฐจ / ๊นƒ์œ„ํ‚ค ์ •๋„๋Š” ๋งค์ผํ•œ๊ฑด๋ฐโ€ฆ ๊ทธ๊ฑด ๋”ฐ๋กœ์ด์•ผ๊ธฐ
  • ํ”„๋ก ํŠธ์•ค๋“œ :: storybook ๋“ฑ์„ ์ด์šฉ
  • ๋ฐฑ์•ค๋“œ :: swagger

@Zen :: Lint ๋“ฑ ํ•จ๊ป˜ ๊ณต์œ ํ•˜๋Š” ์š”์†Œ๋Š” ๋นก์„ธ๊ฒŒ ์ดˆ๋ฐ˜์— ์žก์•„๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. BE / FE ๋ชจ๋‘ ๊ณต์šฉ์œผ๋กœ์š”. ๊ทธ ์ดํ›„์— ๊ทธ๊ฑฐ ๊ธฐ์ค€์œผ๋กœ ๊ฐ์ž ์ถ”๊ฐ€ํ•ฉ์‹œ๋‹ค.

โš™๏ธย Front-Endโ€‹

  • TDD
    • @Zen :: ๋˜๊ฒŒ ์ด๋ก ์ด ๋งŽ์€๋ฐ 1์ฐจ์ ์œผ๋กœ๋Š” ๋ฐฑ๋กœ๊ทธ์— ์žˆ๋Š” ๊ธฐ์ˆ ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์ „์— ํ…Œ์ŠคํŠธ์ฝ”๋“œ ๋จผ์ € ์ž‘์„ฑ ์ดํ›„ ๊ตฌํ˜„ํ•˜๋Š” ํ˜•ํƒœ๋กœ ๊ฐ€๊ณ  ๋งค์ฃผ ๊ฐœ์„ ํ•ด๋ด…์‹œ๋‹ค.
    • @Zen :: ๊ด€๋ จํ•ด์„œ ๊ณต์šฉ ๋ฌธ์„œ ๊ฐœ์„คํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ํ•™์Šต ์ •๋ฆฌ ๋“ฑ ํ•ด๋‘ฌ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ •ํ™•ํžˆ๋Š” ๊ฒฝํ—˜์ ์ธ ์ธก๋ฉด์—์„œ ์ ์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ์‹ค์‹œ๊ฐ„ ์œ„์น˜ ์ •๋ณด ๊ตฌํ˜„ (์—ฌ๋Ÿฌ ์‚ฌ์šฉ์ž์— ๋Œ€ํ•ด์„œ ํ•˜๋‚˜์˜ ํ™”๋ฉด์— ์œ„์น˜ ๊ณต์œ )
  • ์ƒํƒœ๊ด€๋ฆฌ
    • @Zen :: Test ์ฝ”๋“œ์˜ ์žฅ์ ์€ ์œ ์ง€๋ณด์ˆ˜/๋ฆฌํŒฉํ† ๋ง์—์„œ ์‚ฌ์ด๋“œ์ดํŒฉํŠธ๋ฅผ ๊ฐ์†Œ์‹œํ‚ฌ ๋•Œ ๋‚˜์˜จ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด์— ๋”ฐ๋ผ์„œ, ์ „๋ถ€ ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•ด๋ณด์ง€ ์•Š์•˜๋‹ค๋ฉด, useContext๋กœ ๋จผ์ € ๊ตฌํ˜„์„ ํ•˜๊ณ , ๊ทธ ๋‹ค์Œ์— ๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๋ฉด์„œ ๊ทธ๋•Œ ์ƒํ™ฉ์— ๋งž์ถ”์–ด์„œ ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ ํˆด์„ ์„ ํƒํ•ด์„œ ๋„์ž…ํ•ด๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฉ˜ํ† ๋‹˜์„ ๋›ฐ์–ด๋„˜์–ด๋ณด์ฃ .

โš™๏ธย Back-Endโ€‹

  • TDD

    • @Zen :: ์ดˆ๋ฐ˜์—๋Š” ๋งก๊ธฐ๊ฒ ์Šต๋‹ˆ๋‹ค.

    • @ํ˜œ์ธ ์ • :: ๋ฐฑ์•ค๋“œ ํ™€๋กœ ๋„์ „ํ•˜๋Š” ๊ฒƒ ์ž์ฒด๊ฐ€ ๋„์ „

    • @ํ˜œ์ธ ์ • :: ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์— ๋„์ „ํ•˜๋Š”๊ฒŒ ๋„์ „. ๋ฐฑ์•ค๋“œ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ ์ž์ฒด๊ฐ€ ๋„์ „์ด๋‹ค.

    • @ํ˜œ์ธ ์ • :: ์‚ฌ์šฉ๋  ๊ธฐ์ˆ ์ด ์•„์ง ๋ชฐ๋ผ์„œ ๋ญ๊ฐ€ ์žˆ๋‹ค๊ณ  ๋ง์„ ํ•˜๊ธฐ ์–ด๋ ต๋‹ค. Websocket ๋“ฑ์˜ ๋„คํŠธ์›Œํฌ ์ ์ธ ๊ฒƒ์„ ์ข€ ์•Œ์•„๊ฐˆ ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ (์ถ”์ธก)

    • @Zen :: ๊ณ„์ • ์•Œ๋ ค๋“œ๋ฆด๊ฒŒ์š”. ์•„๋‹ˆ๋ฉด ํ•„์š”ํ•˜๋ฉด ๋ง์”€ํ•˜์‹œ๋ฉด APIํ‚ค๋‚˜ ์ด๋Ÿฐ๊ฑฐ ๋‹ค ๋“œ๋ฆด๊ฒŒ์š”. โ‡’ ์ €๋Š” 24์‹œ Zep ์ƒ์ฃผ์ค‘

  • ์ฝ”๋“œ๋ฆฌ๋ทฐ

    • @Zen :: ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ฐฑ ํ”„๋ก ํŠธ ์•ˆ๊ฐ€๋ฆฌ๊ณ  ์ €ํฌ ํ•ฉ์‹œ๋‹ค. โ‡’ ์ฝ”๋“œ๋ฆฌ๋ทฐ + PR๋ฆฌ๋ทฐ๋ฅผ ๋ฐฑ์ด๋ผ ์•ˆํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ํ”„๋ก ํŠธ๋„ ๋ฐฑ์„ ๋ด์ฃผ๊ณ , ๋ฐฑ๋„ ํ”„๋ก ํŠธ ๋ด์ฃผ๋Š”โ€ฆ
    • @Zen :: ํ•ด๋ด์•ผ ์•Œ๊ฑฐ๊ฐ™๊ณ .. ์ด๋Ÿฐ ๋ฃฐ๋“ค์€ ๋งค์ฃผ๋งˆ๋‹ค ๊ฐœ์„ ํ•ด์•ผ ๋œ๋‹ค๊ณ  ์ƒ๊ฐ
    • 4๋ช…์ด ์ „๋ถ€ Approveํ•ด์•ผ Merge ๋˜๋Š”๊ฑธ๋กœโ€ฆ?
    • @ํ˜œ์ธ ์ • :: ์ดˆ๋ฐ˜์— ์ ๊ฒŒ ๋ดค์œผ๋ฉด ์ข‹๊ฒ ๋‹ค. ๊ทธ ์‚ฌ์‹ค์ƒ ์ฒ˜์Œ์ด๋‹ˆ๊นŒ ์—๋กœ์‚ฌํ•ญ์ด ์žˆ์„์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜์„œ ์ดˆ๋ฐ˜์—๋Š” ํ•™์Šต์‹œ๊ฐ„๊นŒ์ง€ ๊ณ ๋ คํ•ด์„œ ์ดˆ๋ฐ˜์— PR์ด ์ ์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋‹ˆ๊นŒ ์ฃผ๊ธฐ๋ฅผ ์กฐ๊ธˆ ๋œ ๊ฐ€์ ธ๊ฐ”์œผ๋ฉด ํ•œ๋‹ค.

๐Ÿ“ย ํŒ€ ๊ตฌ์„ฑโ€‹

๐Ÿง‘โ€๐Ÿ’ปย Front-Endโ€‹

  • @Zen
  • @๋™์œจ ์ด
  • @์ฃผ์› ๊น€

๐Ÿง‘โ€๐Ÿ’ปย Back-End (Full-Stack - ๋‚˜์ค‘์— ๋ฐฑ ๊ตฌํ˜„ ๋๋‚˜๋ฉด ํ”„๋ก ํŠธ ํ•ฉ๋ฅ˜ ์˜ˆ์ •)โ€‹

  • @ํ˜œ์ธ ์ •

๐Ÿ“ย ๊ธฐ์ˆ  ์Šคํƒโ€‹

โš™๏ธย Front-Endโ€‹

  • React

  • TypeScript

  • ๋…ผ์˜ํ•ด๋ณผ ์‚ฌํ•ญ

    • node.js ๋ชจ๋“ˆ ๊ด€๋ฆฌ๋Š” ๋ฌด์—‡์œผ๋กœ? (pnpm, NPM, bun, yarn ๋“ฑ)
    • @Zen :: ๊ฐœ์ธ์ ์œผ๋กœ๋Š” pnpm ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.
    • pnpm
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋ฌด์—‡์œผ๋กœ?
    • swc โ†’ vite
    • swc :: rust โ†’ ์„ฑ๋Šฅ์ด ์ข‹๊ณ , ํ‰์†Œ ์“ด๋Œ€๋กœ
    • tsc :: c โ†’ ๋‚˜์จ, ๋‹ค๋งŒ ํ‰์†Œ ์“ด๋Œ€๋กœ
    • ๋ฒˆ๋“ค๋Ÿฌ/๋นŒ๋”๋Š” ๋ฌด์—‡์œผ๋กœ?
    • webpack
    • vite
    • ํ…Œ์ŠคํŠธ ๋„๊ตฌ๋Š” ๋ฌด์—‡์œผ๋กœ?
    • jest
    • CJS ๋””ํดํŠธ
    • vitest
    • import/export :: ESM ๋””ํดํŠธ
    • storybook
    • msw :: ์„œ๋ฒ„๊ฐ€ ์‹ค์ œ๋กœ ์žˆ๋Š” ๋Š๋‚Œ
    • ์„œ๋ฒ„ ํ†ต์‹ ์— ๋Œ€ํ•œ ๋ชจํ‚น
  • pnpm

  • swc

  • vite

  • vitest

  • storybook

  • msw

โ†’ ๊ธฐ์ˆ ์ ์ธ ์™„์„ฑ๋„๋ผ๊ณ  ํ•˜๋ฉด, ํ…Œ์ŠคํŠธ๊ฐ€ ์ž˜ ์งœ์—ฌ์ ธ์„œ ์ฝ”๋“œํ’ˆ์งˆ์ด ์ž› ๋ณด์žฅ๋˜๋Š” ์ฝ”๋“œ

โš™๏ธย Back-Endโ€‹

  • Node.js
  • Javascript
  • pnpm :: ๊ฐœ๋ฐœํ™˜๊ฒฝ
  • express

โš™๏ธย ๊ฐœ๋ฐœ ํ™˜๊ฒฝโ€‹

  • ๋…ผ์˜ํ•ด๋ณผ ์‚ฌํ•ญ

    • ๋ชจ๋…ธ๋ ˆํฌ

  • ๊ธฐ์ˆ  ์ข€๋” ๊ตฌ์ฒด์ ์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์„ ์ •ํ•˜๊ณ  (ํ™˜๊ฒฝ์„ค์ •)
  • ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์–ด๋–ป๊ฒŒ ํ• ์ง€ ๋…ผ์˜ํ•ด๋ด…์‹œ๋‹ค.
  • ์ด๊ฑธ ๋ฐ”ํƒ•์œผ๋กœ PAI๋‚˜ ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ ๋“ฑ ์กฐ์‚ฌํ•ด์•ผํ•˜๋Š”๊ฒŒ ์žˆ๋Š”๋ฐ, ์ด๊ฑฐ ์ด๋ฒˆ์ฃผ์— ๋น ๋ฅด๊ฒŒ ํ•˜๊ณ  ๊ฐ€๋Šฅํ•œ์ง€ ๋ถˆ๊ฐ€๋Šฅํ•œ์ง€ ๋ฝ‘์•„๋ƒ…์‹œ๋‹ค.
  • ํ”ผ๊ทธ๋งˆ
  • ๊ทธ๋ฆฌ๊ณ  ์ผ์ • ์‚ฐ์ถœ

๐Ÿš€ย Figma ๊ธฐ๋ฐ˜์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰โ€‹

image

image image image image

๋„ค์ด๋ฒ„์ง€๋„ apiโ€‹

@ํ˜œ์ธ ์ • :: https://api.ncloud-docs.com/docs/ai-naver-mapsdirections-driving

@ํ˜œ์ธ ์ • :: ์ž๋™์ฐจ๋กœ๋งŒ ๊ฐ€๋Šฅ

image

๋Œ€์ค‘๊ตํ†ต์œผ๋กœ ๊ธธ์ฐพ๊ธฐ APIโ€‹

https://developers.google.com/maps/documentation/routes/transit-route?hl=ko

๋Œ€์ค‘๊ตํ†ต์œผ๋กœ ๊ธธ์ฐพ๊ธฐ ์˜ˆ์‹œโ€‹

@ํ˜œ์ธ ์ • :: ๊ณต๊ณต๋ฐ์ดํ„ฐํฌํ„ธ์—์„œ ์ •๋ฅ˜์†Œ๋ณ„ ๋ฒ„์Šค ๋„์ฐฉ ์˜ˆ์ • ์‹œ๊ฐ„์„ ๋”ฐ๋กœ ๋ถˆ๋Ÿฌ์™€์„œ ์šฐ๋ฆฌ๊ฐ€ ํ•ฉ์ณ์ฃผ๋Š” ์ž‘์—… ํ•„์š”

์•„๋ž˜ ์˜ˆ์‹œ ์ฐธ๊ณ 

https://lab.odsay.com/guide/guide#guideWeb_2

๊ฒฝ๋กœ์„  ๊ทธ๋ฆฌ๊ธฐโ€‹

https://kimmandooo.tistory.com/138


NAVER Maps API v3

[TMAP] TMAP API ๋„๋ณด ๊ธธ์ฐพ๊ธฐ

Guide | T MAP API

Guide | T MAP API

https://tmapapi.tmapmobility.com/main.html#webservice/sample/WebSamplePedestrian

๋„ค์ด๋ฒ„ ์ง€๋„ JavaScript API ์™„๋ฒฝ ๊ฐ€์ด๋“œ โ€“ ์˜ค๋ฒ„๋ ˆ์ด ํŽธ

์•ฑ ์ œ์ž‘ (3) ๋„ค์ด๋ฒ„์ง€๋„ ์œ ํ‹ธ ์•ฑ

[iOS] NaverMap API - Directions(๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฃจํŠธ ๊ธฐ๋Šฅ)

๐Ÿง‘โ€๐Ÿ’ปย ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•โ€‹

NAVER Maps API v3

  1. ์‹ค์‹œ๊ฐ„์œผ๋กœ GPS ๊ณต์œ  (์‹ค์‹œ๊ฐ„์œผ๋กœ ์œ„์น˜ ํŒŒ์•…์ด ๊ฐ€๋Šฅํ•œ์ง€)
  2. ๋‹ค์ค‘ GPS ์‹ค์‹œ๊ฐ„ ๊ณต์œ  (๋™์‹œ์— ์—ฌ๋Ÿฌ ์‚ฌ์šฉ์ž๊ฐ€ GPS๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€)
  3. GPS ๋ฐ”ํƒ•์œผ๋กœ ์ง€๋„ ์œ„์— ์ฐ์„ ์ˆ˜ ์žˆ๋Š”์ง€ (๋งˆ์ปค์— ๋Œ€ํ•œ CRUD ์ž‘์—…)
  4. ๋งˆ์ปค๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๊ฒฝ๋กœ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š”์ง€
  • [[๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ (socket)|๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ (socket)]]
  • [[๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ (์ง€๋„ API)|๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ (์ง€๋„ API)]]