Medium - Developer Tools to Increase Your Productivity

원문 - Nabil Nalakath

Trend 파악을 위한 Medium 기고문 포스팅 - 여러분의 생산성을 높여주는 개발자 도구들; 9개의 도구들이 여러분의 삶을 편하게 만들어 줄겁니다.

BG Image by Markus Spiske on Unsplash

인터넷은 그냥 여러분이 코드를 배우는 것만 도와주는 것이 아니라 다양한 개발 단계에 걸쳐서 여러분의 소중한 시간을 절약하는 데 도움이 되는 온라인 도구들이 있습니다. 다음릐 온라인 도구 리스트들은 모든 개발자들에게 편할 것입니다. 정렬 순서의 의미는 없습니다.

1. Can I Use

여러분이 웹 API들에 대해 브라우저 호환성이 궁금하다면 Can I Use가 도와줄 것입니다. 이 도구는 업데이트된 지원 테이블을 제공해서 데스크톱이나 모바일 브라우저의 API들을 서포트 여부를 결정할 수 있습니다.

Testing compatibility of local storage on browsers

2. Unminify

Unminify.com은 unminify(unpack, deobfuscate)를 하는 무료 온라인 도구로 자바스크립트, CSS, HTML 코드들을 더욱 가독성이 좋게 만들어 줍니다. beautification 코드에 제일 많이 사용된 웹사이트 중 하나입니다.

들여쓰기가 제대로 되어있지 않은 다른사람의 코드 때문에 소스를 보는게 불편하셨나요? 그냥 복사 붙여넣기만 하시면 몇초안에 훨씬 읽기 좋게 바뀔 것입니다.

unminfiy.com

3. Compressor

이미지 사이즈는 여러분의 웹사이트의 로딩타임을 결정짓는 중요한 요소가 될 수 있습니다. Compressor.io는 여러분의 이미지를 퀄리티는 유지하면서 크기를 줄여주는 온라인 도구 입니다. 이 도구는 이미지 압축 전후가 거의 차이가 없을 정도로 매우 좋습니다.

compressor.io

4. Cloudcraft

Cloudcraft는 여러분의 클라우드를 설계하고 예산을 가늠하는데 도움이 됩니다. 드래그 드랍 인터페이스로 3D 다이어그램을 만들어서 다른 클라우드 인프라 서비스와 연결할 수 있습니다. 예산 탭이 있어서 현재 아키텍쳐에서 여러분의 비용을 절감시켜 줄 수도 있습니다.

Planning cloud architecture using AWS services.

5. Repl.it

Repl.it은 완벽한 온라인 IDE로 여러분이 찾던 것일 겁니다. 여러분이 좋아하는 개발 환경이나 개발스택을 몇초안에 설정할 수 있습니다. 모든 현대 언어들인 파이썬, 코틀린, 루비, 자바스크립트를 지원합니다. 라이브러리나 패키지를 설치해서 바로 사용할 수도 있습니다. 여러분의 코드를 바로 repl.it 링크를 이용해서 공유할 수도 있고 임베딩 해서 인터랙티브하게 쓸 수도 있습니다.

Using Express JS on a node server environment.

6. RequestBin

RequestBin은 여러분에게 임시적인 HTTP 엔드포인트를 제공해서 보내지는 모든 요청을 수집하여 여러분이 분석하기 쉽도록 만들어 줍니다. 여러분이 웹훅 요청을 다양한 사이트로 받는 것을 디버깅 할 때 매우 편합니다. 여러분이 받게 되는 데이터의 타입이나 구조체를 모를 때도 도움이 됩니다.

Data received through post request to the endpoint.

7. Web Code

Web Code는 가장 좋은 코드 생성기 중 하나입니다. 여러분인 여러분의 요구사항을 입력하는 것으로 기본적인 코드나 진보된 코드를 만들어 낼 수 있습니다. HTML이나 CSS로 작업하는데 익숙하지 않은 웹개발자들에게 매우 유용할 것입니다.

Generate CSS code for different borders on 4 sides

8. BundlePhobia

현대 프론트엔드 프레임워크가 picture 안으로 들어오게 된 이후로 사람들은 그들의 번들 사이즈를 가능한한 작게해서 사용자당 페이지 로드 타입을 줄이고 싶어합니다. BundlePhobia는 여러분의 프로젝트에 추가할 수 있는 npm 패키지의 크기를 분석해줍니다. 여러분의 package.json 파일을 웹사이트에 올리면 프로젝트 내에 모든 패키지들을 분석하고 개별적인 패키지 상세정보를 검색합니다.

<img src="https://miro.medium.com/max/5748/1*Fao3mjsiPT6pFTgr3TLfoA.png/>

Calculating the size of pdfmake library

9. Fingerprint.js

웹사이트를 통해 브라우저로부터 유니크한 식별자의 리스트를 얻는 것은 쉬운 일이 아닙니다. 그렇지만 이 멋진 라이브러리가 쿠키나 다른 악성 코드를 사용하지 않고 브라우저 식별자를 구분할 수 있는 것을 만들어 줍니다. 웹 브라우저의 수많은 프로퍼티를 빠르게 해체해서 독립적으로 사용될 수 있게 하거나 해쉬를 사용하여 사용자를 식별하는 데 사용할 수 있습니다.

모바일 기기의 UUID를 대체할 수 있으며 웹 프로젝트에 사용할 수 있습니다. CND 위에서도 사용할 수 있으며 npm 패키지를 설치해서 사용할 수 있습니다.

Extracting user information from the browser.

Summary

  • 개발자의 생산성을 올려주는 9가지 도구들;

© 2019. All rights reserved.

Powered by Hydejack v8.1.1