문제정의 및 원인 파악 글https://hyorish03.tistory.com/22 [React] Geolocation API의 느린 문제 (1) - 문제정의😫 문제 현상 설명Geolocation의 Watchposition 훅을 사용해 위치 변화가 감지될 때마다 현 위치를 새로 받아와 보여주는데새로고침을 하거나 초기 접속 시 파란 빈 화면이 5초 이상 나타났습니다. •hyorish03.tistory.com  원인Geolocation API + React + 크로미움 브라우저 ⇒ 5초 이상의 지연이 발생.Geolocation API의 watchPosition + 바닐라 JS (브라우저 상관X) ⇒ 5초 이상의 지연이 발생.원인 탐색 과정에서 Geolocation API가 느리다는 것을 알게되었습니다. 따..

문제 현상 설명Geolocation의 Watchposition 훅을 사용해 위치 변화가 감지될 때마다 현 위치를 새로 받아와 보여주는데 새로고침을 하거나 초기 접속 시 파란 빈 화면이 5초 이상 나타났습니다. • 크롬 환경                                                                                               • 사파리 환경  원인 파악1. 내가 코드를 잘못 짠 것인가 ?그럴리가 없었습니다..MDN의 예제 코드를 그대로 사용했기 때문에 제 코드의 문제는 아니라고 판단했습니다.2. 해당 페이지 성능 문제인가 ?해당 페이지에는 정말 많은 컴포넌트와 비동기 작업이 많이 일어났기 때문에 단순 성능 문제일 수 있다 판단했습니다.따라서..

프론트엔드 개발자의 슬픔프론트엔드라는 분야 특성상 백엔드 API가 나오지 않는다면 구현해둔 기능을 테스트하기도, 내가 짠 UI가 제대로 나오는지 확인도 힘듭니다. 아래 사진처럼 모든게 계획했던 대로 백엔드가 프론트엔드 개발을 시작하기 전에 모든 API를 개발해두면 좋겠지만.. 아무래도 현실적으로는 불가능하죠 😅 뿐만 아니라 백엔드 API가 변경되는 경우도 정말 많습니다. 실제로 제가 프로젝트를 진행하며 API의 End Point가 바뀐다거나, 응답값이 변경되어 프론트엔드 코드를 수정해야 되는 상황이 빈번히 발생했습니다. API First DesignAPI FirstDesign 이란 서비스가 개발 / 통합 / 분리 시 endpoint의 역할이 되는 API를 개발 시 고려하는 우선 순위 1위로 두는 것입니..

Vite의 기본 marginvite로 초기 프로젝트를 생성하면 기본적으로 margin이 8px 생긴다이를 없애려면 index.css 에 코드를 추가해야한다.#root{ // 기존에 쓰인 코드}body{ margin: 0,}이렇게 해주면 기본적으로 적용된 margin이 없어진다