Front-end(107)
-
ํ๋ก ํธ์๋ ์ํ๊ด๋ฆฌ
์ํ: UI ๋ ๋๋ง์ ์ํฅ์ ์ฃผ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ / ์ํ ๊ด๋ฆฌ: ๊ณผ๋ํ ๋ฆฌ๋ ๋๋ง์ ๋ง๊ธฐ ์ํด ์ ๊ด๋ฆฌํ๋ ๊ฒ(์ข ๋ฅ - local, global, server)๋ชฉ์ฐจ1. ํ๋ก ํธ์๋์ ์ํ 1-1. ์ํ๋? 1-2. ์ํ์ ์ข ๋ฅ2. ์ํ(state) vs Ref3. ํ๋ก ํธ์๋ ์ํ๊ด๋ฆฌ4. React ๊ธฐ์ค ์ํ์ ํ๋ฆ 1. ํ๋ก ํธ์๋์ ์ํ1. ์ํ๋?ํ๋ก ํธ์์ ๋งํ๋ "์ํ"๋ UI ๋ ๋๋ง์ ์ํฅ์ ์ฃผ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ๋งํ๋ค.์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฆฌ์กํธ๋ ๊ทธ ์ํ๋ฅผ ๊ฐ์ง ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ ๋๋งํ์ฌ ์ต์ ์ํ๋ก ์ ์งํ๋๋ฐ,๋ฐ๋ผ์ ์ด ์ํ๋ฅผ ์ด๋ป๊ฒ ๊ด๋ฆฌํ๋๋์ ๋ฐ๋ผ ์๋น์ค์ ์ฑ๋ฅ์ด ๋ฌ๋ผ์ง๋ค. ์ผ๋ฐ ๋ณ์์ ๋ค๋ฅด๊ฒ ์ํ๋ ์๋์ ๊ฐ์ ์กฐ๊ฑด์ ๊ฐ์ง๋ค.๋ณ๊ฒฝ ๊ฐ๋ฅ (mutable)React์ ๊ฐ์ ํ๋ ..
2026.04.19 -
Storybook 8 -> 10 ์ ๋ฐ์ดํธ
์์ฝ- Next.js 16๊ณผ์ ํธํ์ฑ ๋ฌธ์ ๋ก ๊ธฐ์กด ์ฌ์ฉํ๋ ์คํ ๋ฆฌ๋ถ8์ 10์ผ๋ก ์ ๋ฐ์ดํธ- ๋ถํ์ํด์ง ์คํ ๋ฆฌ๋ถ ํจํค์ง ์ญ์ - svg ์ธ์ ์๋ฌ ์ฒ๋ฆฌ- ์คํ ๋ฆฌํ์ผ ์ํฌํธ ์์ ๋ชฉ์ฐจ1. storybook10 ์ ๋ฐ์ดํธ ๋ฐฐ๊ฒฝ2. .storybook/main.ts ์์ 3. SVGIcon.ts ์์ 4. *.stories.tsx ์์ 1. storybook10 ์ ๋ฐ์ดํธ ๋ฐฐ๊ฒฝNext.js๋ฅผ ์ ๋ฐ์ดํธ ํ์ผ๋ ์ด์ ๋ฒ์ ์๋ฌ์๋ ์กํ๋๊ฒ ์๊ฒ ์ง?ํ๋ค๋ฅ ๋ฐ๋ฆฐ PR๋ค์ ๋ฆฌ๋ฒ ์ด์คํ๊ณ ๋จธ์งํ์! ํ๋๋ฐ ํฐ์ ธ๋ฒ๋ฆฐ ์คํ ๋ฆฌ๋ถ.. ํ๋์ ๋ฌธ์ ์์ด ์ ์ฐ๊ณ ์์์ด์ ๋ด๊ฐ svgr ์ปดํฌ๋ํธ ์ถ๊ฐํ์ ๋์ ์ถฉ๋์ด๋ ์ด๊ธฐ ์ธํ ๋ฑ ์ค๊ฐ์ค๊ฐ ์ด๋ค ๋ฌธ์ ๋ค์ด ํฐ์ก์๊ณ ์ผ๋ง๋ ํด๊ฒฐ์ด ์ ์๋๋์ง ์๊ณ ์์๋ค. Next.js๋ฅผ 10์ผ๋ก ์ ๋ฐ์ดํธํ๋ฉด..
2025.12.08 -
Next.js ๋ฒ์ ์ ๋ฐ์ดํธ: 15.3.0 -> 16.0.7
๋ชฉ์ฐจ1. Next.js 16 ์ ๋ฐ์ดํธ ๊ฐ๋จํ ์ํฉ ์ ๋ฆฌ2. next-env.d.ts ํ์ผ ๋ณํ3. lint4. ๋ง๋ฌด๋ฆฌ1. Next.js 16 ์ ๋ฐ์ดํธ ๊ฐ๋จํ ์ํฉ ์ ๋ฆฌ์ง๋ 4์ผ, ๋ถ๋ช lint, build ๊ฒ์ฌ๋ฅผ ๋ฌด์ฌํ ํต๊ณผํ ๋ด ์ปค๋ฐ๋ค์ด pushํด์ pr์ด ๋๊ธฐ๋ง ํ๋ฉด ๋ฒ์ ์๋ฌ๋ฅผ ๋ฑ๋ ๊ฑธ ๋ณด๊ณ ์ด๊ฒ ๋ญ๊ฐ ํ๋๋ฐNext.js์์ ์ฌ๊ฐํ ๋ณด์ ์ทจ์ฝ์ ์ด ๋ฐ๊ฒฌ๋์๋ค๊ณ ํ๋ค.https://news.hada.io/topic?id=24874 React์ Next.js์์ ์๊ฒฉ ์ฝ๋ ์คํ์ด ๊ฐ๋ฅํ ์ทจ์ฝ์ CVE-2025-55182( | GeekNewsReact ์๋ฒ ์ปดํฌ๋ํธ์์ ์ธ์ฆ ์์ด ์์ ์ฝ๋๋ฅผ ์คํํ ์ ์๋ ์๊ฒฉ ์ฝ๋ ์คํ(RCE) ์ทจ์ฝ์ ์ด ๋ฐ๊ฒฌ๋์ด ์ฆ์ ์ ๊ทธ๋ ์ด๋ ํ์Next.js๋ ์ํฅ์ ๋ฐ์ผ๋ฉฐ, Ap..
2025.12.08 -
Next.js App router๋ก base url ์ธํ ํ๊ธฐ
๋ชฉ์ฐจ1. ์๋ฒ ๊ฐ์ฒด ๋ถ๋ฌ์ค๊ธฐ2. BASE_URL ์์ ์ ์ธํ๊ธฐ3. GET ํจ์ ์์ฑํ๊ธฐ4. POST ํจ์ ์์ฑํ๊ธฐ1. ํ์ผ ์์ฑ ๋ฐ ์๋ฒ ๊ฐ์ฒด ๋ถ๋ฌ์ค๊ธฐ1. route.ts ํ์ผ ์์ฑNext.js์ api ํ์ผ์ ์์ฑํ๋ ์์น๋ ์ ํด์ ธ์๋ค.src/app/api ํด๋ ๋ด์ ์์ฑ๋์ด์ผ ํ๋ฉฐ, ํ์ผ๋ช ์ ๊ผญ route์ฌ์ผ ํ๋ค.src/app/api : Next.js๊ฐ API ์์ฒญ์ ์ฒ๋ฆฌํ ์๋ํฌ์ธํธ๋ก ์ธ์ํ๋ ์์น (๋ค๋ฅธ ์์น์ ๋๋ฉด ํ์ด์ง/์ปดํฌ๋ํธ๋ก ์ธ์ํจ)route.ts : App Router ๊ธฐ์ค์ผ๋ก, Next.js๋ route.~ ํ์ผ์ ํด๋น ๊ฒฝ๋ก์ API ํธ๋ค๋ฌ๋ก ๋งคํํ์ฌ ์๋ํฌ์ธํธ๋ก ํ๋จ 2. ์๋ฒ ๊ฐ์ฒด ๋ถ๋ฌ์ค๊ธฐimport { NextRequest, NextResponse } from 'next/ser..
2025.11.27 -
Github blog) AI, agents, ํ์ ์ธ์ด๊ฐ ๊ฐ๋ฐ์ ๊ฐ์ ธ์จ ๋ณํ
Octoberse: A new developer joins Github every second as AI leads TypeScript to #1 Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1In this year’s Octoverse, we uncover how AI, agents, and typed languages are driving the biggest shifts in software development in more than a decade.github.blog ** ํด๋น ๊ธ์์ 2025๋ 2024๋ 9์ 1์ผ๋ถํฐ 2025๋ 8์ 31์ผ๊น์ง๋ฅผ ๋งํจ ** ๋ชฉ์ฐจ1. 2025๋ GitHub ํํฉ๊ณผ..
2025.11.03 -
Next.js์์์ SSR ๊ตฌํ ๋ฐฉ์ ( App Router )
๋ชฉ์ฐจ1.Next.js App Router์์์ SSR2. SSR์ด ์คํ๋๋ ํ๋ฆ3. Card ์ปดํฌ๋ํธ๋ก ๋ณด๋ ์์1. Next.js App Router์์์ SSRNext.js 13+์ app/ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋React Server Component ์ํคํ ์ฒ์ SSR์ ๋ด์ฅํ ํํ์ด๋ค.→ "์๋ฒ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ SSR"์ด ํ๋ ์์ํฌ์ ๊ธฐ๋ณธ ๋์์ด๋ผ๋ ๋ป Next.js์์ SSR์ 1. ์๋ฒ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ fetchํ๊ณ 2. ์๋ฒ์์ HTML์ ์คํธ๋ฆฌ๋ฐ ๋ ๋๋งํ ๋ค,3. ํด๋ผ์ด์ธํธ์์ hydrationํ๋ ๊ณผ์ ์ด ๋๋ค.2. SSR์ด ์คํ๋๋ ํ๋ฆ๊ทธ๋ผ ์ ์ ๊ฐ ๋ด๊ฐ ๋ง๋ ํ์ด์ง์ ๋ฉ์ธ(/)์ ์ ์ํ๋ฉด Next.js์์๋ ์ด๋ค ์ผ์ด ์ผ์ด๋ ๊น? 1. ์์ฒญ ์์ ( Incoming Request )..
2025.10.31 -
Next.js์ ์๋ ์ต์ ํ (Automatic Optimization)
๋ชฉ์ฐจ1. Next.js์ ์๋ ์ต์ ํ2. ์๋ ์ต์ ํ ํ์ธ ๋ฐฉ๋ฒ3. ์๋ ์ต์ ํ ์๋ ๊ธฐ์ค1. Next.js์ ์๋ ์ต์ ํNext.js๋ ๋ช ์์ ์ผ๋ก ์ค์ ํ์ง ์์๋ ์๋์ผ๋ก ์ ์ฉ๋๋ ์ต์ ํ๊ฐ ์๋ค.ํ์ด์ง์์ SSR์ ๋ช ์ํ์ง ์๋๋ค๋ฉด, Next.js๋ ์๋์ผ๋ก ํด๋น ํ์ด์ง๋ฅผ ์ ์ HTML๋ก ์ฌ์ ๋ ๋๋งํ์ฌ SSG๋ก ์ต์ ํํ๋ค.์ฆ, ๋ณ๋์ fetch ์ต์ (cache: 'no-store', dynamic = "force-dynamic")์ด ์๊ณ , ๋ฐ์ดํฐ fetch๊ฐ ๋น๋ ์์ ์ ํด๊ฒฐ ๊ฐ๋ฅํ๋ฉด ์๋์ผ๋ก SSG์ฒ๋ผ ์ ์ ์์ฑ์ด ๋๋ ๊ฒ์ด๋ค. ์ ์ ์ผ๋ก ์์ฑ๋์ด๋ Next.js๋ ํด๋ผ์ด์ธํธ๋ฅผ hydrateํ์ฌ, ์ ์ ์ ํ์ด์ง์ ์์ ํ ์ํธ์์ฉ์ด ๊ฐ๋ฅํ๋ค. ์๋ ์ต์ ํ์ ํฐ ์ฅ์ ์ ์ต์ ํ๋ ํ์ด์ง๊ฐ ์๋ฒ์ธก ๊ณ์ฐ ์..
2025.10.28 -
Next.js ๋ ๋๋ง ์ ๋ต (SSG, ISR, SSR, CSR)
๋ชฉ์ฐจ1. Next.js ๋ ๋๋ง ์ ๋ต2. SSG (Static Site Generation)3. ISR (Incremental Static Regeneration)4. SSR (Server Side Rendering)5. CSR (Client Side Rendering)6. ๋ ๋๋ง ์กฐํฉ ์์1. Next.js ๋ ๋๋ง ์ ๋ต๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง์ ํ๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ์๋ค์ด ์๋ค.์ฌ๊ธฐ์ ์ธ๊ธํ๋ SSG, ISR, SSR, CSR์ ๊ฐ ๋ ๋๋ง ๋ฐฉ์๋ง๋ค ์ฅ๋จ์ ์ด ์์ด์, ํ์ด์ง์ ์ฑ๊ฒฉ์ ๋ฐ๋ผ ๋ ์๋ง์ ๋ ๋๋ง ๋ฐฉ์์ ์ ํํด์ผ ํ๋ค.ํ์ด์ง ์ฑ๊ฒฉ๊ถ์ฅ ๋ฐฉ์ํน์ง ๋ฐ ๊ตฌํ๋ณํ์ง ์๋ ์ปจํ ์ธ ๐ข SSG (Static Site Gegeration)์์ ์ ์ (๋น๋ ์ 1ํ ์์ฑ)export const revalidate = fa..
2025.10.28 -
Prisma ORM์ ์ฌ์ฉํด๋ณด์
๋ชฉ์ฐจ1. ํ๋ก์ ํธ ์ธํ 2. ์ค์ต ์คํฌ๋ฆฝํธ ์์ฑ1. ํ๋ก์ ํธ ์ธํ 1. ํ์ ์คํฌ๋ฆฝํธ์ ํ๋ฆฌ์ฆ๋ง ์ค์น ๋ฐ ์ด๊ธฐํ์ฐ์ ํ์ ์คํฌ๋ฆฝํธ์ ํ๋ฆฌ์ฆ๋ง๋ฅผ ์ค์นํด์ค ๊ฑฐ๋ค.npm install typescript ts-node @types/node --save-dev # ts ์ค์นnpx tsc --init # ts ์ด๊ธฐํnpm install prisma --save-dev # prisma ์ค์นnpx prisma init --datasource-provider sqlite # prisma ์ด๊ธฐํ (sqlite ๊ธฐ๋ฐ) ํ๋ฆฌ์ฆ๋ง ๋ฒ์ ๋ ํ์ธํ ์ ์๋ค. prisma๋ฅผ ์ด๊ธฐํ ํ๋ฉด prisma/, prisma.config.ts, env ํ์ผ์ด ์๊ธด๋ค. ์ด ๋ prisma.config.ts ํ์ผ๋ ์์ฑ๋ ๊ฑธ ํ์ธํ ์ ์๋๋ฐ, ..
2025.10.27 -
Prisma ORM์ ๋ญ๊น
๋ชฉ์ฐจ1. ORM์ด๋?2. Prisma๋?3. Prisma์ ์๋ ํ๋ฆ1. ORM์ด๋?ORM(Object-Relational Mapping)์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ํ ์ด๋ธ์ ์ฝ๋์ ๊ฐ์ฒด๋ก ๋ฐ๊ฟ์ ๋ค๋ฃจ๋ ๊ธฐ์ ์ด๋ค.SQL๋ฌธ์ด ( SELECT * FROM users WHERE age > 20 ) ์ด๋ผ๋ฉด,JS ์ฝ๋๋ก ์๋์ ๊ฐ์ด ์์ฑํ ์ ์๋ค.const users = await prisma.user.findMany({ where: { age: { gt: 20 } },}); ์ด๋ฌ๋ฉด Prisma๊ฐ SQL์ ๋ง๋ค์ด์ DB์์ ๊ฐ์ ธ์จ๋ค.2. Prisma๋?Prisma๋ Node.js, TypeScript ํ๊ฒฝ์์ ์ฌ์ฉํ๋ ORM ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.๋ค์ ์ธ ๊ฐ์ง ์ญํ ์ ์ํํ๋ค.๊ตฌ์ฑ ์์์ญํ Prisma ClientDB์ ์ฟผ๋ฆฌ๋ฅผ ..
2025.10.27 -
[WIP]Chromatic์ผ๋ก ์คํ ๋ฆฌ๋ถ ๋ฐฐํฌ, CI/CD ์ค์ ํ๊ธฐ
1. Chromatic์์ ๋ ํฌ ์ ํ ๋ ์ดํผ ํ๋ก์ ํธ ์ถ๊ฐํ๊ณ ๋ ํฌ๋ ์ ํํ๋๋ฐ ACCOUNTS์ ์๋จ๋ฉด Check your permissions์์ ์ถ๊ฐํ๋ฉด ๋๋ค. ์คํ ๋ฆฌ๋ถ ์ ํํ๋ค. ์ด ๋ช ๋ น์ด๋ฅผ ๊ทธ๋๋ก CLI์ ์ ๋ ฅํ๋ค. ์ด์ผํ๋์ค.. That's very nice! ๋ฐฐํฌ๋ ์คํ ๋ฆฌ๋ถ chromatic ํ ํ๋ฉด์์ ํ๋ก์ ํธ์ ํ๋ ๋ด์ญ ๋ฑ์ ํ์ธํ ์ ์๋ค. ์ฌ๊ธฐ๊น์ง๋ง ํ๋ฉด ์คํ ๋ฆฌ๋ฅผ ํ๋ ์ถ๊ฐํ ๋๋ง๋ค ๋ค์ ๋น๋ํ๊ณ ๋ฐฐํฌํด์ค์ผํ๋๋ฐ,์ฌ๋์ด ์คํ ๋ฆฌ๋ง ์ถ๊ฐํ๋ฉด ์๋์ผ๋ก ๋น๋, ๋ฐฐํฌ๋ฅผ ํด์ฃผ๋๋ก ์๋ํ๋ฅผ ํด๋ณด์.https://www.chromatic.com/docs/github-actions/#available-options Why Chromatic? • Chromatic docsChromat..
2025.10.27 -
์๊ฐ์ด ์ง๋๋ ํผํผํ ํ๋ก ํธ์๋ ์ฝ๋
๋ชฉ์ฐจ1. ์๊ฐ์ด ์ง๋๋ ๋ฌธ์ ์๋ ํผํผํ ์ฝ๋2. ์์ ์์ฒญ๊ณผ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์3. ๋๋ฉ์ธ ์ค์ฌ ์ค๊ณ ( Domain-Driven-Design )4. FSD๋ก ๋๋ฉ์ธ ์ค์ฌ ์ค๊ณํ๊ธฐ5. ํด๋ ๊ตฌ์กฐ ์ง๋ณด๊ธฐ6. ๋ด ์๊ฐ1. ์๊ฐ์ด ์ง๋๋ ๋ฌธ์ ์๋ ํผํผํ ์ฝ๋ํ๋ก ํธ์๋ ์คํ๋ฐฉ์ ๋ณด๋ค๊ฐ ๋ฐ๊ฒฌํ ๋ธ๋ก๊ทธ ๊ธ์ ๋ณด๋ฉด์ ๋๋ฆ์ ์ ๋ฆฌ๋ฅผ ํด๋ณด๋ ค๋ ๊ธ์ด๋ค.์์ฆ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ํด๋ฆฐ ์ฝ๋์ ์ํคํ ์ฒ์ ์ง์ฐฉํ๊ฒ ๋๋ ๊ฒ์ ๋๋๋ค.ํ์ง๋ง ์ด๊ฑด ๋ด๊ฐ ์ ๋๋ก ์งํํ๋ ๊ฑฐ์ ์ฒซ ํ๋ก์ ํธ๋ผ๊ณ ํ ์ ์๋ค. (๊ฒ๋ค๊ฐ ๊ท๋ชจ๋ ์์ง ์์) ๋ด๊ฐ ์ข์ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ์๋์ง์กฐ์ฐจ ์ ์ ์๊ฐ ์๋ค.์ข์ ์ฝ๋๋ผ๋ ๊ฒ์ ์ด๋ค ๊ฒ์ผ๊น?ํ์ฌ ์งํ์ค์ธ Linkiving์ ๋ฆฌํฉํ ๋งํ๊ธฐ ์ด์ ์๋ ๋ง๊ฐ์ผ์ด ๋ค๊ฐ์ฌ ์๋ก ์คํ๊ฒํฐ ์ฝ๋๋ฅผ ๋ง๋ค์๋๋ฐ, ์ด๋ป๊ฒ ..
2025.10.27
GitHub