TroubleShooting
1.VUE 실행하기(mac)
npm run serve 작동안됨\->실패node-scss 버전문제=> 해결방안 모색3을 통해 npm install 문제해결 후,치니 VUE 실행 성공!npm downgrade 적용이 안됨\->경로문제인건가,,,해결 못함..
2.Axios로 대량의 API 요청을 보낼 때 만난 socket hang up 해결하기
최근 약 2만 개 정도 되는 행정구역 데이터를 OpenWeatherMap API를 통해 좌표(위도, 경도)로 변환해야 하는 작업이 있었다.데이터가 좀 많긴 했지만, for문을 돌려 요청을 보내면 금방 끝날 단순한 작업이라고 생각했다. 그래서 호기롭게 코드를 짜서 행정구
3.이미지 스프라이트(Image Sprite): HTTP 요청 90% 줄이기
프론트엔드 개발을 공부하며 리액트 같은 프레임워크도 중요하지만, 결국 '브라우저가 리소스를 어떻게 받아오고 렌더링하는가'에 대한 기본기가 성능을 좌우한다는 걸 깨달았다. 오늘은 프로젝트 배포 후 겪었던 '아이콘 깜빡임' 현상을 해결하기 위해 이미지 스프라이트 기법을 도
4.성능 최적화를 위해 Next.js에서 캐싱 잘 활용하기
로컬에서는 모든 게 완벽했다. 버튼을 누르면 즉각 반응했고, 데이터는 늘 최신이었다. 개발자로서 '기능 구현'이 끝났으니 내 할 일은 다 했다고 생각했다. 하지만 배포 후, 실제 사용자들이 들어오고 트래픽이 몰리는 프로덕션 환경을 마주했을 때가 되니 "코드가 에러 없
5.img 태그 하단 공백과 border-radius 클리핑 문제 해결하기
웹 퍼블리싱 작업을 하다 보면 이미지 컨테이너에 border-radius를 적용하고 overflow: hidden을 주었는데도 아래쪽 모서리가 둥글게 잘리지 않거나 미세한 공백이 생기는 현상을 마주한다. 이미지 아래가 잘린 것처럼 보이기도 하고 컨테이너와 이미지 사이에
6.대용량 트래픽 성능 최적화(1)-Zustand의 useShallow
최근 대규모 데이터 환경에서도 매끄럽게 동작하는 서비스를 만들어보기 위해 토이 프로젝트로 칸반 보드를 개발하며 1,000개 이상의 카드 컴포넌트를 목업으로 생성해 테스트를 진행했다. 데이터가 적을 때는 끊김 없이 동작하던 기능들이 카드 개수가 늘어나자 렌더링 지연이
7.대용량 트래픽 성능 최적화(2)-메모이제이션(React.memo, useMemo, useCallback)
지난 글에서는 Zustand의 useShallow를 활용하여 전역 상태 구독 시 발생하는 불필요한 리렌더링을 일차적으로 제어해 보았다. 하지만 스토어 레벨의 최적화를 마친 후에도 1,000개 이상의 카드가 렌더링된 환경에서 DnD 기능을 사용할 때 스크롤이 끊기는 렌더
8.대용량 트래픽 성능 최적화(3)-@tanstack/react-virtual의 가상화
지난 두 편의 글을 통해 Zustand의 useShallow와 React의 메모이제이션(React.memo, useCallback, useMemo) 기법을 적용하여 불필요한 컴포넌트 리렌더링을 제어했다. 상태가 변경될 때마다 전체가 렌더링되던 문제는 해결했지만, 1,0
9.대용량 트래픽 성능 최적화 (4) - 가상화 환경에서의 접근성(a11y) 개선
렌더링 성능을 개선하기 위해 가상화를 도입하면서 예상치 못한 문제가 발생했다. 화면에 보이지 않는 수많은 카드들이 DOM에서 완전히 제거되면서 스크린 리더 사용자가 리스트의 전체 구조를 파악할 수 없게 된 것이다. 화면 밖의 카드에는 접근조차 불가능했고 컬럼과 카드 간