마일리지 서비스가 마일스톤 서비스로 확장됨에 따라 ‘상장 아카이빙 기능’을 추가하게 되었습니다. 이 과정에서 기존의 역할 기반 디렉토리 구조로는 점점 확장성과 유지보수에 한계를 느끼게 되었고,도메인 기반 구조로 전환하게 되었습니다.이 글에서는 리팩터링을 하게 된 배경, 구조 설계 방식, 그리고 실무 적용에서 얻은 인사이트를 공유합니다.💡 기존 구조의 문제초기에는 흔히 사용하는 역할 기반 구조로 프로젝트를 관리했습니다:src/├── components/├── hooks/├── api/├── pages/ 이 구조는 마일리지 서비스 단일 기능을 개발할 때는 전혀 문제가 없었습니다.하지만 시간이 지나며 서비스가 마일리지 관리뿐만 아니라 상장, 프로젝트, 포트폴리오 관리 등으로 확장되면서 문제가 드러났습니다.특..

🦋 문제 상황: Suspense vs 부드러운 UX 프론트엔드를 설계하다 보면 이런 고민에 부딪히게 됩니다. "Suspense를 써서 선언형 코드를 유지하고 싶은데, 데이터 갱신할 때마다 스켈레톤(fallback)이 깜빡이는 게 UX적으로 별로다…" 제가 원하는 건 "새로운 데이터를 받아오기 전까지는 기존 데이터를 유지하며 부드럽게 화면을 보여주는 것"이었습니다. 그런데 React Query v5의 useSuspenseQuery에서는 기존 데이터 유지(placeholderData)나 부분 로딩 관리(isFetching) 같은 기능이 사라졌습니다. 왜 그럴까요? 그리고 저는 어떤 선택을 해야 했을까요? 그래서 이렇게 고민하게 됩니다.Suspense를 유지하고 UX 깔끔함을 포기할까?아니면 부드러운 U..

최근 Yarn 1 과 Yarn 4(Berry) 를 둘 다 사용해야하는 상황이 있었습니다. 예전에도 비슷한 일이 있었는데, 그땐 그냥 Yarn 1을 잠깐 disable 시켜두고, 프로젝트 끝나면 다시 복구하는 식으로 넘어갔어요. 😅하지만 이번에는 두 프로젝트를 병행으로 가져가보고 싶었고, 더 깔끔하게 해결할 방법이 없을까? 싶어서 제대로 한번 파봤습니다!이번 글에서는👉 어떤 문제가 있었는지,👉 어떻게 해결했는지정리해봤습니당 ! ✅ 상황: 두 개의 프로젝트, 두 개의 Yarn기존 프로젝트: Yarn 1.x 사용 중→ yarn.lock, node_modules 폴더로 관리새 프로젝트: Yarn 4.x (Berry) 사용→ package.json에 "packageManager": "yarn@4...

Toaster Booth에서 Rive 애니메이션을 도입하던 중,로컬에서와 다르게 배포된 화면에서 첫 로딩 시 30초 이상 아무것도 안 보이는 화면을 마주하게 되었다. 알고 보니 원인은 .wasm 파일의 지연 로딩 때문이었다. 공식 문서와 Alex Barashkov의 글을 참고해,WebAssembly Preload 전략을 도입했고, 그 결과 렌더링 속도가 눈에 띄게 개선되었다. 🎯 문제 상황: Rive 애니메이션이 느리게 뜬다Rive는 .riv 애니메이션 파일과 함께 .wasm 파일(WebAssembly)을 사용한다.기본적으로 아래 주소처럼 unpkg CDN에서 로드된다: 하지만 이 방식에는 다음과 같은 단점이 있다:unpkg CDN 응답 속도 지연브라우저 초기 요청 수 증가캐시가 없을 경우 모바일에서 ..

1. 문제의 시작: 기존 dom-to-image 라이브러리의 한계 🧐최근 "토스터 부스(Toaster Booth)" 프로젝트에서 사용자가 찍은 네컷 사진을 다운로드할 수 있는 기능을 구현했습니다. 처음 이슈 발생은 화질 이슈로 시작했습니다. 촬영한 결과물을 다운로드했을 때 촬영본보다 현저히 화질이 떨어지는 문제가 있었어요. 그래서 화질 개선을 위해 당시 사용 중이던 라이브러리 리드미를 다시 한번 정독하던 중이었습니다. 처음에는 dom-to-image 라이브러리를 사용했는데, 이 라이브러리는 대부분 잘 작동했지만, 사파리(Safari) 브라우저에서 이미지 다운로드가 제대로 동작하지 않는 문제가 발생한다는 걸 깨달았어요. 😱 초반 MVP 출시 당시 모바일 버전을 제외했다 보니 확인하지 못했던 부분이었습..

토스터 작업 중 모바일에서만 문제가 있어서 모바일일 시 잠시 기능을 막기로 결정했다.그리고 모바일 디바이스인지 확인하려고 아래처럼 간단한 훅을 만들었다. const useIsMobileDevice = () => useMemo(() => /Mobi|Android|iPhone|iPod/i.test(navigator.userAgent), []); 이 훅은 navigator.userAgent에 Mobi, Android, iPhone 등이 포함되어 있는지를 기준으로 모바일 여부를 판단한다. 이 훅을 사용하자 모바일에서는 숨기고 싶은 기능이 잘 숨겨졌다. 그런데 이상하게도 노트북에서 크롬 개발자 도구의 Responsive 모드로 돌리기만 해도 모바일로 인식되었다. 분명 화면 사이즈만 조금 줄였을 뿐인데도 말이다...

MSW(Mock Service Worker)는 개발 및 테스트 환경에서 실제 서버와의 API 요청을 모킹 할 수 있는 아주 강력한 도구입니다.백엔드 서버가 아직 준비되지 않았거나, API 응답에 의존하지 않고 프론트엔드 작업을 진행하고 싶을 때 MSW는 큰 도움이 됩니다.MSW는 클라이언트(브라우저)와 Node.js 환경에서도 사용할 수 있어 매우 유연하게 활용할 수 있어요.  왜 MSW를 선택했을까요?저희 마일리지 서비스 팀은 총 3명, 프론트엔드 1명과 백엔드 2명이 함께하는 작은 팀이었어요.특히, 백엔드 팀원들이 처음으로 백엔드 개발을 시작한 학생들이다 보니 API가 완성되기 전에 프론트엔드 작업을 병렬로 진행할 필요가 있었습니다. 하지만 API가 아직 구현되지 않은 상황에서 프론트엔드에서는 어떻게..

CSS 및 CSS-in-JS 코드의 일관성을 유지하고 자동으로 정렬하기 위해 stylelint를 설정하는 과정을 진행하던 중 작성되었습니다. 협업을 통해 코드를 짜다보면 팀 내 코드 스타일을 통일하는 과정이 중요하다. 그래서 주로 pretteir 나 lint를 사용하는데 stylelint 도 그중 하나로 팀 내 코드 스타일을 통일하고 코드 품질을 높이는 데 도움을 준다. 1. Stylelint란? Stylelint는 스타일시트(CSS, SCSS, CSS-in-JS 등)를 분석하고 오류를 찾아내는 린터(Linter)이다. 이를 사용해서 코드 품질을 유지하고 코드 스타일을 통일할 수 있다. 제공하는 주요 기능:문법 검사: CSS 및 SCSS, CSS-in-JS에서 발생할 수 있는 문법 오류를 자동으로 찾기...

리액트 딥 다이브 정리 스터디 **Tanstack-Query의 QueryClient와 캐싱** 정리  설치 방법npm i @tanstack/react-query+) 여담으로 이전에는 그냥 react-query 였다. 이후 리액트 이상으로 사용 가능하게 업데이트 되며 이름이 변경되었다. (뷰, 넥스트…)세팅 방법앱의 최상위에서 QueryClientProvider로 앱을 감싸주기새로운 QueryClient인스턴스를 생성한 후, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다.import { QueryClient, QueryClientProvider } from '@tanstack/react-query';...const queryClient = ne..