์ˆ˜์š”์ผ

Date
Tags
์ž‘์„ฑ ์ฐธ๊ณ  ์‚ฌํ•ญ
  • ๊ณ„ํš ๊ณต์œ ๋ฅผ ํ†ตํ•ด ์Šค์Šค๋กœ ํ•˜๋ฃจ๋ฅผ ์ •๋ฆฌํ•˜๋Š” ์‹œ๊ฐ„ ๊ฐ–๊ธฐ
  • ์˜๋ฏธ ์—†๋Š” ๋‚ด์šฉ ๋ณด๋‹ค๋Š” ๋ฐ˜์„ฑ๊ณผ ํ”ผ๋“œ๋ฐฑ ์š”์ฒญ ์œ„์ฃผ๋กœ ์ž‘์„ฑํ•˜๊ธฐ
  • ์–ต์ง€๋กœ ๋‚ด์šฉ ์ฑ„์›Œ ๋„ฃ์„ ํ•„์š” x
 

์˜ค๋Š˜์˜ ๊ณ„ํš

  • ๊ถŒ๊ธฐ๋ฒ”
    • ํŒ€ ์ฝ”๋“œ๋ฆฌ๋ทฐ
    • ๊ฐ•์˜
    • mui ํŒŒํ—ค์น˜๊ธฐ..
    • ํ•ด์ปคํ†ค
  • ๊น€ํšจ์ค‘
    • ๋‹ค๋ฅธ ํŒ€ ๋ถ„์˜ ์ฝ”๋“œ๋ฆฌ๋ทฐ(X)
    • ๊ฐ•์˜ ๋“ฃ๊ธฐ(X)
    • ์ฝ”ํ…Œ ํ•œ ๋ฌธ์ œ
    • ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ฐ›์€๊ฑฐ ํ† ๋Œ€๋กœ ์กฐ๊ธˆ์ด๋ผ๋„ ๊ฐœ์„ ํ•ด๋ณด๊ธฐ(X)
  • ์ด๋ฏผํฌ
    • ๋‹ค๋ฅธ ํŒ€ ์ฝ”๋“œ๋ฆฌ๋ทฐ
    • ๊ฐ•์˜
    • ์ฝ”ํ…Œ 1๋ฌธ์ œ
    • ํ”„๋กœ์ ํŠธ
  • ์ž„์ง€์„ 
    • ๋‹ค๋ฅธ ํŒ€ ์ฝ”๋“œ ๋ฆฌ๋ทฐ
    • react ๊ฐ•์˜ ์ˆ˜๊ฐ•
    • ์•Œ๊ณ ๋ฆฌ์ฆ˜ 1๊ฐœ ํ’€์ด
    • ํ”„๋กœ์ ํŠธ - ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๊ตฌํ˜„ ๋ฐ api ์—ฐ๋™
    • til ์ž‘์„ฑํ•˜๊ธฐ
  • ์ •์žฌํฌ
    • ๊ฐ•์˜
      ๋‹ค๋ฅธ ํŒ€ ์ฝ”๋“œ๋ฆฌ๋ทฐ, ๋‹ต๋ณ€
      ์ฝ”๋”ฉํ…Œ์ŠคํŠธ 1๋ฌธ์ œ
      ์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ •๋ฆฌ ๋‚จ์€๊ฑฐ
      ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ
       

์–ด์ œ์˜ ๋ฐ˜์„ฑ

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

๊ณ ๋ฏผ ๋ฐ ํ”ผ๋“œ๋ฐฑ ์š”์ฒญ

  • ๊ถŒ๊ธฐ๋ฒ”
    • ๊น€ํšจ์ค‘
      • ์ด๋ฏผํฌ
        • ์ž„์ง€์„ 
          • button, input, form ๋“ฑ์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์–ด๋””์— ์†ํ• ๊นŒ์š”? (element? function? ๋“ฑ)
        • ์ •์žฌํฌ
           

          ๊ธฐํƒ€ ์žก๋‹ด ๋ฐ ๊ณต์œ  ์‚ฌํ•ญ

          • ํ”„๋กœ์ ํŠธ ๊ธฐ์ˆ  ์Šคํƒ?
           
          react ts // ๊ฒ€์ƒ‰ ์›น์‚ฌ์ดํŠธ ์ œ์ž‘ ํ”„๋กœ์ ํŠธ

          ๋ฐฐํฌํ™˜๊ฒฝ

          • ๋ฏผํฌ: ec2, vercel
          • ๊ธฐ๋ฒ”: ghpage, netlify
          • ํšจ์ค‘: vercel,netlify,๊นƒํ—™ํŽ˜์ด์ง€
          • ์žฌํฌ: aws ์ฐ๋จน, vercel
          • ์ง€์„  : aws๋ฅผ ๋ฐฑ์—”๋“œ ๋ถ„๊ป˜์„œ ํ•ด์ฃผ์…จ์–ด์—ฌโ€ฆ?

          react, next

          • ๋ฏผํฌ: next๋Š” ๋ง›๋ณด๊ธฐ๋งŒ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค! ์ œ๋Œ€๋กœ ์ดํ•ด๋ฅผ ๋ชปํ•˜๊ณ  ์ผ๋‹จ ์จ๋ณด๊ธฐ๋งŒ ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”..
          • ๊ธฐ๋ฒ”: next ์ฐ๋จน๋งŒ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.(๊ณต์‹๋ฌธ์„œ ๋”ฐ๋ผํ•˜๊ธฐ)
          • ํšจ์ค‘ : next ์ฐ๋จผ๋งŒ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.. ์ž์„ธํžˆ๋Š” ์ž˜ ๋ชจ๋ฅด๋Š” ๋А๋‚Œ
          • ์žฌํฌ: nextjs 13 ์š”์ฆ˜ ํ•ด๋ณด๋Š” ์ค‘์ž…๋‹ˆ๋‹ค
          • ์ง€์„ : next ์•ˆ ํ•ด๋ด์„œโ€ฆ ๋ฐฐ์šฐ๊ฒ ์Šต๋‹ˆ๋‹ค!

          ์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ

          • ๋ฏผํฌ: recoil
          • ๊ธฐ๋ฒ”: redux toolkit , recoil์€ ํ˜„์žฌ ํ•ด์ปคํ†ค์—์„œ ์‚ฌ์šฉ์˜ˆ์ •
          • ํšจ์ค‘ : recoil,redux
          • ์žฌํฌ: redux ๋‹ค ๊นŒ๋จน์Œโ€ฆ , recoil
          • ์ง€์„ : ์˜คโ€ฆ ๋ฐฐ์šฐ๊ฒ ์Šต๋‹ˆ๋‹ค

          css / scss tailwind emotion ๋“ฑโ€ฆ

          • ๋ฏผํฌ: ์ฃผ๋กœ styled-component ์จ์™”์Šต๋‹ˆ๋‹ค.
          • ๊ธฐ๋ฒ”: ์ฃผ๋กœ styled-component์‚ฌ์šฉ, tailwind์ฐ๋จน๋งŒ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค
          • ํšจ์ค‘ : ์ €๋„ ์ฃผ๋กœ styled-component..์ผ์Šต๋‹ˆ๋‹ค.
          • ์žฌํฌ: styled-component, tailwind
          • ์ง€์„ : styled-component

          ui ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - MUI, antd, radix ๋“ฑโ€ฆ

          • ๋ฏผํฌ: ํ”ผ๊ทธ๋งˆ๋ฅผ ๋‹ค๋ค„๋ณธ ์ ์€ ์žˆ์ง€๋งŒ,, ์ „๋ฌธ์ ์ด์ง€๋Š” ๋ชปํ•ด์š”
          • ๊ธฐ๋ฒ”: mui ๊ณต๋ถ€์ค‘์ž…๋‹ˆ๋‹ค
          • ์žฌํฌ: antd, radix๋ž‘ tailwind ๊ธฐ๋ฐ˜ headless ui ํ•ด๋ณด๋Š” ์ค‘โ€ฆ
          • ์ง€์„ : ํ”ผ๊ทธ๋งˆ๋ฅผ ๋‹ค๋ค„๋ดค์Šต๋‹ˆ๋‹ค(์ดˆ๋ณด?)
          • ํ”ผ๊ทธ๋งˆ๋ฅผ ์ •๋ง ์ดˆ์งœ ์ˆ˜์ค€์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

          TS

          • ๋ฏผํฌ: ํ”„๋กœ์ ํŠธ ํ•˜๋‚˜ ts๋กœ ์ง„ํ–‰ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค
          • ๊ธฐ๋ฒ”: ๋ฐ”๋กœ ts๋กœ ์ž‘์—…์€ ๋ชปํ•ด๋ดค์ง€๋งŒ reactjs๋ฅผ ts๋กœ ์ด์ฃผํ•˜๋Š” ์ž‘์—…์„ ๋‘์„ธ๋ฒˆ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.
          • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž˜ ๋‹ค๋ฃจ์ง„ ๋ชปํ•˜๋Š” ๋А๋‚Œ - ํšจ์ค‘
          • ์žฌํฌ: ์ต์ˆ™ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค
          • ์ง€์„ : ๋ถ€ํŠธ์บ ํ”„์™€์„œ ์ฒจ ๋ฐฐ์›Œ๋ดค์Šต๋‹ˆ๋‹คโ€ฆ

          storybook ์‚ฌ์šฉ์—ฌ๋ถ€

          • ๊ธฐ๋ฒ”: ์‚ฌ์šฉํ•ด๋ณธ์  ์—†์Šต๋‹ˆ๋‹ค..
          • ๋ฏผํฌ: ์ €๋„ ์ด๋ฒˆ ๊ฐ•์˜์—์„œ ์ฒ˜์Œ ๋ดค์Šต๋‹ˆ๋‹ค..
          • ํšจ์ค‘ : ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค,
          • ์žฌํฌ: ์‚ฌ์šฉ ๊ฒฝํ—˜ ์žˆ์Šต๋‹ˆ๋‹ค.
          • ์ง€์„ : react ๊ฐ•์˜์—์„œ ์ฒ˜์Œ ์ ‘ํ•ด ๋ฐฐ์šฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

          ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์—ฌ๋ถ€ - ๋‹จ์œ„ํ…Œ์ŠคํŠธ, E2E ์‚ฌ์šฉํ• ์ง€

          • ๋ฏผํฌ: ์ €๋Š” ํ…Œ์ŠคํŠธ์ฝ”๋“œ๋ฅผ ํ•œ ๋ฒˆ๋„ ์ž‘์„ฑํ•ด ๋ณธ ์ ์ด ์—†์–ด์š”.. ๐Ÿ˜‚
          • ๊ธฐ๋ฒ”: ์ €๋„ ์—†์Šต๋‹ˆ๋‹คโ€ฆ.
          • ํšจ์ค‘ : ๋‹จ์œ„ํ…Œ์ŠคํŠธ ์กฐ์ฐจ ์ œ๋Œ€๋กœ ์ž‘์„ฑํ•ด๋ณธ ์  ์—†๋Š” ๊ฑฐ ๊ฐ™์•„์š”.
          • ์žฌํฌ: ๋‹จ์œ„ํ…Œ์ŠคํŠธ ์ž‘์„ฑ์€ ํ•ด ๋ดค๋Š”๋ฐ ํ™œ์šฉ์€ ๋ชป ํ•ด๋ดค์Šต๋‹ˆ๋‹ค
          • ์ง€์„ : ์—†์Šต๋‹ˆ๋‹นโ€ฆ ใ… ใ…œ

          ๋นŒ๋“œํˆด์ด๋‚˜ ํ™˜๊ฒฝ - webpack, vite, parcel ๋“ฑ

          • ๊ธฐ๋ฒ”: webpack, vite ์‚ฌ์šฉ์€ ํ•ด๋ดค๋Š”๋ฐ ๊ทธ๋ ‡๊ฒŒ ์ „๋ฌธ์ ์ด์ง„ ๋ชปํ•œ ๋А๋‚Œ
          • ๋ฏผํฌ: ๋ณดํ†ต cra๋กœ ์‹œ์ž‘ํ–ˆ์–ด์„œ ์›นํŒฉ์ด๋‚˜ vite parcel์€ ์ด๋ฒˆ ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ์ฒ˜์Œ ๋‹ค๋ค˜๋˜ ๊ฒƒ ๊ฐ™์•„์š”
          • ํšจ์ค‘ : ์ €๋„ ๊ธฐ๋ฒ”๋‹˜๊ณผ ๋น„์Šทํ•ฉ๋‹ˆ๋‹น.
          • ์žฌํฌ: webpack, vite
          • ์ง€์„ : ์Œโ€ฆ ์—ด์‹ฌํžˆ ๋ฐฐ์šฐ๊ฒ ์Šต๋‹ˆ๋‹ค.

          ๊ธฐํƒ€

          • ๐ŸŽธ