본문 바로가기

NextJS3

React에서 한글 입력 시 Enter 이벤트가 두 번 발생하는 문제 해결 (isComposing) 태그 입력 기능을 구현하다가 엔터를 한 번 쳤는데 태그가 두 번 추가되는 문제가 발생했다. 영어로 입력할 때는 괜찮았는데 한글 입력 시에만 중복 태그가 생성되는 현상이었다.원인은 IME(한글 입력기)의 문자 조합 과정 때문이었다.문제 상황태그 입력창에서 Enter를 누르면 배열에 태그를 추가하는 로직이다.const inputKeyDown= (e:KeyboardEvent) => { if (e.key === 'Enter' && stackTag) { e.preventDefault() if (!formData.techStack.includes(stackTag)) { setFormData((prev) => ({ ...prev, te.. 2026. 4. 22.
Next.js에서 SSR + CSR 데이터 패칭하기 (React Query + BFF) Next.js에서 SSR + CSR 데이터 패칭하기 (React Query + BFF)이전 글에서는 BFF(Backend For Frontend) 구조를 설계하고, Next.js의 API Route를 활용해 토큰 관리, 인증 처리, API 통신을 중앙화하는 방식을 구현해보았다. [✨FRONTEND/📍Next.js] - Next.js BFF(Backend For Frontend) 구조 설계 Next.js BFF(Backend For Frontend) 구조 설계BFF(Backend For Frontend) 구조 설계1. BFF란?BFF(Backend For Frontend)는 프론트엔드와 백엔드 사이에 중간 서버 계층을 두는 구조다.Next.js에서는 app/api 라우트를 활용해 이 역할을 자연스럽게 구.. 2026. 4. 15.
Parsing error: Cannot find module 'next/babel' Next 강의 프로젝트 설치를 했는데 위와 같은 오류가 떴다."Babel 모듈을 찾을 수 없다"✨해결방법1. .babelrc 파일 생성{ "presets": ["next/babel"], "plugins": []} .eslintrc.json 파일 수정{"extends": ["next/babel", "next/core-web-vitals"]}해결 완~^^ 2024. 5. 27.