프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한다. 문제 상황 React에서 value와 onChange를 사용하는 제어 컴포넌트(Controlled Component) 패턴은 흔히 쓰이는 방식이었다. 하지만 아래처럼 작성했을 때 한글 입력에서 문제가 발생했다.// 기존 코드 (문제 발생) setQuizAnswer(e.target.value)} // 매번 리렌더링/> 이 코드에서 발생한 문제는 다음과 같았다.제어 컴포넌트React가 입력값을 완전히 제어하고 있었다.즉시 상태 업데이트onChange가 ..

React 프로젝트에서 Axios를 사용해 delete 요청을 보냈을 때, 다음과 같은 타입 오류가 발생했다.개체 리터럴은 알려진 속성만 지정할 수 있으며 'AxiosXHRConfigBase' 형식에 'data'가 없다. 분명히 post, put 요청에서는 data를 넣어도 문제가 없었는데, delete에서만 타입 오류가 났다. 문제 원인 Axios의 delete 메서드 시그니처는 내부적으로 AxiosRequestConfig를 기대하고 있었는데, TS 버전 및 Axios 타입 정의 문제로 인해 delete의 두 번째 인자가 data를 허용하지 않는 형태로 되어 있었다. 즉, delete에서 data를 직접 넣으면 타입 정의 상 충돌이 발생하는 상황이었다. 해결 과정 처음에는 단순히 delete..

들어가며 Next.js 15와 Tailwind CSS v4가 나오면서 가장 큰 변화 중 하나는 설정 방식이다. 이제는 더 이상 tailwind.config.ts 파일이 필수적이지 않고, CSS-first 접근 방식으로 globals.css에서 직접 테마를 정의할 수 있다. 즉, 테마와 디자인 토큰을 **CSS 변수(@theme)**로 선언하고, Tailwind가 이를 기반으로 유틸리티 클래스를 자동으로 생성한다. 기존(v3)과 새로운(v4) 방식 비교 1) v3 (기존 방식)// tailwind.config.tsexport default { theme: { extend: { colors: { brand: '#7adaa5', }, spacing: { ..

Prisma란? Prisma는 TypeScript/JavaScript 환경에서 사용되는 차세대 ORM(Object-Relational Mapping) 도구이다. 전통적인 ORM들과 달리 개발 경험과 타입 안전성에 특히 초점을 맞춘다. 쉽게 말해서,SQL 쿼리를 직접 작성하지 않아도TypeScript 타입이 자동으로 생성되고자동완성 기능과 컴파일 타임 오류 방지가 되는DB 조작 전용 API를 제공하는 라이브러리다. Prisma의 구조 Prisma는 크게 3가지 핵심 컴포넌트로 나눌 수 있다. 1) Prisma Schema (schema.prisma)DB 구조를 정의하는 파일테이블(모델), 컬럼 타입, 관계, 열거형 등을 선언model User { id Int @id @default(auto..

시작하며 Next.js 15에서는 TailwindCSS를 도입하는 방식이 예전과 다르게 바뀌었다. 특히, 프로젝트 초기화 시 tailwind.config.js 파일이 생성되지 않거나, globals.css 파일이 예전처럼 구성되지 않는 점에서 많은 혼란이 있었다. 이번 글에서는 Next.js 15 + TailwindCSS 프로젝트 초기화 시 마주했던 문제와 해결 방법, 그리고 Inline Theme 방식 등 새롭게 도입된 개념들을 정리해보려고 한다. 1. Next.js 15에서 TailwindCSS 설치 시 마주한 문제 1) 문제 상황✔ Would you like to use Tailwind CSS? … Yes Next.js 15에서는 create-next-app 명령어로 프로젝트를 생성할 때, ..

오프닝 TailwindCSS를 사용하다 보면 “우리 프로젝트만의 색상, 폰트, 여백” 등을 디자인 시스템처럼 통일해서 쓰고 싶을 때가 많다. Tailwind v4에서는 CSS 변수를 활용해서 커스텀 유틸리티 클래스를 만드는 방식이 굉장히 자연스럽고 강력해졌다. 오늘은 CSS 변수로 나만의 Tailwind 유틸리티를 만드는 패턴을 정리해보고자 한다. 1. Tailwind v4에서 커스텀 스타일을 만드는 2가지 단계 🔹 1단계: :root에서 CSS 변수 선언: 먼저, globals.css 혹은 layout 레벨에서 CSS 변수를 정의한다.:root { --primary: #4F46E5; --secondary: #22D3EE; --foreground: #171717;}→ 이 부분은 우리만의 디자..

오프닝Next.js 기반 프로젝트에서 소셜 로그인을 사용하고 싶었다. Next.js에서는 자체적인 Auth기반 패키지를 지원하고 있고, 이를 통해 보다 간편하게 소셜 로그인을 구현할 수 있었다. 오늘은 Next.js 기반에서 소셜 로그인을 NextAuth로 구현하는 방법에 대해서 살펴보자. 1. NextaAuth 패키지 설치npm install next-auth @auth/core 2. 구글 클라우드 콘솔1) Google Cloud Console 접속 2) 왼쪽 상단의 '프로젝트 선택' 3) 오른쪽 상단의 '새 프로젝트' 4) 프로젝트 이름 입력 후 '만들기' 5) 'API 및 서비스' 클릭 6) '사용자 인증 정보' 클릭 7) 우측의 '동의 화면 구성' 클릭 8) '시작하기' 클릭 9) 기본 정보..

시작하며 "린트, 테스트, 배포까지 자동화: CI/CD 개념부터 구성까지"오프닝 프론트엔드 개발을 하면서 코드 품질을 유지하고, 안정적으로 배포하는 방법에 대한 고민이 늘 있었다. 그러던 중 CI/CD라는 개념을 접하게 되었고, 이를 실제 프로젝트에 어떻게 적용할pangil-log.tistory.com지난 번에는 CI/CD에 대한 개념을 배웠다면, 이번에는 Vercel과 GitHub Actions를 활용해 CI/CD를 구축한 전체 과정을 기록해보려고 한다. Github Actions를 활용한 CI/CD 파이프라인 구축에 대해 이론적으로 접한 적은 많지만, 실제로 이를 해본 적이 없기에, 이번 기록은 다양한 의미를 가진다고 생각한다. 목표 요약로컬에서 만든 React 프로젝트가GitHub에 Pus..

Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다. 단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다. CSR이란? 렌더링을 브라우저가 직접 수행하는 방식이며, 서버는 HTML 껍데기만 주고, 실제 화면은 자바스크립트가 실행되면서 만들어진다. 1. Next.js에서 CSR 쓰는 방법: CSR은 기본 상태이다. 특별한 설정 없이 컴포넌트 안에서 useState, useEffect 등을 사용하면 자동으로 CSR이다.// App Router or Pages Router 모두 해당'use client'import { useState } from 'react'ex..

문제 상황 Next.js에서 모바일 햄버거 메뉴를 만들던 중 아래와 같은 에러가 발생했다.Error: Hydration failed because the server rendered HTML didn't match the client. 처음에는 단순한 UI 문제겠지 싶었는데, 실제로는 서버와 브라우저가 서로 다르게 화면을 그리고 있어서 생긴 문제였다. Hydration이란? Next.js는 페이지를 서버에서 먼저 렌더링하고, 브라우저는 그 HTML을 받아서 React 상태와 이벤트를 연결한다. 이 과정을 Hydration(하이드레이션)이라고 부른다. 즉, "서버가 먼저 만든 화면에 브라우저가 생명을 불어넣는 작업"이라고 보면 된다. 이때 브라우저가 생각한 화면 구조와, 서버가 그려준 화면 구조가 다르면,..