[오픈소스] React 프로젝트에서 사용할 만한 오픈소스와 라이브러리 10가지

오늘은 React 프로젝트에서 자주 사용하는 오픈소스와 라이브러리를 알아보려고 합니다.

React 프로젝트를 시작하면서 프론트엔드를 맡게되었는데 프로젝트를 할 때마다 디자이너의 중요성을 세삼 느끼게 됩니다. 디자이너의 유무에 따라서 프로젝트의 퀄리티도 달라지고 사용자 로직에서도 더 편리함을 느낄 수 있다고 생각합니다.

그래서 디자이너가 없을 땐 어떻게 해야하나 싶은데 아무래도 색감과 애니메이션이라고 생각합니다.

그래서 오늘은 React 반응형 프로젝트에서 사용할 수 있는 오픈소스나 라이브러리를 알아보겠습니다.

 

자료

아래의 자료에 따라서 어떤 오픈소스, 라이브러리가 있는지 알아보겠습니다 (이미 알고 있거나 유명한 것은 예외처리해두었습니다)

참고한 자료는 아래와 같습니다. 

https://www.bloter.net/news/articleView.html?idxno=23780

데뷔 후 뜨거운 관심을 받은 오픈소스 프로젝트 10개

https://devloo.tistory.com/entry/React-%EC%A0%84%EB%AC%B8%EA%B0%80%EB%93%A4%EC%9D%B4-%EC%B6%94%EC%B2%9C%ED%95%98%EB%8A%94-15%EA%B0%80%EC%A7%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

React 전문가들이 추천하는 15가지 라이브러리

https://www.youtube.com/watch?v=6Rp5OSpDDGQ

 

React는 자바스크립트라 OKKY 커뮤니티에서 자료도 찾아봤습니다.

https://okky.kr/

OKKY - All That Developer

 

---

 

1. 애니메이(Anime)

https://yamoo9.github.io/anime/

anime.js

Anime.js는 CSS 속성, SVG 도형&속성, DOM 객체, JavaScript 객체를 애니메이션 하는 단 하나의 API를 제공합니다.

간단하지만 강력한 API를 제공하는 가볍고 빠른 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 그리고 JavaScript 객체를 조작해 애니메이션을 구현합니다.

가장 큰 장점은 애니메이션 설정을 커스텀 할 수 있는 것이라고 생각합니다.

웹 페이지에서 다운로드부터 사용 설명서, 예제까지 있어서 적극 활용할 수 있을 것 같습니다.

진행중인 프로젝트에 가능하다면 추가해보면서 추가로 포스팅 하겠습니다!

 

 

2. 클립보드JS(Clipboard.js)

https://clipboardjs.com/

clipboard.js

우리가 흔히 알고 있는 그 클립보드 맞습니다.

텍스트를 복사할 때 드래그하는 것을 쉽게 버튼 클릭하나로 복사하는 것입니다.

GitHub, MDN, Gist, StackOverflow, StackExchange, npm, 심지어 Medium 의 모든 코드 블록에 "클립보드에 복사" 버튼을 추가하는 브라우저 확장 프로그램입니다.

프로젝트 내에 클립보드가 필요한 내용들이라면 clipboard.js를 설치하고 사용하면 좋을 것 같습니다. 문서에 나온 내용이 안되도 구글링하면 많이 나오는 것 같습니다

 

 

3. 다국어 지원 Magento 

https://www.weglot.com/blog/magento-multi-language

다양한 언어로 번역하면 트래픽과 매출이 증가하는 이점이 있습니다.

100개 이상의 언어로 번역할 수 있으며, 계정을 만들어서 도메인을 넣고 설정하면 웹의 언어를 드롭 다운으로 번역하고 언어를 수정할 수 있습니다. 내용을 원하는 대로 번역을 검토하고 수정할 수 있습니다.

이 오픈소스를 사용하는 방법은 위 링크에서 확인하면 좋을 것 같습니다. 하지만 더 좋은 영상으로 된 자료도 있습니다.

https://www.youtube.com/watch?v=WwaXwRbJu5M

 

 

4. Formik

https://formik.org/

Formik

프로젝트에서 회원가입이나 게시판 글 올릴 때 값을 제출할 때 form을 사용합니다. 이떄 값을 하나하나 확인해야 합니다.

formik 라이브러리는 폼 코드를 감소 시킵니다.

값/오류/방문한 필드 추적, 검증 조정, 제출 처리 등 반복적이고 성가신 작업을 처리하므로 사용자가 직접 할 필요가 없습니다. 즉, 상태 및 변경 핸들러를 연결하는 데 시간을 덜 쓰고 비즈니스 로직에 집중하는 데 더 많은 시간을 할애할 수 있습니다.

이것도 사용한 사례들이 많아서 쉽게 사용해볼 수 있을 것 같습니다.

 

 

5. Dotenv

https://www.npmjs.com/package/react-dotenv

react-dotenv

공개되면 안되는 정보를 담아 낼 수 있는 기능이라고 합니다. 환경 변수나 보안해야하는 key 같은 것을 dotenv에 저장해둔다는 것입니다.

github에 올릴 때 .env 파일을 .gitignore에 작성해야한다고 합니다.

우리가 알고 있는 npm install ~~과 같은 방식입니다.

참고 블로그 https://nyang-in.tistory.com/192

 

 

6. ESLint

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

구성 가능한 JavaScript linter입니다. JavaScript 코드에서 문제를 찾고 수정하는 데 도움이 됩니다. 문제는 잠재적인 런타임 버그부터 모범 사례를 따르지 않는 것, 스타일 문제까지 다양합니다.

이 소스에서는 정해져 있는 규칙을 가지고 코드의 문제를 찾는 데 사용합니다.

예를 들어, ESLint는 ;이 없으면 에러를 발생하도록 지정했습니다. 전체 코드에서 모두 스캔해서 ; 이 없는 에러 코드를 수정할 수 하도록 도와줍니다.

ESLint Node.js API를 사용하면 Node.js 코드에서 ESLint를 프로그래밍 방식으로 사용할 수 있습니다. 이 API는 플러그인, 통합 및 ESLint와 관련된 다른 도구를 개발할 때 유용합니다.

 

 

 

7. styled-components

https://styled-components.com/

styled-components

태그가 지정된 템플릿 리터럴(JavaScript에 최근 추가된 기능)과 CSS의 힘을 활용하는 styled-components를 사용하면 실제 CSS 코드를 작성하여 구성 요소를 스타일링할 수 있습니다. 또한 구성 요소와 스타일 간의 매핑을 제거합니다. 구성 요소를 저수준 스타일링 구조로 사용하는 것은 그 어느 때보다 쉽습니다.

가장 장점이라고 생각하는 것은 자동 중요 CSS를 구분하여서 렌더링되는 구성요소를 추적하고 해당 스타일을 주입할 수 있습니다. 즉 최소한 코드만 로드한다는 것을 의미합니다.

document에 설치 방법과 시작 예제 코드도 있습니다. 사용하신다면 꼭 확인해보시면 좋을 것 같습니다.

실제 프로젝트에 추가해보겠습니다(물론 디자인은 맨 마지막에)

 

 

 

8. Excalidraw  

https://excalidraw.com/

Excalidraw — Collaborative whiteboarding made easy

이 소스는 오픈 소스이고 페이지에서 편리하게 텍스트나 도형, 라이브러리를 설치해서 더 다양하게 활용할 수 있습니다.

제가 사용하던 피그마 같이 디자인할 수 있는 것처럼 웹 페이지에서 사용할 수 있는 웹 노트(?) 느낌입니다.

디자인도 깔끔하고 사용자가 하고 싶은 대로 할 수 있다는 게 큰 장점인 것 같습니다.

 

 

 

9. highstorm

https://github.com/chronark/highstorm

GitHub - chronark/highstorm: Open Source Event Monitoring

알람 전용 웹 페이지, 알람 기능을 구현해둔 오픈소스입니다. 웹 페이지에서 알림을 하려면 소켓으로 자주 봤었는데 새로 알게된 내용입니다.

찾아보긴 했는데 사용법이 포스팅 된 내용을 찾기 쉽지 않더라구요. 기본 사용량은 무료이지만 더 많은 양을 사용하려면 비용도 있어서 위 "내가 추천하는 react 오픈소스 TOP5" 영상에서는 lambda와 discord를 사용하신다고 하네요.

lambda도 discord, highstorm 중 하나 골라 알림 기능을 구현해보고싶네요.

 

 

10. dub.sh

https://dub.co/

Dub.co - Link Management for Modern Marketing Teams

저희의 사명은 웹의 가장 기본적인 부분 중 하나인 링크의 역할을 단순한 "리소스 로케이터" (URL)에서 완전한 귀속 엔진 으로 재구성 하여 첫 번째 클릭에서 최종 전환 이벤트까지 사용자 여정을 시각화하는 것입니다.

위와 같이 소개되어 있는데 해당 사이트의 링크를 클릭한 것부터 이벤트까지 시각화하여  통계를 측정해주는 오픈소스 입니다.

타입스크립트로 구현 가능하네요 github 코드에도 해당 오픈소스의 예제 코드가 있습니다. 확인해보시면 좋을 것 같습니다.

조회수를 확인하는 커뮤니티나 게시물, 공지사항 등 사용하면 될 것 같습니다.

 

 

 

 

10가지 중에서 마음에 드는 것들을 골라 프로젝트에 추가해보겠습니다.

프로젝트에서 적극적으로 사용해서 오픈소스 적용 방법에 대한 포스팅을 해보겠습니다!