본문 바로가기

분류 전체보기

(18)

Express 커스텀 서버를 Next.js API Routes로 마이그레이션 하기 들어가며레거시 코드를 리팩토링할 때 가장 어려운 점은 "왜 이렇게 만들어졌을까?"를 이해하는 것입니다. 제가 개발하고 있는 WMS(Warehouse Management System) 프로젝트도 마찬가지였습니다. Next.js 기반 프로젝트임에도 불구하고 별도의 Express 커스텀 서버를 운영하고 있었는데, 초기에는 API 프록시 기능을 빠르게 구현하기 위한 선택이었을 것입니다.하지만 시간이 지나며 이 선택은 기술 부채로 쌓여갔고, 결국 1,056줄의 거대한 단일 파일이 되어 유지보수의 발목을 잡았습니다.문제 상황1,056줄짜리 Express 서버의 한계WMS 프론트엔드 프로젝트는 Next.js 기반이지만, API 프록시를 위해 별도의 Express 커스텀 서버(server/index.js)를 사용하고 ..

Next.js 빌드 최적화 : Babel → SWC 전환 문제 상황프로젝트 빌드 시간이 1분 30초를 초과CI/CD 파이프라인에서 병목 발생원인 분석빌드 로그 확인 결과info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc"주요 문제점:.babelrc 파일로 인한 SWC 비활성화738MB 크기의 node_modules1MB 이상의 대용량 번들200개 이상 페이지의 SSR 설정해결 과정1. SWC 컴파일러 활성화rm -f .babelrc// next.config.jsconst nextConfig = { // SWC 강제 활성화 swcMinify: true, // 빌드 최적화 experimental: { forceSwcTransforms: t..

Monorepo 도입기: 프론트엔드 마이그레이션 설계 정리 1. 개요본 문서에서는 Legacy Web과 Mobile을 모노레포 프로젝트로 통합하는 설계와 전환 전략을 제시합니다.2. 현재 상황 & 문제점기술 스택Next.js 12.3.6 + JavaScript(ES6)MobX 6.5.0, Material-UI v4React Query v3, Axios, npm주요 문제개발 환경 복잡Express 기반 커스텀 서버(500+줄), API 프록시 중복환경 변수 관리 난이도 높음폴더 구조 비표준화v1/v2 혼재, Atomic Design 일부 적용컴포넌트 재사용성 낮음코드 및 의존성 중복동일 로직·UI를 두 프로젝트에 중복 구현의존성 100% 중복 설치기술 부채Next.js 12, React 17, MUI v4 등 구버전JavaScript → TypeScript 필요더..

Next.js 초기 렌더링 시 다국어 문구가 비어 보이는 문제 해결하기 Next.js 애플리케이션에서 다국어를 localStorage 기반으로 처리할 때 다음과 같은 문제가 발생했습니다.초기 화면 로딩 시 버튼 텍스트가 비어 있음새로고침 후에는 정상적으로 다국어 문구가 표시됨위 문제의 원인을 분석하고 클라이언트 환경에서 다국어를 불러오도록 수정하고, 성능 최적화 작업을 해보았습니다.문제 원인const DUMMY_DATA = [ { id: 0, name: getLang("WD000266"), ... }, ...];getLang(code)는 localStorage에서 다국어 문자열을 불러오는 함수입니다.export const getLang = (code) => { if (typeof window !== "undefined") { const langL..

useState의 비동기성 이번 글에서는 useState가 비동기적으로 동작하는 원리와 올바른 사용 패턴에 대해 다뤄보겠습니다. 먼저 비동기적이라는 것은 setState를 호출한 직후에 상태가 즉시 반영되지 않음을 의미합니다.const [count, setCount] = useState(0);const handleClick = () => { setCount(count + 1); console.log(count); // 여전히 setCount 이전 값인 0이 출력됨}; 위 코드에서 handleClick을 호출하면 setCount(count + 1)이 실행되지만, console.log(count)는 여전히 이전 값인 0을 출력합니다. useState가 비동기적으로 동작하는 원리이러한 비동기성이 발생하는 이유는 렌더링 성능을 최적..

React key prop과 상태 초기화 React에서 key prop은 리스트나 iterable 객체 렌더링 시 중요한 역할을 하지만, 상태(state) 관리에도 영향을 미칠 수 있습니다.key의 역할React에서 key는 각 컴포넌트의 고유성을 보장하여 변경 사항을 효율적으로 감지하고 업데이트하는 역할을 합니다.리스트를 렌더링할 때 key가 변경되지 않으면 기존의 컴포넌트가 유지되며, 변경되면 해당 컴포넌트는 새로운 것으로 인식됩니다.key가 state에 미치는 영향key가 변경되면 React는 기존 컴포넌트를 제거하고 새로운 컴포넌트를 생성합니다.즉, key 값이 바뀌면 해당 컴포넌트의 상태가 초기화됩니다.이는 같은 컴포넌트를 여러 개 사용하면서 개별적으로 상태를 유지하고 싶을 때 유용하게 활용할 수 있습니다.import { useStat..

Timer Interval 지연 문제를 해결하기 위한 방법 코드 리뷰를 진행하던 중, 기존 구현된 타이머에서 인터벌 시점이 지연되는 문제가 있다는 피드백을 받았습니다.문제를 해결하기 위해 두 가지 방법을 생각해보았습니다. 아래 코드는 예시를 위해 작성된 코드입니다.AS-IS. 시간을 직접 계산, setInterval로 1초마다 갱신'use client';import { useEffect, useState } from 'react';import { atomWithStorage } from 'jotai/utils';import { useAtom } from 'jotai';const startTimeAtom = atomWithStorage('inboundProcessStartTime', Date.now());export default function Timer() {..

CDN (Content Delivery Network) CDN이란?CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버→ 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높임웹 페이지, 이미지, 동영상 등의 콘텐츠를 사용자의 실제 위치와 가까운 서버에 캐싱사용자와 가장 가까운 서버에서 콘텐츠를 전송 → 페이지 로드 시간 단축, 더 빠른 고성능 웹 환경 경험 CDN의 동작 원리CDN은 세 가지 종류의 서버에 의존오리진 서버콘텐츠의 원본 버전이 포함되어 있으며 원본 소스 역할을 함콘텐츠를 업데이트해야 할 때마다 오리진 서버에서 변경오리진 서버는 콘텐츠 공급업체가 소유하고 관리 or 써드파티 클라우드 공급업체의 인프라(Amazon의 AWS S3 또는 Google Cloud Storage)에서 호스팅엣지 서버전 세계 여러 지리적 위치에 위치..

이전 1 2 3 다음

티스토리툴바