코딩병원

Frontend/React

[React] isLoading, isPending, isFetcing 차이 (feat. 'isLoading' is deprecated)

React Query가 v5로 업데이트되면서 상태(Status)를 나타내는 변수들에 변화가 생겼습니다.기존 v4까지 잘 사용되던 isLoading의 동작이 바뀌고, isPending이라는 새로운 친구가 등장했는데요. 특히 어떨 때는 isLoading을 쓰고, 어떨 때는 isPending을 써야 하는지, 혹은 왜 useMutation에서 isLoading부분이 deprecated 되어있는지 궁금증을 느끼시는 분들이 많을 거라고 생각합니다.오늘은 isLoading과 isPending의 차이와 useQuery, useMutation에 따라 왜 isLoading이 다른지 알아보도록 하겠습니다.1. 차이점가장 큰 차이는 "비동기 요청이 현재 진행 중인가?"를 포함하느냐 입니다.구분설명공식 (v5 기준)isPend..

2026. 3. 21.

Frontend/Next.js

[Next.js] S3 대신 Supabase Storage 선택한 이유 (feat. 다중 이미지 업로드 구현)

이번 포스팅에서는 제가 운영하고있는 사이드 프로젝트에서 이미지 업로드 기능을 고도화 하며 구현한 다중 이미지 업로드 로직을 공유하려 합니다. 특히 이번 구현에는 그동안 관성적으로 사용해왔던 S3를 버리고, Supabase Storage를 전격 도입했습니다. 왜 잘 쓰고 있던 S3 대신 Supabase Storage를 선택했는지, 그리고 Next.js 14의 Server Actions와 어떻게 결합하여 생산성을 높였는지 상세히 다뤄보겠습니다.1. S3 대신에 Supabase를 선택한 이유기존 프로젝트들에서 파일 업로드가 필요하면 무조건 AWS S3를 사용해왔습니다. S3는 강력하지만, 소규모 팀이나 빠르게 기능을 구현해야 하는 상황에서는 다음과 같은 피로감이 있었습니다.설정의 복잡함: IAM User 생성..

2026. 3. 14.

Frontend/Next.js

[Next.js] Web Push 개발하기 (feat. 자동화 & PWA)

앱이 아니더라도 사용자에게 Push 알림을 준다면 어떨까요?오늘은 Next.js 환경에서 무료로 웹 푸시 알림을 구축하는 방법에 대해 공유하고자 합니다. Service Worker 설정부터 Vercel Cron을 이용한 자동 발송까지, 실제 제가 개발했던 프로젝트에서 사용중인 코드를 가져와서 다뤄보겠습니다.Web Push 알림을 선택한 이유비용 절감: 문자나 카카오 알림톡은 건당 비용이 들지만, 웹 푸시는 무료입니다.접근성: PWA(Progressive Web Apps)와 결합하면 네이티브 앱과 거의 동일한 사용자 경험을 줄 수 있습니다.재방문 유도: 사용자가 사이트에 들어오지 않아도 브라우저 알림으로 재방문을 유도할 수 있습니다.세팅 방법먼저 필요한 라이브러리를 설치하고 인증 키를 생성해야 합니다.1)..

2026. 3. 8.

Frontend/Next.js

[Next.js] PWA 설정 완벽 가이드

PWA(Progressive Web Apps)는 웹의 장점(접근성, 쉬운 배포)과 네이티브 앱의 장점(설치, 오프라인 지원, 푸시 알림)을 합친 기술입니다. 아이폰이나 안드로이드폰에서 사파리/크롬으로 접속한 뒤 '홈 화면에 추가' 버튼만 누르면, 마치 스토어에서 다운로드한 앱처럼 아이콘이 생기고 실행 시 주소창 없이 전체화면으로 뜹니다. 제 사이드 프로젝트들은 모두 PWA를 도입했는데 이유는 아래와 같습니다.개발 비용 0원즉시 배포푸시 알림 기능PWA 만들기Next.js App Router 환경 기준으로 크게 Manifest, Icon 두 가지만 준비하시면 됩니다.manifest.ts 작성하기Next.js 13 (App Router) 이상부터는 public/manifest.json 대신 app/manif..

2026. 3. 7.

Frontend/Next.js

[Next.js] PDF 저장 기능 구현 (feat. 용량 95% 줄이기)

웹 프로젝트를 진행하다 보면 영수증, 수료증, 증명서 등을 PDF로 다운로드하는 기능이 필요할 때가 있습니다. 백엔드에서 생성해서 보내줄 수도 있지만, 클라이언트 사이드에서 화면에 보이는 그대로를 캡처해 PDF로 만드는 방식이 구현 비용이 저렴하고 빠릅니다. 하지만, 이 방식의 치명적인 단점은 파일 용량이 너무 커진다는 것입니다. 이번 글에서는 html-to-imgae와 jspdf를 사용하여 PDF를 생성하는 법과 45MB짜리 파일을 1MB 이하로 최적화하는 방법에 대해 공유하겠습니다.사용 라이브러리npm install html-to-image jspdfhtml-to-image: DOM 요소를 이미지로 변환해줍니다.jspdf: 이미지를 PDF 문서 포맷으로 변환해 줍니다.기존 방식의 문제점보통 고화질 출..

2026. 3. 2.

Frontend/Next.js

[Next.js] App Router를 선택하는 이유

Next.js를 처음 시작하거나 기존 프로젝트를 마이그레이션 하려는 분들이 가장 먼저 마주치는 난관은 바로 라우터 선택입니다. App Router가 최신이라는 사실만 아시는 분들이 많을 것입니다. 최신이라고 무조건 써야 하나 고민이 많으신 분들이 많을 겁니다. 결론부터 말씀드리면, App Router는 단순한 업데이트가 아닙니다. React를 사용하는 방식 자체를 바꾼 '새로운 프레임워크'에 가깝습니다. 이번 글에서는 Page Router와 App Router의 핵심 차이를 상세히 살펴보겠습니다.1. 렌더링 방식의 변화 (Client vs Server First)가장 큰 차이점은 기본 렌더링 전략입니다.Pages Router: Client-Side 중심기존 Page Router에서는 모든 컴포넌트가 기본..

2026. 3. 1.

Frontend/Next.js

[Next.js] 구글 스프레드시트 연동하는 방법 (feat. 실시간 주식 주가 반영)

최근 사이드 프로젝트로 "개인 자산 관리 대시보드"를 개발하면서 고민에 빠졌었습니다. 기존에는 구글 스프레드 시트를 통해 모든 자산을 관리하고 있었습니다. 엑셀 함수를 이용해 수익률을 계산하고, 매달 수입/지출을 기록하는 방식이었죠. 하지만 데이터가 쌓이고 보고싶은 지표가 많아질수록 더 이쁘게 만들어보고 싶다는 욕심이 들었습니다. 그런데, 주식 종목의 실시간 정보를 DB나 라이브러리로 불러오자니 유료버전도 많고 개발 공수도 크다고 느껴졌습니다. 그리고 액셀과 같은 구글스프레드 시트처럼 데이터를 편하게 읽고 쓰는 것을 포기하기도 힘들었습니다. 그래서 생각난 것이, 데이터 입력은 편한 구글 스프레드 시트에서 하고, 조회만 Next.js에서 하면되지 않을까? 라는 생각이었습니다. 즉, 구글 스프레드시트를 마..

2026. 2. 28.

Frontend/Next.js

[Next.js] Supabase 5분만에 연동하기

최근 웹 개발 트렌드에서 가장 핫한 조합을 꼽으라면 단연 Next.js와 Supabase입니다. 프론트엔드에 강력한 Next.js와 '오픈소스 Firebase'라 불리는 Supabase를 연동하면, 구축 없이도 풀스택 앱을 빠르게 만들 수 있습니다. 이번 글에서는 Next.js(App Router) 환경에서 Supabase를 연동하고 데이터를 불러오는 가장 기초적이고 확실한 방법을 정리해보겠습니다.1. Supabase란?서버 개발자가 없어도 프론트엔드 개발자가 데이터베이스 , 로그인(인증), 파일 저장소, 실시간 구독 등의 백엔드 기능을 쉽게 구축할 수 있도록 도와주는 BaaS(Backend as a Service) 플랫폼입니다.PostgreSQL 기반Firebase(NoSQL)과 달리, 강력한 관계형 ..

2026. 2. 22.

Frontend/Next.js

[Next.js] Google Gemini 연동 (Feat. Shorts 영상 개발)

안녕하세요! 개발자라면 누구나 한 번쯤 "AI가 모든걸 알아서 개발해주면 얼마나 좋을까?" 라는 상상을 해보셨을겁니다. 저 역시 단순한 챗봇을 넘어 주제만 던져주면 Shorts 영상까지 자동으로 생성해주는 공장형 관리자 페이지를 생각하며 프로젝트를 시작해보았습니다.기술스택저는 이 당시에 가장 핫한 최신 라이브러리들로 구성해서 개발을 해보았습니다.Framework: Next.js 16.1.1 (App Router)Library: React 19.2.3AI Model: @google/generative-ai ^0.24.1 (Gemini Pro)Styling: Styled Components"dependencies": { "@google/generative-ai": "^0.24.1", "next": "16..

2026. 2. 15.

Frontend/Next.js

[Next.js] 구글 로그인 연동하는 방법 (feat. App Router)

요즘 웹 서비스에서 소셜 로그인은 선택이 아닌 필수입니다. 회원가입 절차가 번거로우면 사용자는 금방 이탈하기 때문입니다. 오늘은 Next.js App Router 환경에서 NextAuth.js 라이브러리를 사용해 가장 대중적인 구글 로그인을 연동하는 방법을 A to Z로 아주 상세하게 정리해 보겠습니다.기술스택Framework: Next.js 14이상 (App Router)Auth: NextAuth.js (v4)Platform: Google Cloud Platform (GCP)Step 1. 구글 클라우드 플랫폼(GCP) 세팅하기코드를 짜기전에 구글로부터 구글 로그인을 사용하겠다는 승인을 받아야 합니다.1) Google Cloud Console 접속구글 계정으로 로그인합니다.2) 새 프로젝트 생성좌측 상단..

2026. 2. 14.

Frontend/Next.js

[Next.js] App Router에서 스타일이 깨지는 현상 (feat. Styled-Components)

Next.js 12의 Page Router 시절에는 _document.tsx 에서 ServerStyleSheet 를 설정하는 것이 국룰이었습니다. 하지만, Next.js 13이상 App Router 로 넘어오면서 많은 분들이 당황스러운 경험을 하게 됩니다."새로고침만 하면 스타일이 다 깨졌다가 0.5초 뒤에 적용되는 현상 = FOUC 현상" 오늘은 Next.js 14이상 App Router 환경에서 Styled-Components를 사용할 때 발생하는 스타일 깨짐 현상의 원인과, 이를 해결하는 Styled Components Registry 설정법을 단계별로 정리해 보겠습니다.1. 왜 스타일이 깨질까?원인은 Server Compoent(RSC)와 Styled-Components의 동작 방식 차이에 있습니..

2026. 2. 8.

Frontend/Next.js

[Next.js] RSC의 역습? CVE-2025-55182 원격 코드 실행(RCE) 취약점 분석

"프론트엔드 개발자가 서버 보안까지 신경써야 하나요?" 이 질문에 대해 2025년 12월, Next js 생태계는 아주 강력하고 무서운 대답을 내놓았습니다. 바로 CVE-2025-55182, 일명 'React2Shell' 사태입니다. 지난달 전 세계 React 서버를 공포에 떨게 했던 이 취약점은 단순한 데이터 유출이 아닌, 공격자가 내 서버에서 임의의 명령어를 실행(RCE) 할 수 있는 치명적인 이슈였습니다. 오늘은 이 사건이 왜 발생했는지, 그리고 우리가 사용하는 App Router의 구조적 특징인 직렬화(Serialization)와 어떤 관계가 있는지 기술적으로 분석해 보겠습니다.1. 사건의 발단2025년 12월 초, Next.js와 React 팀은 긴급 보안 권고문을 발표했습니다. CVSS 점수 ..

2026. 2. 7.

Frontend/React

[React] 이미지 로딩 최적화로 LCP 50% 개선하기 (WebP, srcset, Intersection Observer)

웹 서비스에서 가장 많은 트래픽 용량을 차지하는 리소스는 단연 이미지입니다. 고화질 이미지가 많아질수록 로딩 속도는 느려지고, 이는 곧 사용자의 이탈(Bounce Rate)로 이어집니다. 오늘은 프론트엔드 성능 최적화의 핵심인 대표적인 이미지 최적화 기법들(WebP, srcset, Intersection Observer)을 프로젝트에 적용하여 로딩 속도와 사용자 경험을 개선한 과정을 정리해보았습니다. 1. 차세대 이미지 포맷 WebP 도입 (feat. )JPG나 PNG는 범용성이 좋지만 용량이 큽니다. 구글이 개발한 WebP 포맷을 사용하면 동일 화질 대비 용량을 30~50% 까지 줄일 수 있습니다. 하지만, IE 같은 구형 브라우저는 WebP를 지원하지 않습니다. 이를 해결하기 위해 HTML5의 태그..

2026. 2. 1.

Frontend/Next.js

[Next.js] Turborepo와 pnpm을 사용하여 Monorepo 구축

최근 Frontend 생태계에서 Monorepo는 선택이 아닌 '필수'가 되어가고 있는 추세입니다. 여러 개의 프로젝트와 라이브러리를 하나의 저장소에서 관리하면 코드 재사용성이 높아지고, 의존성 관리가 쉬워지는게 주된 이유입니다. 오늘은 그 중에서도 가장 핫한 조합인 Turborepo와 pnpm을 사용하여 Monorepo를 구축해보겠습니다.1. pnpm과 Turborepo를 선택한 이유모노레포 도구에는 우리가 알지 못하는 다양한 것들이 있습니다. 예를 들면, Nx나 Lerna 등이 있습니다. 그런데 저는 왜 pnpm과 Turborepo를 골랐을까요? pnpm(Performant npm) Phantom Dependency 해결: npm이나 yarn과 달리, package.json에 명시되지 ..

2026. 1. 31.

Frontend/React

[React] 리액트가 빠른 진짜 이유: Virtual DOM부터 Fiber까지 완벽 해부

프론트엔드 개발자라면 누구나 리액트(React)를 사용합니다. 하지만 면접장에서 "리액트는 왜 빠르죠?" 혹은 "Virtual DOM이 정확히 뭔가요?" 라는 질문을 받으면 의외로 말문이 막히는 경우가 많습니다. 오늘은 리액트의 핵심 엔진인 Virtual DOM의 정체와, 리액트가 어떻게 브라우저 렌더링 성능을 극한으로 끌어올리는지 그 내부 원리(Reconciliation, Fiber)를 아주 깊이 있게 파헤쳐 보겠습니다.1. 문제의 시작: DOM은 너무 비싸다 우리가 웹사이트에서 "좋아요" 버튼 하나를 누를 때마다 브라우저 내부에서는 엄청난 일이 벌어집니다.// 기존의 방식 (Vanilla JS)document.getElementById('container').innerHTML = 'New Conten..

2026. 1. 25.

Frontend/Javascript

[Javascript] 이벤트 루프 도대체 어떻게 돌아가는 걸까? (완전 정복)

자바스크립트는 싱글 스레드 언어입니다. 개발 공부를 하다 보면 귀에 딱지가 앉도록 듣는 말입니다. 그런데 이상하지 않나요? 싱글 스레드는 '손이 하나'라는 뜻인데, 어떻게 우리는 웹사이트에서 데이터를 불러오면서 동시에 애니메이션을 보고, 버튼도 클릭할 수 있는 걸까요? 이 마법 같은 동시성의 비밀, 이벤트 루프(Event Loop)를 아주 상세하게 뜯어보겠습니다.1. 등장인물 소개: 런타임 4대장자바스크립트가 돌아가는 환경(브라우저)은 거대한 공장과 같습니다. 이 공장에는 4가지 핵심 구역이 있습니다.JS Engine (Call Stack)역할: 실제 코드를 실행하는 작업대특징: 싱글 스레드이므로 작업대가 딱 하나입니다. 한 번에 한 가지 일만 처리할 수 있습니다. (LIFO: 나중에 들어온게 먼저 나감..

2026. 1. 24.

Frontend/Next.js

[Next.js] OG 태그 설정 (feat. 카톡 링크 설정)

분명 다른 멋진 사이트들은 링크만 올려도 예쁜 썸네일 이미지와 제목이 뜨는데, 내 사이트는 왜 휑하게 URL만 덩그러니 뜨는 걸까요? 범인은 바로 OG(Open Graph) 태그의 부재입니다. 오늘은 내 사이트를 '프로페셔널하게' 보이게 만드는 가장 쉬운 방법, OG 태그에 대해 알아봅니다.1. 오픈 그래프(Open Graph)가 뭔가요?오픈 그래프(OG)는 쉽게 말해 "내 웹사이트의 디지털 명함"입니다. 카카오톡, 슬랙, 페이스북, 트위터(X) 같은 SNS 봇들은 링크가 공유되면, 그 사이트에 잽싸게 접속해서 "이 사이트를 어떻게 요약해서 보여줄까?" 하고 정보를 긁어갑니다. 이때 봇들이 참고하는 표준 규약이 바로 og:로 시작하는 메타 태그들입니다. 이 명함을 제대로 파놓지 않으면, 봇들은 무엇을 보..

2026. 1. 18.

Frontend/Next.js

[Next.js] LCP 1초대로 줄이고 구글 점수 따내기

우리가 어떤 링크를 클릭하고 화면이 하얗게 멈춰있을 때, '뒤로 가기'를 누르고 싶은 충동이 들기까지 걸리는 시간은 얼마나 될까요? 놀랍게도 평균 3초라고 합니다. 아무리 디자인이 예쁘고(FOUC 해결), 화면이 안 흔들려도(CLS 해결), 일단 화면에 뭐가 떠야 사용자가 머무릅니다. 오늘은 사용자의 인내심이 바닥나기 전에 메인 화면을 '탁!' 하고 띄워주는 핵심 지표, LCP(Largest Contentful Paint)를 공략해 봅니다.1. LCP (Largest Contentful Paint)가 뭔가요?LCP는 단어 그대로 "가장 큰(Largest) 콘텐츠가 그려지는(Paint) 시간"입니다. 브라우저는 화면을 그릴 때 로고, 메뉴, 텍스트 등을 순차적으로 보여줍니다. 사용자는 자잘한 메뉴가 떴을 ..

2026. 1. 17.