프론트엔드 썸네일형 리스트형 ESLint custom rule(plugin) 만들기 키워드: eslint, custom rule, eslint plugin, spellcheck, generator-eslint, Yeoman, AST 상황 프로젝트에서 자주 쓰이는 단어들이 있는데, 디자이너에게 전달받은 문구에 오타가 있는 경우가 잦다. Lint를 이용하여 코드 레벨에서 오타를 잡아낼 수 있으면 좋겠다고 생각했다. IDE에 사전을 등록하는 기능은 있지만, 오타를 감지하고 수정해주는 rule까지는 설정할 수 없기 때문에 custom rule을 만들어보기로 한다. 해결 과정 eslint custom rule을 만들 수 있는 generator-eslint package를 이용하기로 한다. (https://www.npmjs.com/package/generator-eslint) README 대로 Y.. 더보기 iframe으로 Vue to React Migration 준비하기 키워드: vue to react migration, iframe, postMessage, contentWindow, window.parent 상황 Vue2로 작성된 프로젝트가 있다. 프로젝트의 복잡성, 인수인계, 유지보수 등을 고려하여 React로 migration하기로 결정했다. 한 번에 옮기기엔 거대한 프로젝트이므로, 기존 로직을 유지하면서 점진적으로 migration하고자 한다. 해결 과정 기존 Vue 로직을 그대로 유지하면서 migration하는 방법은 iframe을 이용하는 것이다. React 프로젝트를 새로 만들어 특정한 기능을 만든 후, 해당 기능만 Vue에서 iframe으로 가져오면 된다. Vue와 React 프로젝트를 development mode로 실행할 경우, 각각 :8080(Vue).. 더보기 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_modu.. 더보기 React 18 useDeferredValue로 성능 최적화하기 프로젝트: tracking map 키워드: react v18, useDeferredValue, interruptible rendering, rendering blocking 상황 react 18에서 새로 나온 useDeferredValue hook을 사용해보고 장점을 알아본다. 실제 프로젝트에 적용하여 렌더링 성능 최적화를 확인한다. 해결 과정 1 먼저 useDeferredValue hook을 체험해보기 위해 간단한 코드를 작성한다. 아래 코드는 input element에 value를 입력할 때마다, boxes를 새로 연산하여 렌더링하는 코드이다. // Test.tsx import React, { useState, useDeferredValue, useMemo } from 'react'; function.. 더보기 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 상황 1 Next.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 .. 더보기 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 {.. 더보기 이전 1 2 3 4 5 6 ··· 8 다음
