코딩병원

기타/후기

부부가 같이 쓰는 가계부 앱 '모으미' — 가계부·주식·배당·예적금을 한 앱에서

실제 앱 화면 — 왼쪽부터 홈 · 가계부 · 자산안녕하세요! 오늘은 제가 직접 만들고 운영하고 있는 자산관리 앱 모으미를 소개해 보려고 해요. 🙌가계부 앱은 정말 많죠. 그런데 막상 써 보면 가계부는 A 앱, 주식은 증권사 앱, 예적금 만기는 메모장, 가족 일정은 또 다른 캘린더… 이렇게 흩어지기 일쑤더라고요. 거기에 부부가 같이 쓰려고 하면 "이거 누가 쓴 거야?"부터 시작해서 용돈 정산까지 은근히 귀찮은 일이 한가득이고요.그래서 만들었습니다. "우리 집 돈 관리를 앱 하나로." 이게 모으미의 한 줄 소개예요.📌 이 글에서 다루는 내용① 모으미가 어떤 앱인지 ② 핵심 기능 4묶음 ③ 꼭 보여드리고 싶은 하이라이트 ④ 실제 앱·PC 화면 ⑤ 무료 vs PRO ⑥ 다운로드 방법※ 모으미의 예전..

2026. 10. 17.

Frontend/Next.js

[Next.js] CORS 에러 해결하기 (feat. React CRA)

프론트엔드 개발자가 백엔드 API와 연동할 때 마주치는 첫 번째 벽, 바로 CORS(Cross-Origin Resource Sharing) 에러입니다. localhost:3000에서 API 서버(api/server.com)로 요청을 보내니 차단당했습니다. 이를 해결하기 위해 우리는 Proxy를 사용합니다. 이번 글에서는 React와 Next.js 환경에서 각각 어떻게 프록시를 설정하고 CORS를 우회하는지 알아보겠습니다.1. Pure React (CRA) 환경Create React App(CRA)이나 Webpack 기반의 리액트 프로젝트에서의 프록시 설정입니다.개발 환경CRA는 내부적으로 webpack-dev-server를 사용합니다. 가장 간단한 방법은 package.json을 수정하는 것입니다.방법 ..

2026. 5. 30.

Dev Notes/Concepts

[Concept] 애자일(Agile)이란? (feat. 스크럼)

채용 공고나 기술 블로그에서 가장 많이 마주치는 단어는 아마 애자일(Agile)이라고 생각됩니다. 하지만 정작 애자일이 정확하게 뭔지 물어보면 대부분의 사람들은 "빨리 만들고 수정하는 것..?" 이라고 말하는 경우가 많습니다. 이번 글에서는 애자일을 현업 개발자 관점에서 깊이 있게 파헤쳐 보겠습니다.1. 애자일의 정의애자일은 특정 도구(Jira, Slack)나 규칙을 의미하는 것이 아닙니다. "불확실한 환경에서, 변화에 유연하게 대응하여 가치를 창출하는 사고 방식" 그 자체를 의미합니다. 과거의 소프트웨어 개발이였던 워터폴 방식은 마치 건축과도 같았습니다. 설계도가 완벽해야 착공에 들어갔죠. 하지만 소프트웨어 시장은 너무나 빠르게 변합니다. 1년 동안 공들여 만든 기능이 출시 시점엔 아무도 안 쓰는 기능..

2026. 5. 24.

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.

Infra/Vercel

[Vercel] Next.js 프로젝트 배포하기 (Feat. AWS vs Vercel)

이번 글에서는 개발한 프로젝트를 Vercel을 통해 전 세계 누구나 접속할 수 있도록 무료로 배포하는 방법을 아주 상세하게 다뤄보겠습니다. AWS처럼 서버를 설정하거나 리눅스 명령어를 다룰 필요 없이 아주 간단합니다. Vercel을 선택한 이유Vercel은 Next.js를 만든 회사입니다. 즉, Next.js 프로젝트를 배포하는 데 있어서 가장 최적화된 환경을 제공합니다.Zero Configuration: 설정 파일 없어도 Next.js 프로젝트를 자동으로 인식합니다.CI/CD 자동화: Github에 코드를 push만 해도 자동으로 재배포가 됩니다.HTTPS 기본 제공: 보안 인증서(SSL)를 따로 살 필요가 없습니다.배포 전 준비사항 GitHub 저장소에 프로젝트 저장Vercel 계정: vercel에서..

2026. 2. 21.

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.