์ ์ฒด ๊ธ(35)
-
[Next.js] (5) - ์ฌ์ ๋ ๋๋ง (SSR, SSG)
๐ Next.js ๋ค์ํ ์ฌ์ ๋ ๋๋ง์๋ฒ์ฌ์ด๋ ๋ ๋๋ง (SSR)๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ ๋ ๋๋ง ๋ฐฉ์์์ฒญ์ด ๋ค์ด์ฌ ๋ ๋ง๋ค ์ฌ์ ๋ ๋๋ง์ ์งํํจ์ ์ ์ฌ์ดํธ ์์ฑ(SSG)๋น๋ ํ์์ ๋ฏธ๋ฆฌ ํ์ด์ง๋ฅผ ์ฌ์ ๋ ๋๋ง ํด ๋ ์ฆ๋ถ ์ ์ ์ฌ์์ฑ (ISR)ํฅํ์ ๋ค๋ฃฐ ์ฌ์ ๋ ๋๋ง ๋ฐฉ์ ๐ SSR - ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง (์์ฒญ์ด ๋ค์ด์ฌ ๋ ๋ง๋ค ์ฌ์ ๋ ๋๋ง์ ์งํ)export const getServerSideProps = () => { // ์ปดํฌ๋ํธ๋ณด๋ค ๋จผ์ ์คํ, ์ปดํฌ๋ํธ์ ํ์ํ ๋ฐ์ดํฐ ๋ถ๋ฌ์ค๋ ํจ์ // ์ค์ง ์๋ฒ์ธก์์๋ง ํ ๋ฒ ์คํ const data = 'hello' return { //๋จ ํ๋์ ๊ฐ์ฒด๋ฅผ ๋ฆฌํด, props ํ๋กํผํฐ๊ฐ์ ๋ฃ์ด์ผํจ props: { data, }, ..
2024.11.05 -
[Next.js] (3) - Page Router (๊ทธ๋ฆฌ๊ณ Next ๊ธฐ๋ณธ๋์๊ตฌ์กฐ)
๐ Page Routerํ์ฌ ๋ง์ ๊ธฐ์ ์์ ์ฌ์ฉ๋๊ณ ์๋ ์์ ์ ์ธ ๋ผ์ฐํฐReact Router ์ฒ๋ผ ํ์ด์ง ๋ผ์ฐํ ๊ธฐ๋ฅ์ ์ ๊ณต ๐ ํ๋ฆฌํ์นญ(Pre-fetching) - ๋น ๋ฅธ ํ์ด์ง ์ด๋์ ์ํด ์ ๊ณต๋๋ ๊ธฐ๋ฅ!์ด๋ํ ๊ฐ๋ฅ์ฑ์ด ์๋ ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ๋ถ๋ฌ์ค๋ ๊ธฐ๋ฅ๊ฒฝ๋ก๋ณ๋ก ์ปดํฌ๋ํธ๋ค์ Spliting ํด์ ์ ์ฅ์ ๋ฏธ๋ฆฌ ํด๋์ ํ์ฌ ํ์ด์ง์๋ง ํ์ํ JS Bundle๋ง ์ ๋ฌ ๋จ์์ฒญ๋ ํ์ด์ง์ JS Bundle ๋ง ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ Hydration ๋น ๋ฅด๊ฒ ๊ฐ๋ฅ (์ฉ๋ ๊ฒฝ๋ํ)Pre Feching ์ผ๋ก ์ฐ๊ฒฐ๋ ๋ชจ๋ ํ์ด์ง์ JS Bundle ํ์ผ์ ๋ฏธ๋ฆฌ ๋ถ๋ฌ์ด๊ฐ๋ฐ๋ชจ๋์ผ ๊ฒฝ์ฐ์๋ Pre Feching์ด ์ ์ฉ๋์ง ์์ Build ํ production ๋ชจ๋๋ก ์คํํด์ค์ผํจLink Component๋ก ์ด๋ค์ง์ง ์์ ..
2024.11.04 -
[Next.js] (4) - App Router
๐ Dynamic Routing์ฌ๋ฌ๊ฐ์ URL ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฃ์ ๋ [...id] Catch all segmentํ๋ผ๋ฏธํฐ๊ฐ ์์ ๊ฒฝ์ฐ์ [[...id]] Optional catch all segment๐ Layout ๋์ ๋ฐฉ์ Layout ์์ chlidren ์ผ๋ก page ๊ฐ ๋ค์ด์์ Layout ์ด ์ ์๋๋ก ์์ ๊ฒฝ์ฐ ์ค์ฒฉ๋จ๐ Route Group (์๊ดํธ๋ก ์์ฑ) ๊ฒฝ๋ก์์๋ ์๋ฌด๋ฐ ์ํฅ์ ๋ฏธ์น์ง ์์๊ฐ๊ธฐ ๋ค๋ฅธ ๊ฒฝ๋ก๋ค์ ํ๋์ ํ์ด์ง๋ก ๋ฌถ์ด๋ ์ ์์๊ฒฝ๋ก๊ฐ ๋ฌ๋ผ๋ ๊ณตํต์ ์ธ layout์ ์ ์ฉํ๊ณ ์ถ์ ๋๐ React Server Component (React 18v ๋ถํฐ, ์๋ก์ด ์ ํ์ ์๋ฒ์ธก ์ปดํฌ๋ํธ )Page Router ๋ฒ์ ์ Next.js ์๋ ์ด๋ค ๋ฌธ์ ๊ฐ ์์์๊น?์ ์ ํ์ด์ง..
2024.11.01 -
[Next.js] (2) - ์ฌ์ ๋ ๋๋ง
๐ ์ฌ์ ๋ ๋๋ง (Next.js ์ ๊ธฐ๋ณธ ๋์ ๋ฐฉ์)๋ธ๋ผ์ฐ์ ์์ฒญ์ ์ฌ์ ์ ๋ ๋๋ง์ด ์๋ฃ๋ HTML์ ์๋ตํ๋ ๋ ๋๋ง ๋ฐฉ์CIient Side Rendering์ ๋จ์ ์ ํจ์จ์ ์ผ๋ก ํด๊ฒฐํ๋ ๊ธฐ์ ๐ CIient Side Rendering(CSR)React.js ์ฑ์ ๊ธฐ๋ณธ์ ์ธ ๋ ๋๋ง ๋ฐฉ์ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )์์ ์ง์ ํ๋ฉด์ ๋ ๋๋งํ๋ ๋ฐฉ์์ฅ์ : ์ด๊ธฐ์ ์ ์ดํ์ ํ์ด์ง ์ด๋์ด ๋งค์ฐ ๋น ๋ฅด๊ณ ์พ์ ๋จ์ : FCP(์ด๊ธฐ์ ์ ์๋)๊ฐ ๋๋ ค์ง๐ Next.js์์๋ CIient Side Rendering์ ๋ฌธ์ ๋ฅผ ์ด๋ป๊ฒ ํด๊ฒฐํ ๊น? - ์ฌ์ ๋ ๋๋ง์๋ฒ์์ ์ง์ JS๋ฅผ ์คํ -> ๋ ๋๋ง์ด ์๋ฃ๋ HTML์ ์๋ตJS ์คํ (๋ ๋๋ง)JS์ฝ๋๋ฅผ HTML์ฝ๋๋ก ๋ณํํ๋ ๊ณผ์ ํ๋ฉด ๋ ๋๋งHTML์ฝ๋๋ฅผ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ๊ทธ๋ ค๋ด๋..
2024.10.31 -
[Next.js] (1) - React.js ์ ์ฉ์ ์น ๊ฐ๋ฐ 'Framework'
๊ธฐ๋ฅ ๊ตฌํ์ ์ฃผ๋๊ถ์ด ๋๊ตฌ์๊ฒ ์๋๊ฐ?๐ Library - ๊ฐ๋ฐ์๊ธฐ๋ฅ ๊ตฌํ์ ์ฃผ๋๊ถ์ ๊ฐ๋ฐ์๊ฐ ๊ฐ์งex) ํ์ด์ง ๋ผ์ฐํ ๊ธฐ๋ฅ์ ๊ตฌํํด์ผ ํจ -> React router, tanstack Router์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๊ณ ์ถ์ ๋๊ตฌ๋ฅผ ๋ง์๋๋ก ์ฌ์ฉํ ์ ์์์์ ๋๊ฐ ๋๋ค. -> ๊ธฐ๋ณธ ๊ธฐ๋ฅ ์ธ ์ ๊ณต X๐ Framework - ๊ฐ๋ฐ์ X ์ฃผ๋๊ถ์ Framework ๊ฐ ๊ฐ์งFramework์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ฑฐ๋ ํ์ฉํ๋ ๋ฒ์ ๋ด์์๋ง ์ถ๊ฐ๊ธฐ๋ฅ ์ฌ์ฉ ๊ฐ๋ฅํฐํ, ๋ฐฉ๋ฒ์ ์ ํด์ ธ ์์์์ ๋๊ฐ ๋ฎ๋ค.๊ฑฐ์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ ๊ณตPage RoutingSever Pre RenderingReact.js ์ ํ์ฅํ ์ถ์ฒ: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%E..
2024.10.31 -
[์๊ณ ๋ฆฌ์ฆ] ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ 5. JavaScript ์ ๋ ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๐ JavaScript ์ ๋ ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌJavaScript์์๋ ๋ฐฐ์ด์ ํฌํจ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๋ sort() ํจ์๋ฅผ ์ ๊ณต์ต์ ์ ๊ฒฝ์ฐ ์๊ฐ ๋ณต์ก๋ O(NlogN)์ ๋ณด์ฅ์๊ณ ๋ฆฌ์ฆ ๋ฐ ์ฝ๋ฉ ํ ์คํธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๋ ์ ๋ ฌ ๊ธฐ๋ฅ์ด ํ์ํ๋ค๋ฉด, sort() ํจ์ ์ฌ์ฉ ๊ถ์ฅ๋ง์ฝ sort()ํจ์์ ์ฌ์ฉ์ด ์ ํ๋๋ค๋ฉด, ๋ณํฉ ์ ๋ ฌ๊ณผ ๊ฐ์ ์๊ณ ๋ฆฌ์ฆ์ ์ง์ ๊ตฌํํ์ฌ ์ฌ์ฉ๐ sort() ์ค๋ฆ์ฐจ์ ์์ (๋ด๋ฆผ์ฐจ์์ b๊ฐ ๋ ์๊ฒ ํํ)arr.sort(compareFunction)//์ ๋ ฌ ๊ธฐ์ค ํจ์//์ค๋ฆ์ฐจ์function compareFunction(a, b){ if(a b) return 1; else return 0 // result 0 b๊ฐ ์ฐ์ ์์๊ฐ ๋์, ์์ ์์นํ๋ค. // 0 a์ b์ ์์๋ฅผ ..
2024.10.29