출처: https://qiita.com/twrcd1227/items/70ecf7717067764c3c7d 

소개

알아두면 업무에 도움이 되는 브라우저에서 작동하는 초간편 도구 17가지를 모아봤습니다.

Squoosh

구글이 개발한 이미지 변환 및 압축용 웹 서비스.
미리보기 화면에서 변환 전후의 화질을 실시간으로 확인하면서 압축 설정을 조정할 수 있다.

image.png

Documatic

Documatic은 API 레퍼런스에서 사용자 가이드에 이르기까지 코드베이스를 쉽게 문서화할 수 있는 유연한 템플릿과 사용자 친화적인 편집 도구를 제공하여 프로젝트 문서화 과정을 단축할 수 있는 도구이다.

image.png

transform

json에서 yml로 변환하고 싶을 때 등 모든 데이터 형식을 다른 형식으로 변환하는 서비스.
json에서 yml, htmx에서 jsx로의 변형, json이나 GraphQL의 IDL에서 TypeScript의 인터페이스까지 브라우저에서 생성할 수 있다.

image.png

Roadmap.sh

모든 언어와 기술의 로드맵을 볼 수 있다.

아래는 React의 경우다.블록을 클릭하면 더 자세히 볼 수 있습니다.

image.png

opensourcealternative.to

카테고리별, 언어별로 OSS를 찾을 수 있다.
대체 도구를 찾는 데 유용하다.또한, Github 링크 등이 게시되어 있다.

예를 들어 Go로 검색하면 다음과 같다.

image.png

Storybook

UI 카탈로그 사이트.

스토리북을 기반으로 한 UI 테스트 툴 Chromatic도 있다.

image.png

코드 뷰티파이

HTML, CSS, 자바스크립트, JSON 등 어떤 코드든 이 플랫폼을 사용하면 코드를 체계적으로 정리하고 쉽게 유지 관리할 수 있다.

スクリーンショット 2024-06-28 5.30.05.png

Zapier

Zapier는 여러 애플리케이션과 서비스의 일상적인 작업을 자동화하기 위한 워크플로우를 만들 수 있다.
자주 사용하는 도구를 연결해 Zap을 구축해 데이터 동기화, 알림 등의 작업을 자동화함으로써 작업 시간을 크게 절약할 수 있다.또한, 템플릿 등도 준비되어 있다.

image.png

ExplainShell

어려운 쉘 명령어를 분해하는 도구.
명령을 붙여넣으면 컴포넌트로 분해하여 설명해준다.

예를 들어, :(){ :|:&:& };:를 분석하면 다음과 같다.

image.png

SmallDevtools

에디터부터 신용카드 번호 생성까지 다양한 편의 툴을 올인원으로 제공한다.
다음과 같은 일을 할 수 있다.

image.png

DevHints

여러 프로그래밍 언어, 프레임워크, 도구에 대한 치트시트가 많이 있다.

아래는 vim의 치트시트

image.png

BundlePhobia

npm의 모듈을 참조할 때 번들 크기를 계산해 준다.
또한 종속성의 크기와 성능에 미치는 영향을 체크해준다.

image.png

Convertio

파일 변환기.파일을 모든 형식으로 변환할 수 있습니다.

image.png

Unminify

Unminify는 JavaScript, CSS, HTML 등의 압축된 코드를 명확하고 편집 가능한 상태로 만들어 가독성과 디버깅의 용이성을 향상시킨다.

image.png

Carbon

파워포인트 등에 소스코드를 붙여넣기 할 때 유용합니다.
소스 코드를 멋진 이미지로 만들어 주는 사이트.

저는 슬라이드를 만들 때 이 사이트를 이용하고 있습니다.

Ray

Carbon과 마찬가지로 소스코드를 이미지로 만들어주는 서비스.
Carbon은 테마나 설정이 더 많지만, Ray는 적다.다만, Ray는 SVG 형식으로 내보내기와 라인 하이라이트를 할 수 있다.

image.png

CyberChef

아래와 같은 모든 편리한 도구를 브라우저에서 사용할 수 있다.

スクリーンショット 2024-06-28 0.24.20.png