📌 개요이번 작업은 Next.js 기반 앱에서 자녀별 학원비 통계 및 과목별 시각화를 구현하기 위한 컴포넌트를 개발하면서 겪은 과정, 문제 해결, 리팩토링에 대해 정리한 내용입니다.⚙️ 개발 환경Next.js (App Router) 기반 SSR/CSR 혼합 앱React 18, TypeScript, Emotion, Chart.js, Moment.js 사용모듈 구조는 다음과 같이 구성:├── components/│ ├── modules/│ │ └── modal/│ ├── webview/│ │ ├── academy-planner/ │ │ │ ├── tab/│ │ │ │ ├── AcademyReportChild.tsx│ │ ..

🧠 react-hook-form 작동 원리 간단 정리register()로 input을 등록register는 input을 react-hook-form의 내부 상태(formState)에 등록하고, value/validation/error 관리를 가능하게 해주는 핵심 함수입니다.input, select 같은 DOM 요소를 ref로 추적브라우저의 내장 폼 상태 (value, validity 등) 를 그대로 사용 → 리렌더링이 거의 없음→ 이 코드는 email이라는 필드를 내부 formState에 등록하면서, 필수 입력 조건을 체크하도록 합니다.useForm() 내부에서 필드 상태를 추적각 필드의 value, error, touched 상태 등을 formState로 관리 → formState는 폼의 에러, 제출..

☑️ 들어가며지금 작업 중인 Next.js App Router 기반 프로젝트에서, 여러 개의 모달(지출/수입 등록, 삭제 확인, 얼럿 등)을 확장 가능하게 만들고 싶어서 Redux와 type 기반 상태 관리를 활용한 범용 모달 시스템을 만들었다.이 글에서는 그 구조와 실제 구현 과정을 정리하려고 한다.☑️ 모달 구조 설계⭐ 구조 목표한 개의 CommonModal 컴포넌트로 다양한 모달 대응Redux 상태에서 모달의 type을 기준으로 열고 닫기modalProps 확장 여지도 확보1️⃣ modalSlice.ts 생성// features/modal/modalSlice.tsimport { createSlice } from "@reduxjs/toolkit";const initialState = { type: ..

이전 메이플스토리 Open API를 활용한 랭킹 통계 웹페이지 만들기(1)에서 메이플스토리 Open API를 활용하여 랭킹 통계 웹페이지를 개발하던 중, fetch 함수의 중복을 줄이기 위해 공통 함수를 생성했었습니다. 하지만 이후 요청이 많아지면서 429 Too Many Requests 오류가 발생했습니다. Open API 문서를 확인해보니, 요청 횟수 초과(1000건 제한)로 인해 오류가 발생한 것이었습니다. 실제 통계에서도 999건 이상의 요청이 확인되었고, 최적화가 필요하다고 생각했습니다.😭 문제 원인페이지를 새로고침할 때마다 모든 데이터에 대해 fetch 요청이 발생하면서, 제한된 API 호출 수를 초과하게 된 것입니다. 이를 해결하기 위해 react-query를 활용해 데이터를 캐싱하고 요청..

개인 프로젝트를 구상하다가 재미있고 애정이 가는 프로젝트를 해보고 싶었습니다. 삶에 유익한 Open API도 많지만, 메이플스토리 Open API를 활용하여 maple.gg 같은 종합 통계 페이지를 만들어보기로 했습니다.☑️ 목표우선 메인 페이지에 카테고리별 랭킹 데이터를 노출시켜 보는 것부터 시작했습니다. 메이플스토리 Open API를 통해 제공되는 다양한 데이터를 활용하며, 첫 번째로 종합 랭킹(overall)과 유니온 랭킹(union) 데이터를 가져오는 기능을 구현했습니다. ☑️ 메이플스토리 Open API 소개메이플스토리 Open API는 Nexon Open API 문서를 통해 제공되며, 유저 데이터를 활용할 수 있도록 다양한 엔드포인트를 제공합니다.API Key 발급 및 환경 변수 설정먼저, 문..

Spotify 의 기획 구성안 ☑️ 프로젝트 개요프로젝트 이름: MusicVibe (예시)목표: Spotify API를 활용해 사용자가 음악을 검색하고 플레이리스트를 관리하며 개인화된 음악 추천을 받을 수 있는 웹 애플리케이션 개발☑️ 주요 기능사용자 로그인사용자가 웹사이트에 접속하면, Spotify 로그인 페이지로 리디렉션됩니다. Spotify OAuth 인증을 통해 사용자가 자신의 계정으로 로그인.사용자 정보와 플레이리스트를 가져오기.메인 대시보드로그인 후, 사용자 맞춤형 대시보드가 표시됩니다. 대시보드에서는 다음과 같은 정보를 제공합니다:인기 차트: 현재 인기 있는 곡 목록추천 플레이리스트: 사용자의 취향에 맞는 추천 플레이리스트사용자 맞춤 추천: 최근 재생한 곡이나 좋아한 음악에 기반한 추천음악 ..

🤔 Next.js 는 기본적으로 전역적인 레이아웃을 제공하지만, 특정 페이지마다 다른 레이아웃을 적용하려면 어떻게 해야 할까?☑️ 레이아웃 적용 방법의 개념Next.js에서는 기본적으로 페이지를 pages 폴더 아래에 작성하고, 각 페이지는 독립적으로 렌더링된다. 이때 각 페이지마다 다른 레이아웃을 적용하고 싶을 수 있다. 이를 위해 Next.js에서는 getLayout이라는 특수한 메서드를 활용하여 각 페이지에 맞는 레이아웃을 설정할 수 있다. 우선 전체적인 코드를 살펴보자pages/_app.tsximport GlobalLayout from "@/components/global-layout";import "@/styles/globals.css";import { NextPage } from "next"..

☑️ API Routes란?Next.js의 API Routes는 프론트엔드와 백엔드 통합이 쉬운 Next.js 앱에서 서버 기능을 구현할 수 있도록 해주는 강력한 기능이다. 이를 통해 별도의 백엔드 서버 없이도 클라이언트 요청을 처리하고, 데이터베이스와 상호작용하거나 서드파티 API(소셜 로그인 API, 지도API 등등)로부터 데이터를 불러와서 전달하는 등의 작업을 수행할 수 있다.☑️ API Routes 기본 구조Next.js 앱을 생성하면 pages/api 폴더가 자동으로 생성되며, 이곳에 API 엔드포인트를 정의하는 파일들을 추가할 수 있다. 예를 들어, 기본적으로 포함된 pages/api/hello 파일을 살펴보자.// Next.js API route support: https://nextjs.o..

☑️ useMutation이란?Mutation : 돌연변이, 형태나 구조상의 변화 React Query의 useMutation 훅은 데이터베이스에 새로운 값을 추가하거나 기존 데이터를 수정 및 삭제하는 등 "변경(Mutation)"이 필요한 작업을 수행할 때 사용한다. 이와 같은 작업은 사이드 이펙트를 발생시키며, 이러한 사이드 이펙트를 다루기 위해 useMutation을 사용한다. ✔️ useMutation()와 useQuery()의 차이useQuery()의 쿼리 함수는 컴포넌트가 마운트될 때 자동으로 쿼리 함수를 실행해 데이터를 가져온다.useMutation()은 실제로 Mutation하는 함수를 직접 실행해 줘야 한다. mutate() 함수를 통해 mutationFn으로 등록했던 함수를 실행할 수 ..

☑️ useQuery로 데이터 받아오기useQuery 훅은 비동기 데이터를 쉽게 가져오는 방법을 제공한다. queryKey와 queryFn을 인자로 받아 데이터를 불러오고 이를 관리하는 역할을 한다.queryKeyReact Query에서 쿼리의 고유한 식별자 역할을 한다. 각 쿼리의 캐시를 관리하는 데 필요한 "이름표"와 같다.queryKey는 문자열, 배열, 객체 등 다양한 형태로 지정할 수 있으며, 고유한 값만 있으면 된다.queryFnqueryFn은 실제로 데이터를 가져오는 함수로, useQuery가 서버와 통신하여 데이터를 받아올 때 사용하는 비동기 함수이다. 주로 API를 호출하거나, 데이터베이스에 접근하는 함수가 queryFn으로 사용된다.React Query는 이 queryFn을 호출하여 데..