알아두면 좋은 라이브러리
-
[intl] 다국어 처리 :: 마이구미알아두면 좋은 라이브러리 2023. 9. 10. 19:04
이 글은 다국어를 처리하는 방법을 다룬다. 무겁지 않고, 가벼운 내용으로 사례를 기반으로 이어나가본다. 다국어 처리에 있어서, 라이브러리를 사용하는 경우, 직접 구현해보는 경우 2가지를 살펴본다. 라이브러리는 react-intl 를 사용한다. 서비스는 다국어 관리가 필요한 경우가 발생할 수 있다. 별도 API 가 존재한다면, 크게 고민할 것이 없다. 하지만 정적 데이터 성향은 결국 프론트에서도 관리해야하는 니즈가 나올 수 있다. 예를 들어보면, 서비스 단위가 아닌 모듈 기반으로 패키지들을 분리하는 경우이다. 그 중 하나의 예가 디자인 시스템을 들 수 있다. 이번 글에서는 디자인 시스템의 경우를 기반으로 이야기를 이어나간다. 서비스 단위의 규모가 작지 않은 단위라면, 대부분 라이브러리를 채택하여 사용할 수..
-
[cspell] Spell Checker(오타 검사) :: 마이구미알아두면 좋은 라이브러리 2022. 10. 23. 17:20
이 글은 cspell 이라는 라이브러리를 다룬다. 코드를 작성하는 과정에 오타가 발생할 수 있고, 잘못된 단어일 수도 있다. 이러한 휴먼 에러를 방지할 수 있게 도움을 준다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 우리는 한국사람인데도 한국말 맞춤법도 자주 틀린다. 당연히 영어는 훨씬 많이 틀릴 수밖에 없다. 코드 작성 과정에서 스펠링을 잘못 작성하거나 이미 잘못 작성된 경우를 많이 접할 수 있다. IDE 에서 어색한 단어들은 알려주지만, 그냥 넘어가거나 무시하는 경우도 많다. 잘못된 표기된 스펠링은 마이너한 이슈라고 볼 수도 있지만, 치명적일 수도 있다. 우리는 개발하는 과정에서 신규 개발, 유지보수, 버그 수정 등을 위해 히스토리를 찾..
-
[color] 색상 변환하기 :: 마이구미알아두면 좋은 라이브러리 2022. 10. 9. 15:29
이 글은 color 이라는 라이브러리를 다룬다. 색상의 투명도, 밝기, raw data 등 색상을 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 color 라이브러리는 색상을 변환하고 조작할 수 있게 도와준다. 2가지 키워드(변환, 조작)를 이해하기 위해서는 색상 모델에 대해 이해하고 있어야한다. 색상 모델을 표현하는 RGB, HEX, HSL, HSB(HSV) 를 간략히 설명한다. RGB 는 빛의 삼원색(빨강,녹색,파랑)으로 0~255 의 값으로 표현하고, 컴퓨터에게 직관적인 모델이다. CSS 를 사용한다면, 다음과 같다. color: rgb(255,0,0); // 빨강 color: rgb(0,255,0)..
-
[@use-gesture] 제스처 이벤트 제어 :: 마이구미알아두면 좋은 라이브러리 2022. 9. 28. 20:59
이 글은 @use-gesture 이라는 라이브러리를 다룬다. @use-gesture 은 마우스나 터치와 같은 이벤트를 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 라이브러리는 굉장히 심플하고 사용하기 쉽다. 문서도 잘 되어있고, 예제도 풍부하여 친절한 라이브러리이다. 바닐라 자바스크립트도 지원하지만, react 도 지원하고 있다. (여기서는 react 기준) import { useDrag } from '@use-gesture/react' function Component() { useDrag(({ first, last, movement: [mx, my] }) => { // first - 첫 이벤트 여부,..
-
[yup] 유효성 검증 :: 마이구미알아두면 좋은 라이브러리 2022. 6. 5. 10:52
이 글은 yup 이라는 라이브러리를 다룬다. yup 은 유효성 검증 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 yup 이란? Custom validation(without API) Custom validation(with API) Error Message customization Transform, parsing Examples With react-hook-form yup 이란? yup 라이브러리는 스키마 유효성 검증이 목적이다. 실제로는 서버쪽(Node.js) 에서 더 많이 사용된다. React 기준으로는 react-hook-form 과 함께 사용하고 있다. 하지만 그건 크게 중요하지 않다. 유효성 검증이라는..
-
[React] react-transition-group :: 마이구미알아두면 좋은 라이브러리 2022. 4. 28. 21:47
이 글은 트랜지션과 관련된 라이브러리 react-transition-group 을 다룬다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 react-transition-group 는 굉장히 심플하다. 게다가 이미 공식 문서에서는 기본적인 예제는 codesandbox 를 통해 제공해주고 있어, 크게 설명할 게 없다. 처음 접한다면 공식 문서를 한번 훑고 오는걸 추천한다. 이 글의 핵심은 기본 예제가 아닌 좀 더 응용할 수 있는 예제를 다뤄본다. 응용 예제는 라이브러리에서 제공해주는 TransitionGroup 컴포넌트를 주로 다루는 예제가 된다. 우선 간단하게 라이브러리를 알아보자. 진입(entering), 후퇴(exiting) 라는 용어로 트랜지..
-
[DOMPurify] XSS 공격 방지 :: 마이구미알아두면 좋은 라이브러리 2022. 3. 31. 21:19
이 글은 XSS 공격 방지에 도움을 줄 수 있는 라이브러리 dompurify을 다룬다. 바닐라 자바스크립트가 아닌 현재 개발 환경에서는 XSS 를 사실 대부분 신경을 크게 쓰지 않을 것이다. 흥미와 이해를 위해 React 를 조금 곁들였다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 XSS 공격은 간단하게 말하면, 사용자 브라우저에서 예상치 못한 자바스크립트 코드를 실행하여 악의적인 행동을 취하는 것이다. 대표적으로 사용자 브라우저에 존재하는 쿠키, 세션, 로컬스토리지 등의 값을 긁어가는 것이다. div.innerHTML = ''; div.innerHTML = ''; 바닐라 자바스크립트를 사용한다면, DOM 에 주입하기 위해 innerHTML..
-
[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..