KakaoTalk_Photo_2022-02-15-20-44-08.gif

๐Ÿ‘ฉโ€๐Ÿ’ปย ์กฐ์„œ์˜ (Seoyoung Jo)


๐Ÿ“ž 010-2665-8189

โœ‰๏ธ [email protected]

๐Ÿ”— https://github.com/Seo00000

๐Ÿ“š https://dev-log-0.tistory.com/


๐Ÿš€ Introduce

Q1. ๊ฐ„๋‹จํ•œ ์†Œ๊ฐœ๋ฅผ ํ•ด์ฃผ์„ธ์š”

4๋…„์ฐจ ์›น ๊ฐœ๋ฐœ์ž๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ผ๋Š” ํฌ์ง€์…˜์„ ์ •ํ•˜๊ณ  ์ผํ•œ์ง€๋Š” 2๋…„ ์ •๋„ ๋์Šต๋‹ˆ๋‹ค. ํšŒ์‚ฌ์—์„œ ์‚ฌ์ˆ˜ ์—†์ด ์ผํ•œ ๊ฒฝํ—˜์ด ๋งŽ์œผ๋ฉฐ, UX์™€ ๊ธฐํš์— ๋Œ€ํ•ด ๊ด€์‹ฌ์ด ์ƒ๊ธด ํ›„ ์Šคํ„ฐ๋””๋ฅผ ํ†ตํ•ด ์ž…๋ฌธํ•˜์—ฌ ํ˜„์žฌ๋Š” ํšŒ์‚ฌ์—์„œ ๊ธฐํš ํŒŒํŠธ์—๋„ ์ฐธ์—ฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Q2. ์ฃผ ์Šคํƒ์ด ๋ฌด์—‡์ธ๊ฐ€์š”?

CSR ๊ตฌ์กฐ์˜ React ์ฝ”๋“œ๋ฅผ ์ฃผ๋กœ ์ž‘์—…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Next.js๋ฅผ ์‚ฌ์šฉํ•ด SSR๋กœ ์ด๋ฃจ์–ด์ง„ ํ”„๋กœ์ ํŠธ๋„ ๋‘์–ด๋ฒˆ ๊ฒฝํ—˜ํ•ด๋ดค๊ณ  ํ˜„์žฌ ์žฌ์ง์ค‘์ธ ํšŒ์‚ฌ์—์„œ Next.js๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐœ๋ฐœ ๋ฐ ๋Ÿฐ์นญํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ๋„ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๊ณ , ํšŒ์‚ฌ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด์— ๊ตญํ•œ๋˜์ง€ ์•Š๊ณ  ์›น ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋ฅผ ๋ชฉํ‘œ๋กœ ๊ณต๋ถ€ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— Node.js, php(laravel), python ๊ณผ ๊ฐ™์€ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•œ ๊ฐœ๋ฐœ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Q3. ๋‹น์‹ ๋งŒ์˜ ๊ฐ•์ ์ด ์žˆ๋‹ค๋ฉด?

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

Q4. ๋‹น์‹ ์˜ ์—…๋ฌด์Šคํƒ€์ผ์€ ์–ด๋–ค๊ฐ€์š”? ๊ทธ๋ฆฌ๊ณ  ์–ธ์ œ ์—…๋ฌด์— ๋ณด๋žŒ์„ ๋А๋ผ์„ธ์š”?

์ €๋Š” ๋ฌธ์ œ์ ์„ ์ฐพ์•„ ๊ฐœ์„ ํ•  ๋ฐฉ๋ฒ•์„ ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•˜๊ณ  ํ•ด๊ฒฐํ•ด๋‚˜๊ฐ€๋Š” ๊ณผ์ •์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์ด์Šˆ๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ๋‹จ์ˆœํžˆ ํ˜ผ์ž ์ฒ˜๋ฆฌํ•ด๋‘๊ณ  ๋๋‚ด๋Š” ๋Œ€์‹  ํ•ด๋‹น ์ด์Šˆ ์‚ฌํ•ญ์— ๋Œ€ํ•ด ์˜๊ฒฌ์„ ๋‚˜๋ˆ„๊ณ  ํ•ด๊ฒฐํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์ข…์ข… ์–ด๋ ค์šด ๋ถ€๋ถ„์— ๋ง‰ํ˜€ ๋™๋™๋Œ€๋‹ค๊ฐ€๋„ ๊ทธ ๋ถ€๋ถ„์„ ๋„˜์–ด ํ•œ์ธต ๋” ์„ฑ์žฅํ–ˆ๋‹ค๋Š” ๋А๋‚Œ์ด ๋“ค ๋•Œ, ๊ทธ๋ฆฌ๊ณ  ์ž‘์—…ํ•œ ๊ฒฐ๊ณผ๋ฌผ์— ๋Œ€ํ•ด ๋ณด๋žŒ์„ ๋А๋‚„ ๋•Œ ๊ฐœ๋ฐœ์ž๋ผ๋Š” ์ง์—…์„ ์„ ํƒํ•˜๊ธธ ์ž˜ํ–ˆ๋‹ค๊ณ  ๋А๋‚๋‹ˆ๋‹ค.

Q5. ์š”์ฆ˜ ๊ฐ€์žฅ ๊ด€์‹ฌ์žˆ๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ฃผ์„ธ์š”.

ํ”„๋ก ํŠธ๋กœ ์ „ํ–ฅํ•œ์ง€ ์–ผ๋งˆ ๋˜์ง€ ์•Š์€ ์ƒํƒœ๋กœ ํ„ฐ์ง„ ํšŒ์‚ฌ ๋‚ด๋ถ€ ์ด์Šˆ๋กœ ์ธํ•ด ํƒ‘๋‹ค์šด ๊ณต๋ถ€ ๋ฐฉ์‹์œผ๋กœ ์‹ค๋ฌด ํˆฌ์ž… ์ดํ›„, ์ด๋ฏธ ์ƒ์„ฑ๋˜์–ด ์žˆ๋˜ ํ”„๋กœ์ ํŠธ์˜ mobx, class component, javascript ๊ตฌ์กฐ๋กœ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ–ˆ์œผ๋‚˜ ์ตœ๊ทผ์—๋Š” ๊ฐœ์ธ์ ์œผ๋กœ recoil, functional component, typescript ํ˜•ํƒœ์˜ ๊ตฌ์กฐ๋กœ ๊ณต๋ถ€์ค‘์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ์— ์ธํ”„๋Ÿฐ์ด๋‚˜ ์œ ํŠœ๋ธŒ์— ์˜ฌ๋ผ์˜จ ๊ฐ•์˜ ์˜์ƒ์„ ํ†ตํ•ด ์ฐจ๊ทผํžˆ ๊ธฐ์ดˆ๋ฅผ ๋‹ค์ ธ๋‚˜๊ฐ€๊ณ  ์žˆ์œผ๋ฉฐ Svelte์™€ Recoil ๋“ฑ์˜ ๊ธฐ์ˆ  ์Šคํƒ๋“ค์— ๋Œ€ํ•ด์„œ๋„ ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Q6. ํ˜„์žฌ ์ƒˆ๋กœ์šด ๊ธฐํšŒ๋ฅผ ์ฐพ๊ณ  ์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?