[๐ค] CSS Container Queries: ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐ์ํ ๋์์ธ์ ์๋ก์ด ์งํ
๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ๋ฅผ ๋์ด, ์ปดํฌ๋ํธ ์์ฒด์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์คํ์ผ์ ์กฐ์ ํ๋ CSS Container Queries๋ฅผ ๊น์ด ์๊ฒ ์์๋ณด๊ณ ์ค๋ฌด ์ ์ฉ ๋ฐฉ๋ฒ์ ์๋ดํด ๋๋ ค์.
์ ๋ณด๐ค ์ด ํฌ์คํ ์ Gemini 2.5 Flash AI๊ฐ ์์ฑํ์ด์.
๋ด์ฉ์ ์ ํ์ฑ์ ์ํด ๊ฒํ ๋ฅผ ๊ฑฐ์ณค์ง๋ง, ์ค๋ฌด ์ ์ฉ ์ ๊ณต์ ๋ฌธ์๋ฅผ ํจ๊ป ์ฐธ๊ณ ํด ์ฃผ์ธ์.
์ ์ฉํ ํ์ด ๊ธ์์๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ๋ฅผ ๊ทน๋ณตํ๊ณ ์ปดํฌ๋ํธ ๋จ์์ ๋ฐ์ํ ๋์์ธ์ ๊ฐ๋ฅํ๊ฒ ํ๋ CSS Container Queries์ ๊ฐ๋ ๋ถํฐ ์ค๋ฌด ์ ์ฉ ์์๊น์ง ์์ธํ ์ดํด๋ด์.
์๋
ํ์ธ์! 10๋
์ด์ ์ค๋ฌด ๊ฒฝํ์ ๊ฐ์ง ํ์คํ ๊ฐ๋ฐ์์ด์ ๊ธฐ์ ๋ธ๋ก๊ทธ SEO ์ ๋ฌธ๊ฐ, ๋ธ๋ฃจ์
๋๋ค.
์ ๋ ์ค์ ์กด์ฌํ๋ ๊ฐ๋ฐ์๋ ์๋์ง๋ง, ์ฌ๋ฌ๋ถ์ ๊ฐ๋ฐ ์ฌ์ ์ ์ค์ง์ ์ธ ๋์์ ๋๋ฆฌ๊ธฐ ์ํด ์ด ์๋ฆฌ์ ์์ด์.
์ค๋์ ์ค๋ซ๋์ ์น ๊ฐ๋ฐ์๋ค์ ์์ ์ฌ์ ์ด์๋ '์ปดํฌ๋ํธ ๋จ์ ๋ฐ์ํ ๋์์ธ'์ ํ์ค๋ก ๋ง๋ค์ด์ค CSS Container Queries์ ๋ํด ๊น์ด ์๊ฒ ๋ค๋ค๋ณด๋ ค๊ณ ํด์. ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ๋ฅผ ๋์ด์๋ ์ด ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ด ์ด๋ป๊ฒ ์ฌ๋ฌ๋ถ์ ๊ฐ๋ฐ ์์ฐ์ฑ์ ๋์ด๊ณ , ๋ ์ ์ฐํ UI๋ฅผ ๋ง๋ค ์ ์๊ฒ ๋๋์ง ํจ๊ป ์์๋ด์.
๐ค ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ, ๊ทธ๋ฆฌ๊ณ ์๋ก์ด ์๊ตฌ์ฌํญ
0๏ธโฃ ์ Container Queries๊ฐ ํ์ํ๊ฐ์?
๊ธฐ์กด ์น ๊ฐ๋ฐ์์ ๋ฐ์ํ ๋์์ธ์ ๊ตฌํํ๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐ๋ก ๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Queries)์์ด์. min-width๋ max-width ๊ฐ์ ์์ฑ์ ์ฌ์ฉํด์ ๋ทฐํฌํธ(viewport)์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ ์ฒด ๋ ์ด์์์ด๋ ์์๋ค์ ์คํ์ผ์ ๋ณ๊ฒฝํ์ฃ .
ํ์ง๋ง ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์ ๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ ํ๊ณ ์์ด์. ํ๋์ ์ปดํฌ๋ํธ๊ฐ ๋ค์ํ ๋ถ๋ชจ ์ปจํ
์ด๋ ์์ ๋ฐฐ์น๋ ์ ์๊ณ , ๊ทธ๋๋ง๋ค ๊ณ ์ ํ ๋ฐ์ํ ๋์์ ํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ก์ด์.
์๋ฅผ ๋ค์ด, ๋ด์ค ๊ธฐ์ฌ๋ฅผ ๋ณด์ฌ์ฃผ๋ ์นด๋ ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ด์.
์ด ์นด๋ ์ปดํฌ๋ํธ๊ฐ ๋ฉ์ธ ํ์ด์ง์ ๋์ ์น์
์ ์์ ๋๋ ์ด๋ฏธ์ง์ ๊ธด ์์ฝ ํ
์คํธ๋ฅผ ํจ๊ป ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ์ ์์ด์.
ํ์ง๋ง ์ฌ์ด๋๋ฐ์ฒ๋ผ ์ข์ ๊ณต๊ฐ์ ๋ค์ด๊ฐ ๋๋ ์ด๋ฏธ์ง ์์ด ์ ๋ชฉ๊ณผ ์งง์ ํ
์คํธ๋ง ๋ณด์ฌ์ค์ผ ํ ์๋ ์์ฃ .
์ด๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ทฐํฌํธ ์ ์ฒด์ ํฌ๊ธฐ๋ง ์ ์ ์๊ธฐ ๋๋ฌธ์, ํน์ ์ปดํฌ๋ํธ๊ฐ ๋์ธ '๋ถ๋ชจ ์ปจํ
์ด๋์ ํฌ๊ธฐ'์ ๋ฐ๋ผ ์คํ์ผ์ ๋ณ๊ฒฝํ๊ธฐ๋ ๋งค์ฐ ์ด๋ ค์ ์ด์.
์คํจ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํ๊ณ
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ทฐํฌํธ(๋ธ๋ผ์ฐ์ ์ฐฝ)์ ํฌ๊ธฐ์๋ง ๋ฐ์ํด์. ํน์ ์ปดํฌ๋ํธ๋ ์์ ฏ์ด ์ํ ๋ถ๋ชจ ์์์ ํฌ๊ธฐ์๋ ๋ฐ์ํ ์ ์์ด์, ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ฐ์ฑ์ด ๋จ์ด์ง๋ ๋ฌธ์ ๊ฐ ์์์ด์.
1๏ธโฃ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋์์ธ์ ์์ ์ฌ์
์ด๋ฌํ ๋ฌธ์ ๋๋ฌธ์ ์ค๋ซ๋์ ์น ๊ฐ๋ฐ์๋ค์ '์๋ฆฌ๋จผํธ ์ฟผ๋ฆฌ(Element Queries)' ๋๋ '์ปจํ
์ด๋ ์ฟผ๋ฆฌ(Container Queries)'์ ๊ฐ์ ๊ฐ๋
์ ์๊ตฌํด ์์ด์. ์ปดํฌ๋ํธ ์ค์ค๋ก๊ฐ ์์ ์ ๋ถ๋ชจ ์ปจํ
์ด๋ ํฌ๊ธฐ์ ๋ง์ถฐ ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์๋ค๋ฉด, ํจ์ฌ ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ์ ์ฐํ UI ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ ํ
๋๊น์.
๊ทธ๋ฆฌ๊ณ ๋ง์นจ๋ด, ์ด ์์ ์ฌ์
์ด ํ์ค์ด ๋์๋ต๋๋ค! ๋ฐ๋ก CSS Container Queries ๋๋ถ์ด์์.
โ๏ธ CSS Container Queries์ ์๋ ์๋ฆฌ
0๏ธโฃ ํต์ฌ ์์ด๋์ด: ๋ถ๋ชจ ์ปจํ ์ด๋๋ฅผ ์ฟผ๋ฆฌํด์
CSS Container Queries๋ ์ด๋ฆ ๊ทธ๋๋ก '์ปจํ
์ด๋(Container)'์ ํฌ๊ธฐ๋ฅผ ์ฟผ๋ฆฌ(query)ํด์ ์์ ์์์ ์คํ์ผ์ ๋ณ๊ฒฝํ๋ ๊ธฐ๋ฅ์ด์์.
์ฌ๊ธฐ์ ์ปจํ
์ด๋๋ ํน์ CSS ์์ฑ์ ํตํด '์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ
์ด๋(Query Container)'๋ก ์ง์ ๋ ๋ถ๋ชจ ์์๋ฅผ ์๋ฏธํด์.
์์ ์์๋ ์ด ๋ถ๋ชจ ์ปจํ
์ด๋์ ํฌ๊ธฐ ๋ณํ์ ๋ฐ๋ผ ๋ฐ์ํ ์คํ์ผ์ ์ ์ฉํ ์ ์๊ฒ ๋๋ ๊ฑฐ์ฃ .
์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ค๋ฉด ํฌ๊ฒ ๋ ๊ฐ์ง ๋จ๊ณ๊ฐ ํ์ํด์.
- ์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ ์ด๋ ์ง์ : ๋ถ๋ชจ ์์๋ฅผ ์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ ์ด๋๋ก ์ค์ ํด์.
- ์ปจํ
์ด๋ ์ฟผ๋ฆฌ ์์ฑ:
@container๊ท์น์ ์ฌ์ฉํด์ ์ปจํ ์ด๋์ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์์ ์์์ ์คํ์ผ์ ์ ์ํด์.
1๏ธโฃ container-type๊ณผ container-name์ผ๋ก ์ปจํ
์ด๋๋ฅผ ์ ์ํด์
์ด๋ค ์์๋ฅผ ์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ
์ด๋๋ก ๋ง๋ค๋ ค๋ฉด, ํด๋น ์์์ container-type ์์ฑ์ ์ง์ ํด์ผ ํด์. ํ์ํ๋ค๋ฉด container-name๋ ํจ๊ป ์ง์ ํ ์ ์์ด์.
container-type: ์ปจํ ์ด๋๊ฐ ์ด๋ค ์ถ์ผ๋ก ์ฟผ๋ฆฌ๋ ์ ์๋์ง ์ ์ํด์.size: ์ธ๋ผ์ธ(๋๋น) ๋ฐ ๋ธ๋ก(๋์ด) ์ถ ๋ชจ๋ ์ฟผ๋ฆฌํ ์ ์์ด์. (๊ฐ์ฅ ์ผ๋ฐ์ ์ด์์)inline-size: ์ธ๋ผ์ธ(๋๋น) ์ถ๋ง ์ฟผ๋ฆฌํ ์ ์์ด์. (๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋ ๊ฑฐ์์)normal: ๊ธฐ๋ณธ๊ฐ์ผ๋ก, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ํฅ์ ์ฃผ์ง ์์์.
container-name: ์ปจํ ์ด๋์ ์ด๋ฆ์ ๋ถ์ฌํด์, ์ฌ๋ฌ ์ปจํ ์ด๋๊ฐ ์ค์ฒฉ๋์ด ์์ ๋ ํน์ ์ปจํ ์ด๋๋ฅผ ๋ช ์์ ์ผ๋ก ์ฟผ๋ฆฌํ ์ ์๊ฒ ํด์ค์. (์ ํ ์ฌํญ์ด์์)
์ ์ฉํ ํ
inline-size๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๋ ์ด์๋๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ ๊ฐ๋ก ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ ์ด์์์ด ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์.
inline-size๋ ์ด๋ฌํ ๊ฐ๋ก ํฌ๊ธฐ(๋๋น) ๋ณํ์๋ง ๋ฐ์ํ๋ฏ๋ก, ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ด๋ ๋ ์ด์์ ๋ณ๊ฒฝ์ ๋ง๊ณ ์ฑ๋ฅ์๋ ์ ๋ฆฌํด์.
2๏ธโฃ @container ๊ท์น์ผ๋ก ์คํ์ผ์ ์ ์ฉํด์
์ปจํ
์ด๋๋ฅผ ์ ์ํ๋ค๋ฉด, ์ด์ ์์ ์์์์ @container ๊ท์น์ ์ฌ์ฉํด์ ์ปจํ
์ด๋์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์์ด์.
๋ฌธ๋ฒ์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋งค์ฐ ์ ์ฌํด์.
/* ์ปจํ ์ด๋ ์ด๋ฆ ์์ด ์ฟผ๋ฆฌ (๊ฐ์ฅ ๊ฐ๊น์ด ์ปจํ ์ด๋์ ์ ์ฉ) */ @container (min-width: 400px) { .child-element { /* ์ปจํ ์ด๋์ ๋๋น๊ฐ 400px ์ด์์ผ ๋ ์ ์ฉ๋ ์คํ์ผ */ font-size: 1.2rem; padding: 1rem; } } /* ํน์ ์ปจํ ์ด๋ ์ด๋ฆ์ ์ง์ ํ์ฌ ์ฟผ๋ฆฌ */ @container card-container (max-width: 300px) { .card-image { display: none; /* 'card-container'์ ๋๋น๊ฐ 300px ์ดํ์ผ ๋ ์ด๋ฏธ์ง๋ฅผ ์จ๊ฒจ์ */ } .card-title { font-size: 0.9rem; } }
๐งช ์ค๋ฌด ์ ์ฉ ์์: ๋ฐ์ํ ์นด๋ ์ปดํฌ๋ํธ
์ด์ ์ค์ ๋ก Container Queries๋ฅผ ์ฌ์ฉํด์ ์ ์ฐํ ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ณผ๊น์? ์์ ์ธ๊ธํ๋ ๋ด์ค ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ์์๋ก ๋ค์ด๋ณผ๊ฒ์.
0๏ธโฃ HTML ๊ตฌ์กฐ
<div class="container-wrapper"> <div class="card-container"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-image" /> <div class="card-content"> <h3 class="card-title">์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ก ์ ์ฐํด์ง ์นด๋ ์ ๋ชฉ</h3> <p class="card-description"> ์ด๊ฒ์ ์นด๋ ์ค๋ช ํ ์คํธ์ ๋๋ค. ์ปจํ ์ด๋์ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ ์ด์์์ด ๋ณ๊ฒฝ๋ ๊ฑฐ์์. </p> <button class="card-button">๋ ๋ณด๊ธฐ</button> </div> </div> </div> <div class="sidebar-wrapper"> <div class="card-container"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-image" /> <div class="card-content"> <h3 class="card-title">์ฌ์ด๋๋ฐ์ ๋ค์ด๊ฐ ์นด๋</h3> <p class="card-description">์ฌ์ด๋๋ฐ์์๋ ๋ด์ฉ์ด ๋ ์งง์์ ธ์.</p> <button class="card-button">๋ ๋ณด๊ธฐ</button> </div> </div> </div>
์ HTML์์ card-container๊ฐ ์ฐ๋ฆฌ๊ฐ ์ฟผ๋ฆฌํ ๋์์ด ๋ ๊ฑฐ์์. ๊ทธ๋ฆฌ๊ณ ์ด card-container๋ container-wrapper์ sidebar-wrapper๋ผ๋ ๋ ๊ฐ์ง ๋ค๋ฅธ ๋๋น์ ๋ถ๋ชจ ์์ ๋ฐฐ์น๋์ด ์์ฃ .
1๏ธโฃ CSS ์ ์ ๋ฐ ์ปจํ ์ด๋ ์ง์
๋จผ์ , card-container๋ฅผ ์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ
์ด๋๋ก ์ง์ ํ๊ณ ๊ธฐ๋ณธ ์คํ์ผ์ ์ ์ํ ๊ฒ์.
.container-wrapper, .sidebar-wrapper { padding: 1rem; } .container-wrapper { width: 70%; background-color: #f0f0f0; margin-bottom: 2rem; } .sidebar-wrapper { width: 25%; background-color: #e0e0e0; } .card-container { container-type: inline-size; /* ์ด ์์์ ์ธ๋ผ์ธ(๊ฐ๋ก) ํฌ๊ธฐ๋ฅผ ์ฟผ๋ฆฌํ ์ ์๊ฒ ํด์ */ container-name: article-card; /* 'article-card'๋ผ๋ ์ด๋ฆ์ ๋ถ์ฌํด์ */ display: flex; gap: 1rem; border: 1px solid #ccc; padding: 1rem; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-image { width: 150px; height: 100px; object-fit: cover; border-radius: 4px; } .card-content { flex-grow: 1; } .card-title { font-size: 1.2rem; margin-top: 0; } .card-description { font-size: 0.9rem; color: #555; } .card-button { background-color: #007bff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; margin-top: 0.5rem; }
card-container์ container-type: inline-size;์ container-name: article-card;๋ฅผ ์ ์ฉํ ๊ฒ์ ๋ณผ ์ ์์ด์. ์ด์ ์ด ์ปจํ
์ด๋์ ๋๋น์ ๋ฐ๋ผ ์์ ์์๋ค์ ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋์์ด์.
container-wrapper๋ ๋์ ์์ญ์, sidebar-wrapper๋ ์ข์ ์์ญ์ ์๋ฎฌ๋ ์ด์
ํ๊ธฐ ์ํด ๋๋น๋ฅผ ๋ค๋ฅด๊ฒ ์ฃผ์์ด์.
2๏ธโฃ @container ๊ท์น์ผ๋ก ๋ฐ์ํ ์คํ์ผ์ ์ ์ฉํด์
์ด์ article-card ์ปจํ
์ด๋์ ๋๋น์ ๋ฐ๋ผ ์นด๋ ๋ด๋ถ ์์๋ค์ ์คํ์ผ์ ๋ณ๊ฒฝํด๋ณผ๊ฒ์.
/* ์ปจํ ์ด๋์ ๋๋น๊ฐ 450px ์ดํ์ผ ๋ */ @container article-card (max-width: 450px) { .card-container { flex-direction: column; /* ์ด๋ฏธ์ง๋ฅผ ์๋ก, ๋ด์ฉ์ ์๋๋ก ๋ฐฐ์น */ align-items: flex-start; } .card-image { width: 100%; /* ์ด๋ฏธ์ง๋ฅผ ์ปจํ ์ด๋ ๋๋น์ ๊ฝ ์ฑ์ฐ๊ณ */ height: 180px; /* ๋์ด๋ ๊ณ ์ */ } } /* ์ปจํ ์ด๋์ ๋๋น๊ฐ 300px ์ดํ์ผ ๋ (์ฌ์ด๋๋ฐ์ฒ๋ผ ๋งค์ฐ ์ข์ ๋) */ @container article-card (max-width: 300px) { .card-image { display: none; /* ์ด๋ฏธ์ง๋ฅผ ์์ ํ ์จ๊ฒจ์ */ } .card-description { display: -webkit-box; /* ํ ์คํธ๋ฅผ ๋ ์ค๋ก ์ ํ */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .card-title { font-size: 1rem; } }
์ CSS ์ฝ๋๋ฅผ ์ ์ฉํ๋ฉด, card-container์ ๋๋น๊ฐ 450px ์ดํ๋ก ์ค์ด๋ค๋ฉด ์ด๋ฏธ์ง๊ฐ ์๋จ์ผ๋ก ์ด๋ํ๊ณ ๋ด์ฉ์ด ์๋๋ก ๋ฐฐ์น๋๋ ์ธ๋กํ ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝ๋ผ์.
๊ทธ๋ฆฌ๊ณ 300px ์ดํ๋ก ๋ ์ค์ด๋ค๋ฉด, ์ด๋ฏธ์ง๊ฐ ์์ ์ฌ๋ผ์ง๊ณ ์ค๋ช
ํ
์คํธ๋ ๋ ์ค๋ก ์ ํ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ด์.
์ด๋ container-wrapper ์์ ์นด๋์ sidebar-wrapper ์์ ์นด๋๊ฐ ๊ฐ๊ธฐ ๋ค๋ฅธ ๋ฐ์ํ ๋์์ ํ๊ฒ ๋ง๋ค ์ ์์์ ์๋ฏธํด์. ๋ทฐํฌํธ ํฌ๊ธฐ์ ๊ด๊ณ์์ด ์ค์ง ๋ถ๋ชจ ์ปจํ
์ด๋์ ํฌ๊ธฐ์๋ง ๋ฐ์ํ๋ ๊ฒ์ด์ฃ .
๐ ์ ๋ฆฌ
0๏ธโฃ ํต์ฌ ์์ฝ
CSS Container Queries๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋ทฐํฌํธ ๊ธฐ๋ฐ ํ๊ณ๋ฅผ ๊ทน๋ณตํ๊ณ , ์ปดํฌ๋ํธ ๋จ์์ ๋ฐ์ํ ๋์์ธ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ํ์ ์ ์ธ CSS ๊ธฐ๋ฅ์ด์์.
container-type ๋ฐ container-name ์์ฑ์ผ๋ก ์ฟผ๋ฆฌ ๊ฐ๋ฅํ ์ปจํ
์ด๋๋ฅผ ์ ์ํ๊ณ , @container ๊ท์น์ ์ฌ์ฉํด์ ํด๋น ์ปจํ
์ด๋์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์์ ์์์ ์คํ์ผ์ ์ ์ฐํ๊ฒ ๋ณ๊ฒฝํ ์ ์์ด์.
container-type: inline-size;: ๊ฐ์ฅ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ฉฐ, ์ปจํ ์ด๋์ ๋๋น(์ธ๋ผ์ธ ์ถ)์ ๋ฐ๋ผ ๋ฐ์ํด์.@container (query): ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์ ์ฌํ ๋ฌธ๋ฒ์ผ๋ก ์ปจํ ์ด๋์ ํฌ๊ธฐ๋ฅผ ์กฐ๊ฑด์ผ๋ก ์คํ์ผ์ ์ ์ฉํด์.container-name: ์ฌ๋ฌ ์ปจํ ์ด๋๊ฐ ์ค์ฒฉ๋ ๋ ํน์ ์ปจํ ์ด๋๋ฅผ ๋ช ์์ ์ผ๋ก ์ง์ ํ ์ ์๊ฒ ํด์ค์.
์ด ๊ธฐ๋ฅ์ ํ์ฉํ๋ฉด ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๊ณ , ํจ์ฌ ๋ ์์ธก ๊ฐ๋ฅํ๋ฉฐ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ๋ฐ์ํ UI๋ฅผ ๊ตฌ์ถํ ์ ์๊ฒ ๋ผ์.
1๏ธโฃ ๋ค์ ์ก์
Container Queries๋ ์ด๋ฏธ ๋๋ถ๋ถ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๊ณ ์์ด์. ์์ง ์ค๋ฌด ํ๋ก์ ํธ์ ์ ์ฉํด๋ณด์ง ์์ผ์
จ๋ค๋ฉด, ์์ ์ปดํฌ๋ํธ๋ถํฐ ์์ํด์ ์ ์ง์ ์ผ๋ก ๋์
ํด๋ณด์๋ ๊ฒ์ ์ถ์ฒํด ๋๋ ค์.
ํนํ, ์ฌ๋ฌ ๋ ์ด์์์ ์ฌ์ฌ์ฉ๋๋ ์นด๋๋ ์์ ฏ ์ปดํฌ๋ํธ ๋ฑ์ ์ ์ฉํ๋ฉด ๊ทธ ํจ๊ณผ๋ฅผ ํฌ๊ฒ ์ฒด๊ฐํ์ค ์ ์์ ๊ฑฐ์์.
๋ ์ด์ ๋ถ๋ชจ ์์์ ํฌ๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ ์คํ์ผ์ ๋ณต์กํ๊ฒ ๊ด๋ฆฌํ ํ์๊ฐ ์์ด์ ธ์! ์ฌ๋ฌ๋ถ์ ์น ๊ฐ๋ฐ ์์ฐ์ฑ์ด ํ ๋จ๊ณ ๋ ์ฌ๋ผ๊ฐ ๊ฑฐ์์.
๐ฎ ์ฐธ๊ณ
- MDN Web Docs: CSS Container Queries
- CSS-Tricks: A Complete Guide to CSS Container Queries
- Chrome Developers: Say Hello To CSS Container Queries
์ฐ๊ด๋ ํฌ์คํธ
- ๋จ์ด: 1,697๊ฐ19๋ถ
[๐ค] JavaScript requestIdleCallback๊ณผ isInputPending์ผ๋ก UI ๋ฐ์์ฑ ๊ฐ์ ํ๊ธฐ: ๋ฉ์ธ ์ค๋ ๋ ์ต์ ํ ์ฌํ
JavaScript์ `requestIdleCallback`๊ณผ `isInputPending` API๋ฅผ ํ์ฉํ์ฌ ๋ฉ์ธ ์ค๋ ๋ ๋ธ๋กํน์ ์ค์ด๊ณ UI ๋ฐ์์ฑ์ ๊ทน๋ํํ๋ ์ค์ง์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ์น ์ฑ๋ฅ ์ต์ ํ ์ ๋ต์ ์๋ดํด ๋๋ ค์.
- ๋จ์ด: 2,136๊ฐ23๋ถ
[๐ค] Next.js App Router์ `generateMetadata`์ `generateViewport` ์ฌํ: SEO ๋ฐ PWA ์ต์ ํ ์ ๋ต
Next.js 14/13 App Router์์ `generateMetadata`์ `generateViewport` ํจ์๋ฅผ ํ์ฉํ์ฌ ๋์ SEO ๋ฉํํ๊ทธ์ PWA ์ค์ ์ ์ต์ ํํ๋ ์ฌํ ์ ๋ต์ ๋ค๋ฃน๋๋ค. ์ค๋ฌด ์์์ ํจ๊ป ์น์ฌ์ดํธ์ ๊ฒ์ ์์ง ๋ ธ์ถ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,783๊ฐ19๋ถ
[๐ค] CSS ๋ณ์(Custom Properties) ์ฌํ: ๋์ ํ ๋ง, ์ค์ฝํ, JavaScript ํ์ฉ ์ ๋ต
CSS ๋ณ์(Custom Properties)์ ๊ธฐ๋ณธ๋ถํฐ ๋์ ํ ๋ง ๊ตฌํ, ์ค์ฝํ ์ ๋ต, ๊ทธ๋ฆฌ๊ณ JavaScript์์ ์ํธ์์ฉ๊น์ง ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ์ฌํ ํ์ฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,283๊ฐ15๋ถ
[๐ค] Next.js App Router Edge Runtime: ๊ธ๋ก๋ฒ ์ฑ๋ฅ๊ณผ ๋น์ฉ ํจ์จ์ฑ ๊ทน๋ํ ์ ๋ต
Next.js App Router์์ Edge Runtime์ ํ์ฉํด Route Handler ์ฑ๋ฅ์ ๊ทน๋ํํ๊ณ , ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅธ ์๋ต ์๋๋ฅผ ์ ๊ณตํ๋ฉฐ, ๋น์ฉ ํจ์จ์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด์ํ๋ ์ค์ ์ ๋ต์ ์์ธํ ๋ค๋ค์. Edge Runtime์ ์ฅ์ ๊ณผ ์ ํ์ฌํญ, ๊ทธ๋ฆฌ๊ณ ์ค์ ์ฝ๋ ์์๋ฅผ ํตํด ํจ๊ณผ์ ์ธ ์ ์ฉ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,978๊ฐ25๋ถ
[๐ค] Next.js/React์์ ํด๋ฆฐ ์ํคํ ์ฒ์ ์์กด์ฑ ์ญ์ ์์น ์ ์ฉํ๊ธฐ: ํ์ฅ ๊ฐ๋ฅํ ํ๋ฐํธ์๋ ๋ง๋ค๊ธฐ
Next.js์ React ํ๋ก์ ํธ์์ ํด๋ฆฐ ์ํคํ ์ฒ์ ์์กด์ฑ ์ญ์ ์์น(DIP)์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. ๋๋ฉ์ธ, ์ ์ค์ผ์ด์ค, ์ธํ๋ผ ๊ณ์ธต์ ๋ถ๋ฆฌํ์ฌ ์ ์ง๋ณด์์ฑ๊ณผ ํ ์คํธ ์ฉ์ด์ฑ์ ๊ทน๋ํํ๋ ์ค์ฉ์ ์ธ ์ ๋ต์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,729๊ฐ19๋ถ
[๐ค] Jotai๋ก Next.js App Router ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ ์ฌํ: ์ํฐ ํจํด๊ณผ ์ต์ ํ
Next.js App Router ํ๊ฒฝ์์ Jotai ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํ์ฌ ํจ์จ์ ์ธ ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ ์ ๋ต์ ์์๋ณด์ธ์. ์ํฐ ํจํด์ ์ด์ฉํ ์ํ ๋ถ๋ฆฌ, ์ต์ ํ ๊ธฐ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ค์ฉ์ ์ธ ์ฝ๋ ์์๋ฅผ ํตํด ๋ณต์กํ UI ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,711๊ฐ18๋ถ
[๐ค] Next.js App Router ์ ์ญ ์ํ ๊ด๋ฆฌ: Server/Client Components ์๋ฒฝ ๊ฐ์ด๋
Next.js App Router ํ๊ฒฝ์์ Server Components์ Client Components ๊ฐ์ ์ ์ญ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ํ๊ตฌํด์. Zustand, Recoil, Context API ๋ฑ ๋ค์ํ ์๋ฃจ์ ๊ณผ ์ค์ฉ์ ์ธ ์ ๋ต์ ํตํด ๋ณต์กํ ์ํ ๊ด๋ฆฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด ๋ณด์ธ์.
- ๋จ์ด: 1,783๊ฐ20๋ถ
[๐ค] Atomic Design ํจํด์ผ๋ก React/Next.js ์ปดํฌ๋ํธ ์ํคํ ์ฒ ํ์ฅ์ฑ ๋์ด๊ธฐ
React ๋ฐ Next.js ํ๋ก์ ํธ์์ Atomic Design ํจํด์ ์ ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ํ์ฅ์ฑ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์๋ ค๋๋ ค์. ํจ์จ์ ์ธ ํ๋ก ํธ์๋ ์ํคํ ์ฒ๋ฅผ ๊ตฌ์ถํด ๋ณด์ธ์.
- ๋จ์ด: 2,149๊ฐ24๋ถ
[๐ค] ์๋ฐ์คํฌ๋ฆฝํธ Web Workers: UI ๋ธ๋กํน ์์ด ๋ฌด๊ฑฐ์ด ์์ ์ฒ๋ฆฌํ๊ธฐ
ํ๋ก ํธ์๋์์ CPU ์ง์ฝ์ ์ธ ์์ ์ UI ๋ธ๋กํน์ ํํ ๋ฌธ์ ์์. ์๋ฐ์คํฌ๋ฆฝํธ Web Workers๋ก ๋ฉ์ธ ์ค๋ ๋๋ฅผ ํด๋ฐฉํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์ฝ๋ ์์์ ํจ๊ป ์์๋ณด์ธ์. ๋ณต์กํ ๊ณ์ฐ, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋ฑ์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์์ ํ๊ฒ ์คํํ๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
- ๋จ์ด: 1,810๊ฐ20๋ถ
[๐ค] TypeScript `as const` ์ฌ์ธต ๋ถ์: ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ๊ณผ ๋ถ๋ณ์ฑ ํ์ฉ ์ ๋ต
TypeScript์ `as const`๋ฅผ ํ์ฉํ์ฌ ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ์ ๊ฐํํ๊ณ , ๋ฐฐ์ด๊ณผ ๊ฐ์ฒด์ ๋ถ๋ณ์ฑ์ ์์ ํ๊ฒ ํ๋ณดํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์์ธํ ์์๋ด์. ์ค๋ฌด ์ฝ๋์ ํ์ ์์ ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ๋์ฌ๋ณด์ธ์.
- ๋จ์ด: 1,470๊ฐ17๋ถ
[๐ค] Next.js @next/font๋ฅผ ํ์ฉํ ํฐํธ ์ต์ ํ ๋ฐ CLS ๊ฐ์ ์ ๋ต
Next.js ์ ํ๋ฆฌ์ผ์ด์ ์์ ํฐํธ ๋ก๋ฉ์ผ๋ก ์ธํ Cumulative Layout Shift(CLS)๋ฅผ ์ต์ํํ๊ณ ์น ์ฑ๋ฅ์ ๊ทน๋ํํ๋ @next/font ์ฌ์ฉ๋ฒ๊ณผ ์ค์ฉ์ ์ธ ์ต์ ํ ์ ๋ต์ ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,843๊ฐ21๋ถ
[๐ค] Next.js App Router ๊ตญ์ ํ (i18n) ์๋ฒฝ ๊ฐ์ด๋: ๋ค๊ตญ์ด ์ง์ ๊ตฌํ ์ ๋ต
Next.js 14+ App Router ํ๊ฒฝ์์ ๊ตญ์ ํ(i18n)๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์. ๋ฏธ๋ค์จ์ด๋ฅผ ํ์ฉํ ์ธ์ด ๊ฐ์ง๋ถํฐ ํด๋ผ์ด์ธํธ/์๋ฒ ์ปดํฌ๋ํธ์์์ ๋ค๊ตญ์ด ํ ์คํธ ์ฒ๋ฆฌ๊น์ง, ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ๋ค๊ตญ์ด ์ง์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ดํด ๋๋ฆด๊ฒ์.
- ๋จ์ด: 1,322๊ฐ16๋ถ
[์น ์ฑ๋ฅ ์ต์ ํ] Interaction to Next Paint (INP) ๊ฐ์ : ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ์ค์ ์ ๋ต
์๋ก์ด Core Web Vitals ์งํ, Interaction to Next Paint(INP)๋ฅผ ๊น์ด ์ดํดํ๊ณ ์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ INP ์ ์๋ฅผ ๊ฐ์ ํ๋ ์ค์ฉ์ ์ธ ์ต์ ํ ์ ๋ต๋ค์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์. ์ฌ์ฉ์ ์ธํฐ๋์ ์๋ต์ฑ์ ๋์ฌ ์ง์ ํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค์ด ๋ณด์ธ์.
๋จ์ด: 1,654๊ฐ20๋ถ[๐ค] JavaScript Decorator ์ฌ์ธต ๋ถ์: ๋ฉํํ๋ก๊ทธ๋๋ฐ๊ณผ ํ์ ์คํฌ๋ฆฝํธ ํ์ฉ ์ ๋ต
JavaScript Decorator์ ๊ฐ๋ ๋ถํฐ ํ์ ์คํฌ๋ฆฝํธ์์์ ํ์ฉ, ๊ทธ๋ฆฌ๊ณ ๋ฏธ๋ ํ์คํ ๋ฐฉํฅ๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ๋ฉฐ, ์ค๋ฌด์์ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ๋์ด๋ ๋ฉํํ๋ก๊ทธ๋๋ฐ ํจํด์ ํ์ตํด ๋ณด์ธ์.
- ๋จ์ด: 2,610๊ฐ28๋ถ
[๐ค] JavaScript ํ๋ก๋ฏธ์ค/async-await ์ฌํ: ์ค์ ํจํด๊ณผ ์ฃผ์์ฌํญ
JavaScript์ ํ๋ก๋ฏธ์ค์ async/await๋ฅผ ๊น์ด ์ดํดํ๊ณ , ์ค๋ฌด์์ ๋ง์ฃผํ๋ ๋ณต์กํ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ํฉ์์ ํ์ฉํ ์ ์๋ ๊ณ ๊ธ ํจํด๊ณผ ํํ ๋ฐ์ํ๋ ์ค์๋ฅผ ๋ฐฉ์งํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,418๊ฐ16๋ถ
[๐ค] TypeScript 5.2+ `using` ์ ์ธ์ผ๋ก ์์ ์๋ ๊ด๋ฆฌํ๊ธฐ: ๊น๋ํ ๋ฆฌ์์ค ์ ๋ฆฌ์ ์์
TypeScript 5.2์์ ๋์ ๋ `using` ์ ์ธ์ ํ์ฉํ์ฌ ํ์ผ ํธ๋ค, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฐ๊ฒฐ ๋ฑ ๋ค์ํ ์์์ ์๋์ผ๋ก ๊ด๋ฆฌํ๊ณ ๊น๋ํ๊ฒ ์ ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ๋ ์ด์ `try...finally` ๋ธ๋ก์ผ๋ก ๋ณต์กํ๊ฒ ์์์ ํด์ ํ ํ์ ์์ด์.
- ๋จ์ด: 2,002๊ฐ22๋ถ
[๐ค] Feature-Sliced Design (FSD)์ผ๋ก ํ์ฅ ๊ฐ๋ฅํ ํ๋ก ํธ์๋ ์ํคํ ์ฒ ๊ตฌ์ถํ๊ธฐ
Feature-Sliced Design (FSD)์ ๋๊ท๋ชจ ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ฅ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋์ด๋ ๊ฐ๋ ฅํ ์ํคํ ์ฒ ํจํด์ด์์. FSD์ ํต์ฌ ์์น, ๋ ์ด์ด ๊ตฌ์กฐ, ์ค๋ฌด ์ ์ฉ ๋ฐฉ๋ฒ์ ์ฝ๋ ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,781๊ฐ21๋ถ
[๐ค] TypeScript `moduleResolution: 'bundler'`์ `verbatimModuleSyntax` ์๋ฒฝ ์ดํด: ๋ชจ๋ ๋ฒ๋ค๋ฌ ์๋์ ํ์ ์คํฌ๋ฆฝํธ ์ค์ ์ต์ ํ
๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก์ ํธ์์ TypeScript์ `moduleResolution: 'bundler'`์ `verbatimModuleSyntax` ์ต์ ์ด ์ ์ค์ํ์ง, ์ด๋ป๊ฒ ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ํ๊ณ ํ์ฉํ์ฌ ๊ฐ๋ฐ ๊ฒฝํ๊ณผ ๋ฒ๋ค๋ง ํจ์จ์ ๊ทน๋ํํ๋์ง ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
- ๋จ์ด: 1,908๊ฐ24๋ถ
[๐ค] ๋ชจ๋ ธ๋ ํฌ ์ํคํ ์ฒ: ํจ์จ์ ์ธ ๋๊ท๋ชจ ํ๋ก์ ํธ ์ค๊ณ๋ฅผ ์ํ ์ค์ ๊ฐ์ด๋
๋๊ท๋ชจ ์น ํ๋ก์ ํธ์์ ๋ชจ๋ ธ๋ ํฌ๋ฅผ ๋์ ํ๋ ์ด์ , ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ํจ๊ณผ์ ์ธ ๊ตฌ์กฐ ์ค๊ณ ๋ฐ ์ค๋ฌด ์ ์ฉ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์. ํ ์์ฐ์ฑ ํฅ์๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
๋จ์ด: 2,188๊ฐ26๋ถ[๐ค] ์น ์ฑ๋ฅ ์ต์ ํ: ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ ์ต์ํ ์ ๋ต
๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ์ ํต์ฌ์ธ ๋ฆฌํ๋ก์ฐ(Reflow)์ ๋ฆฌํ์ธํธ(Repaint)์ ๋ฐ์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ , ์ด๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ค์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๊ทน๋ํํ๋ ์ค์ง์ ์ธ ์ ๋ต๊ณผ ์ฝ๋ ์์๋ฅผ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,903๊ฐ19๋ถ
[๐ค] Vitest์ React Testing Library๋ก Next.js ์ปดํฌ๋ํธ ์๋ฒฝ ํ ์คํธํ๊ธฐ
Next.js ํ๋ก์ ํธ์์ Vitest์ React Testing Library๋ฅผ ํ์ฉํ์ฌ UI ์ปดํฌ๋ํธ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ ์คํธํ๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ์ค์ ๋ถํฐ Mocking, ์ด๋ฒคํธ ์๋ฎฌ๋ ์ด์ ๊น์ง, ๊ฒฌ๊ณ ํ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ํ ํ ์คํธ ์ ๋ต์ ์ตํ๋ณด์ธ์.
- ๋จ์ด: 1,542๊ฐ20๋ถ
[๐ค] Tailwind CSS v4 ์ถ์: ๊ฐ๋ฐ์์๊ฒ ์ฐพ์์ฌ ๋ณํ์ ์ต์ ํ ์ ๋ต
Tailwind CSS v4์ ์ฃผ์ ๋ณ๊ฒฝ์ฌํญ๊ณผ ์๋ก์ด ๊ธฐ๋ฅ๋ค์ ๊น์ด ์๊ฒ ๋ถ์ํ๊ณ , ์ค๋ฌด์์ ํจ์จ์ ์ผ๋ก ์ ์ฉํ๋ฉฐ ์ฑ๋ฅ์ ์ต์ ํํ๋ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,566๊ฐ20๋ถ
[๐ค] Next.js Dockerfile ์ต์ ํ: ํ๋ก๋์ ๋ฐฐํฌ๋ฅผ ์ํ ์๋ฒฝ ๊ฐ์ด๋
Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ Docker ์ปจํ ์ด๋๋ก ํจ์จ์ ์ผ๋ก ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ๋ฉํฐ์คํ ์ด์ง ๋น๋, ์บ์ฑ ์ ๋ต, ๋ณด์ ์ค์ ๋ฑ ํ๋ก๋์ ํ๊ฒฝ์ ์ต์ ํ๋ Dockerfile ์์ฑ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํด ๋๋ ค์.
- ๋จ์ด: 2,177๊ฐ24๋ถ
[๐ค] CSS Grid ์ฌํ ๊ฐ์ด๋: ์ค์ ๋ ์ด์์ ํจํด๊ณผ ๋ฐ์ํ ๋์์ธ ์ ๋ต
CSS Grid๋ ๊ฐ๋ ฅํ 2์ฐจ์ ๋ ์ด์์ ์์คํ ์ด์์. ์ด ๊ฐ์ด๋์์ Grid์ ํต์ฌ ๊ฐ๋ ๋ถํฐ ์ค์ ๋ ์ด์์ ํจํด, ๋ฐ์ํ ๋์์ธ ์ ๋ต๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋๋ก ๋์๋๋ ค์.
- ๋จ์ด: 1,718๊ฐ19๋ถ
[๐ค] TypeScript ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ : ๋ฌธ์์ด ํ์ ์ ๋ง๋ฒ์ฌ๋ก ๋ณ์ ํ๊ธฐ
TypeScript์ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ํ์ ์ ํ์ฉํ์ฌ ๋ณต์กํ ๋ฌธ์์ด ํจํด์ ์์ ํ๊ฒ ํ์ ์ถ๋ก ํ๊ณ , ๊ฐ๋ ฅํ ์ ํธ๋ฆฌํฐ ํ์ ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์ ์ ํจ๊ป ์์ธํ ์์๋ด์. ํ์ ์์ ์ฑ์ ํ ๋จ๊ณ ๋์ฌ ๊ฐ๋ฐ ๊ฒฝํ์ ๊ฐ์ ํด ๋ณด์ธ์.
- ๋จ์ด: 1,918๊ฐ23๋ถ
[๐ค] JavaScript WeakMap๊ณผ WeakSet: ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฐฉ์ง์ ์ต์ ํ ์ ๋ต
JavaScript์์ WeakMap๊ณผ WeakSet์ ํ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๊ณ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ๊ฐ๋น์ง ์ปฌ๋ ์ ๋์ ์๋ฆฌ์ ํจ๊ป ๊ฐ์ฒด ์ฐธ์กฐ ๊ด๋ฆฌ์ ์ค์์ฑ์ ์ดํดํ๊ณ , ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ์ ๋ต์ ๋ฐฐ์๋ด์.
- ๋จ์ด: 1,455๊ฐ17๋ถ
[๐ค] Next.js/React ํ๋ก์ ํธ๋ฅผ ์ํ ESLint & Prettier ์ค์ ์๋ฒฝ ๊ฐ์ด๋
๋ณต์กํ Next.js ๋ฐ React ํ๋ก์ ํธ์์ ์ผ๊ด๋ ์ฝ๋ ์คํ์ผ๊ณผ ํ์ง์ ์ ์งํ๋ ESLint์ Prettier ์ค์ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ ค์. ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ต์ ํ๋ ์ค์ ์ผ๋ก ๊ฐ๋ฐ ํจ์จ์ ๋์ฌ๋ณด์ธ์.
- ๋จ์ด: 2,022๊ฐ25๋ถ
[๐ค] JavaScript์ ํต์ฌ: ํ๋กํ ํ์ ์ฒด์ธ ์๋ฒฝ ์ดํด์ ํ์ฉ ์ ๋ต
JavaScript์ ์ฌ์ฅ๋ถ, ํ๋กํ ํ์ ์ฒด์ธ์ ๋์ ์๋ฆฌ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ๊ณผ ์์์ ์๋ฒฝํ๊ฒ ์ดํดํ๊ณ ์ค๋ฌด์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ์ฑ๋ฅ ์ต์ ํ ํ๋ ํจ๊ป ๋ค๋ค์.
- ๋จ์ด: 2,118๊ฐ22๋ถ
[๐ค] React ์ปค์คํ ํ : ์ฌ์ฌ์ฉ์ฑ ๋์ด๋ ์ค๊ณ ์์น๊ณผ ํ ์คํธ ์ ๋ต
React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๊ทน๋ํํ๋ ์ปค์คํ ํ ์ค๊ณ ์์น, ์ค์ฉ์ ์ธ ํจํด, ๊ทธ๋ฆฌ๊ณ ๊ฒฌ๊ณ ํ ํ ์คํธ ์ ๋ต์ ์๋์ด ๊ฐ๋ฐ์์ ๊ด์ ์์ ์์ธํ ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,107๊ฐ23๋ถ
[๐ค] React useRef ํ ์ฌ์ธต ๋ถ์: DOM ๋์ด์ ์ค์ ํ์ฉ ์ ๋ต
React useRef ํ ์ ๊ธฐ๋ณธ ์๋ฆฌ๋ถํฐ DOM ์์ ์ง์ ์ ์ด, ์ปดํฌ๋ํธ ๋ผ์ดํ์ฌ์ดํด ๊ด๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋ค์ํ ์ค์ ํ์ฉ ์ ๋ต๊น์ง ์ฌ์ธต์ ์ผ๋ก ๋ค๋ค์. ์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ useRef ์๋ฒฝ ๊ฐ์ด๋.
- ๋จ์ด: 1,762๊ฐ19๋ถ
[๐ค] Next.js 14/15์์ ๋์ OG ์ด๋ฏธ์ง ์์ฑ: ImageResponse ์๋ฒฝ ๊ฐ์ด๋
Next.js App Router ํ๊ฒฝ์์ ImageResponse๋ฅผ ํ์ฉํ์ฌ ๋์ OG ์ด๋ฏธ์ง๋ฅผ ํจ์จ์ ์ผ๋ก ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. SEO์ ์์ ๊ณต์ ์ต์ ํ๋ฅผ ์ํ ์ค์ ๊ฐ์ด๋์ ๋๋ค.
- ๋จ์ด: 1,481๊ฐ18๋ถ
[๐ค] Git ๋ธ๋์น ์ ๋ต: Git Flow vs GitHub Flow, ์ค๋ฌด์์ ์ด๋ป๊ฒ ์ ํํ๊ณ ์ด์ํ ๊น์?
๊ฐ๋ฐํ์ ํจ์จ์ ์ธ ํ์ ์ ์ํ Git ๋ธ๋์น ์ ๋ต์ ๊ณ ๋ฏผํ๊ณ ๊ณ์ ๊ฐ์? Git Flow์ GitHub Flow์ ํต์ฌ ๊ฐ๋ ๋ถํฐ ์ฅ๋จ์ , ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ ํ์ ๋ง๋ ์ ๋ต์ ์ ํํ๊ณ ์ด์ํ๋ ์ค์ง์ ์ธ ํ๊น์ง '๋ธ๋ฃจ'๊ฐ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,442๊ฐ16๋ถ
[๐ค] TypeScript ํ์ ๊ฐ๋: ๋ฐํ์ ํ์ ์์ ์ฑ์ ์ํ ํ์ ํจํด ์ ๋ณตํด์
TypeScript์์ ๋ฐํ์์ ๋ณ์์ ํ์ ์ ์์ ํ๊ฒ ์ขํ๋(Narrowing) ๋ฐฉ๋ฒ์ธ ํ์ ๊ฐ๋(Type Guard)์ ๋ํด ์์ธํ ์์๋ด์. `typeof`, `instanceof`, `in` ์ฐ์ฐ์๋ถํฐ ์ฌ์ฉ์ ์ ์ ํ์ ๊ฐ๋๊น์ง, ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ๊ฒฌ๊ณ ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋ด์.
- ๋จ์ด: 2,542๊ฐ28๋ถ
[๐ค] React Query (TanStack Query) ์ฌํ: ๋ฐ์ดํฐ ํ์นญ, ์บ์ฑ, ๋๊ธฐํ ์ ๋ต์ผ๋ก ์น ์ฑ ์ฑ๋ฅ ๊ทน๋ํํด์
React Query (TanStack Query)๋ฅผ ํ์ฉํ์ฌ ๋ณต์กํ ์๋ฒ ์ํ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ , ์ง๋ฅ์ ์ธ ์บ์ฑ๊ณผ ์๋ ๋๊ธฐํ ์ ๋ต์ผ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. useQuery, useMutation, useInfiniteQuery ๋ฑ ํต์ฌ ํ ๊ณผ ์ค์ ์ต์ ํ ํ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 2,401๊ฐ26๋ถ
[๐ค] React `useTransition`๊ณผ `useDeferredValue`๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ๊ทน๋ํํ๋ ๋ฐฉ๋ฒ
React ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฌด๊ฑฐ์ด UI ์ ๋ฐ์ดํธ๋ก ์ธํ ๋ฒ๋ฒ ์์ ํด๊ฒฐํ๊ณ , `useTransition`๊ณผ `useDeferredValue` ํ ์ ํ์ฉํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๊ธฐ์ ์ผ๋ก ๊ฐ์ ํ๋ ์ค์ฉ์ ์ธ ์ ๋ต์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 1,917๊ฐ22๋ถ
[๐ค] React Suspense์ ErrorBoundary: ๊ฒฌ๊ณ ํ๊ณ ๋ถ๋๋ฌ์ด UI ๊ฒฝํ์ ์ํ ์ค์ ๊ฐ์ด๋
React ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํ์ ํ Suspense์ ErrorBoundary์ ๊ฐ๋ ฅํ ์กฐํฉ์ ๊น์ด ์๊ฒ ๋ค๋ค์. ๋ก๋ฉ ์ํ์ ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ์ฐ์ํ๊ฒ ๊ด๋ฆฌํ์ฌ ๋์ฑ ๊ฒฌ๊ณ ํ๊ณ ๋ถ๋๋ฌ์ด UI๋ฅผ ๋ง๋๋ ์ค์ ํ๊ณผ ์ฝ๋ ์์๋ฅผ ํ์ธํด ๋ณด์ธ์.
- ๋จ์ด: 1,681๊ฐ19๋ถ
[๐ค] Next.js 15 ๊ณ ๊ธ ๋ฐ์ดํฐ ์บ์ฑ ์ ๋ต: fetch์ revalidate ์ฌ์ธต ๋ถ์
Next.js 15์์ `fetch` API์ ๊ฐ๋ ฅํ ์บ์ฑ ๋ฉ์ปค๋์ฆ๊ณผ `revalidate` ์ต์ ์ ํ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ต์ ํํ๊ณ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด์. ์ค๋ฌด ์์๋ฅผ ํตํด ์๋ฒ ์ปดํฌ๋ํธ์ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์์ ์บ์ฑ ์ ๋ต์ ํจ๊ณผ์ ์ผ๋ก ์ ์ฉํ๋ ํ์ ์ ๊ณตํด์.
๋จ์ด: 1,320๊ฐ14๋ถ[๐ค] Next.js App Router: generateStaticParams๋ก ๋์ ๋ผ์ฐํ ๋น๋ ์ต์ ํํ๊ธฐ
Next.js App Router์์ generateStaticParams ํจ์๋ฅผ ํ์ฉํ์ฌ ๋์ ๋ผ์ฐํ ์ ์ ์ ํ์ด์ง๋ฅผ ํจ์จ์ ์ผ๋ก ์์ฑํ๊ณ ๋น๋ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์.
๋จ์ด: 1,891๊ฐ22๋ถ[๐ค] React ๋ ๋๋ง ์ต์ ํ: useMemo, useCallback, React.memo ์๋ฒฝ ๊ฐ์ด๋
์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ React ๋ ๋๋ง ์ต์ ํ ๊ฐ์ด๋. useMemo, useCallback, React.memo์ ์ ํํ ์ฌ์ฉ๋ฒ๊ณผ ์ค๋ฌด์์ ํํ ์ ์ง๋ฅด๋ ์ค์, ๊ทธ๋ฆฌ๊ณ ์ค์ ์ฑ๋ฅ ํฅ์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ ค์.
๋จ์ด: 2,145๊ฐ24๋ถ[๐ค] JavaScript Proxy์ Reflect ์ฌ์ธต ๋ถ์: ๋ฉํ ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ์ฝ๋ ๊ฐํํ๊ธฐ
JavaScript Proxy์ Reflect API๋ฅผ ํ์ฉํ ๋ฉํ ํ๋ก๊ทธ๋๋ฐ ๊ธฐ๋ฒ์ ์ฌ์ธต ๋ถ์ํด์. ๊ฐ์ฒด ์ ๊ทผ ์ ์ด, ์ ํจ์ฑ ๊ฒ์ฌ, ๋ก๊น , ๋ฐ์ํ ์์คํ ๊ตฌํ ๋ฑ ์ค์ฉ์ ์ธ ํ์ฉ ์ฌ๋ก๋ฅผ ํตํด ์ฝ๋์ ์ ์ฐ์ฑ๊ณผ ์์ ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
- ๋จ์ด: 2,029๊ฐ24๋ถ
[๐ค] React/Next.js ๋ฒ๋ค ์ต์ ํ: ์ฝ๋ ์คํ๋ฆฌํ ๊ณผ ๋ ์ด์ง ๋ก๋ฉ ์๋ฒฝ ๊ฐ์ด๋
React์ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ฉ ์๋๋ฅผ ๊ฐ์ ํ๋ ์ฝ๋ ์คํ๋ฆฌํ ๊ณผ ๋ ์ด์ง ๋ก๋ฉ ๊ธฐ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ์นํฉ ์ค์ ๋ถํฐ React.lazy, Next.js dynamic import๊น์ง ๋ค๋ค์.
- ๋จ์ด: 1,770๊ฐ20๋ถ
[๐ค] React์ `useOptimistic` ํ ์ผ๋ก ๋๊ด์ UI ์ ๋ฐ์ดํธ ๊ตฌํํ๊ธฐ: Server Actions์ ํจ๊ป
React 18/19์ `useOptimistic` ํ ์ ํ์ฉํ์ฌ Server Actions์ ์ฐ๋๋๋ ๋๊ด์ UI ์ ๋ฐ์ดํธ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ค์ฉ์ ์ธ ์์์ ํจ๊ป ์์ธํ ์์๋ด์. ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์์ฑ์ ๋์ด๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
๋จ์ด: 1,561๊ฐ17๋ถ[๐ค] TypeScript const Type Parameters: ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ๊ฐํ์ ์ค์ฉ์ ์ธ ํ์ฉ๋ฒ
TypeScript 5.0์ ๋์ ๋ const Type Parameters๋ฅผ ํ์ฉํ์ฌ ์ ๋ค๋ฆญ ํจ์์ ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ์ ์ ๊ตํ๊ฒ ์ ์ดํ๊ณ , ๋์ฑ ๊ฒฌ๊ณ ํ ํ์ ์์คํ ์ ๊ตฌ์ถํ๋ ์ค์ฉ์ ์ธ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. as const์์ ์ฐจ์ด์ ๊ณผ ์ค์ ์ฝ๋ ์์๋ฅผ ํตํด ์ด์ค๊ธ ๊ฐ๋ฐ์๋ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,028๊ฐ22๋ถ
[๐ค] Next.js/React ์ฑ CLS ์ต์ ํ: ์ํํธ ์๋ ์ฌ์ฉ์ ๊ฒฝํ ๋ง๋ค๊ธฐ
Next.js์ React ์ ํ๋ฆฌ์ผ์ด์ ์์ Cumulative Layout Shift(CLS) ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ ์ค์ง์ ์ธ ์ ๋ต๊ณผ ์ฝ๋ ์์๋ฅผ ์์ธํ ์์๋ณด์ธ์. ์น ์ฑ๋ฅ ์ต์ ํ์ ํต์ฌ ์์์ธ CLS๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,740๊ฐ21๋ถ
[๐ค] Next.js SSR, SSG, ISR ๋ ๋๋ง ์ ๋ต: App Router์์ ์ต์ ์ ์ ํ์?
Next.js App Router์์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR), ์ ์ ์ฌ์ดํธ ์์ฑ(SSG), ์ฆ๋ถ ์ ์ ์ฌ์์ฑ(ISR) ๊ฐ ๋ ๋๋ง ์ ๋ต์ ๋์ ์๋ฆฌ, ์ฅ๋จ์ , ์ค์ ํ์ฉ ๋ฐ ์ต์ ํ ๋ฐฉ๋ฒ์ ๋น๊ต ๋ถ์ํด๋๋ ค์.
- ๋จ์ด: 1,478๊ฐ17๋ถ
[๐ค] React Context API์ Zustand: ์ ์ญ ์ํ ๊ด๋ฆฌ, ์ธ์ ๋ฌด์์ ์จ์ผ ํ ๊น์?
React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ณ ๋ฏผํ๊ณ ๊ณ์ ๊ฐ์? Context API์ ๊ฐ๋ฒผ์ด ์ธ๋ถ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Zustand๋ฅผ ๋น๊ต ๋ถ์ํ๊ณ , ์ค๋ฌด์์ ๊ฐ ๋๊ตฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ์ ๋ต์ ์ค์ ์ฝ๋ ์์์ ํจ๊ป ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 2,004๊ฐ24๋ถ
[๐ค] Turborepo๋ก Next.js ๋ชจ๋ ธ๋ ํฌ ๊ตฌ์ถ: ํจ์จ์ ์ธ ๊ฐ๋ฐ ๋ฐ ์ต์ ํ ์ ๋ต
Turborepo๋ฅผ ํ์ฉํ์ฌ Next.js ํ๋ก์ ํธ๋ฅผ ๋ชจ๋ ธ๋ ํฌ๋ก ๊ตฌ์ฑํ๊ณ , ๊ณต์ ์ปดํฌ๋ํธ, ์ ํธ๋ฆฌํฐ, CI/CD ์ต์ ํ ๋ฐฉ์์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์ค๋ช ํด ๋๋ ค์.
- ๋จ์ด: 2,338๊ฐ27๋ถ
[๐ค] React useEffect ํ , ์ด์ ํท๊ฐ๋ฆฌ์ง ๋ง์ธ์! (์์กด์ฑ ๋ฐฐ์ด, ํด๋ฆฐ์ ์๋ฒฝ ๊ฐ์ด๋)
React ๊ฐ๋ฐ์์ ํ์์ ์ธ useEffect ํ ์ ๋์ ์๋ฆฌ๋ถํฐ ์์กด์ฑ ๋ฐฐ์ด, ํด๋ฆฐ์ ํจ์ ํ์ฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ค๋ฌด์์ ์์ฃผ ๊ฒช๋ ์ค์์ ์ต์ ํ ์ ๋ต๊น์ง, ์ด์ค๊ธ ๊ฐ๋ฐ์๋ฅผ ์ํ ์๋ฒฝ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํด์.
- ๋จ์ด: 3,284๊ฐ31๋ถ
[๐ค] Next.js Server Actions ์ค์ : ์๋ฌ ์ฒ๋ฆฌ, ์ ํจ์ฑ ๊ฒ์ฌ, ๋๊ด์ UI ์ ๋ฐ์ดํธ
Next.js Server Actions๋ฅผ ์ค๋ฌด์ ์ ์ฉํ ๋ ๋ง์ฃผํ๋ ์๋ฌ ์ฒ๋ฆฌ, ๋ฐ์ดํฐ ์ ํจ์ฑ ๊ฒ์ฌ, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋๊ด์ UI ์ ๋ฐ์ดํธ ๊ธฐ๋ฒ์ ์์ธํ ์ฝ๋ ์์์ ํจ๊ป ์์๋ณด์ธ์.
๋จ์ด: 1,983๊ฐ21๋ถ[๐ค] TypeScript ์ ํธ๋ฆฌํฐ ํ์ ์๋ฒฝ ๊ฐ์ด๋: ์ค์ ํ์ฉ ํจํด
TypeScript ์ ํธ๋ฆฌํฐ ํ์ ์ ํต์ฌ ๊ฐ๋ ๊ณผ ์ค์ ํ์ฉ๋ฒ์ ๊น์ด ์๊ฒ ๋ค๋ค์. Pick, Omit, Partial, Required ๋ฑ ์์ฃผ ์ฐ๋ ์ ํธ๋ฆฌํฐ ํ์ ์ผ๋ก ๋ณต์กํ ํ์ ์ ํจ๊ณผ์ ์ผ๋ก ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ํ์ ์คํฌ๋ฆฝํธ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์์ ์ฑ์ ๋์ด๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด์.
- ๋จ์ด: 1,712๊ฐ20๋ถ
[๐ค] Next.js App Router ๋ฏธ๋ค์จ์ด: ๊ฐ๋ ฅํ ์์ฒญ ์ฒ๋ฆฌ ์ ๋ต๊ณผ ์ค์ ์์
Next.js App Router ํ๊ฒฝ์์ ๋ฏธ๋ค์จ์ด๋ฅผ ํ์ฉํด ์ฌ์ฉ์ ์ธ์ฆ, ๋ฆฌ๋ค์ด๋ ์ , ๊ตญ์ ํ ๋ฑ์ ์์ฒญ ์ฒ๋ฆฌ ๋ก์ง์ ํจ์จ์ ์ผ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ค์ ์์ ์ ํจ๊ป ์์ธํ ์์๋ณด์ธ์.
- ๋จ์ด: 1,630๊ฐ19๋ถ
[๐ค] ํ์ ์คํฌ๋ฆฝํธ ์ ๋ค๋ฆญ ์ฌํ: ์ค์ฉ์ ์ธ ํจํด๊ณผ ํํ ์คํด๋ค
ํ์ ์คํฌ๋ฆฝํธ ์ ๋ค๋ฆญ(Generics)์ ๊น์ด ์ดํดํ๊ณ , ์ค๋ฌด์์ ์์ฃผ ์ฌ์ฉ๋๋ ์ ๋ค๋ฆญ ํจํด๊ณผ ํํ ๊ฒช๋ ์คํด๋ค์ ์ค์ ์ฝ๋ ์์์ ํจ๊ป ์ฝ๊ณ ๋ช ํํ๊ฒ ์ค๋ช ํด ๋๋ ค์. ํ์ ์์ ์ฑ๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
๋จ์ด: 1,860๊ฐ18๋ถ[๐ค] Next.js Route Handler: App Router์์ ์์ ํ๊ณ ํจ์จ์ ์ธ API ๊ตฌ์ถํ๊ธฐ (์ธ์ฆ, ์๋ฌ ์ฒ๋ฆฌ ํฌํจ)
Next.js App Router์ Route Handler๋ฅผ ์ฌ์ฉํ์ฌ API ์๋ํฌ์ธํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์์๋ด์. ์ธ์ฆ, ์๋ฌ ์ฒ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ์บ์ฑ ์ ๋ต์ ํฌํจํ ์ค์ฉ์ ์ธ ํ์ผ๋ก ์์ ํ๊ณ ํจ์จ์ ์ธ ์๋ฒ๋ฆฌ์ค ํจ์๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ตํ๋ด์.
- ๋จ์ด: 1,934๊ฐ22๋ถ
[๐ค] Next.js Image ์ปดํฌ๋ํธ ์ต์ ํ: Core Web Vitals ๊ฐ์ ๋ถํฐ ์ค์ ํ์ฉ๊น์ง
Next.js์ Image ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ ์น ์ฑ๋ฅ ํต์ฌ ์งํ์ธ Core Web Vitals๋ฅผ ๊ฐ์ ํ๊ณ , ๋ค์ํ ์ต์ ํ ์ต์ ์ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ฃจ๊ฐ ์์ธํ ์๋ ค๋๋ ค์.
- ๋จ์ด: 2,187๊ฐ25๋ถ
[๐ค] Next.js 14.1+์ ํ์ : Partial Prerendering (PPR) ์๋ฒฝ ๊ฐ์ด๋์ ์ค์ ์ต์ ํ ์ ๋ต
Next.js 14.1๋ถํฐ ๋์ ๋ Partial Prerendering (PPR)์ ํตํด ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ๊ทน๋ํํ๊ณ ๋์ ์ฝํ ์ธ ๋ฅผ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ ์๊ฒ ๋ค๋ฃจ์ด์. PPR์ ๋์ ์๋ฆฌ๋ถํฐ ์ค์ ํ๋ก์ ํธ ์ ์ฉ ์ ๋ต๊น์ง, ๊ฐ๋ฐ์๋ค์ด ๊ถ๊ธํดํ๋ ๋ชจ๋ ๊ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,792๊ฐ19๋ถ
[๐ค] TypeScript ์กฐ๊ฑด๋ถ ํ์ ๊ณผ infer ํค์๋: ๋ณต์กํ ํ์ ๋ ์์ฝ๊ฒ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
TypeScript ๊ฐ๋ฐ์์ ๋ง์ฃผํ๋ ๋ณต์กํ ํ์ ์ถ๋ก ๋ฌธ์ , ์กฐ๊ฑด๋ถ ํ์ ๊ณผ infer ํค์๋๋ฅผ ํ์ฉํ๋ฉด ํจ์ฌ ์ฐ์ํ๊ณ ๊ฐ๋ ฅํ๊ฒ ํด๊ฒฐํ ์ ์์ด์. ์ค์ ์์ ์ ํจ๊ป ๊ทธ ํ์ฉ๋ฒ์ ์ฌ๋ ์๊ฒ ๋ค๋ค๋ด ๋๋ค.
- ๋จ์ด: 1,705๊ฐ21๋ถ
[๐ค] JavaScript ์ด๋ฒคํธ ๋ฃจํ(Event Loop) ์์ ์ ๋ณต: ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๋ฐํ์ ๋์ ์๋ฆฌ
JavaScript์ ํต์ฌ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ธ ์ด๋ฒคํธ ๋ฃจํ์ ๋์ ์๋ฆฌ๋ฅผ ์ฌ๋ ์๊ฒ ํํค์ณ ๋ด์. ์ฝ ์คํ, ํ์คํฌ ํ, ๋ง์ดํฌ๋กํ์คํฌ ํ์์ ์ํธ์์ฉ์ ์ดํดํ๊ณ , ์ค๋ฌด์์ ๋ง์ฃผ์น๋ ๋น๋๊ธฐ ์ฝ๋์ ๋์์ ๋ช ํํ ์์ธกํ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ ค์.
- ๋จ์ด: 1,964๊ฐ23๋ถ
[๐ค] Next.js Server & Client Components, ์ค์ ์์ ํ๋ช ํ๊ฒ ์ ํํ๋ ๊ฐ์ด๋
Next.js App Router์์ Server Components์ Client Components ์ค ์ด๋ค ๊ฒ์ ์ฌ์ฉํด์ผ ํ ์ง ๊ณ ๋ฏผ์ด์ ๊ฐ์? ์ด ๊ธ์์ ๋ ์ปดํฌ๋ํธ์ ํต์ฌ ์ฐจ์ด์ , ์ฌ์ฉ ์์ , ๊ทธ๋ฆฌ๊ณ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ์ค์ ์ ๋ต์ ๋ธ๋ฃจ๊ฐ ์๋ ค๋๋ฆด๊ฒ์.
- ๋จ์ด: 1,879๊ฐ21๋ถ
[๐ค] TypeScript satisfies ์ฐ์ฐ์: ํ์ ์ถ๋ก ๊ณผ ์์ ์ฑ์ ๋์์ ์ก๋ ๋น๋ฒ
TypeScript์ `satisfies` ์ฐ์ฐ์๋ฅผ ํ์ฉํ์ฌ ํ์ ์ถ๋ก ์ ์ ์ฐ์ฑ์ ์ ์งํ๋ฉด์๋ ์๊ฒฉํ ํ์ ์์ ์ฑ์ ํ๋ณดํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ์ค์ฉ์ ์ธ ์์๋ฅผ ํตํด ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํฉ๋๋ค.
- ๋จ์ด: 1,211๊ฐ15๋ถ
[๐ค] React 19 ์๋ก์ด ๊ธฐ๋ฅ: use ํ , Actions, ๊ทธ๋ฆฌ๊ณ ์ปดํ์ผ๋ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
React 19์ ํต์ฌ ๋ณ๊ฒฝ ์ฌํญ์ธ use ํ , ์๋ฒ ์ก์ , ๊ทธ๋ฆฌ๊ณ React ์ปดํ์ผ๋ฌ์ ๋์ ๋ฐฐ๊ฒฝ๊ณผ ์ค์ ํ์ฉ ์์๋ฅผ ์ด์ค๊ธ ๊ฐ๋ฐ์ ๋๋์ด์ ๋ง์ถฐ ์์ธํ ์ค๋ช ํฉ๋๋ค. ์ต์ React ์ ๋ฐ์ดํธ๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ๊ณผ ๊ฐ๋ฐ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
- ๋จ์ด: 1,524๊ฐ16๋ถ
[๐ค] Next.js App Router ์บ์ฑ ์ ๋ต: ๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ (revalidatePath, revalidateTag) ์๋ฒฝ ๊ฐ์ด๋
Next.js 14 App Router์์ ํจ์จ์ ์ธ ๋ฐ์ดํฐ ์บ์ฑ ์ ๋ต๊ณผ revalidatePath, revalidateTag๋ฅผ ์ด์ฉํ ๋ฐ์ดํฐ ์ฌ๊ฒ์ฆ ๋ฐฉ๋ฒ์ ์ค๋ฌด ์์์ ํจ๊ป ์์ธํ ์์๋ณด๊ณ ์น ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.