프론트엔드 개발

프론트엔드 개발

    CRA를 Vite로 마이그레이션 하기

    CRA를 Vite로 마이그레이션 하기

    차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재 시점으로 vite 는 4 버전대 이다. CRA(Create-React-App) 대신에 왜 vite 를 써야 하는지는 아래의 테스트 결과로 대신 하겠다. 테스트 👨‍🔬 CRA vs vite 회사 내 프론트엔드 프로젝트를 로컬 환경에서 cra, vite로 각각 start, build 시도 CRA (현재) App Start Time : (대략 3.6초 ?) webpack 5.74.0 compiled successfully in 3593 m..

    리액트에서 외부 링크 관리하기

    리액트에서 외부 링크 관리하기

    리액트에서 외부 링크를 열어야 하는 경우 당연히 a 테그 만들어서 클릭했을때 열리게 하면 되는거 아니냐~ 라고 생각 하겠지만, 서비스 만들다 보면 엄청 많은 경우의 수가 발생한다. 일단 링크의 수가 수십 개가 넘어가면 관리가 안된다. 링크가 자주는 아니더라도 가끔 바뀌더라도 찾아서 변경하는게 여간 귀찮은 일이 아니다. 만약에 다른 서비스 안에 들어가는 웹뷰로 서비스를 한다면? 브라우저 창을 열 수 없다. Iframe 등을 이용해서 우리 서비스 내부에서 링크 내용을 띄워야 한다. 공개망 / 사설망 둘다 지원해야하는 서비스라면? 사설망에서는 브라우저를 열 수 없다. 미리 외부 링크의 문서 내용을 HTML 로 변환해두던가, 내부 서버를 통해 다운로드 받을 수 있게끔 해줘야 한다. 해결 방법 일단 흩어진 링크들..

    리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기

    리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기

    리액트에서 마우스가 브라우저 창 밖에 있는지 감지하고 싶다면 mouseenter, mouseleave 이벤트를 등록하여 hover 상태롤 확인하는 hook을 추가하면 간단하게 감지할 수 있다. 참고로 document.body 의 이벤트로 등록하여, html 의 body를 기준으로 마우스가 enter 인지 leave 인지로 판단해야 하는데 이것을 body가 아니라 현재 컴포넌트를 기준으로도 할 수는 있지만, 현재 컴포넌트가 자주 리렌더링이 되는 컴포넌트라면 예상했던 모습과 많이 다르게 동작할 수 있다. 계속 깜빡깜빡 거리는 식으로 동작할 수 있기 때문에, 어차피 창 전체를 기준으로 동작하는 기능이라면 body를 기준으로 하는게 편하다... // useHoverWindow.ts import { useEffe..

    리액트 장치 유형 감지하기

    리액트 장치 유형 감지하기

    react-device-detect 라이브러리를 사용하면 브라우저 유형 (크롬, 파이어폭스, 사파리, 오페라, IE, Edge) 장치 유형 (모바일, 테블릿, 스마트TV, 콘솔, 웨어러블, 임베디드, 모바일사파리, 아늗로이드, 윈도우폰, IOS) 등의 확인이 가능하다. 그러나 안되는 것도 있다. 테블릿에서 파이어폭스 브라우저를 사용하면 테블릿이 아닌 Desktop로 인식한다. 그래서 어쩔 수 없이 mobile-detect 라이브러리를 섞어 쓰던가 아니면 이 라이브러리로 교체해야 한다. 일단 md.ts 파일을 만든다. // md.ts const MobileDetect = require('mobile-detect') export const md = new MobileDetect(navigator.userAg..

    React Query onError 가 동작하지 않는 이슈

    React Query onError 가 동작하지 않는 이슈

    https://stackoverflow.com/questions/73427408/react-query-onerror-not-executing-on-thrown-error React-query onError not executing on thrown Error Query: const { data: post, isError, error } = useQuery( ['fetch-post', params], () => fetchPost(params!.postId), { refetchOnMount: true, onError: (err) =>... stackoverflow.com 현재 위와 비슷한 상황에 고통받고 있습니다... API 요청시 Axios Intercepter 를 사용하는 Axios Instance 로 ..

    리액트 URL Hash기반의 서브페이지 관리 체계 도입

    우연히 서핏에서 리액트 관련 블로그 글을 보다가 NHN의 TOAST 기술 블로그에서 Jotai 라이브러리에 있는 atomWithHash 로 모달 상태를 URL과 동기적으로 관리하는 방법에 대해 소개하는 글을 보았습니다. 회사에서 상태관리 라이브러리로 Redux Store를 사용하고 있어서 Jotai 를 같이 사용할 순 없을 것 같았지만, URL로 상태관리를 한다는 컨샙 자체가 저에겐 상당히 신선했습니다. 거미줄 처럼 엮여있는 지저분한 수 많은 상태 관리용 boolean 값을 모두 없애버릴 수 있는 절호의 기회라는 생각이 가장 크게 들었고, 기존의 라우터와는 독립적으로 동작하기 때문에 라우터나 기존의 코드 사이에 코드를 끼워넣지 않아도 된다는 점이 큰 매리트라고 생각이 되어서 당장 회사에 가서 도입해볼 마..

    redux persist : 새로 고침 시에도 상태 유지

    redux persist : 새로 고침 시에도 상태 유지

    요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStorage와 sessionStorage는 브라우저 내에 키..

    React RTK Query 캐시

    React RTK Query 캐시

    캐시 태그 시스템 여러 컴포넌트에서 Query Endpoint를 구독하여 Request하는 경우 동일한 요청이 여러 번 있을 때 한 번만 서버에 Request한 뒤 캐시 데이터를 돌려씀 컴포넌트1 : fetchData() → 서버로 데이터 Request 컴포넌트2 : fetchData() → 캐시 데이터 사용 컴포넌트3 : fetchData() → 캐시 데이터 사용 다른 Query여도 캐시 Tag값이 같다면 같은 데이터를 사용하는 것임 postData1(), providesTags=["Tag1"] postData2(), providesTags=["Tag1"] 무효화를 통해 캐시 데이터를 자동 refetch 받아오거나 제거할 수 있음 // 이 부분은 좀더 공부가 필요함!! postData1(), inval..

    React Redux Tookit 사용 방법

    React Redux Tookit 사용 방법

    본 게시물에서는 Redux Toolkit 을 사용한 버전으로 예시를 들어보겠다. 리덕스를 훨씬 편한 방법으로 사용할 수 있는 확장팩이라고 생각하면 된다. Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 리덕스에 관해서는 아래 게시물을 보고 이해하고 오면 된다. React Redux (리액트 리덕스) 리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller..

    리액트 이론 정리 (JSX, Component, Virtual DOM)

    리액트 이론 정리 (JSX, Component, Virtual DOM)

    리액트의 3가지의 대표적인 특징 JSX 문법 Component 기반 Virtual DOM 1. JSX 문법 소개 HTML을 마치 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법 HTML 문법을 JavaScript 코드 내부에 쓴 것이다. 빌드 시 Babel에 의해 자바스크립트로 변환된다. React 17릴리즈(대략 2020년 9월 22일) 이전버전은 React를 import 하지 않으면 JSX를 이해하지 못함 import React from 'react'; 규칙 속성은 따옴표로 감싼다. 반드시 태그를 닫는다. 모든 태그는 Self-closing 이 가능하다. 변수값은 중괄호로 감싸서 표현 반드시 div/Fragment태그로 감싸진 형태로 써야한다. return ... // did work cons..