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

๐Ÿ“ [2024-11-11] 3์ฃผ์ฐจ๋ฅผ ์—ฌ๋Š” ํšŒ์˜

ํ…œํ”Œ๋ฆฟ์˜ ๋ชฉ์  โ†’ ํšŒ์˜๋ฅผ ์ตœ๋Œ€ํ•œ ํšจ์œจ์ ์ด๊ณ  ์•Œ์ฐจ๋ฉด์„œ ๋น ๋ฅด๊ฒŒ ๋๋‚ด๊ธฐ. ๊ทธ๋Ÿฌ๋ฉด์„œ๋„ ํ™•์‹คํ•˜๊ฒŒ ๋…ผ์˜ํ• ๊ฑด ๋…ผ์˜ํ•˜๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ.

๐Ÿ“ย ํšŒ์˜ ๋ชฉํ‘œโ€‹

  • ๊ฐœ๋ฐœ ์ฐฉ์ˆ˜ํ•˜๊ธฐ ์œ„ํ•œ ์‚ฌ์ „ ๋…ผ์˜ ์‚ฌํ•ญ์„ ๋งˆ๋ฌด๋ฆฌ ์ง“๋Š”๋‹ค.

๐Ÿ“ย ํšŒ์˜ ์•ˆ๊ฑดโ€‹

  • ์ผ์ • ์‚ฐ์ถœ์„ ๋งˆ๋ฌด๋ฆฌ ํ•œ๋‹ค.
  • ์—ญํ•  ๋ถ„๋ฐฐ๋ฅผ ํ™•์‹คํžˆ ํ•œ๋‹ค.
  • ์ž‘์—… ์ƒํ™ฉ์„ ์ตœ๋Œ€ํ•œ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์•ˆ์„ ๋งˆ๋ จํ•œ๋‹ค.
  • ์บ”๋ฒ„์Šค์™€ ์ง€๋„ ๊ฐ„์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ •์˜ํ•œ๋‹ค.

๐Ÿ“ย ํšŒ์˜๊ฐ€ ๋๋‚ฌ์„ ๋•Œ์˜ ์ƒํƒœโ€‹

  • ํ•œ ์ฃผ๊ฐ„์˜ ์ผ์ • ์‚ฐ์ถœ์ด ๋๋‚ฌ๋‹ค. (๋ฐฐํฌ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์–ด๋–ป๊ฒŒ ํ•  ๊ฑด์ง€ ์ •์˜ํ–ˆ๋‹ค.)
  • ์—ญํ•  ๋ถ„๋ฐฐ๋ฅผ ํ™•์‹คํžˆ ํ–ˆ๋‹ค.
  • ์ž‘์—… ์ƒํ™ฉ์„ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ค‘๊ฐ„ ์žฅ์น˜๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.
  • ์บ”๋ฒ„์Šค์™€ ์ง€๋„ ๊ฐ„์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ •์˜ํ–ˆ๋‹ค.

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

โš™๏ธย ESLint์— ๋Œ€ํ•œ ๋ถˆํŽธ์‚ฌํ•ญ ์กด์žฌโ€‹

๐Ÿ’ปย Frontendโ€‹

  • no-param-reassign์— ๋Œ€ํ•œ ๊ณ ๋ฏผ โ†’ useRef ์‚ฌ์šฉ ๊ณผ์ •์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ณ  ์žฌํ• ๋‹น ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

๐Ÿ’พย Backendโ€‹

  • file extension ์ธ์‹ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. โ†’ js ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋ถ™์ด๋ฉด ์˜ค๋ฅ˜๋‚˜๊ณ , ์•ˆ๋ถ™์—ฌ๋„ ์˜ค๋ฅ˜๋‚œ๋‹ค.

โš™๏ธย ์ง€๋„์— ๋Œ€ํ•œ ์„ค์ • ๋‚ด์šฉโ€‹

20241111_3แ„Œแ…ฎแ„Žแ…ก_แ„’แ…ฌแ„‹แ…ด_img1

  • ์บ”๋ฒ„์Šค์™€ ์ง€๋„๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ๋งŒ ์ฃผ๊ณ  ๋ฐ›๋Š”๋‹ค.

    interface data = {
    latitude: number,
    longitude: number,
    }
    • canvas์— ์ „์ฒด ์ขŒํ‘œ๋ฅผ ๋กœ๋”ฉํ•˜๊ณ  ์ด๊ฑธ ์ด๋™ํ•˜๋Š” ๋ฐฉ์‹์„ ์ฑ„ํƒํ•œ๋‹ค.
    • ์ง€๋„๊ฐ€ ์ด๋™ํ•˜๊ฑฐ๋‚˜ ์ถ•์†Œ ์‹œ ์ขŒํ‘œ์ •๋ณด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์žฌ ์—ฐ์‚ฐ์„ ์‹œ์ž‘ํ•œ๋‹ค.
    • ์บ”๋ฒ„์Šค์™€ ์ง€๋„ ๊ฐ„์˜ ๋”œ๋ ˆ์ด ๋“ฑ์€ ์ผ๋‹จ ๊ตฌํ˜„ํ•˜๊ณ  ์ƒ๊ฐํ•œ๋‹ค. (๋‹ค์Œ์ฃผ๋กœ ๋ฏธ๋ฃธ)

โš™๏ธย ์—ญํ•  ๋ถ„๋ฐฐ๋Š” ์–ด๋–ป๊ฒŒ ํ•  ๊ฒƒ์ธ๊ฐ€?โ€‹

20241111_3แ„Œแ…ฎแ„Žแ…ก_แ„’แ…ฌแ„‹แ…ด_img2

๐Ÿค” ๋ฌธ์ œ ์ƒํ™ฉโ€‹

  • ํ”„๋ก ํŠธ์˜ ์ž‘์—… ์ง„๋„๊ฐ€ ๋„ˆ๋ฌด ๋Š๋ฆฌ๋‹ค. + ๋ฐฑ๋กœ๊ทธ๊ฐ€ ๋Œ€๋ถ€๋ถ„ ์ฒ˜๋ฆฌ๋˜๊ณ  ์žˆ์ง€ ์•Š๋‹ค.

๐Ÿค”ย ๋…ผ์˜ํ•  ์‚ฌํ•ญโ€‹

  • ๋ฐ๋ชจ ์‹œ์—ฐ์„ ์œ„ํ•ด์„œ๋Š” Router๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋น ๋ฅด๊ฒŒ Pages ๊ตฌ์กฐ๊ฐ€ ์žกํ˜€์•ผ ํ•œ๋‹ค.
  • Tailiwind CSS๋ฅผ ์œ„ํ•œ Compound๊ฐ€ ๋น ๋ฅด๊ฒŒ ์„ค์ •๋˜์–ด์•ผ ํ•œ๋‹ค.
  • ์ด๋ฅผ ๊ธฐ๋ฐ˜ํ•ด์„œ ์ •์  UI/UX๊ฐ€ ๋จผ์ € ๊ตฌํ˜„์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.
  • ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ๋น ๋ฅด๊ฒŒ ๋‚˜์™€์•ผ ํ•œ๋‹ค.
  • ์ด ๋ชจ๋“  ์ž‘์—…์€ ์ด๋ฒˆ์ฃผ์— ๋๋‚˜๊ณ  ๋ฐฐํฌ๊ฐ€ ์ด๋ฃจ์–ด์ ธ์•ผ ํ•œ๋‹ค.
  • ๋ฐฑ์•ค๋“œ๋Š” ์ด๋ฒˆ์ฃผ์— ๋๋‚ด๊ณ , ์ดํ›„์—๋Š” J234 ์ •ํ˜œ์ธ์ด ํ”„๋ก ํŠธ์— ๋ถ™์–ด์„œ ์ž‘์—…ํ•œ๋‹ค.

๐Ÿ“ย ๊ฒฐ๋ก โ€‹

  1. ESLint ๋ฐ TSConfig์—์„œ์˜ ๋ถˆํŽธ์‚ฌํ•ญ์ด ์กด์žฌ โ‡’ J210 ์ž„์žฌ๋„๊ฐ€ ์ ์‹ฌ ๋•Œ ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •
  2. ํ”„๋ก ํŠธ ์ž‘์—… ๋ถ„๋ฐฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง„ํ–‰
    • React-Router ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ path ์™€ page ์„ค์ • โ†’ J060 ๊น€์ฃผ์›
    • Tailwind css Compound + ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ โ†’ J174 ๊น€๋™์œจ
    • ์ง€๋„ ์„ค์ • ๋ฐ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ(Drawer) โ†’ J210 ์ž„์žฌ๋„
  3. ์œ„์˜ ๊ณผ์ •์€ ๋‹ค์Œ์˜ ์กฐ๊ฑด์„ ๋”ฐ๋ฆ„
    • ๋‚ด์ผ๊นŒ์ง€ ์™„์ˆ˜
    • ๊นƒํ—ˆ๋ธŒ ํ”„๋กœ์ ํŠธ์— ์ด์Šˆ๋ฅผ ๋งŒ๋“ค๊ณ , ์ด์— ๋”ฐ๋ผ์„œ ํ…Œ์Šคํฌ๋ฅผ ์ „๋ถ€ ์—…๋กœ๋“œ
    • ์ดํ›„์— ๊ฐœ๋ฐœ (์ž‘์—…์ƒํ™ฉ ๊ณต์œ  ๋ฐ ๋‹ค๋ฅธ ํŒ€์›์ด ์ž‘์—… ๋งˆ์น˜๋ฉด ๋น ๋ฅด๊ฒŒ ๋ถ™๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ธฐ ์œ„ํ•จ)
  4. ์ž‘์—… ์ง„ํ–‰์˜ ์›ํ™œํ•œ ์†Œํ†ต์„ ์œ„ํ•ด์„œ ๋‹ค์Œ์˜ ๊ทœ์น™ ์ถ”๊ฐ€
    • ๋งค์ผ 7์‹œ (๋ถ€์ŠคํŠธ์บ ํ”„ ์ฝ”์–ด์‹œ๊ฐ„์˜ ์ข…๋ฃŒ์‹œ๊ฐ„)์— ํ˜„์žฌ ์ž‘์—… ์ƒํ™ฉ ๋ณด๊ณ 
    • ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ๋•Œ ํ™”๋ฉด๊ณต์œ ํ•˜๊ณ  ์ž‘์—…์ƒํ™ฉ ๊ณต์œ 

๐Ÿ“ย ๊ธฐํƒ€โ€‹

  • ๊ฐœ๋ฐœ ์ง„ํ–‰์ƒํ™ฉ ๋น ๋ฅด๊ฒŒ ๋ฝ‘์•„๋‚ด๊ณ , ์ดํ›„์— docs ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• J210 ์ž„์žฌ๋„๊ฐ€ ๋ช…์„ธ