Front-end 개발

[Nuxt] Nuxt 3에서 Nuxt 4로 마이그레이션하기 – app 디렉터리와 데이터 패칭 변경점

들어가며Nuxt 4는 대규모 재작성보다는 더 안정적이고 예측 가능한 기본값에 초점을 둔 메이저 업데이트입니다. 그래서 Nuxt 3 프로젝트도 비교적 수월하게 올릴 수 있습니다. 이번 글에서는 마이그레이션 시 꼭 알아야 할 주요 변경점과 진행 순서를 정리합니다.1. 새 디렉터리 구조: app/가장 눈에 띄는 변화는 애플리케이션 코드가 app/ 디렉터리로 모인다는 점입니다.my-app/ app/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/ app.vue public/ server/ shared/ ← 앱과 서버가 함께 쓰는 코드 nuxt.config..

[Nuxt] 환경변수와 runtimeConfig – API 키를 안전하게 관리하는 방법

들어가며외부 API 키, DB 주소, 배포 환경별 API URL처럼 환경에 따라 달라지는 값은 코드에 직접 적으면 안 됩니다. Nuxt는 이를 위해 runtimeConfig를 제공합니다. 특히 SSR 프레임워크에서는 "서버에서만 쓰는 비밀값"과 "클라이언트에 노출돼도 되는 값"을 명확히 나눠야 합니다.runtimeConfig 기본 구조// nuxt.config.tsexport default defineNuxtConfig({ runtimeConfig: { // 서버에서만 접근 가능 (비밀값) apiSecret: '', databaseUrl: '', // 클라이언트에도 노출 public: { apiBase: '/api', siteUrl: 'http://local..

[Nuxt] 플러그인 작성법 – provide, 실행 순서, 클라이언트 전용 플러그인까지

들어가며API 클라이언트 설정, 전역 디렉티브 등록, 외부 라이브러리 초기화처럼 앱이 시작될 때 한 번 실행되어야 하는 코드는 Nuxt 플러그인으로 작성합니다. 이번 글에서는 플러그인의 기본 구조와 provide, 실행 환경 제어, 실행 순서를 정리합니다.기본 구조plugins/ 디렉터리의 최상위 파일은 자동으로 등록됩니다.// plugins/hello.tsexport default defineNuxtPlugin((nuxtApp) => { console.log('앱 초기화!')})provide로 전역 헬퍼 제공하기// plugins/api.tsexport default defineNuxtPlugin(() => { const config = useRuntimeConfig() const token = ..

[Nuxt] Hydration mismatch 에러 원인과 해결법 – ClientOnly와 onMounted 활용하기

들어가며Nuxt 개발 중 콘솔에서 가장 자주 보는 경고 중 하나가 Hydration text/node mismatch입니다. 단순 경고처럼 보이지만, 화면 깜빡임이나 이벤트가 동작하지 않는 버그로 이어질 수 있습니다. 이번 글에서는 하이드레이션 불일치가 왜 생기는지, 그리고 상황별 해결법을 정리합니다.하이드레이션이란?서버가 만든 정적인 HTML에 클라이언트의 Vue가 이벤트 핸들러와 반응성을 연결하는 과정입니다. 이때 Vue는 클라이언트에서 렌더링한 가상 DOM이 서버 HTML과 완전히 같다고 가정합니다. 두 결과가 다르면 mismatch가 발생합니다.주요 원인 4가지1. 브라우저 전용 API 사용화면 너비: {{ window.innerWidth }}2. 시간·랜덤 값{{ new Date().toLoca..

[Nuxt] SEO 최적화 가이드 – useHead와 useSeoMeta로 메타태그 관리하기

들어가며Nuxt를 선택하는 가장 큰 이유 중 하나가 SEO입니다. 하지만 SSR만으로 검색 최적화가 끝나지는 않습니다. 페이지마다 적절한 title, description, Open Graph 태그를 제공해야 검색 결과와 SNS 공유 미리보기가 제대로 표시됩니다. 이번 글에서는 Nuxt의 메타태그 관리 방법을 정리합니다.1. 전역 기본값 설정// nuxt.config.tsexport default defineNuxtConfig({ app: { head: { htmlAttrs: { lang: 'ko' }, titleTemplate: '%s | 내 블로그', meta: [ { name: 'viewport', content: 'width=device-width, ..

[Nuxt] Server Routes로 API 만들기 – Nitro 기반 풀스택 개발 시작하기

들어가며Nuxt는 프론트엔드 프레임워크이지만, 내장된 서버 엔진 Nitro 덕분에 별도 백엔드 없이도 API를 만들 수 있습니다. server/ 디렉터리에 파일을 만들기만 하면 바로 엔드포인트가 생깁니다. 이번 글에서는 파일 기반 API 라우팅부터 입력 검증, 에러 처리까지 정리합니다.디렉터리 구조server/ api/ → /api/* 경로로 노출 routes/ → /api 접두사 없이 노출 middleware/ → 모든 요청에 실행 utils/ → 서버 전용 유틸 (자동 import) plugins/ → Nitro 플러그인기본 엔드포인트// server/api/hello.get.tsexport default defineEventHandler(..

[Nuxt] useState와 Pinia로 상태 관리하기 – SSR 환경에서 상태 오염 막기

들어가며Vue SPA에서는 파일 최상단에 const count = ref(0)을 선언해 여러 컴포넌트가 공유하는 패턴을 자주 씁니다. 하지만 Nuxt의 SSR 환경에서 이 패턴은 심각한 보안 문제를 일으킬 수 있습니다. 이번 글에서는 그 이유와 useState, Pinia를 이용한 올바른 상태 관리법을 정리합니다.문제: 모듈 스코프 ref는 요청 간에 공유된다// composables/useUser.ts ❌ 잘못된 예const user = ref(null)export const useUser = () => userNode.js 서버 프로세스는 여러 사용자의 요청을 하나의 메모리에서 처리합니다. 모듈 최상단의 ref는 프로세스 전체에서 단 하나만 존재하므로, A 사용자의 정보가 B 사용자의 화면에 렌더링..

[Nuxt] 라우트 미들웨어 제대로 이해하기 – 인증 가드와 리다이렉트 처리

들어가며로그인하지 않은 사용자가 마이페이지에 접근하면 로그인 페이지로 보내야 합니다. Vue Router의 네비게이션 가드에 해당하는 기능을 Nuxt에서는 라우트 미들웨어로 제공합니다. 이번 글에서는 미들웨어의 종류, 실행 시점, 그리고 SSR 환경에서 자주 만나는 함정을 정리합니다.미들웨어의 세 가지 종류인라인 미들웨어: 페이지 컴포넌트의 definePageMeta 안에 직접 정의이름 있는 미들웨어: middleware/ 폴더의 파일, 페이지에서 이름으로 지정해 사용전역 미들웨어: 파일명이 .global.ts로 끝나며 모든 라우트 변경에 실행인증 미들웨어 만들기// middleware/auth.tsexport default defineNuxtRouteMiddleware((to, from) => { c..

[Nuxt] 렌더링 모드 완전 정리 – SSR, SSG, SPA, 하이브리드 렌더링(routeRules)

들어가며Nuxt의 가장 큰 장점은 페이지마다 렌더링 전략을 다르게 가져갈 수 있다는 점입니다. 메인 페이지는 정적으로, 대시보드는 SPA로, 상품 상세는 캐시된 SSR로 운영할 수 있죠. 이번 글에서는 Nuxt가 지원하는 렌더링 모드와 routeRules로 하이브리드 렌더링을 구성하는 방법을 정리합니다.1. SSR (Universal Rendering) – 기본값Nuxt의 기본 모드입니다. 요청이 들어오면 서버(Nitro)가 Vue 컴포넌트를 HTML로 렌더링해 응답하고, 브라우저는 그 HTML을 즉시 보여준 뒤 JavaScript를 받아 하이드레이션으로 인터랙션을 붙입니다.장점: 빠른 첫 화면(FCP), 검색엔진 친화적, 항상 최신 데이터단점: 요청마다 서버 연산 비용, 서버 운영 필요2. SSG (S..

[Nuxt] useFetch vs useAsyncData vs $fetch – Nuxt 데이터 패칭 언제 무엇을 써야 할까

들어가며Nuxt로 프로젝트를 시작하면 가장 먼저 헷갈리는 것이 데이터 패칭입니다. useFetch, useAsyncData, $fetch 세 가지가 모두 "데이터를 가져온다"는 같은 일을 하는 것처럼 보이지만, SSR 환경에서는 동작 방식이 크게 다릅니다. 잘못 고르면 API가 두 번 호출되거나 하이드레이션 경고가 발생합니다. 이 글에서는 세 가지의 차이와 선택 기준을 정리합니다.1. $fetch – 가장 기본이 되는 HTTP 클라이언트$fetch는 ofetch 라이브러리 기반의 전역 fetch 함수입니다. JSON 자동 파싱, 에러 시 throw, baseURL 설정 등을 지원합니다.// 버튼 클릭 같은 사용자 이벤트에서 사용async function submit() { await $fetch('/a..

[React] useRef 완벽 정리 – DOM 접근부터 렌더링 없는 값 저장까지

useRef는 "input에 포커스 줄 때 쓰는 훅" 정도로만 알고 있는 경우가 많습니다. 하지만 실제로는 렌더링과 상관없이 값을 기억하는 상자로서 활용도가 훨씬 넓습니다.1. useRef의 정체const ref = useRef(initialValue);// ref = { current: initialValue }{ current: ... } 형태의 객체를 반환컴포넌트가 리렌더링돼도 같은 객체가 유지됨ref.current를 바꿔도 리렌더링이 일어나지 않음구분useStateuseRef값 유지OO변경 시 리렌더링OX주 용도화면에 보여줄 값화면과 무관한 값, DOM 참조2. 용도 ① DOM 요소 직접 다루기function SearchForm() { const inputRef = useRef(null); u..

[React] useMemo와 useCallback, 언제 써야 할까? – 무작정 쓰면 오히려 손해인 이유

React 최적화를 검색하면 가장 먼저 나오는 두 훅이 useMemo와 useCallback입니다. 그런데 모든 값과 함수에 감싸 두는 코드도 자주 보입니다. 이번 글에서는 두 훅의 차이와 "정말 필요한 순간"을 정리해 보겠습니다.1. 한 줄 요약훅기억하는 것반환값useMemo계산 결과 값값useCallback함수 자체함수// 둘은 사실상 같은 개념useCallback(fn, deps)// ↕ 동일useMemo(() => fn, deps)2. 리렌더링과 참조 동일성컴포넌트가 리렌더링되면 내부의 함수와 객체는 매번 새로 만들어집니다. 내용이 같아도 참조(주소)가 달라지므로 === 비교에서 다르다고 판단됩니다.function Parent() { const options = { color: 'red' }; ..

[React] 커스텀 훅으로 로직 재사용하기 – useDebounce, useLocalStorage, useFetch 예제

컴포넌트를 여러 개 만들다 보면 똑같은 useState + useEffect 조합을 여기저기 복사하고 있는 자신을 발견하게 됩니다. 이럴 때 커스텀 훅(Custom Hook)으로 로직을 분리하면 코드가 훨씬 깔끔해집니다.1. 커스텀 훅이란?이름이 use로 시작하고, 내부에서 다른 훅을 호출하는 함수입니다. UI가 아닌 상태 로직을 재사용하기 위한 도구예요.이름은 반드시 use로 시작 (React와 린터가 훅 규칙을 검사하는 기준)훅은 컴포넌트/커스텀 훅의 최상위에서만 호출훅을 쓰는 각 컴포넌트는 독립된 상태를 가짐 (상태를 공유하는 게 아님)2. 예제 ① useDebounce – 검색 입력 최적화입력할 때마다 API를 호출하면 요청이 폭주합니다. 입력이 멈춘 뒤 일정 시간이 지나야 값이 바뀌도록 만들어 ..

[React] useEffect 클린업 함수 제대로 이해하기 – 메모리 누수와 경쟁 상태 막기

useEffect를 쓰다 보면 "컴포넌트가 사라졌는데 타이머가 계속 돈다", "이전 요청 결과가 나중에 도착해서 화면이 꼬인다" 같은 버그를 만나게 됩니다. 대부분 클린업(cleanup) 함수를 제대로 쓰지 않아서 생기는 문제입니다.1. 클린업 함수란?useEffect 안에서 함수를 return하면, React가 그 함수를 "정리 작업"으로 기억해 두었다가 적절한 시점에 실행합니다.useEffect(() => { // 1) 이펙트 실행 console.log('구독 시작'); return () => { // 2) 클린업 실행 console.log('구독 해제'); };}, [deps]);2. 클린업은 언제 실행될까?컴포넌트가 언마운트될 때의존성 배열 값이 바뀌어 이펙트가 다시 실행되기 직..

[CSS] :has() 선택자 완벽 정리 – 드디어 생긴 "부모 선택자"

CSS를 쓰다 보면 "자식 상태에 따라 부모 스타일을 바꾸고 싶다"는 순간이 자주 옵니다. 예전에는 JavaScript로 클래스를 붙였다 뗐다 해야 했지만, 이제는 :has() 하나로 CSS만으로 해결할 수 있습니다.1. :has()란?:has()는 괄호 안의 선택자와 일치하는 요소를 가진 요소를 선택하는 가상 클래스입니다./* img를 포함한 .card만 선택 */.card:has(img) { padding: 0;}img가 아니라 .card가 선택된다는 점이 핵심입니다.2. 기본 문법문법의미A:has(B)자손 중에 B가 있는 AA:has(> B)직계 자식 중에 B가 있는 AA:has(+ B)바로 다음 형제가 B인 AA:has(~ B)뒤쪽 형제 중에 B가 있는 AA:not(:has(B))B를 포함하지 ..

최근 몇 년 사이 개발 생태계는 그 어떤 때보다 급격한 변화를 맞이하고 있습니다. 과거에는 특정 언어의 문법을 얼마나 잘 숙달하고 있느냐, 혹은 복잡한 알고리즘을 얼마나 효율적으로 코드로 구현하느냐가 실력 있는 개발자를 가늠하는 척도였습니다. 하지만 생성형 AI, 특히 GPT의 등장은 이러한 판도를 완전히 뒤흔들어 놓았습니다. 이제 '코드 한 줄'을 직접 타이핑하는 능력보다 '어떤 코드가 필요한지'를 정의하고 이를 AI를 통해 이끌어내는 능력이 더 중요해진 시대가 되었습니다. 이러한 흐름 속에서 개발자들에게 요구되는 역할은 단순히 명령을 수행하는 '코더(Coder)'에서 프로젝트의 전체를 조망하고 지휘하는 '디렉터(Director)'로 확장되고 있습니다. AI를 단순한 도구로 활용하는 단계를 넘어, 나..

인공지능 기술, 특히 GPT와 같은 대규모 언어 모델(LLM)의 등장은 개발 생태계에 가히 혁명적인 변화를 가져왔습니다. 과거에는 구글링과 스택 오버플로우를 전전하며 수 시간을 소비해야 했던 복잡한 알고리즘이나 보일러플레이트 코드를 이제는 단 몇 초 만의 프롬프트 입력으로 얻어낼 수 있게 되었습니다. 이러한 생산성의 비약적 향상은 많은 개발자에게 축복과도 같지만, 동시에 '코드 할루시네이션(Hallucination, 환각)'이라는 새로운 위험 요소를 던져주었습니다. 할루시네이션이란 AI가 사실이 아니거나 존재하지 않는 정보를 마치 진실인 양 아주 당당하게 내뱉는 현상을 말합니다. 코드의 세계에서 이는 존재하지 않는 라이브러리 함수를 호출하거나, 보안상 치명적인 취약점이 있는 로직을 제안하거나, 현재 프..

현대 소프트웨어 개발 환경은 말 그대로 ‘AI 대전환’의 시대를 맞이하고 있습니다. 과거에는 구글링과 스택 오버플로우(Stack Overflow)를 뒤지며 몇 시간을 허비했던 문제들이, 이제는 코드 에디터 안에서 몇 초 만에 해결되곤 합니다. 이러한 변화의 중심에는 전 세계 개발자들이 가장 사랑하는 코드 에디터인 Visual Studio Code(VS Code)와 강력한 언어 모델인 GPT의 결합이 있습니다. 단순히 챗GPT 사이트에 접속해 코드를 물어보고 복사하여 붙여넣는 방식은 이제 구식입니다. 진정한 생산성 혁신은 내가 코드를 작성하는 바로 그 환경, 즉 IDE(통합 개발 환경) 내부에 GPT를 완전히 녹여냈을 때 비로소 완성됩니다. 오늘은 10년 차 개발자의 시선에서 VS Code와 GPT를 결..

현대 소프트웨어 개발 환경에서 '속도'와 '정확성'은 프로젝트의 성패를 가르는 핵심 요소입니다. 과거에는 기획서가 나오면 개발자가 일일이 API 구조를 설계하고, 수기로 문서화하며, 백엔드 개발이 완료될 때까지 프런트엔드 개발자가 대기하는 일이 비일비재했습니다. 하지만 GPT와 같은 대규모 언어 모델(LLM)의 등장은 이러한 전통적인 워크플로우를 완전히 뒤바꾸어 놓았습니다. 이제 개발자는 반복적이고 소모적인 작업에 시간을 쏟는 대신, 더 높은 수준의 아키텍처 설계와 비즈니스 로직 구현에 집중할 수 있게 되었습니다. 오늘은 GPT를 활용하여 개발 프로세스의 병목 현상을 해결하고, 특히 API 명세서 작성과 Mock 데이터 생성을 통해 개발 시간을 획기적으로 단축하는 실전 기술을 상세히 살펴보겠습니다. [..

현대 개발 환경에서 생산성은 곧 경쟁력입니다. 특히 백엔드 개발이나 데이터 분석 업무에서 피할 수 없는 난관 중 하나가 바로 복잡하게 얽힌 SQL 쿼리 작성과 지저분한 데이터를 정제하는 전처리 과정입니다. 과거에는 이러한 작업을 위해 수백 페이지에 달하는 레퍼런스 문서를 뒤지거나 구글링을 통해 수많은 시행착오를 겪어야 했습니다. 하지만 GPT와 같은 대규모 언어 모델(LLM)의 등장은 이 패러다임을 완전히 바꾸어 놓았습니다. 이제 개발자는 비즈니스 로직의 설계에 더 집중하고, 구현의 복잡함은 인공지능의 도움을 받아 빠르고 정확하게 해결할 수 있는 시대가 되었습니다. 단순히 코드를 대신 써주는 수준을 넘어, GPT를 어떻게 하면 '유능한 시니어 파트너'처럼 활용할 수 있을지에 대한 고민이 필요합니다. 이..