6์ฃผ์ฐจ ์ปคํ”ผ์ฑ—

๋‚ ์งœ
Jan 6, 2024
 

usecallback, usememo

  • ์š”์ฆ˜์—๋Š” ์•ˆ์“ฐ๋Š”๊ฒŒ ํŠธ๋žœ๋“œ์ธ ๊ฒƒ ๊ฐ™๋‹ค.
  • ํ•„์š”ํ•  ๋•Œ๋งŒ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. (usememo๋Š” ๊ฑฐ์˜ ์“ธ ์ผ์ด ์—†๋‹ค.)
    • ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ๋ถ€์กฑํ•ด์„œ ๋ปฃ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. -> ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋งŽ์„ ๊ฒฝ์šฐ. usememo๋„ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๋จน์Œ.
    • usememo๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ
      • ๊ฐ€์ƒ๋ฆฌ์ŠคํŠธ, lazy๋กœ๋”ฉ์ฒ˜๋ฆฌ

ํ”„๋กœ์ ํŠธ ์ฝ”๋“œ์™€ ๋ฆฌ๋ทฐ ๊ด€๋ จ

  • input, button๋“ค์— form์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
    • ์žฅ์ 1. ์‹œ๋ฉ˜ํ‹ฑํ•˜๊ฒŒ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค. - ํ™•์‹คํ•˜๊ฒŒ ์ œ๊ณต(์ ‘๊ทผ์„ฑgood)
    • ์žฅ์ 2. form์— require, maxlength, minlength -> nativeํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. (variantsํ•œ ๋ถ€๋ถ„ ๋“ค์ด ๋งŽ์ด ๋“ค์–ด๊ฐ”๋‹ค.)
 
  • button์—์„œ border๊ฐ€ ํƒ€์ž…์ด ๋‹ค์–‘ํ•˜๋‹ค๋ฉด, ์ค€ํ˜๋‹˜์ฒ˜๋Ÿผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ์ˆ˜ ์žˆ๋‹ค. ์•„๋‹ˆ๋ผ๋ฉด, ์„ฑ๋ฏผ๋‹˜์ฒ˜๋Ÿผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ์ˆ˜ ์žˆ๋‹ค.
 
  • Q. ๊ธฐ๋ณธ์ ์œผ๋กœ tailwind ํ…Œ๋งˆ๋ฅผ ๋“ฑ๋กํ•ด์„œ, gap์ด๋‚˜ size๊ฐ™์€ ๊ฒฝ์šฐ์— ์ง€์ •์„ ํ•ด๋‘๊ณ  ์‚ฌ์šฉ์„ ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ๋ฐฉ๋ฒ•์€ ์œ ๋™์„ฑ์ด ํฌ๊ณ , variants๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ‡ด์ƒ‰๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค - ๊ณ ๋ฏผ
    • ๋””์ž์ธ์‹œ์Šคํ…œ์„ ๋งŒ๋“ ๋‹ค๋ฉด -> ์ œํ•œ๋œ ์ž์œ ๋„
 
  • Q. ๊ฐœ๋ฐœ ์‹œ๊ฐ„ ๋ถ€์กฑ์ด ๊ฑฑ์ •๋˜๋Š”๋ฐ, ํšจ์œจ์ ์œผ๋กœ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•?
    • case๋ณ€ํ™˜๊ฐ™์€๊ฒƒ, api, ๊ณตํ†ต ๋œ ๊ฒƒ -> ์† ๋น ๋ฅธ ํ•œ ๋ช…์ด ํ•˜๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค. ํŽธํ•˜๋‹ค.
    • ๋ฏธ๋ฆฌ ์ด์Šˆ๋ฅผ ๋‹ค ๋”ฐ๋†“๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค.
    • mock์„œ๋น„์Šค ์›Œ์ปค ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค.
      • ๋‹ค์–‘ํ•œ ์ผ€์ด์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ ๊ณ ํ†ต์Šค๋Ÿฝ๋‹ค. api์ŠคํŒฉ์€ ํ˜‘์˜ ํ•˜๋ฉด์„œ ์ง„ํ–‰ํ•˜๋Š”๋ฐ.. page๋ฅผ ๋งŒ๋“ค ๋‹ค๋ณด๋ฉด, api๋ฅผ ์ชผ๊ฐœ์•ผํ•˜๊ฑฐ๋‚˜ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. api๊ฐ€ ๋งŒ๋“ค์–ด์ง„ ํ›„์— ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ์ˆ˜์ •ํ•˜๋ ค๋ฉด ํž˜๋“ค๋‹ค.
      • Nock, JSON Server, Mirage์™€ ๋น„๊ต๋ฅผ ํ•ด๋†จ๋‹ค. -> ๋ชจ๋‘ Mock์ด๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉ mockํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ๋‹ค. msw๊ฐ€ ์ œ์ผ ์ข‹๋‹ค. = Mock Service Worker
      • page๊ฐœ๋ฐœ์„ ํ•  ๋•Œ๋Š” ๋ชจ๋‘ storybook์— ๋ถ™์ด์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. -> mock์ด์šฉ good ์ด๋Ÿฐ ์ฒ˜๋ฆฌ ๋‹ค ํ•ด๋†“์œผ๋ฉด ์—„์ฒญ ํŽธํ•˜๋‹ค.
 
  • ์‹œ๊ฐ„์ด ์—†์œผ๋ฉด ๋ฐœ์ƒ๋˜๋Š” ์ด์Šˆ๋“ค
    • ๋‚  ๊ฒƒ์˜ ์ปค๋ฐ‹ - ๊ทธ๋ž˜๋„ ์ •๋ฆฌ๋œ ์ปค๋ฐ‹์„ ์˜ฌ๋ ค์•ผ ๋œ๋‹ค.
    • ํฌํด๋กœ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋ผ๋ฉด - ๋ฎ์–ด๋†“์ง€ ๋ง๊ณ , ์ปค๋ฐ‹์„ ์ •๋ฆฌํ•ด๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.
    • ๋’ค๋กœ ๊ฐ€๋”๋ผ๋„ ์ปค๋ฐ‹ ๋ฉ”์„ธ์ง€ ์ž˜ ์ž‘์„ฑํ•˜๊ธฐ
    • PR๋„ ์ž˜ ์˜ฌ๋ฆฌ๊ธฐ
    • ๋จธ์ง€ํ•˜๊ธฐ ์ „์— ์ž˜ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
 
  • api๋Š” ํ”„๋กœ์ ํŠธ ์ „์ฒด๋ฅผ ์ด๊ด„ํ•˜๋Š” ๋А๋‚Œ์ด์—ฌ์„œ, common์— ๋‘๋Š” ๊ฒƒ์€ ์–ด๋–ค๊ฐ€. ๋‚˜์ค‘์— ๊ตฌ๋ถ„์ด ๋  ์—ฌ์ง€๊ฐ€ ์žˆ๊ณ ..

๋„ค์ด๋ฒ„ ๋‰ด์Šค๋ ˆํ„ฐ ์ฝ๊ธฐ

  • npm malware - ์ตœ์†Œํ•œ์˜ ๋ฐฉ์ง€
    • event-stream npm ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - ๋”์ด์ƒ ์œ ์ง€๋ณด์ˆ˜ ๋ชปํ•ด์š”. ํ•ด์ปค๊ฐ€ ๋ฐ›์•„๊ฐ€์„œ, github์—๋Š” ์•ˆ์˜ฌ๋ฆฌ๊ณ  build์—๋งŒ ๋„ฃ์–ด๋†”์„œ ํ•ดํ‚น
  • load balancing - ์–ด๋–ป๊ฒŒ ์„œ๋ฒ„์˜ http ์š”์ฒญ์„ ๋ถ„์‚ฐํ• ์ง€.
  • Q. styleX๋„ ๋งŽ์ด ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™๋‚˜์š”?
    • ๋„ˆ๋ฌด ์„ฑ์ˆ™ํ•œ ์นœ๊ตฌ๋“ค์ด ๋งŽ๋‹ค.
    • meta๊ฐ€ ์ฃผ๋„ํ•˜๋Š” FEํŠธ๋žœ๋“œ๊ฐ€ ๋์ด ๋‚  ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค.
    • recoil, vercel์„ ์˜คํžˆ๋ ค ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.
    • vercel์˜ ์‹œ๋Œ€๊ฐ€ ์˜ค์ง€ ์•Š์„๊นŒ.