
npm run serve 작동안됨\->실패node-scss 버전문제=> 해결방안 모색3을 통해 npm install 문제해결 후,치니 VUE 실행 성공!npm downgrade 적용이 안됨\->경로문제인건가,,,해결 못함..

최근 약 2만 개 정도 되는 행정구역 데이터를 OpenWeatherMap API를 통해 좌표(위도, 경도)로 변환해야 하는 작업이 있었다.데이터가 좀 많긴 했지만, for문을 돌려 요청을 보내면 금방 끝날 단순한 작업이라고 생각했다. 그래서 호기롭게 코드를 짜서 행정구
프론트엔드 개발을 공부하며 리액트 같은 프레임워크도 중요하지만, 결국 '브라우저가 리소스를 어떻게 받아오고 렌더링하는가'에 대한 기본기가 성능을 좌우한다는 걸 깨달았다. 오늘은 프로젝트 배포 후 겪었던 '아이콘 깜빡임' 현상을 해결하기 위해 이미지 스프라이트 기법을 도
로컬에서는 모든 게 완벽했다. 버튼을 누르면 즉각 반응했고, 데이터는 늘 최신이었다. 개발자로서 '기능 구현'이 끝났으니 내 할 일은 다 했다고 생각했다. 하지만 배포 후, 실제 사용자들이 들어오고 트래픽이 몰리는 프로덕션 환경을 마주했을 때가 되니 "코드가 에러 없
웹 퍼블리싱 작업을 하다 보면 이미지 컨테이너에 border-radius를 적용하고 overflow: hidden을 주었는데도 아래쪽 모서리가 둥글게 잘리지 않거나 미세한 공백이 생기는 현상을 마주한다. 이미지 아래가 잘린 것처럼 보이기도 하고 컨테이너와 이미지 사이에

최근 대규모 데이터 환경에서도 매끄럽게 동작하는 서비스를 만들어보기 위해 토이 프로젝트로 칸반 보드를 개발하며 1,000개 이상의 카드 컴포넌트를 목업으로 생성해 테스트를 진행했다. 데이터가 적을 때는 끊김 없이 동작하던 기능들이 카드 개수가 늘어나자 렌더링 지연이

지난 글에서는 Zustand의 useShallow를 활용하여 전역 상태 구독 시 발생하는 불필요한 리렌더링을 일차적으로 제어해 보았다. 하지만 스토어 레벨의 최적화를 마친 후에도 1,000개 이상의 카드가 렌더링된 환경에서 DnD 기능을 사용할 때 스크롤이 끊기는 렌더

지난 두 편의 글을 통해 Zustand의 useShallow와 React의 메모이제이션(React.memo, useCallback, useMemo) 기법을 적용하여 불필요한 컴포넌트 리렌더링을 제어했다. 상태가 변경될 때마다 전체가 렌더링되던 문제는 해결했지만, 1,0

렌더링 성능을 개선하기 위해 가상화를 도입하면서 예상치 못한 문제가 발생했다. 화면에 보이지 않는 수많은 카드들이 DOM에서 완전히 제거되면서 스크린 리더 사용자가 리스트의 전체 구조를 파악할 수 없게 된 것이다. 화면 밖의 카드에는 접근조차 불가능했고 컬럼과 카드 간