๐ ๋ค์ด๊ฐ๋ฉฐ ์ด๋ฒ 2024๋ 04์ 03์ผ ~ 2024๋ 04์ 08์ผ, ์ด 6์ผ๊ฐ ์งํํ๋ ํ ์ค์ ์คํ๋ฆฐํธ 17๊ธฐ์ 10์กฐ ์ฝ๋ํ์์ ํ๋ก ํธ์๋ ํฌ์ง์ ์ผ๋ก ์ฐธ์ฌํ์ต๋๋ค. ํ ์ค์ ์คํ๋ฆฐํธ๋? ํ ์ค์ ์คํ๋ฆฐํธ๋ "๊ตฌ๊ธ ์คํ๋ฆฐํธ๋ ์งง์ ์๊ฐ ๋ด์ ์์ด๋์ด ๊ฒ์ฆ์ ํ๊ธฐ ์ํ ๊ทธ๋ด์ธํ MVP๋ฅผ ํจ์จ์ ์ผ๋ก ๋ง๋ค์ด๋ด๋ ๋ฐฉ๋ฒ๋ก ์ ๋๋ค. "6์ผ๊ฐ ์ข์ ์ฌ๋๋ค๊ณผ ์ ๋ง๋ค์ด์ง ํ์ ํ๋ก์ธ์ค๋ฅผ ํจ๊ป ๊ฒฝํํ๋ค" ์ฆ, ๊ตฌ๊ธ ์คํ๋ฆฐํธ๋ฅผ ๋ชจํฐ๋ธ๋ก ํ ํ๋ก์ธ์ค์ ๋๋ค. ์ ์ฐธ๊ฐํ๊ฒ ๋์์๊น? ์ฌ์ค ์ด์ ๋ถํฐ ํ ์ค์ ์คํ๋ฆฐํธ ๋ชจ์ง ๊ณต๊ณ ๊ฐ ๋ณด์ผ ๋๋ง๋ค ์ฐธ์ฌํ๊ณ ์ถ์ ๋ง์์ด ๋ฌด์ฒ ์ปธ์ต๋๋ค. ํ์ง๋ง ํ๊ต ์ํ ๊ธฐ๊ฐ๊ณผ ๊ฒน์น๋ ๋ฑ ํญ์ ์งํํ ์ ์๋ ํ๊ฒฝ์ด ๋์ง ๋ชปํ์ต๋๋ค. ํ์ง๋ง ์ด๋ฒ์๋ ๋ง์นจ ์ ์ ํ ๋ ๊ณต๊ณ ๊ฐ ์ฌ๋ผ์์ ๋ฐ๋ก ์ฐธ๊ฐ ์ ์ฒญ์ ํ๊ฒ ..
๐ ๋ค์ด๊ฐ๋ฉฐ ์ด๋ฒ ํฌ์คํ ์์๋ React์์ ์ฌ์ฉ๋๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด์ ๊ฐ๊ฐ์ ํน์ง๊ณผ ๊ฐ์ธ์ ์ธ ๊ฒฌํด๊ฐ ๋ค์ด๊ฐ ์์ต๋๋ค. ํ์ฌ ํฌ์คํ ์์ ๋ค๋ฃฐ ์ฃผ์ ๋ค ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. react-redux & redux-toolkit recoil zustand jotai React์์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ์์์ ์ธ๊ธํ ๋ค ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ฏค์ ๋ถ๋ช ์๊ณ ๊ณ์๋ฆฌ๋ผ ์๊ฐํฉ๋๋ค. ์ ์ด๋ฏธ์ง๋ ์ต๊ทผ 1๋ ๊ฐ ๋ค ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ NPM ๋ํฅ์ ๋๋ค. ํ์ฌ ์ถ์ธ๋ก ๋ดค์ ๋ 1์: redux (react-redux & redux-tookit) 2์: zustand 3์: jotai 4์: recoil ์ ์์๋ก ๋ณด์ ๋๋ค. ๊ทธ๋ผ ๊ฐ๋จํ ์ฝ๋ ์์ ์ ํจ๊ป ํน์ง์ ์์๋ณด๊ฒ ์ต๋๋ค. Redux..
๐ ๋ค์ด๊ฐ๋ฉฐ Next.js 14๋ฒ์ app router ํ๋ก์ ํธ์ styled-comoponents์์ vanilla-extarct๋ก ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํจ์ ์์ด์ ๋คํฌ๋ชจ๋ ๊ธฐ๋ฅ๋ ๊ฐ์ด ์งํํ๊ฒ ๋์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ๋คํฌ๋ชจ๋๋ฅผ ์ ์ฉํ๋ฉด์ next-themes๋ฅผ ํ์ฉํด ๋ดค๋ ๋ฐ ์ฌ์ฉ ๊ฒฝํ์ด ๋งค์ฐ ์ข์์ต๋๋ค. ๋ํ, app router์์ vanilla-extract๋ก ๋คํฌ๋ชจ๋๋ฅผ ๊ตฌํํจ์ ์์ด์ ์ฐธ๊ณ ์๋ฃ๊ฐ ๋ง์ง ์๋ค๋ ๊ฒ์ ๊นจ๋ฌ์๊ธฐ ๋๋ฌธ์ ๊ธ์ ์์ฑํ๋ ค ํฉ๋๋ค. ๊ทธ๋ผ ์ด์ Next.js app router์์ vanilla-extract + next-themes๋ฅผ ํ์ฉํ ๋คํฌ๋ชจ๋๋ฅผ ํ๋ฒ ๊ตฌํํด ๋ด ์๋ค. ๐ง next-themes ์๊ฐ https://github.com/pacocoursey/next-them..
๐ ๋ค์ด๊ฐ๋ฉฐ ๊ธฐ์กด ํ๋ก์ ํธ์์ Next.js 14๋ฒ์ ์ ์ฑ ๋ผ์ฐํฐ์์ styled-components๋ฅผ ์ฌ์ฉํ๊ณ ์์์ต๋๋ค. ์ด์ ์ Next.js 11๋ฒ์ ์์ 14๋ฒ์ ์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํ๋ฉด์ ๋จ์์๋ ๋ถ๋ถ์ด์์ต๋๋ค. ์ฑ ๋ผ์ฐํฐ์์ ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ์ง์ํ๊ธฐ ์์ํ๋ฉด์, ์๋ฒ ์ปดํฌ๋ํธ ํ์ฉ ํด๋ณด๊ณ ์ ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํ์ต๋๋ค. ๊ทธ๋ผ ๋จผ์ ์ ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํ๊ณ , ์ vanilla-extract๋ฅผ ์ ํํ๋์ง ๊ฐ๋ตํ ์ค๋ช ํด ๋ณผ๊ฒ์. ๐ ์ฑ ๋ผ์ฐํฐ(app router)์์ styled-components์ ๋ฌธ์ ์ styled-components๋ ์๋ฒ ์ปดํฌ๋ํธ๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์, styled-components๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด 'use client'๋ฅผ ๋ช ์ํจ์ผ๋ก์จ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ์ ์ผ๋ก ์ฌ์ฉํด..
๐ ๋ค์ด๊ฐ๋ฉฐ ์ต๊ทผ ๋ค์ํ ์น ์๋น์ค๋ฅผ ์ ํด๋ณด๋ฉด ๊ฐํธํ SNS ๋ก๊ทธ์ธ์ผ๋ก ์ฝ๊ฒ ์๋น์ค๋ฅผ ์ด์ฉํ ์ ์์ต๋๋ค. ์ด๋ฐ ๊ฐํธํ SNS ๋ก๊ทธ์ธ์ด ๋ฐ๋ก OAuth2.0 ํ๋กํ ์ฝ์ ํตํด ์งํ๋ฉ๋๋ค. ๊ทธ๋ผ, OAuth๊ฐ ์ด๋ค ๋ฐฐ๊ฒฝ์์ ๋ฑ์ฅํ์๊ณ , ํ์ฌ๋ ์ด๋ป๊ฒ ํ์คํ๋์ด OAuth2.0์ด๋ผ๋ ์ด๋ฆ์ผ๋ก ์ฌ์ฉ๋๊ณ ์๋์ง, ๊ทธ ํ๋ฆ์ ๋ํ ๊ฐ๋ ์ ํจ๊ป ์์๋ณด๊ฒ ์ต๋๋ค. ๐ง OAuth ๋ฑ์ฅ๋ฐฐ๊ฒฝ ์น ์๋น์ค์ ๋ค์์ฑ์ด ์ฆ๊ฐํ๋ฉด์, ์์ ํ๊ฒ ์ ๋ณด๋ฅผ ๊ณต์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํ ํ์์ฑ์ด ์๊ฒผ์ต๋๋ค. ์ด๋ก ์ธํด OAuth(Open Authorization)๋ผ๋ ๊ฐ๋ ์ด ํ์ํ๊ฒ ๋์์ต๋๋ค. ์ด๋ฅผ ์ค๋ช ํ๊ธฐ ์ํด์ ํ ๊ฐ์ง ์๋ฅผ ๋ค์ด ๋ณผ๊ฒ์. ์ฐ๋ฆฌ์ ์๋น์ค๊ฐ ์ฌ์ฉ์์๊ฒ ์ฌ์ฉ์์ ๊ตฌ๊ธ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ ๊น์? ์ฌ์ฉ์๊ฐ ๊ตฌ๊ธ์ ๋..
๐ ๋ค์ด๊ฐ๋ฉฐ ์ด๋ฒ ํฌ์คํ ์ ์น ์์ผ(Web Scoket)์ ๋ํ ํฌ์คํ ์ ํ๋ ค๊ณ ํฉ๋๋ค. ์ด ๊ธ์ ์ฝ์ผ์๋ ๋ถ๋ค์ ์๋ง ์น ์์ผ์ด ๋ฌด์์ธ์ง ์ ๋๋ ์๊ณ ์์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋ง์ต๋๋ค. ์ค์๊ฐ ํต์ ์ด ํ์ํ ๋ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ธฐ์ ์ ๋๋ค. ๊ทธ๋ผ ์ ์ค์๊ฐ ํต์ ์ ํ ๋ ์น ์์ผ์ ์ฌ์ฉํ๋์ง, ๊ธฐ์กด์๋ ์ด๋ค ๋ฐฉ์์ ์ฌ์ฉํ๊ณ , ์ด๋ค ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด ์ฃผ๋์ง, ์ด๋ป๊ฒ ๋์ํ๋์ง ๋ฑ๋ฑ ์์๋ณด๊ฒ ์ต๋๋ค. ์น ์์ผ์ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ ์ด๊ธฐ์ ์ธํฐ๋ท ํต์ ๋ฐฉ์์ ์ฃผ๋ก HTTP๋ฅผ ์ด์ฉํ ํด๋ผ์ด์ธํธ(์์ฒญ) - ์๋ฒ(์๋ต) ๋ชจ๋ธ์ ํตํด ์งํ๋์์ต๋๋ค. ์ฆ, ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ์์ฒญ(Request)์ ๋ณด๋ด๊ณ , ์๋ฒ๊ฐ ์ด์ ์๋ต(Response)ํ๋ ๋ฐ์ด์ค ํต์ ๋ฐฉ์์ ๋ฐ๋ฆ ๋๋ค. ์ด ๋ฐฉ์์ด ํ์ด์ง๋ฅผ ์์ฒญํ๋ ๋ฑ์ ๊ฐ๋จํ ์์ ์๋ ..
๋ค์ด๊ฐ๋ฉฐ ๐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ดํดํ๋ ๋ฐ ์์ด์ ์คํ ์ปจํ ์คํธ(Execution Context)์ ๊ฐ๋ ์ ๋ํด์ ์์งํ๋ ๊ฒ์ ์ค์ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ ๊ฐ๋ ์ค ํ๋๋ก, ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋์ ์คํ ์์์ ๋ฐฉ์์ ๊ฒฐ์ ํ๊ฒ ๋์ฃ . ์คํ ์ปจํ ์คํธ(Excution Context)๋โ ์คํํ ์ฝ๋์ ์ ๊ณตํ ํ๊ฒฝ ์ ๋ณด๋ค์ ๋ชจ์๋์ ๊ฐ์ฒด์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ๋์ ์ธ์ด๋ก์์ ์ฑ๊ฒฉ์ ๊ฐ์ฅ ์ ํ์ ํ ์ ์๋ ๊ฐ๋ ์ ๋๋ค. ๊ทธ๋์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์คํ ์ปจํ ์คํธ๊ฐ ํ์ฑํ๋๋ ์์ ์ ์๋์ ๊ฐ์ ๋์์ ์ํํฉ๋๋ค. ํธ์ด์คํ (hoisting) ์ธ๋ถ ํ๊ฒฝ ์ ๋ณด ๊ตฌ์ฑ this ๊ฐ ์ค์ ๋ฑ๋ฑ ์ด๋ก ์ธํด ๋ค๋ฅธ ์ธ์ด์์๋ ๋ฐ๊ฒฌํ ์ ์๋ ํน์ดํ ํ์๋ค์ด ๋ฐ์ํฉ๋๋ค. ๋์ ๊ณผ์ ๋์ผํ ํ๊ฒฝ์ ์๋ ์ฝ๋๋ค์ ์คํํ ๋ ํ์ํ ํ๊ฒฝ ์ ๋ณด..
๐ ๋ค์ด๊ฐ๋ฉฐ ๋น๋๊ธฐ ์ฒ๋ฆฌ ํจํด์ ์์๋ณด๊ธฐ ์์, ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ ๋ฌด์์ผ๊น์? ๋น๋๊ธฐ ์ฒ๋ฆฌ๋? ํน์ ์ฝ๋์ ์ฐ์ฐ์ด ์๋ฃ๋ ๋๊น์ง ์ ์ฒด ์ฝ๋์ ์คํ์ ์ค๋จํ์ง ์๊ณ , ๋ค์ ์ฝ๋๋ฅผ ์ฐ์ ์ ์ผ๋ก ์คํํ๋ ๋ฐฉ์์ ๋งํฉ๋๋ค. ์ด๋ ๊ฒ ๋์ํ๋ ํจ์๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ '๋น๋๊ธฐ ํจ์'๋ผ๊ณ ํฉ๋๋ค. ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ํ๊ณ์ ์ ์์ ์๋ฃ ์์ ์ ์์ธกํ๊ธฐ ์ด๋ ต๋ค๋ ์ ์ ๋๋ค. ํ์ง๋ง ์ด๊ฒ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๋ณธ์ง์ ์ธ ํน์ฑ์ด๋ฉฐ, ์ด๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฑ๊ธ ์ค๋ ๋(single-threaded) ๊ธฐ๋ฐ์ ์ธ์ด๋ก, ํ ๋ฒ์ ํ๋์ ์์ ๋ง ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ฆ, ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฝ๋๊ฐ ์์ฑ๋ ์์๋๋ก, ์์์ ์๋๋ก, ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌ๋๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ป๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋น๋๊ธฐ์ ์ธ ..
๐ ๋ค์ด๊ฐ๋ฉฐ Next.js 13 ๋ฒ์ ์ดํ์๋ Rust ์ธ์ด๋ก ๊ฐ๋ฐ๋ Turbopack์ด ๋์ ๋์์ต๋๋ค. Next 14 ๋ฒ์ ์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์ ์ ์งํํ๊ณ Turbopack์ผ๋ก ๊ฐ๋ฐ ํ๊ฒฝ์ ์คํํ์ ๋ ๋ง์ดํ ๋ฌธ์ ์ ๋ํด์ ์ ๋ฆฌํด๋ณด๋ ค ํฉ๋๋ค. ๋ฌธ์ ๋ฐ์ โ Turbopack์ผ๋ก ๊ฐ๋ฐ ํ๊ฒฝ์ ์คํํ์ ์๋์ ๊ฐ์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ด ์ค๋ฅ์ ๋ํด ๊ฒ์ํด ๋ณด๋ "์ปดํฌ๋ํธ์ ์ด๋ฆ์ด ์๋ชป๋์๊ฑฐ๋, import ๊ฒฝ๋ก๊ฐ ์๋ชป ์ ๋ ฅ๋์์ ๋ ๋ฐ์ํ๋ค"๋ ์ค๋ช ์ ์ฐพ์ ์ ์์์ต๋๋ค. ์ด์ ๋ฐ๋ผ import ๋ ๋ถ๋ถ์ ์ ํ์ธํด ๋ณด๋ผ๋ ์กฐ์ธ์ด ์์์ต๋๋ค. ๊ทธ๋ฌ๋, ์ ์ฝ๋์์๋ import๊ฐ ์ ์์ ์ผ๋ก ์ด๋ฃจ์ด์ก๊ธฐ ๋๋ฌธ์ ์์ ํ ๋ถ๋ถ์ด ์์์ต๋๋ค. ๋ฐ๋ผ์ ์๋ฌ ๋ฉ์์ง๋ฅผ ๋ค์ ํ์ธํด ๋ณธ ๊ฒฐ๊ณผ 'DarkModeBtn' ์ปดํฌ๋..