한땀한땀

문제 상황개인프로젝트 진행 중 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라는 단어 자체가 너무 범용적이라는 걸 깨달았어요.“이게 과연 우리가 말하고 싶은 서비스의 정체성을 잘 담고 있을까?”라는 고민이 들기 시작했고,결국 기존 리츠 콘텐츠를 좀 더 명확하고 집중된 서비스로 개편하게 됐습니다.이름도 리츠포커스로 리브랜딩하..

글을 작성하는 이유최근 회사에서 이벤트 페이지를 제작하면서 Buzzvil 광고를 연동할 일이 생겼다.Buzzvil에서 제공하는 공식 JavaScript 가이드를 참고하면 기본적인 연동 예시는 잘 나와 있다.하지만 문제는, React 환경에서 어떻게 이 코드를 넣고, 어떤 타이밍에 초기화하고, 어떤 시점에 track을 호출해야 하는지에 대한 자료가 거의 없다는 것.그래서 이번 글에서는 React 기반 웹 애플리케이션에서 Buzzvil을 연동하는 방법을 실제 사용 예제와 함께 정리해보려 한다.기본적인 연동 구조Buzzvil 연동은 두 가지 단계로 나눠져 있다.초기화 단계 (init) – 광고 랜딩 페이지에서 Buzzvil 스크립트를 초기화.전환 완료 단계 (track) – 사용자가 특정 행동(예: 신청 완료..

최근에 개인 포트폴리오 웹사이트를 만들면서 스타일 시스템을 Vanilla Extract로 정리해 보기로 했다. 처음에는 빠르게 UI를 만들어서 배포하는 데만 초점을 뒀는데, 개발을 진행하면서 점점 구조를 정리하고 싶은 욕심이 생겼다. 단순히 "이쁜 UI"를 만드는 걸 넘어서, 스타일을 하나의 체계로 관리해보면 어떨까 하는 생각에 디자인 시스템 구조를 잡기 시작했다. 그러다 보니 자연스럽게 더 큰 규모의 프로젝트—예를 들면 내가 준비 중인 영화 추천 서비스—에까지 확장할 수 있는 아이디어들도 떠오르고 있다. 이번 글에서는 내가 어떤 방식으로 Vanilla Extract 기반의 디자인 시스템을 구성했는지, 그리고 이걸 어떻게 확장 가능한 형태로 설계했는지를 공유해보려고 한다. 토큰과 유틸리티로 시작하는 디자..