처음 코딩을 배울 때 알았으면 좋았을 도구들(Tools I wish I had known about when I started coding)

크롬과 VSCode의 확장 기능을 리스팅 한 글이라, 굳이 번역이 필요할까 고민 했습니다. 하지만, 그래도 번역을 한 건 혹시나 리스팅 된 도구들의 설명을 먼저 확인 하고 설치하시는 분도 계시지 않을까 싶어 번역을 했습니다. 조금이나마 도움이 되셨으면 좋겠네요.



테크 월드(tech world)에는 수천 가지 도구가 있다. 이렇게 많은 도구들 중에서 어디서부터 시작해야할지 어떻게 알 수 있을까?
비교적 최근에 코딩을 시작한 누군가로서, 이렇게 많은 도구들 중에서 제대로 된 것을 찾아내는 건 너무 어려운 일이었다. 나는 정말로 도움이되지 않는 확장 기능을 설치하기도 했으며, 이로인해 개발에 오히려 방해가 되기도 했다.
나는 결코 전문가는 아니지만, 나에게 매우 유용한 도구 목록을 작성했다. 개발을 막 배우기 시작한 분들이라면, 이것이 도움이 될 것이다. 만약 숙련 된 개발자라면 어쩌면 새로운 것을 배울 수도 있다.
이 글을 Chrome 확장 프로그램과 VS Code 확장 프로그램으로 나누겠다. 당연히 다른 브라우저와 텍스트 편집기가 있다는 것을 알고 있지만, 대부분의 도구가 여러분이 선택한 플랫폼에서 사용할 수 있을 거라고 확신한다. 이러한 선택은 개인적인 취향일 뿐이니 이 부분에 대한 논쟁은 하지 말자.
자유롭게 위 아래를 왔다갔다하며 읽어도 된다.

Chrome Extensions

presentation
나는 스스로를 웹 개발자라고 생각한다. 그래서 실제로 크롬 콘솔에서 많은 시간을 보내고 있다. 아래의 리스트는 나에게 크롬 콘솔에서 더 적은 시간을 보낼 수 있도록 도와주는 도구 들이다:
  • WhatFont — 이름에서 알 수 있듯이, 이 도구는 즐겨 찾는 웹 사이트에서 사용하는 글꼴을 쉽게 찾아준다.
  • Pesticide —<div>의 아웃라인(outline)을 보고 CSS를 수정하는 데 유용한다. 이것은 박스 모델(box-model)을 배울 때 생명의 은인과도 같은 도구였다.
  • Colorzilla — 웹 사이트에서 정확한 색상을 복사 할 때 유용하다. 이 도구를 이용하면 클립보드에 바로 컬러 값이 복사되므로 RGBA 값을 얻기 위해 많은 시간(forever)을 쓸 필요가 없다.
  • CSS Peeper — 웹 사이트에서 사용되는 색상과 asset을 볼 때 유용하다. 특히 처음 개발을 시작할 때 좋은 공부 방법은 당신이 좋다고(cool) 생각한 웹 사이트를 클론(clone) 해보는 것이다. 이 도구를 사용하면 페이지의 color scheme을 확인 할 수 있고, 어떤 asset이 사용되는지 확인할 수 있다.
  • Wappalyzer — 웹 사이트에서 사용되는 기술을 보는 데 유용하다. 웹 사이트가 어떤 종류의 프레임워크를 사용하고 있는지, 어떤 서비스를 사용하고 있는지 궁금하다면 이 도구만한게 없다.
  • React Dev Tools — React 어플리케이션 디버깅에 유용하다. 이 도구는 React로 어플리케이션을 개발 할 때만 해당된다.
  • Redux Dev Tools — Redux를 사용하는 어플리케이션을 디버깅하는 데 유용하다. 단, 이 도구는 어플리케이션에서 Redux를 사용하는 경우에만 유용하다.
  • JSON Formatter — JSON을 브라우저에서 보다 깔끔하게 볼 때 유용하다. 제대로 정렬되어 있지 않은 JSON blob에서 원하는 정보가 얼마나 중첩(nested)되어 있는지 파악해보려 한적이 있는가? 이 도구를 사용하면 3시간이 걸일 일을 2시간으로 줄일 수 있게 해준다.
  • Vimeo Repeat and Speed — Vimeo 비디오의 재생 속도를 높이는 데 유용하다. 대부분의 웹 개발자와 같이 튜토리얼 영상을 보는 경우 기본 재생 속도의 1.25 배로 영상을 보는 것이 얼마나 편리한 지 알 것이다. YouTube 버전도 있다.

VS Code Extensions

presentation
Visual Studio Code는 내가 사용하는 에디터이다.
모든 사람들은 자신이 사용하는 텍스트 편집기를 선호 할텐데, 나도 예외는 아니다. 그러나, 내가 소개 할 확장 기능(extensions) 대부분이 여러분이 사용하고있는 편집기에서도 제공 할 것이라고 확신한다. 내가 좋아하는 확장 프로그램을 확인해보자:
  • Auto Rename Tag — 쌍으로 연결된 HTML 태그의 이름을 자동으로 바꿔준다. <p> 태그를 만들었다고 가정해보자. 이제 이 p 태그의 열린 태그 뿐만 아니라 닫힌 태그(</ p> 태그) 모두를 변경하고 싶다면, 그냥 둘 중 하나를 변경하면 다른 하나 역시 변경 된다. 이론적으로 생산성이 2배가 향상 되는 것이다.
  • HTML CSS Support — HTML에서 CSS 지원. 이것은 깔끔한 문법 하이라이팅과 코드 제안(suggestions)을 얻는데 유용하다.
  • HTML Snippets — 유용한 코드 스니펫(code snippets). 코드 작성 시간을 줄여 준다. 이것을 Emmet과 같이 사용하면 실제 HTML을 입력 할 필요가 거의 없을 정도다.
  • Babel ES6/ES7 —자바스크립트 바벨(Babel)문법에 컬러링(coloring)을 추가해준다. 바벨을 사용한다면 코드에서 변경되는 부분을 쉽게 구분할 수 있을 것이다. 자바스크립트의 새로운 기능을 즐기고 싶다면 이 익스텐션을 추천한다.
  • Bracket Pair Colorizer — 블록 시각화를 쉽게하기 위해 괄호에 색상을 추가한다. 이 익스텐션은 대괄호나 괄호를 정확하게 닫지 않는 일반적인 버그를 잡는 데 유용하다.
  • ESLint — ESLint를 Visual Studio Code에 통합. 이 익스텐션은 코드를 작성할 때 버그에 대한 힌트를 얻는 데 유용하며 구성에 따라 좋은 코딩 스타일을 적용하는 데 도움이 될 수 있다.
  • Guides — 코드에 추가 가이드 라인을 추가한다. 이것은 브래킷을 올바르게 닫을 수 있게 도와주는 또 다른 시각적 도구이다.
  • JavaScript Console Utils — 콘솔 로깅을 쉽게 사용 할 수 있게 해준다. 대부분의 개발자는 디버깅 과정에서 콘솔 로깅을 사용 한다 (디버거를 사용해야 함을 알곤 있지만). 이 유틸리티를 사용하면 유용한 console.log() 문을 쉽게 작성할 수 있다.
  • Code Spell Checker — camelCase로 작성된 코드의 맞춤법을 검사 해준다. 또 다른 일반적인 버그는 변수 또는 함수 이름을 훑어 보는 것이다. 이 맞춤법 검사는 오타가 있는(uncommon) 단어를 찾아준다. 자바스크립트로 코드를 작성 할 때 유용하다.
  • Git Lens — 언제 그리고 누구에 의해 코드가 변경되었는지 쉽게 알 수 있다. 이 익스텐션은 코드가 잘못 되었을 때 코드를 누가 작성 했는지 알 수 있게 해준다.
  • Path Intellisense — 파일 경로 자동 완성. 이것은 다른 파일을 임포트(import)할 때 매우 편리하다. 파일 트리를 쉽게 탐색 할 수 있다.
  • Prettier — 자동 코드 포맷터(Automatic code formatter). 코드를 수동으로 들여 쓰기하고 사람이 읽을 수있게해야하는 시대는 잊어 버리자. Prettier가 여러분이 할 수 있는 것보다 훨씬 빠르고 더 잘 할 수 있다. 이 익스텐션은 추천하지 않을 수 없다.
  • VSCode-Icons — 아이콘을 파일 트리에 추가. 파일 구조를 보는 데, 눈에 잘 들어오지 않는다면 도움이 될 것이다. 여러분이 만드는 파일을 구별하기 쉽게 해당 파일의 아이콘을 추가 해준다.

결론

아마 여러분도 개발 주기(cycle)에 없어서는 안될 나름의 도구들이 있을 것이다. 위에서 언급 한 도구 중 일부라도 여러분의 개발을 보다 효율적으로 만들 수 있기를 바란다.
그러나 이미 설치된 도구를 배우기 전에 모든 도구를 설치하는 것은 큰 시간 낭비가 될 수 있으므로 함정에 빠지지 말자.
여러분이 가장 좋아하는 도구를 코멘트를 남겨서 함께 배우는 것을 추천 한다.
이 글이 마음에 들었다면, 여기에, 여기, 여기, 여기에 작성한 다른 기사를 확인해보자. 또한, 트위터에서 팔로우 하자.


이 글은 번역글 입니다. 오역이 있다면 지적해주시면 감사하겠습니다. 원문은 아래에서 확인 할 수 있습니다.