분류 전체보기
-
[React] react-router v6 에서 Prompt 구현하기 :: 마이구미React 2022. 4. 17. 11:54
이 글은 네비게이션 가드라고 불리는 기능을 위한 Prompt 를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. 이 기능을 네비게이션 가드라고 부를 수 있다. react-router v6 를 기준으로 한다. 이전에는 v4 를 기준으로 작성한 적이 있다. (https://mygumi.tistory.com/358) 예제 코드 - https://codesandbox.io/s/ljn1r8 현재 기준으로react-router 의 버전은 6.x 까지 올라왔다. major 버전이 올라간 만큼 v5 에서 v6 로 마이그레이션 하는 과정은 수정이 좀 필요하다. 그 과정 중 네비게이션 가드..
-
[DOMPurify] XSS 공격 방지 :: 마이구미알아두면 좋은 라이브러리 2022. 3. 31. 21:19
이 글은 XSS 공격 방지에 도움을 줄 수 있는 라이브러리 dompurify을 다룬다. 바닐라 자바스크립트가 아닌 현재 개발 환경에서는 XSS 를 사실 대부분 신경을 크게 쓰지 않을 것이다. 흥미와 이해를 위해 React 를 조금 곁들였다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 XSS 공격은 간단하게 말하면, 사용자 브라우저에서 예상치 못한 자바스크립트 코드를 실행하여 악의적인 행동을 취하는 것이다. 대표적으로 사용자 브라우저에 존재하는 쿠키, 세션, 로컬스토리지 등의 값을 긁어가는 것이다. div.innerHTML = ''; div.innerHTML = ''; 바닐라 자바스크립트를 사용한다면, DOM 에 주입하기 위해 innerHTML..
-
[React] 중첩 라우터 언제 사용하는가? :: 마이구미React 2022. 3. 13. 22:12
이 글은 React 에서 중첩 라우터를 활용한 예제를 다룬다. React 에 국한되지 않고, 중첩 라우터는 어떤 경우에 사용하고 이점은 무엇인가? 를 다루게 된다. react-router-dom v6 을 기준으로 다룬다. react-router - https://reactrouter.com/docs/en/v6/getting-started/overview 특정 사용자 페이지가 있다. (/user) 그리고 사용자 페이지에는 프로필 정보와 계정 정보를 위한 각각의 탭이 존재한다고 가정해보자. 이것은 단순하게 구현하면 다음과 같다. const UserPage = () => { const [tab, setTab] = useState('profile'); return ( User : { name } setTab('..
-
[svgr] SVG 아이콘 컴포넌트 생성 :: 마이구미알아두면 좋은 라이브러리 2022. 1. 28. 22:56
이 글은 svg 아이콘과 관련된 라이브러리 SVGR 을 다룬다. 리액트에서 아이콘을 svg 파일로 관리하는 경우 도움을 줄 수 있는 라이브러리이다. 글에서 소개하는 예제들은 각 tag 를 checkout 을 통해 확인할 수 있다. 예제 - https://github.com/hotehrud/svgr-example 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 SVGR 은 svg 파일을 React 컴포넌트로 변환시켜주는 라이브러리이다. 원본 svg 와 svg 를 React 컴포넌트로 변환한 코드를 각각 확인해보자. // icon.svg // Icon.tsx import * as React from "react"; const SvgAc = (props..
-
[detect-port] 사용 가능한 포트 찾기 :: 마이구미알아두면 좋은 라이브러리 2022. 1. 4. 22:20
이 글은 사용 가능한 포트 번호를 찾는 라이브러리 detect-port 을 다룬다. CRA(create-react-app) 에서는 이미 사용 중인 포트 번호가 아닌 사용 가능한 포트 번호로 서버 실행을 도와준다. 관련 기능에 대해 어떻게 동작되는지 알아본다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 detect-port 와 같은 라이브러리는 현재 사용 가능한 포트 번호를 찾아주는 용도로 사용된다. 우리는 이러한 기능을 필요로 하거나, 이미 자연스럽게 사용하고 있다. 이 라이브러리를 사용하고 있는 대표적인 예는 CRA(create-react-app) 로 들 수 있다. 그 외에도 익숙한 곳들에서도 많이 사용하고 있는 README.md 에서 확인..
-
[use-memo-one] useMemo/useCallback 개선 :: 마이구미알아두면 좋은 라이브러리 2021. 11. 29. 21:33
이 글은 useMemo/useCallback 와 관련된 라이브러리 use-memo-one 을 다룬다. README.md 중심의 내용과 실제 코드를 통해 리뷰해본다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 참고로 use-memo-one 은 이전 글에서 다뤘던 memoize-one 라이브러리의 제작자이다. README.md 에서 use-memo-one 를 표현하는 문장을 보자. useMemo and useCallback with a stable cache (semantic guarantee) 지금 당장은 stable cahce, semantic guarantee 용어는 쉽게 이해하기는 힘들 것이다. 우선 쉽게 말하자면, React 에서 제공하..
-
[memoize-one] 캐시를 활용한 라이브러리 :: 마이구미알아두면 좋은 라이브러리 2021. 11. 27. 22:02
이 글은 캐시를 활용한 라이브러리 중 하나로 memoize-one 을 다룬다. README.md 중심의 내용과 실제 코드를 통해 리뷰해본다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 memoize-one 은 메모이제이션 전략을 사용하는 라이브러리 중 하나이다. 메모이제이션은 동일한 계산을 반복해야하는 경우, 이전에 계산한 값을 저장하여 반복된 계산 수행 없이 활용하는 기법으로 캐시라고 생각하면 이해하기 쉽다. "one" 이름처럼 오직 하나, 가장 최근 결과만 기억한다. 최소화된 기능으로 캐시를 위한 사이즈, 만료 시간, 예외 데이터(blacklist, whitelist) 등은 존재하지 않는다. 결과적으로 위와 같은 기능들로 인한 메모리 누수..
-
npm install vs npm ci :: 마이구미Javascript 2021. 11. 24. 21:16
이 글은 npm install 과 npm ci. 명령어를 비교해본다. 두 명령어 모두 의존성 목록을 설치하는 것이지만, 서로 다른 방향을 가진다. 둘 사이의 차이점을 이해하면 유용하게 사용할 수 있을 것이다. 다른 패키지 매니저(yarn) 가 아닌 npm 을 기준으로 다루게 된다. 우선 npm install 명령어는 우리가 알다시피 특정 파일과 밀접한 관계가 있다. package.json package-lock.json 두 파일을 간단하게 살펴보자. package.json 은 우리가 설치하고자 하는 모듈에 대한 의존성 목록이 존재한다. 여기서 의존성 목록의 버전은 version range 를 따르고 있다. (~, ^