Front-end

만들고 난 뒤에 톤빛 기획 문서를 쓰면서 고친 것들

이미 돌아가고 있는 톤빛을 보면서 기획자였다면 썼을 문서 여덟 편을 거꾸로 채웠다. 쓰는 동안 서비스에 빠져 있던 것 아홉 가지가 나왔고, 다섯 가지는 그날 고쳐서 배포했다. 어떤 문서가 실제로 서비스를 바꿨는지 정리했다.

셀카 퍼스널 컬러 진단 서비스를 만들고, 립 추천 서비스로 바꾸기까지

셀카 한 장으로 퍼스널 컬러를 가늠하는 서비스를 만들었다가, 3주 만에 '내 얼굴에 맞는 립을 골라 주는' 서비스로 방향을 바꿨다. 왜 시작했고, 어디서 막혔고, 무엇을 기준으로 바꿨는지 정리했다.

Web Locks를 검토하며 정리한 브라우저 저장소 경계

같은 사이트를 같은 브라우저에서 열었는데도 저장소를 공유하지 않는 경우가 있다. 그 경계를 정하는 게 브라우저 프로필이다. 업무에서 사용자가 여러 창을 띄워 같은 작업을 동시에 진행하다가 브라우저 스토리지의 데이터가 꼬이는 문제를 다룬 적이 있다. 해결책으로 Web Locks…

PDA용 모바일 웹을 Expo WebView 앱으로 전환한 과정

물류 현장 작업자들이 PDA로 사용하는 WMS 모바일 웹을, 브라우저 접속 방식에서 설치형 하이브리드 앱으로 전환한 경험을 정리했다. 기술적으로 아주 복잡한 작업은 아니었지만, "서비스를 제공하는 방식 자체"를 바꾼 작업이라 과정과 판단 기준을 기록해두려고 한다. 이전에는 작업자가…

레거시 화면 이관 QA를 Playwright로 자동화한 과정

레거시 화면을 새 앱으로 옮기면서 가장 어려웠던 건 화면을 옮기는 일 자체가 아니었다. 옮긴 화면이 예전과 똑같이 동작한다는 걸 증명하는 일이 훨씬 어려웠다.이번 글에서는 레거시 기능을 빠짐없이 테스트 케이스(TC)로 만들고, headless 브라우저가 TC를 하나하나 직접 눌러…

1,056줄 Express 커스텀 서버를 Next.js API Routes로 옮긴 과정

레거시 코드를 리팩토링할 때 가장 어려운 점은 "왜 이렇게 만들어졌을까?"를 이해하는 것이다. 내가 개발하고 있는 WMS(Warehouse Management System) 프로젝트도 마찬가지였다. Next.js 기반 프로젝트임에도 불구하고 별도의 Express 커스텀 서버를…

Babel에서 SWC로 전환해 Next.js 빌드 시간 66% 줄이기

Babel에서 SWC로 전환하고 번들을 정리해 빌드 시간을 235.81초에서 80.32초로 66% 줄였다. GitHub Actions 빌드는 약 6분에서 약 3분으로 줄었다. 로컬 빌드에 약 4분, GitHub Actions 빌드에 약 6분이 걸렸다 빌드가 CI/CD 파이프라인의…

레거시 Next.js를 모노레포로 옮기기 위한 설계와 전환 계획

본 문서에서는 Legacy Web과 Mobile을 모노레포 프로젝트로 통합하는 설계와 전환 전략을 제시한다. Next.js 12.3.6 + JavaScript(ES6) MobX 6.5.0, Material-UI v4 React Query v3, Axios, npm 개발 환경 복잡…

setState 직후 값이 바로 바뀌지 않는 이유

이번 글에서는 useState가 비동기적으로 동작하는 원리와 올바른 사용 패턴에 대해 다뤄보겠다. 먼저 비동기적이라는 것은 setState를 호출한 직후에 상태가 즉시 반영되지 않음을 의미한다. 위 코드에서 handleClick을 호출하면 setCount(count + 1)이…

key를 바꿔 React 컴포넌트 상태를 초기화하는 방법

React에서 key prop은 리스트나 iterable 객체 렌더링 시 중요한 역할을 하지만, 상태(state) 관리에도 영향을 미칠 수 있다. React에서 key는 각 컴포넌트의 고유성을 보장하여 변경 사항을 효율적으로 감지하고 업데이트하는 역할을 한다. 리스트를 렌더링할 때…

setInterval 타이머 지연을 requestAnimationFrame으로 해결한 방법

코드 리뷰를 진행하던 중, 기존 구현된 타이머에서 인터벌 시점이 지연되는 문제가 있다는 피드백을 받았다. 문제를 해결하기 위해 두 가지 방법을 생각해보았다. inboundProcessStartTime 변경 시 항상 현재 시간을 기준으로 경과 시간을 계산하므로, 인터벌 시작/취소로…

React 공식 문서로 정리한 Server Component의 장점

React 공식 문서의 Server Components 문서를 번역하며 핵심을 정리하고, 서버 컴포넌트를 써야 하는 이유를 다른 관점의 글과 함께 정리했다. 서버 컴포넌트(Server Components)는 새로운 유형의 컴포넌트로, 번들링 전에 미리 렌더링되며, 클라이언트…

GSAP Tween과 Timeline 사용법 정리

웹 애니메이션 라이브러리 GSAP의 기본 개념인 Tween과 Timeline, 그리고 애니메이션 순서를 정하는 position parameter 사용법을 정리했다. 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다.

웹 표준, 크로스 브라우징, 웹 접근성 정리

웹 표준은 어떤 환경에서도 이용할 수 있는 웹페이지를,웹 접근성은 어떤 사람이든 이용할 수 있는 웹페이지를 만들 수 있는 방법을 담고 있다. W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 사용자가 어떠한 운영체제나…

모듈 번들러가 필요한 이유와 Webpack의 번들링 방식

JavaScript 프레임워크인 React, Vue, Svelte, Angular 등을 사용하다 보면 모듈 번들러(module bundler)는 필수적으로 언급되는 내용이다. 모듈 번들러는 JavaScript 모듈을 브라우저에서 실행할 수 있는 단일 JavaScript 파일로 묶는…