개발자에게 유용한 툴

1. Bundle Phobia

Bundlephobia | Size of npm dependencies

번들 포비아는 간단하게 NPM 패키지 이름을 입력하는 것으로 간단하게 번들 사이즈부터 다운로드 시간, 구성 요소, 알파벳별 구성요소의 사이즈까지 까지 모두 간단하게 확인할 수 있는 사이트입니다.

 

이외에도 package.json을 업로드하여 한번에 다양한 패키지를 동시에 확인하는 것 역시 가능합니다.

2. Google Fonts

Google Fonts

구글에 등록되어 있는 다양한 폰트들을 확인하고 테스트해볼 수 있으며 폰트의 두께 역시 필요한 사항만 선택하여 다운로드할 수 있고 바로 웹 프로젝트에 가져가 사용할 수 있게 재공해 줍니다.

3. iconoir

Iconoir | Free Icons

100% 무료 아이콘으로 React뿐만 아니라 React Native, Flutter, Framer, CSS와 같은 다양한 플랫폼에서 사용할 수 있으며 아이콘의 두께, 색, 사이즈 등을 자유롭게 커스텀해서 사용할 수 있습니다.

4. React Native Directory

https://reactnative.directory/

React Native의 패키지들을 모아둔 사이트로 어떠한 플랫폼에서 사용할 수 있는지부터 인기도, TS로 쓰여있는지 여부까지 세밀하게 확인할 수 있습니다.

 

다양한 플랫폼을 대응해야 되는 React Native 특성상 따로 검색해가며 찾을 경우 특정 플랫폼에서 대응이 안되거나 하는 문제를 사전에 예방할 수 있는 사이트입니다.

5. Remix Icon

Remix Icon - Open source icon library

위에서 소개한 iconoir가 다양한 플랫폼을 대응하는 아이콘들을 모아둔 사이트라면 Remix Icon의 경우 동일하게 무료로 이용할 수  있는 아이콘 사이트이지만, 엄청난 양의 아이콘을 자랑하는 사이트입니다.

6. Frontend Toolkit

Dashboard

Frontend 개발 시 많이 사용하는 tool들을 모아 둔 사이트입니다. 

 

Color Converter, Image Converter, Regex Tester와 같은 다양한 Tool들이 있으며 회원가입 시 자주 사용하는 툴들을 모아 대시보드를 구성할 수도 있습니다.

7. iHateRegex

Regex cheatsheet - I Hate Regex

이름 그대로 자주 사용하는 정규 표현식들을 검색을 통해 간단하게 알려주는 사이트입니다.

정규 표현식을 공부해야지 하면서도 항상 유용하게 사용하고 있는 사이트입니다.

8. What Web Can Do Today?

What Web Can Do Today

사이트의 제목 그대로 현재 사용 가능한 HTML API들의 모음 사이트입니다.

이것도 된다고 하는 것도 무척 많고 생각지도 못했던 API들도 많아서 시간이 되시면 한 번쯤 확인해보면 좋은 사이트입니다.