👩🏻‍💻

Front-end 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)를 사용하고 ..
Front-end 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..
Front-end 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 필요더..
Front-end 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..
Front-end 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가 비동기적으로 동작하는 원리이러한 비동기성이 발생하는 이유는 렌더링 성능을 최적..
Front-end React key prop과 상태 초기화 React에서 key prop은 리스트나 iterable 객체 렌더링 시 중요한 역할을 하지만, 상태(state) 관리에도 영향을 미칠 수 있습니다.key의 역할React에서 key는 각 컴포넌트의 고유성을 보장하여 변경 사항을 효율적으로 감지하고 업데이트하는 역할을 합니다.리스트를 렌더링할 때 key가 변경되지 않으면 기존의 컴포넌트가 유지되며, 변경되면 해당 컴포넌트는 새로운 것으로 인식됩니다.key가 state에 미치는 영향key가 변경되면 React는 기존 컴포넌트를 제거하고 새로운 컴포넌트를 생성합니다.즉, key 값이 바뀌면 해당 컴포넌트의 상태가 초기화됩니다.이는 같은 컴포넌트를 여러 개 사용하면서 개별적으로 상태를 유지하고 싶을 때 유용하게 활용할 수 있습니다.import { useStat..
Front-end 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() {..
DevOps CDN (Content Delivery Network) CDN이란?CDN(콘텐츠 전송 네트워크)은 지리적으로 분산된 여러 개의 서버→ 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높임웹 페이지, 이미지, 동영상 등의 콘텐츠를 사용자의 실제 위치와 가까운 서버에 캐싱사용자와 가장 가까운 서버에서 콘텐츠를 전송 → 페이지 로드 시간 단축, 더 빠른 고성능 웹 환경 경험 CDN의 동작 원리CDN은 세 가지 종류의 서버에 의존오리진 서버콘텐츠의 원본 버전이 포함되어 있으며 원본 소스 역할을 함콘텐츠를 업데이트해야 할 때마다 오리진 서버에서 변경오리진 서버는 콘텐츠 공급업체가 소유하고 관리 or 써드파티 클라우드 공급업체의 인프라(Amazon의 AWS S3 또는 Google Cloud Storage)에서 호스팅엣지 서버전 세계 여러 지리적 위치에 위치..
DevOps 무중단 배포 (Zero Downtime Deployment) 무중단 배포란?무중단 배포는 서비스 장애와 배포의 부담을 최소화하기 위해 운영 중인 서비스를 중단하지 않고 신규 소프트웨어를 배포하는 기술 블루-그린 배포(Blue-Green Deployment) 개념: 두 개의 환경(블루와 그린)을 유지하며, 현재 운영 중인 서비스 환경을 Blue, 새롭게 배포할 환경을 Green이라고 함배포 과정새로운 버전을 그린 환경에 배포한 후, 충분한 테스트를 거침테스트 완료 후 트래픽을 블루 환경에서 그린 환경으로 전환문제가 발생하면 다시 블루 환경으로 트래픽을 전환하여 롤백 용이장점롤백이 간단하고 위험이 적음테스트가 충분히 이루어진 후에 실제 서비스에 반영호환성 문제 없음단점두 개의 환경을 유지해야 하므로 인프라 비용 증가 롤링 배포(Rolling Deployment)개념:..
DevOps PM2 Research 입사 초기 프론트엔드 서비스 배포 환경이 EC2와 PM2로 구축되어 있었습니다.PM2에 대해 공부하며 리서치한 내용입니다.PM2는 Process Manager의 약자로 NodeJS 프로세서를 관리하는, 원활한 서버 운영을 위한 패키지서비스를 제공하고 있는 도중 갑자기 서버가 중지되어도 서버를 다시 실행Node.js는 싱글 스레드 기반이지만, 멀티 코어 혹은 하이퍼 스레딩을 사용할 수 있게 해줌클라이언트로부터 요청이 올 때 알아서 요청을 여러 노드 프로세스에 고르게 분배 (로드 밸런싱)작동 원리PM2의 Cluster mode는 Node.js의 Cluster module을 통해 작동Node.js Cluster module은 Node.js에서 멀티코어 시스템을 이용할 수 있도록 Port를 공유하는 Child ..
Front-end React Server Component를 사용해야 하는 이유 React Server Component란?서버 컴포넌트(Server Components)는 새로운 유형의 컴포넌트로, 번들링 전에 미리 렌더링되며, 클라이언트 애플리케이션이나 SSR 서버와는 별도의 환경에서 실행됩니다.이 별도의 환경이 React 서버 컴포넌트에서 말하는 "서버"입니다.서버 컴포넌트는 빌드 시 CI 서버에서 한 번 실행되거나, 각 요청마다 웹 서버에서 실행될 수 있습니다.더보기여기서 CI 서버란?CI 서버란 Continuous Integration(지속적 통합)의 약자로, 소프트웨어 개발에서 코드를 자동으로 빌드하고 테스트하기 위한 서버를 말합니다. CI 서버는 개발자가 코드를 변경하고 이를 저장소에 푸시할 때, 변경된 코드를 자동으로빌드 (코드를 컴파일하거나 번들링)테스트 (유닛 테스..
GSAP GSAP 기초 정리 - Tween과 Timeline GSAP이란? GreenSock Animation Platform 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다. GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있으며 가볍고 사용방법이 쉽다는 가장 큰 장점이 있다. Tween Tween은 애니메이션을 정의하는 객체 개념이라고 보면 된다. gsap.to("#b", 3, {delay:2, x:700, repeat:-1}); gsap.from("#g", 3, {delay:2, x:700, repeat:-1}); gsap.fromTo("#r", 3, {x:200}, {delay:2, x:700, repeat:-1}) 코드의 간결성을 위해 fromT..
Javascript 자바스크립트의 ES6 ~ES2014 ECMAScript(ECMA-262) 는 Javascript 명세 또는 스펙을 의미합니다. ECMA-262 : ECMA인터내셔널(표준기구)은 ECMAScript 언어의 공식 사양인 ECMA-262 표준을 만들었습니다. 즉, ECMAScript는 자바스크립트의 표준이며 뼈대(core)를 구성하는 스크립트 언어입니다. 자바스크립트는 ECMAScript 명세 또는 스펙을 따르는 스크립트 언어라고 할 수 있습니다. ECMAScript 6 (2015) ES6에는 다음과 같은 새로운 기능이 추가 되었습니다. - arrows (화살표 함수) - classes (클래스) - enhanced object literals (object 메소드 선언 및 속성(동적) 선언) - template strings (템플릿 문자열)..
Front-end 웹 표준과 웹 접근성 웹 표준은 어떤 환경에서도 이용할 수 있는 웹페이지를, 웹 접근성은 어떤 사람이든 이용할 수 있는 웹페이지를 만들 수 있는 방법을 담고 있다. 웹 표준이란? W3C(Wordl Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고있다. 웹 개발에 사용하는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다. 현재는 크롬, 엣지, 사파리 등 최신 웹 브라우저들은 모두 웹표준을 지원한다. 웹 표준에 맞추어 웹페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 웹 표준을 준수하는 방법 1. DOCTYP..
Front-end 모듈 번들러와 Webpack JavaScript 프레임워크인 React, Vue, Svelte, Angular 등을 사용하다 보면 모듈 번들러(module bundler)는 필수적으로 언급되는 내용입니다. 모듈 번들러는 JavaScript 모듈을 브라우저에서 실행할 수 있는 단일 JavaScript 파일로 묶는 데 사용되는 도구입니다. 모듈(Module) 애플리케이션의 기능이 많아질수록 작성해야하는 코드가 길어질 수 있습니다. 모든 코드를 한 개의 파일에 작성하는 대신 기능(변수, 객체, 배열, 함수, 클래스 등)에 따라 별도의 파일에 코드를 분리할 수 있습니다. 코드를 분리하는 기준에 따라 파일이 상당히 많아질 수 있지만, 한 개의 파일에 코드를 작성하는 것보다 체계적이고 유지보수가 쉬워집니다. 결국 모듈은 분리된 파일을 의미합니..
Javascript 자바스크립트의 Promise와 await/async Promise 자바스크립트 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라 명명 지어졌다고 한다. Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. 이때 Promise 생성자 안에 두개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫 번째 인수는 작업이 성공했을 때 성공(resolve)임을 알려주는 객체이며, 두 번째 인수는 작업이 실패했을 때 실패(reject)임을 알려주는 오류 객체이다. const myPromise = new Promise((resolve, reject) => { // 비동기 작업..
Javascript 자바스크립트의 호출 스택과 이벤트 루프 자바스크립트 런타임 환경 Call stack과 Event loop는 자바스크립트의 동작 원리를 이해하기 위해 꼭 숙지해야하는 개념이다. 자바스크립트가 실행되는 환경을 의미하는 자바스크립트 런타임 환경은 다음과 같이 구성되어 있다. 크게 Memory heap, call stack, web apis, callback queue, event loop가 있다. Call Stack 호출 스택은 함수의 호출을 스택 방식으로 기록하는 자료구조다. 프로그램에서 요청이 들어올 때마다 순서대로 스택에 담고, 가장 나중에 들어온 작업을 먼저 처리하는 LIFO(Last In First Out) 구조이다. 자바스크립트는 싱글 스레드 기반 언어이기 때문에 하나의 호출 스택만을 가지고 있고, 한 번에 하나의 task만 처리할 수 ..
Javascript 자바스크립트의 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 이전 작업이 완료되어야 다음 작업을 수행할 수 있다. 이러한 코드 순차 실행을 동기(Synchronous)라고 한다. 그러나 작업이 오래 걸리거나 응답이 늦어지는 경우에 전체적인 성능에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 대기해야 한다. 이러한 문제를 해결하기 위해 도입된 개념이 비동기(Asynchronous)이다. 비동기는 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있게 한다. 비동기는 메인 스레드가 작업을 다른 곳에 인가하여 처리되게 하고, 그 작업이 완료되면 콜백 함수를 받아 실행하는 방식으로, 쉽게 말해 작업을 백그라운..

티스토리툴바