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..

내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~!   PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..