한땀한땀

안녕하세요, 이번 아키텍처 탐험기 시리즈에서는 거대한 프론트엔드 모노리스(Monolith) 구조에서 벗어나, 마이크로 프론트엔드(MFE) 아키텍처를 성공적으로 구축한 여정을 공유하고자 합니다. 총 3부에 걸쳐 연재될 이 시리즈의 첫 번째 이야기는 모든 것의 기반이 되는 모노레포(Monorepo) 도입기입니다. 배경: 두 마리 토끼를 잡아야 했다 MFE 아키텍처 도입의 전제는 '독립성'이었습니다. 각 기능 앱은 독립적으로 배포되어야 했습니다. 하지만 동시에 디자인 시스템, 공통 유틸, 타입 정의 같은 공유 모듈은 단일 소스(Single Source of Truth)로 일관되게 관리되어야 했습니다. 이 두 가지 상충하는 요구사항을 어떻게 동시에 만족시킬 것인가가 첫 번째 과제였습니다. 고민의 과정: 대안들과..

Node.js 환경에서 개발을 해본 사람이라면 대부분 알고 있을 법한 기본 중 하나는, process.env.NODE_ENV와 같은 환경 변수를 직접 사용하는 것에 대한 이해이다. 하지만 나는 그 기본을 잠시 망각했고, 그로 인해 꽤 많은 시간을 디버깅에 허비하게 되었고, 그 과정에서 중요한 교훈을 얻었다. 당시 나는 Module Federation을 적용해 마이크로 프론트엔드 구조를 구성하고 있었고,개발 환경에서는 Hot Reload 이후 변경 사항 반영이 느려지는 문제가 있었다.그래서 로컬 환경에서는 Module Federation이 아예 동작하지 않도록 조건 분기를 만들고자 했다. 문제는 그 조건 분기에서 비롯되었다.process.env.NODE_ENV === 'development' 같은 구문을 ..

문제 상황개인프로젝트 진행 중 storybook을 설정하던 중 다음과 같은 오류를 마주치게 되었습니다.ReferenceError: require is not defined at getAbsolutePath (/.storybook/main.ts:10:18) # 프레임 워크 설정 관련 오류 B_CORE-COMMON_0003 (CouldNotEvaluateFrameworkError): Could not evaluate the './.storybook/@storybook/react-vite' package from the 'framework' field of Storybook config. 이번 글에서는 위 문제를 해결한 과정을 공유합니다.require is not defined 오류글 도입부에서 ..

웹 애플리케이션에서 JWT(JSON Web Token)를 사용한 인증은 널리 채택된 방식입니다.그러나 실제 프로덕션 환경에서는 토큰 만료, 갱신, 에러 핸들링 로직에서 다양한 문제가 발생할 수 있습니다. 최근 회사 프로젝트에서는 로그인이 자주 풀리는 문제가 보고되었습니다.확인 결과, 인증 로직이 제대로 동작하지 않아 사용자가 빈번하게 로그아웃되는 현상이 발생했습니다. 401 에러 핸들러를 개선하면서 로그인이 풀리는 문제를 해결하였고,이 과정에서 인증 관련 로직을 수행하는 커스텀 프로바이더(AuthProvider) 내의 useEffect 의존성 문제로 인해 토큰 갱신 요청이 중복 발생하는 현상도 발견했습니다.토큰 갱신 중복요청 문제는 구글 크롬 DevTools의 Network 탭을 통해 확인되었으며, 의존..

Biome이란?들어가기 앞서 Biome에 대해 제가 이해하고 있는 선에서 대략적인 설명을 하고자 합니다.Biome은 JavaScript/TypeScript 생태계를 위한 올인원 도구입니다. 기존에 따로 사용하던 ESLint, Prettier, Babel, Stylelint 등을 하나의 빠르고 일관된 툴로 대체할 수 있는 것을 목표로 합니다.LintingFormattingCode Transformation빠른 실행 속도 (Rust 기반)간결한 설정 방식Biome의 개념이나 구성 요소에 대한 더 자세한 내용은 공식 문서를 참고하세요. 배경: ESLint + Prettier에서 Biome으로기존에 사용하는 ESLint와 Prettier 대신 Biome을 도입해 보기로 했습니다.하나의 도구로 Lint + For..

최근에 서비스에서 리츠 관련 콘텐츠의 URL 구조를 바꾸는 작업을 했어요.생각보다 단순한 디렉토리 변경이 아니라 여러 가지를 고려해야 했고, 결국엔 Next.js의 Middleware 기능으로 해결했습니다.비슷한 상황 있는 분들께 도움이 될까 싶어 정리해봅니다. 배경/reits/kr/*/reits/*서비스 초기에 대충(?) reits라는 폴더 아래에 한국 리츠 관련 콘텐츠도 넣고, 해외 콘텐츠도 넣고… 그때그때 편하게 구성했죠.그런데 시간이 지나면서 reits라는 단어 자체가 너무 범용적이라는 걸 깨달았어요.“이게 과연 우리가 말하고 싶은 서비스의 정체성을 잘 담고 있을까?”라는 고민이 들기 시작했고,결국 기존 리츠 콘텐츠를 좀 더 명확하고 집중된 서비스로 개편하게 됐습니다.이름도 리츠포커스로 리브랜딩하..