프론트엔드 썸네일형 리스트형 JENNIFER Front로 웹사이트 모니터링하기 키워드: jennifer front, monitoring, error logging, ajax error, js error 상황 웹사이트를 이용하던 유저로부터 버그 제보가 들어왔을 경우, Server Error이거나 반복적인 버그인 경우 추적 및 해결이 간단하지만 프론트엔드 단에서 간헐적으로 발생하거나 우연히 발생한 버그인 경우 추적이 어렵다. 웹사이트에서 발생하는 network error 또는 JS error를 로깅할 필요가 있다. 해결 방법 쉽고 빠르게 웹사이트에 적용할 수 있는 모니터링 툴을 간단하게 소개하고자한다. 바로 제니퍼 프론트(https://front.jennifersoft.com/about/ko/)이다. 구글 계정으로 로그인을 하고, 추적 코드를 복사한다. 추적 코드를 웹사이트의 필요한 .. 더보기 package.json에서 yarn resolutions 적용하기 프로젝트: 채식 지도키워드: resolutions, yarn selective dependency resolutions, deduplicate dependencies, package.json, react-window상황프로젝트에서 react-window 라이브러리를 사용하고자한다.react-window의 type definitions package인 '@types/react-window'를 설치한다.react-window를 사용할 때 TS error가 발생한다.해결 과정먼저 오류 메시지를 자세히 읽어본다.Type 'React.ReactNode' is not assignable to type 'import("/.../node_modules/@types/react-window/node_modules/@typ.. 더보기 React 18 useDeferredValue로 성능 최적화하기 프로젝트: tracking map키워드: react v18, useDeferredValue, interruptible rendering, rendering blocking상황react 18에서 새로 나온 useDeferredValue hook을 사용해보고 장점을 알아본다.실제 프로젝트에 적용하여 렌더링 성능 최적화를 확인한다.해결 과정 1먼저 useDeferredValue hook을 체험해보기 위해 간단한 코드를 작성한다.아래 코드는 input element에 value를 입력할 때마다, boxes를 새로 연산하여 렌더링하는 코드이다. // Test.tsximport React, { useState, useDeferredValue, useMemo } from 'react';function Test() .. 더보기 React 18 Suspense 기능 알아보기(feat. SWR, msw) 키워드: react v18, suspense, ErrorBoundary, SWR, msw, mock API 상황 React 18에 새로 추가된 Suspense와 기존의 ErrorBoundary 기능을 조합하여 사용해보고, 그 장점을 파악한다. 해결과정 Suspense를 사용하기 앞서, data fetching과 렌더링을 수행하는 Block 컴포넌트를 작성한다. // Block.tsx import useSWR from 'swr'; import React from 'react'; const fetcher = (url: string) => fetch(url).then((res) => res.json()); function Block({ label }: { label: string }) { const { dat.. 더보기 Next.js API routes CORS 대응하기 + hook 이중 호출 방지하기 프로젝트: tracking map키워드: Next.js, api routes, CORS, next.config.js, rewrites, strict mode, double-invoking상황 1Next.js에서 Naver Maps Directions 5 서비스의 driving(길찾기) API를 호출해야한다.API를 Next.js의 API routes를 이용하여 분리하고, CORS에도 대응하고자 한다.해결 방법 1먼저 api/driving.ts 파일을 만들어 API를 분리한다.(참고: start와 goal parameter를 입력값으로 하면, 네이버 길찾기 API를 이용하여 출발지와 목적지에 대한 paths(좌표들의 배열)를 return 하는 로직이다.) // Next.js API route suppo.. 더보기 safari, iPhone 예외 상황 대응하기(Navigation Gestures, new Date) 프로젝트: vegimap, tracking map 키워드: safari, iPhone, navigation gestures, date constructor, cross browsing 상황 1 vegimap은 지도가 화면 전체를 차지하고 있다. iphone에서 touch gesture로 지도를 이동하다보면 navigation gesture가 작동하여 페이지가 이전/이후로 이동해버릴 때가 있다. 지도 타일을 터치할 때는 navigation gesture가 작동하지 않도록 하고자 한다. 해결방법 1 특정 DOM element를 touch했을 때, navigation gesture가 실행되지 않도록 하는 custom hook을 작성한다. // useBlockNavigationGesture.ts import {.. 더보기 Web Worker로 setTimeout을 백그라운드에서 유지하기 프로젝트: tracking map(유동인구분석 지도) 키워드: web worker, setTimeout, inactive tabs 상황 setTimeout으로 특정 delay 시간 이후 동작해야하는 코드가 있다. 탭을 유지할 때는 버그가 일어나지 않지만, 다른 탭으로 이동(현재 탭은 비활성화)했다가 돌아오면 원하는 타이밍보다 훨씬 늦게 setTimeout이 실행되는 버그가 있다. 해결방법 setTimout이 의도와 다르게 동작하는 것은 브라우저의 정책 때문이다. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified 부하를 줄이기 위해서 탭이 inactive 될 때 delay 시간.. 더보기 Hammer.js로 swipe 이벤트 감지하기 프로젝트: 채식 지도 키워드: Hammer.js, swipe event, mobile swipe gesture, touch-action 상황 뒤로가기, Sheet 내리기, Sheet 올리기 동작은 버튼을 눌러 실행할 수 있다. (뒤로가기는 ' 더보기 이전 1 2 3 4 5 6 ··· 8 다음
