나를 위한 글(3): 프론트엔드 개발자를 위한 온라인 툴 Best 9

 

세상이 워낙 좋아져서 조금만 검색해보면 디자이너를 위한 툴 뿐만 아니라

프론트엔드, 백엔드 개발자를 위한 다양한 툴이 있습니다.

그중 오늘은 매우 기본적일 수도 있지만,

모를 수도 있을 수 있는 프론트엔드 개발자용 온라인 툴 베스트 9를 소개합니다.

 

1. CanIUse

너~무나 유명한 이 사이트를 모르시는 분은 없을겁니다. 

내가 사용하는 라이브러리가, CSS 특성이, API가 해당 브라우저에서 호환이 되는지 확인할 때 사용하는 사이트입니다.

대부분의 모던 브라우저들은 최신의 기술을 적용하는 데 문제는 없지만

세상에서 제일 ㅄ같은 IE 때문에라도 이 사이트를 참고해서 개발하셔야

크로스브라우징되는 사이트를 만드는 데 문제가 없을 것입니다.

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

2. Minify

확장 프로그램으로 많이들 사용하시는 Minify는 HTML, CSS, JS, SVG 파일 등을 압축시켜주는 프로그램입니다. 이 프로그램은 whitespaces나 dead code 등을 삭제시켜주고, 브라우저에서 페이지를 로드하는 데 시간을 단축시켜주는 데 일조합니다.

 

 

3. Bit.dev

Bit.dev는 개발자들에겐 매우 사랑스럽다고 여겨질 사이트입니다. 

다양한 프로젝트에서 쓰여진 컴포넌트들을 이곳에 올리고 한꺼번에, 그리고 손쉽게 관리할 수 있는 곳이기 때문이죠.

해당 사이트를 이용한다면 코드 재사용이 필요할 때나 개발 시간을 획기적으로 단축시키고 싶을 때 도움이 될 것입니다.

Bit.dev는 React, Angular, Vue 등등 다양하게 지원합니다.

 

 

https://bit.dev/

Share reusable code components as a team · Bit

 

4. Stackblitz

뭐 더이상 설명이 필요없는 너무나 유명한 툴입니다.

전세계에서 가장 많이 쓰이는 IDE인 VSCode를 온라인에서 만나볼 수 있기 때문이죠!

Stackblitz는 단 한번의 클릭으로 Angular, React, Vue, Vanilla, RxJS, TypeScript 프로젝트를 위한 기본 환경을 제공해줍니다.

Stackblitz는 간단하게 몇 줄의 코드나 여러분들의 브라우저 상에서 일부 JS 프레임워크를 실행해볼 때 매우 유용하게 쓰일 것입니다.

요즘엔 많은 분들이 VSCode를 일반적으로 사용하시는 만큼 이 툴은 모두에게 친숙하지 않을까요?

 

https://stackblitz.com/

The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz

 

5. JWT.io

만일 여러분들이 만든 앱을 안전히 보호하기 위해 JSON 웹토큰을 사용한다면, 또는 사용자가 제한된 백엔드 데이터에 접근할 수 있도록 JSON 웹토큰을 사용하게 해야한다면 이 사이트를 참고하는 게 유용할 것입니다.

여기서 JSON 웹토큰(JSON Web Token)이란, 일반적으로 HTTP API 서버를 만들 때에 인증 방법으로 사용하는 것입니다.
서버는 사용자가 로그인 할 때 고유한 Token을 생성하고, 이를 사용자에게 알려주어 사용자가 다른 API를 사용할 때에 헤더에 이 Token을 넣으면, 자신이라는 것을 증명할 수 있게 하는 것입니다.

 

https://jwt.io/

JWT.IO

 

6. BundlePhobia

BundlePhobia는 여러분에 로컬에 저장되있는 node_modules 이나 package.json 파일의 사이즈가

얼마인지 궁금할 때 사용하는 사이트입니다.

사이트에 접속해서 간단하게 드래그 앤 드랍으로 패키지를 끌어다놓으면 알아서 사이즈를 측정해주는 편리한 사이트입니다.

 

https://bundlephobia.com/

BundlePhobia

 

7. Babel REPL

Babel은 모던 ES 문법을 오래된 ES5 이하의 자바스크립트 문법으로 변환하는 오픈소스의 JS 컴파일러입니다.

개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는

유용한 도구인셈이죠. 

Babel REPL은 Babeljs팀이 온라인에서 Babel을 사용할 수 있도록 구축해놓은 매우 유용한 사이트입니다.

이 사이트를 이용하면 최신의 ES 문법을 쉽게 확인할 수 있고 트랜스컴파일을 위한 헤매고 돌아다닐 시간을 단축시켜줍니다.

 

https://babeljs.io/en/repl

Babel · The compiler for next generation JavaScript

 

8. Prettier Playground

해당 사이트는 JS 코드 포멧터입니다. 여러분이 작성한 코드를 일정한 스타일로 파싱해주거나

가장 적절한 JS 코드 형태로 정리하여 다시 보여주는 툴입니다.

 

https://prettier.io/playground/

Prettier

 

9. JSLint

온라인에 존재하는 JS Linter 중에서 아마 JSLint가 최상위에 위치해있을 겁니다. 

이 툴은 우리의 브라우저에서 일부의 JS 코드나 JS 파일을 lint 해주는 매우 간단하지만 강력한 도구입니다.

여기서 lint는 빌드나 컴파일시 에러외에 '추가'로 자잘한 오류검사를 할 수 있는 도구를 일컫습니다.

https://jslint.com/

JSLint: The JavaScript Code Quality Tool