๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ถํด๋Ÿฝ ์žกํ•™์‚ฌ์ „ Day02 - ๊ฐœ๋ฐœ์ž์— ๋Œ€ํ•œ ์˜คํ•ด | ์ด๋ฆ„์ด ๋น„์Šทํ•œ ๊ฐœ๋ฐœ์–ธ์–ด ํŠน์ง• ๐Ÿ“š ๋ฒ”์œ„ : CH01. ๊ฐœ๋ฐœ์ž์— ๋Œ€ํ•œ ์˜คํ•ด - CH05. ์ด๋ฆ„์ด ๋น„์Šทํ•œ ๊ฐœ๋ฐœ์–ธ์–ด ํŠน์ง• ๐Ÿ““ ์ฑ…์—์„œ ๊ธฐ์–ตํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ์„ ์จ๋ณด์„ธ์š”. ์ฝ”๋”ฉ์„ ์‹œ์ž‘ํ•˜๊ธฐ๋Š” ์‰ฝ์ง€๋งŒ ๋ˆ„๊ตฌ๋‚˜ ์ฝ”๋”ฉ์„ ์ž˜ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ์žฌ๋Šฅ์˜ ์˜์—ญ์ธ ๊ฒƒ๋„ ๋ถ€์ •ํ•  ์ˆ˜ ์—†์ง€๋งŒ ํฌ๊ธฐํ•˜์ง€ ์•Š๋Š” ๋ˆ๊ธฐ๊ฐ€ ๋” ์ค‘์š”ํ•˜๋‹ค. (์ค‘์š”ํ•œ ๊ฒƒ์€ ๊บพ์ด์ง€ ์•Š๋Š” ๋งˆ์Œ!) ๋ชจ๋“  ๊ฒƒ์„ ์•Œ๊ณ  ์™ธ์šธ์ˆ˜๋Š” ์—†๋‹ค. ๊ตฌ๊ธ€๋ง ํ•˜๋Š” ์‹ค๋ ฅ์„ ํ‚ค์›Œ๋ณด์ž ๋ฌด์Šจ ์–ธ์–ด๋ฅผ ๋ฐฐ์›Œ์•ผํ• ์ง€ ๊ณ ๋ฏผ๋œ๋‹ค๋ฉด ๋จผ์ € ๊ทธ ์–ธ์–ด๋ฅผ ๋ฐฐ์›Œ์„œ ๋ฌด์—‡์„ ํ•˜๊ณ  ์‹ถ์€์ง€ ์ƒ๊ฐํ•ด ๋ณด์ž. ๊ทธ์— ๋”ฐ๋ผ ๋ฐฐ์›Œ์•ผ ํ•  ์–ธ์–ด๊ฐ€ ๋‹ฌ๋ผ์งˆ ๊ฒƒ์ด๋‹ค. ์ƒˆ๋กœ์šด ์–ธ์–ด๋ฅผ ๋น ๋ฅด๊ฒŒ ์Šต๋“ํ•˜๋Š” ๋ฐฉ๋ฒ• ๊ณต์‹๋ฌธ์„œ ๋ณด๊ธฐ ๋ฌธ๋ฒ• ๊ณต๋ถ€ํ•˜๊ธฐ ์ด๋ฏธ ์•Œ๊ณ  ์žˆ๋Š” ์–ธ์–ด๊ฐ€ ์žˆ๋‹ค๋ฉด ๊ทธ ์–ธ์–ด์™€ ๋น„์Šทํ•œ ์  ์ง‘์ค‘์ ์œผ๋กœ ๋น„๊ตํ•˜๋ฉฐ ๊ณต๋ถ€ํ•˜๊ธฐ ์ƒˆ๋กญ๊ฒŒ ์Šต๋“ํ•œ ์–ธ์–ด๋กœ ์ฝ”๋”ฉํ•ด๋ณด๊ธฐ(๊ฐ„๋‹จํ•œ ๊ฒƒ) ๊ณต์‹๋ฌธ์„œ์˜ Tuto.. 2023. 1. 15.
๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ถ์Šคํ„ฐ๋”” IT 5๋ถ„ ์žกํ•™์‚ฌ์ „ ๊ตฌ๋งค ์ธ์ฆ | ๋…ธ๊ฐœ๋ถ ์ฒซ ๋‚  ์˜ค๋Š˜๋ถ€ํ„ฐ ๋…ธ๋งˆ๋“œ์ฝ”๋”์˜ ๋ถ ์Šคํ„ฐ๋””์ธ ๋…ธ๊ฐœ๋ถ 'IT 5๋ถ„ ์žกํ•™์‚ฌ์ „'ํŽธ์ด ์‹œ์ž‘๋œ๋‹ค. ๋…ธ๊ฐœ๋ถ์ด๋ž€ ๋…ธ๋งˆ๋“œ์ฝ”๋” ๊ฐœ๋ฐœ์ž ๋ถํด๋Ÿฝ์˜ ์•ฝ์ž๋กœ, ๋…ธ๋งˆ๋“œ์ฝ”๋”์—์„œ ์ง„ํ–‰๋˜๋Š” ๋ถ ์Šคํ„ฐ๋””์ด๋‹ค. ์ •ํ•ด์ง„ ๊ธฐ๊ฐ„๋™์•ˆ ๋งค์ผ ๊ฐœ๋ฐœ ๊ด€๋ จ ๋„์„œ๋ฅผ ์ฝ์œผ๋ฉด์„œ ์ƒˆ๋กญ๊ฒŒ ์•Œ๊ฒŒ๋œ์ , ์ธ์ƒ์ ์ธ ์  ๋“ฑ์„ ์ •๋ฆฌํ•˜์—ฌ ๊ณต์œ ํ•œ๋‹ค. ์ง€๋‚œ๋ฒˆ ํด๋ฆฐ์ฝ”๋“œ ์ดํ›„๋กœ ๋‘ ๋ฒˆ์งธ๋กœ ์ฐธ์—ฌํ•˜๋Š” ๊ฒƒ์ธ๋ฐ, ์ด๋ฒˆ ์ฑ…์€ IT 5๋ถ„ ์žกํ•™์‚ฌ์ „์ด๋ฉฐ ์˜ค๋Š˜์ด ์Šคํ„ฐ๋”” ์ฒซ๋‚ ์ด๋‹ค. ์ฒซ๋‚ ์€ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฑ… ๊ตฌ๋งค๋ฅผ ์ธ์ฆํ•˜๋ฉด ๋˜๋Š”๋ฐ, ๋‚˜๋Š” ์ฑ…์ด ์ถœํŒ๋œ ํ›„ ๊ตฌ๊ธ€ ๋ถ์Šค์—์„œ ์ด๋ถ์œผ๋กœ ๊ตฌ๋งคํ–ˆ๋‹ค. E-Book์œผ๋กœ ๊ตฌ๋งคํ•˜์—ฌ ์–ธ์ œ ์–ด๋””์„œ๋‚˜ ๋ณด๊ธฐ ํŽธํ•˜๋„๋ก ๊ตฌ๋งคํ–ˆ๋Š”๋ฐ, ์ด์ œ ๋ณด๋‹ˆ ๋ฐ€๋ฆฌ์˜ ์„œ์žฌ์—์„œ๋„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•˜๋‹ˆ, ์ด์šฉ๊ถŒ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์€ ๋ฐ€๋ฆฌ์˜ ์„œ์žฌ๋ฅผ ์ด์šฉํ•ด๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿ˜… ์•„๋ฌด๋ž˜๋„ ์ฑ…์„ ํ˜ผ์ž ์ฝ์œผ๋ฉด ๋Œ€์ถฉ ์ฝ๊ธฐ๊ฐ€ ์‰ฝ๊ณ , ๊ธฐ์–ต์—.. 2023. 1. 14.
CSR SSR ๋‹จ์  ๋ณด์™„ ๋ฐฉ๋ฒ• ์ •๋ฆฌํ•ด๋ณด๊ธฐ ์ง€๋‚œ ์‹œ๊ฐ„์— CSR, SSR์˜ ๊ฐœ๋…๊ณผ ์žฅ๋‹จ์ ์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด ๋ณด์•˜๋Š”๋ฐ, ๊ทธ๋ ‡๋‹ค๋ฉด ์ด ๋‘˜์˜ ๋‹จ์ ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์—๋Š” ์–ด๋–ค ๊ฒƒ๋“ค์ด ์žˆ๋Š”์ง€ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. CSR ๋‹จ์  ๋ณด์™„ ๋ฐฉ๋ฒ• ๋จผ์ € CSR์€ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ฆฌ๋‹ค๋Š” ์ ๊ณผ SEO๊ฐ€ ๋ถˆ๋ฆฌํ•˜๋‹ค๋Š” ์ ์ด ๋‹จ์ ์ด๋‹ค. ์ด๊ฒƒ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•๋“ค์„ ์ด์šฉํ•˜์—ฌ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. 1. Code Splitting, Tree-Shaking ์ด ๋ฐฉ๋ฒ•๋“ค์˜ ์ดˆ๊ธฐ ๋กœ๋”ฉ์— ํ•„์š”ํ•œ javaScript์˜ ํฌ๊ธฐ๋ฅผ ์ค„์—ฌ์ฃผ์–ด์„œ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค€๋‹ค. Code Splitting์€ ๋ง ๊ทธ๋Œ€๋กœ ์ฝ”๋“œ๋ฅผ ์ชผ๊ฐ ๋‹ค๋Š” ์˜๋ฏธ์ด๋ฉฐ, Tree-Shaking์€ ๋‚˜๋ฌด๋ฅผ ํ”๋“ค์–ด ์ฃฝ์€ ๋‚˜๋ฌด์žŽ์„ ๋–จ์–ดํŠธ๋ฆฌ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์ด๋‹ค. CSR์˜ .. 2022. 11. 20.
CSR SSR ๋™์ž‘ ๋‹จ๊ณ„ | CSR SSR ๊ฐœ๋…์  ์ฐจ์ด, ์žฅ๋‹จ์  ์‚ฌ์ „ ๊ฐœ๋… ์ •๋ฆฌ CSR๊ณผ SSR์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ธฐ ์ „์— ์•Œ์•„๋‘์–ด์•ผ ํ•˜๋Š” ์‚ฌ์ „ ์ง€์‹์— ๋Œ€ํ•ด ๋จผ์ € ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 1. MPA์™€ SPA โ–ถ MPA (MultiPage Application) ์ „ํ†ต์  ํŽ˜์ด์ง€ Lifecycle, ํƒญ์„ ์ด๋™ํ•  ๋•Œ (๋งํฌ ํด๋ฆญ ์‹œ) ๋งˆ๋‹ค ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ƒˆ๋กœ์šด HTML ํŒŒ์ผ์„ ๋ฐ›์•„์™€์„œ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ์ƒˆ๋กœ ๋ Œ๋”๋ง ํ•˜๋Š” ๋ฐฉ์‹ ๋ Œ๋”๋ง ๋ฐฉ์‹์œผ๋กœ SSR์„ ์‚ฌ์šฉ โ–ถ SPA (Single Page Application) ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜, ํŽ˜์ด์ง€๊ฐ€ ์ „์ฒด์ ์œผ๋กœ ๋ Œ๋”๋ง ๋˜์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง ๋˜๋Š” ๋ฐฉ์‹ ๋ Œ๋”๋ง ๋ฐฉ์‹์œผ๋กœ CSR์„ ์‚ฌ์šฉ 2. SPA ์‚ฌ์šฉ๊นŒ์ง€์˜ ์›น์˜ ์—ญ์‚ฌ โ–ถ ์˜ˆ์ „ Static Site(์ •์ ์ธ ํŽ˜์ด์ง€)๋กœ ์ฃผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Œ ๋ฐฉ์‹ ์„œ๋ฒ„์— ์ด๋ฏธ ์ž˜ ๋งŒ๋“ค์–ด์ง„ .. 2022. 10. 9.
React ํ”„๋กœ์ ํŠธ githubPages๋กœ ๋ฐฐํฌํ•˜๊ธฐ ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ฐฐํฌํ•˜๋Š” ์‚ฌ์ดํŠธ(๊นƒํ—™ ํŽ˜์ด์ง€, netlify, aws...)๋Š” ์—ฌ๋Ÿฌ ๊ณณ์ด ์žˆ์ง€๋งŒ, ๊ทธ์ค‘์—์„œ๋„ githubPages๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค. ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” githubPages์˜ ์žฅ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. github์„ ์ด์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ๋ณ„๋„๋กœ ์‚ฌ์ดํŠธ ๊ฐ€์ž…ํ•„์š” ์—†์Œ๐Ÿ™…๐Ÿป‍โ™€๏ธ ๋„๋ฉ”์ธ์„ ๊ตฌ์ž…ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋ฉด ๋ฌด๋ฃŒ!๐Ÿ˜ƒ Github์—์„œ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•  ๋•Œ๋„ githubPages๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ๊ฐœ์ธ์ ์œผ๋กœ ๋ธ”๋กœ๊ทธ๋Š” ๊ทธ ๋ฐฉ๋ฒ•๋ณด๋‹ค๋Š” ์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ํŽธํ•œ ๊ฒƒ ๊ฐ™๋‹ค. githubPages๋Š” ๋ธ”๋กœ๊ทธ ์™ธ์—๋„ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์˜ repository๋ฅผ ์›นํŽ˜์ด์ง€๋กœ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ค๋Š˜์€ ๊ทธ ์ค‘์—์„œ๋„ React ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํฌ์ŠคํŒ…ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. โšก ํ”„๋กœ์ ํŠธ์™€.. 2022. 6. 20.
๋ฐ˜์‘ํ˜•