๋ ธ๋ง๋์ฝ๋ ๋ถํด๋ฝ ์กํ์ฌ์ 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. ์ด์ 1 2 3 4 5 6 ยทยทยท 11 ๋ค์ ๋ฐ์ํ