IT/SSAFY

[SSAFY 7๊ธฐ]๊ณตํ†ตํ”„๋กœ์ ํŠธ "๋”๋ฏผํŠธ" ํ›„๊ธฐ

๋ฌด๋…ˆ 2022. 8. 21. 20:58

๐Ÿง‘๐Ÿป‍๐Ÿ’ป ๋‹ด๋‹น ์—ญํ• 

  • '๋”๋ฏผํŠธ' ์„œ๋น„์Šค ๊ธฐํš
  • ๊ฒฝ๋งค ์ค€๋น„ ๋ฐ ๊ฒฝ๋งค ์ŠคํŠธ๋ฆฌ๋ฐ ์„œ๋น„์Šค ๊ฐœ๋ฐœ
    • OpenVidu์™€ WebSocket์„ ํ™œ์šฉํ•œ webRTC ์‹ค์‹œ๊ฐ„ ์ŠคํŠธ๋ฆฌ๋ฐ ๊ฐœ๋ฐœ
  • ์›น ์•Œ๋ฆผ ์„œ๋น„์Šค ๊ฐœ๋ฐœ
    • Notification API ํ™œ์šฉํ•œ ๋ธŒ๋ผ์šฐ์ € ์•Œ๋ฆผ ์„œ๋น„์Šค
  • ์ฑ„ํŒ… ์„œ๋น„์Šค ๊ฐœ๋ฐœ
    • sockjs์™€ stompjs ํ™œ์šฉ
  • ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ์ •๋ณด๊ด€๋ฆฌ ์„œ๋น„์Šค ๊ฐœ๋ฐœ
    • React-hook-form์„ ์ด์šฉํ•œ ํšŒ์›๊ฐ€์ž… form ๊ด€๋ฆฌ
    • Recoil, React-Query๋ฅผ ์‚ฌ์šฉํ•œ ํšŒ์› ์ •๋ณด ์ƒํƒœ ๊ด€๋ฆฌ
    • ํœด๋Œ€ํฐ ์ธ์ฆ์„ ํ†ตํ•œ ํšŒ์›๊ฐ€์ž…
  • ์„œ๋น„์Šค ๋ฉ”์ธ ํ™ˆ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ
  • ๊ฒฝ๋งค, ์ƒํ’ˆ, ํ”„๋กœํ•„ ๊ฒ€์ƒ‰ ์„œ๋น„์Šค ๊ฐœ๋ฐœ
  • ๊ฒฝ๋งค ํ’ˆ๋ชฉ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ
  • 404 Not Found ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ
  • Recoil๊ณผ React-Query๋ฅผ ์ด์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ
  • ์žฌ์‚ฌ์šฉ ํ–ฅ์ƒ์„ ์œ„ํ•œ ๋ฌดํ•œ ์Šคํฌ๋กค ์ปดํฌ๋„ŒํŠธ ๋ฐ Skeleton UI ๊ตฌํ˜„
    • React-Query์˜ useInifiniteQuery์™€ IntersectionObserver Api ํ™œ์šฉ
  • styled-components๋ฅผ ์ด์šฉํ•œ CSS-in-JS ๋ฐฉ์‹ ์Šคํƒ€์ผ๋ง ๊ตฌํ˜„

โœ๏ธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ์ 

  • OpenVidu๋ฅผ ํ™œ์šฉํ•œ WebRTC: ์ƒ์†Œํ•˜๊ฒŒ ์—ฌ๊ฒจ์กŒ๋˜ webRTC๋ฅผ ์กฐ๊ธˆ์ด๋ผ๋„ ์‰ฝ๊ฒŒ ํ”„๋กœ์ ํŠธ์— ๋„์ž…ํ•˜๊ณ ์ž openvidu ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•˜์˜€๋‹ค. ๋„์ž…ํ•จ์— ๋ถˆ๊ตฌํ•˜๊ณ  ๊ณต์‹ ๋ฌธ์„œ์— ๋‚ด์šฉ์ด ๋ณ„๋กœ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ๊ณ ์šฉ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ์ฝ”๋“œ๋“ค์„ ํ•œ ์ค„์”ฉ ์ผ์–ด๊ฐ€๋ฉฐ ํ•ด๋‹น ๋ฉ”์„œ๋“œ๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ํŒŒ์•…ํ•ด์•ผ ํ–ˆ์—ˆ๋‹ค. ํ˜ผ์ž ์‹œ์ž‘ํ–ˆ์ง€๋งŒ ๊ทธ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด๋‚˜ ๋ฒ…์ฐผ๊ธฐ ๋•Œ๋ฌธ์— ํŒ€์›๊ณผ ํ•จ๊ป˜ ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋ฉฐ ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„์”ฉ ํŒŒ์•…ํ•˜์˜€๊ณ , ๊ฐ๊ฐ์˜ ๋ฉ”์„œ๋“œ๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ถ”ํ›„ ๊ฐœ์ธ์˜ devices์— ์ ‘๊ทผํ•˜์—ฌ ์นด๋ฉ”๋ผ๋ฅผ on/off ํ•˜๊ณ  ๋งˆ์ดํฌ๋„ ์„ ํƒ์ ์œผ๋กœ ์ปจํŠธ๋กคํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, webRTC๋ฅผ ํ™œ์šฉํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ดํ›„์— ๋˜ ํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ๋”์šฑ๋” ์ž˜ ์ด์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.
  • SockJS์™€ stompjs๋ฅผ ํ™œ์šฉํ•œ websocket ์ฑ„ํŒ… ๋ฐ ๊ฒฝ๋งค ์ŠคํŠธ๋ฆฌ๋ฐ ์‹ค์‹œ๊ฐ„ ๊ฒฝ๋งค: websocket์„ ์ƒ๋Œ€๋ฐฉ๊ณผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ๋•Œ ์„œ๋ฒ„๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•ดํ•˜๋ฉฐ, subscribe๋ฅผ ํ†ตํ•ด ํด๋ผ์ด์–ธํŠธ ๊ฐ„์˜ ํ†ต๋กœ๋ฅผ ์—ด์–ด์ฃผ๋ฉฐ ์ฑ„ํŒ…์„ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์›๋ฆฌ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ฒฝ๋งค ์ŠคํŠธ๋ฆฌ๋ฐ ํŽ˜์ด์ง€์— ๋„์ž…ํ•˜๊ธฐ๊นŒ์ง€ ์˜ค๋ž˜ ๊ฑธ๋ ธ์ง€๋งŒ, ์ดํ›„ 1๋Œ€ 1 ์ฑ„ํŒ… ๊ตฌํ˜„์—์„œ๋Š” ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ง€๊ธˆ์€ ๊ฐ„๋‹จํ•œ ๋ฉ”์‹œ์ง€ ์ •๋„๋ฐ–์— ์ฃผ๊ณ ๋ฐ›์ง€ ๋ชปํ•˜์ง€๋งŒ, ์ถ”ํ›„ ์ด๋ฏธ์ง€ ์ „๋‹ฌ ๋“ฑ ๋ฌด๊ถ๋ฌด์ง„ํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.
  • Recoil๊ณผ React-Query: ํ”„๋กœ์ ํŠธ๊ฐ€ ํฐ ๊ทœ๋ชจ๋Š” ์•„๋‹ˆ์ง€๋งŒ ์–ด๋Š ์ •๋„์˜ ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค ์—ฌ๊ฒผ๊ณ , ๊ทธ๋™์•ˆ ํ•™์Šตํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ๋‘ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์šฐ์„  ๊ธฐ์กด์˜ redux์˜ ๋Ÿฌ๋‹ ์ปค๋ธŒ๋กœ ์ธํ•ด react๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋Š” ๋‘ ํŒ€์›์ด ๋‹จ ์‹œ๊ฐ„์— ์ ์šฉํ•˜๊ธฐ ์–ด๋ ต๋‹ค ํŒ๋‹จํ•˜์˜€๊ณ , ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ํด๋ผ์ด์–ธํŠธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌํ•˜์—ฌ ํ•˜๋‚˜์˜ ์Šคํ† ์–ด์— ์ง‘์ค‘๋„๋ฅผ ๋‚ฎ์ถ”๊ธฐ ์œ„ํ•ด recoil๊ณผ react-query๋ฅผ ๊ฐ๊ฐ ๋„์ž…ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. recoil์€ redux์— ๋น„ํ•ด devtools๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๊ณ  ์•„์ง ์™„์ „ํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ”์—ˆ๋‹ค๊ณ  ๋ณด๊ธฐ ์–ด๋ ค์› ์ง€๋งŒ ํ•ด๋‹น ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•จ์— ์žˆ์–ด ์ ๋‹นํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  react-query๋ฅผ ๋„์ž…ํ•˜์—ฌ ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์˜ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜์˜€๊ณ , ๋ฌดํ•œ ์Šคํฌ๋กค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌํ˜„ํ•จ์— ์žˆ์–ด ํ•ด๋‹น ๊ธฐ์ˆ ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ฑ ๋˜ํ•œ ์ข‹์•„์กŒ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.
  • React-Hook-Form: ๋กœ๊ทธ์ธ ๋ฐ ํšŒ์›๊ฐ€์ž… ๋“ฑ ๋‹ค์–‘ํ•œ form์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ์žˆ์–ด ๋ฐธ๋ฆฌ๋ฐ์ด์…˜ ๋“ฑ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ ๋„์ž…ํ•˜์˜€๋‹ค. ์ž์ฒด ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์— ์žˆ์–ด ์ •๊ทœํ‘œํ˜„์‹, required ๋“ฑ ์ •๋ง๋กœ ๋งŽ์€ ๊ณณ์—์„œ ๋ฐธ๋ฆฌ๋ฐ์ด์…˜ ํ•ญ๋ชฉ์ด ํ•„์š”ํ•˜์˜€๊ณ , ๊ฐ๊ฐ์˜ ๋ฉ”์„œ๋“ค์„ ๋ณ„๋„๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋„์›€์„ ๋ฐ›์•„ ์ˆ˜์›”ํ•˜๊ฒŒ ๊ฒ€์ฆ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • React.Memo๋ฅผ ํ™œ์šฉํ•œ ๋ฆฌ ๋ Œ๋”๋ง ์ค„์ด๊ธฐ: map์„ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋ฉฐ ์ฝ”๋“œ ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ, ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ ๋ชจ๋‘ ์žฌ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ํŠนํžˆ 1:1 ์ฑ„ํŒ…์˜ ๊ฒฝ์šฐ ์ฑ„ํŒ…์ฐฝ ํ•˜๋‚˜๋ฅผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ•˜์˜€๊ณ , socket์— ์˜ํ•ด ์ฑ„ํŒ…์„ ์ฃผ๊ณ ๋ฐ›์„ ๋•Œ๋งˆ๋‹ค ์ฑ„ํŒ…์„ state์— ์ €์žฅํ•˜๊ณ  ์ถ”๊ฐ€์ ์œผ๋กœ ๋ Œ๋”๋ง์„ ์‹œํ‚ค๋ ค๊ณ  ํ•˜์˜€๋‹ค. memo๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๋ฉ”์‹œ์ง€๊ฐ€ ์ถ”๊ฐ€๋  ๋•Œ๋งˆ๋‹ค ๊ธฐ์กด์— ์ €์žฅ๋œ ๋ฉ”์‹œ์ง€๊นŒ์ง€ ๋ชจ๋‘ ์žฌ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์—ฌ 100๊ฐœ์˜ ๋ฉ”์‹œ์ง€๊ฐ€ ์žˆ์—ˆ์„ ๋•Œ 100๋ฒˆ์˜ ๋ Œ๋”๋ง์ด ์ถ”๊ฐ€์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. ํ•˜์ง€๋งŒ memo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌ ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์ด๋ฃฐ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

โœ… ํ”„๋กœ์ ํŠธ์—์„œ ์•„์‰ฌ์šด ์ 

  • ์ด๋ฏธ์ง€ ๋ฆฌ์‚ฌ์ด์ง•์„ ํ†ตํ•œ ์ตœ์ ํ™” ๋ถ€์žฌ
    • ์„ฑ๋Šฅ ์ตœ์ ํ™” ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ CLS๋ฅผ 0.2๋กœ ๋‚ฎ์ถ”๊ณ  select ์˜ต์…˜์„ ํ†ตํ•ด ๊ธฐ๋ณธ ๋กœ๊ณ ์˜ png, webp๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ฅธ ์ด๋ฏธ์ง€ ํ™•์žฅ์ž๋ฅผ ์„ ํƒํ•˜๋„๋ก ํ•˜์˜€์œผ๋ฉฐ, banner์™€ logo ๋“ฑ์˜ ์ด๋ฏธ์ง€ ๋น„์œจ์„ ์ผ์น˜์‹œ์ผœ ํผํฌ๋จผ์Šค ์„ฑ๋Šฅ์„ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ์—ˆ๋‹ค.
    • ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ด๋ฏธ์ง€๋ฅผ ๋“ฑ๋กํ•˜์—ฌ ํ•ด๋‹น ์ด๋ฏธ์ง€๊ฐ€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฉ”์ธ์— ๋‚˜ํƒ€๋‚˜๋ฉด์„œ S3์— ์˜ฌ๋ผ๊ฐ„ ํŒŒ์ผ์— ๋Œ€ํ•œ ํ™•์žฅ์ž๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ๋ชปํ•˜์˜€๊ณ , ์นด๋“œ์˜ ์ด๋ฏธ์ง€ ๋น„์œจ์„ 4:3์œผ๋กœ ๊ณ ์ •ํ•ด๋‘์—ˆ๊ธฐ ๋•Œ๋ฌธ์— img ํƒœ๊ทธ์˜ object-fit์œผ๋กœ cover๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€์˜ ๋น„์œจ์„ ๋‹ค๋ฅด๊ฒŒ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํผํฌ๋จผ์Šค๊ฐ€ ๋–จ์–ด์กŒ๋‹ค. ์ด๋ฏธ์ง€ ๋ฆฌ์‚ฌ์ด์ง•์„ ๋„์ž…ํ•ด ํ•ด๋‹น ํผํฌ๋จผ์Šค์˜ ์„ฑ๋Šฅ์„ ์˜ฌ๋ฆฌ์ง€ ๋ชปํ•ด ์•„์‰ฝ๋‹ค.
  • typescript ๋ฏธ๋„์ž…
    • react์— ๋Œ€ํ•œ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์— typescript๋ฅผ ๋„์ž…ํ•ด๋ณด๊ณ  ์‹ถ์€ ์š•์‹ฌ์ด ์žˆ์—ˆ์ง€๋งŒ, react๋ฅผ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šฐ๋Š” ํŒ€์›๋“ค๋กœ ์ธํ•ด ts๊นŒ์ง€ ๋„์ž…์€ ๋ฌด๋ฆฌ๋ผ ํŒ๋‹จ์ด ๋˜์–ด ๋„์ž…ํ•˜์ง€ ๋ชปํ•˜์˜€๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ ๋‚ด๊ฐ€ ํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ts๋ฅผ ๋„์ž…ํ•˜๊ฑฐ๋‚˜ ๋‹ค์Œ ํ”„๋กœ์ ํŠธ์—์„œ ts๋ฅผ ๋„์ž…ํ•˜๊ธฐ ์œ„ํ•œ ํ•™์Šต์„ ํ•  ๊ณ„ํš์ด๋‹ค.

๐Ÿ“Œ ํ–ฅํ›„ ๊ณ„ํš

  • typescript ๋„์ž…
    • ๋™์  ์–ธ์–ด์ธ js์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ์ •์  ์–ธ์–ด์ธ typescript์œผ๋กœ ์ „ํ™˜ํ•˜์—ฌ ์บ„ํŒŒ์ผ ๋‹จ๊ณ„์—์„œ ๋ฏธ๋ฆฌ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋Š” ๋“ฑ ์žฅ์ ์„ ๊ฐ€์กŒ๊ธฐ ๋•Œ๋ฌธ์— ์ถ”ํ›„ ts๋ฅผ ๋„์ž…ํ•ด์„œ ํ”„๋กœ์ ํŠธ์˜ ์™„์„ฑ๋„๋ฅผ ๋†’์ผ ๊ฒƒ์ด๋‹ค.
  • ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ ์ •
    • ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹จ์ˆœํžˆ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ์—ฌ๋ถ€๋ฅผ ๋– ๋‚˜์„œ ๋…ผ๋ฆฌ์ ์œผ๋กœ ํŒ๋‹จํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์— ์•Œ๋งž์€ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•  ๊ณ„ํš์ด๋‹ค.
  • ๋ฆฌ์•กํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™”

๐Ÿ“Œ ํ”„๋กœ์ ํŠธ ํ›„๊ธฐ

ํ”„๋กœ์ ํŠธ ์ต๋ช… ํ›„๊ธฐ

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

๋”๋ฏผํŠธ ํ”„๋กœ์ ํŠธ ์ด์Šˆ ๋ฐ ํ•ด๊ฒฐ ๊ด€๋ จ ๊ธ€

๋ฐ˜์‘ํ˜•