<div id="readability-page-1" class="page"><article>
<p data-ke-size="size16">WebStorm (웹스톰)의 경우 <b>JavaScript 개발을 목적으로한 IDE</b>이기 때문에 기본 환경으로도 개발하는데 충분합니다. <br>그렇기 때문에 <b>플러그인이 필수는 아닙니다</b>. <br>다만, 좀 더 생산성있는 개발을 위해서는 적절한 플러그인을 사용하는 것을 권장합니다. <br>특히 일부의 플러그인들은 거의 필수제로 사용되니, 아래 플러그인들을 확인해보시고 필요한 항목들은 설치해보시는 것을 추천드립니다.</p>
<blockquote data-ke-style="style2">
<p data-ke-size="size16">기본적인 <a href="https://plugins.jetbrains.com/plugin/9525--env-files-support">.env</a>, <a href="https://plugins.jetbrains.com/plugin/7495--ignore">.ignore</a> 등의 플러그인은 다 설치되어있다고 가정했습니다.<br><b>생산성에 도움이 되는 플러그인들</b>만 작성했습니다. <br><a href="https://plugins.jetbrains.com/plugin/11938-one-dark-theme">테마</a> / <a href="https://plugins.jetbrains.com/plugin/11058-extra-icons">아이콘</a> / <a href="https://plugins.jetbrains.com/plugin/14708-mario-progress-bar">progress bar</a> / <a href="https://plugins.jetbrains.com/plugin/8251-power-mode-ii">power mode</a> 등 UX에 관한 것들은 모두 배제했습니다.</p>
</blockquote>
<h3 id="string-manipulation" data-ke-size="size23">String Manipulation</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/2162-string-manipulation">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">문자열을 다루는데 여러 편의기능을 제공하는 플러그인 입니다. <br>거의 문자열에 관한 모든 기능을 제공한다고 보셔도 무방한데요. <br>아래 기능 외에도 다양한 기능들을 지원합니다.</p>
<ul data-ke-list-type="disc">
<li>케이스 전환</li>
<li>정렬</li>
<li>필터링</li>
<li>증분</li>
<li>열 정렬</li>
<li>escaping</li>
<li>encoding</li>
</ul>
<img src="https://blog.kakaocdn.net/dn/05Thx/btroswpvXpp/XjiZ0I8VcPM4dBcJCqgcDK/img.png" alt="string1"> <p><img src="https://blog.kakaocdn.net/dn/XbDlL/btroxAK1rOn/QxYG7N7LGQA2kCuqUyDmhk/img.gif" alt="string2"></p><p data-ke-size="size16">특히나 escaping이나 encoding의 경우 상황에 따라 빈번하게 사용되는 기능이기도 하고, <br>그 외 나머지 기능들 역시 DataGrip, DataSpell 등과 같이 개발용 IDE 외에서도 사용할 수 있기 때문에 적극 추천하는 플러그인입니다.</p>
<h3 id="camelcase" data-ke-size="size23">CamelCase</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/7160-camelcase">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">단축키 하나로 지정된 코드를 각종 네이밍 규칙들로 전환해주는 플러그인입니다. <br>바로 위의 String Manipulation 플러그인이 있는데도 굳이 이 플러그인을 설치해야하는 이유가 바로 <b>단축키</b> 때문인데요.</p>
<ul data-ke-list-type="disc">
<li>단축키: <code>Option</code> (<code>Alt</code>) + <code>Shift</code> + <code>U</code></li>
</ul>
<p data-ke-size="size16">위 단축키를 수행하면 <b>지정된 영역의 문자열이 다음의 순서로 변환</b>됩니다.</p>
<ul data-ke-list-type="disc">
<li>kebab-case</li>
<li>SNAKE_CASE</li>
<li>PascalCase</li>
<li>camelCase</li>
<li>snake_case</li>
<li>space case</li>
</ul>
<p data-ke-size="size16">JSON으로 <code>user_name</code> 의 필드가 넘어오고, 이를 <code>userName</code> 으로 맵핑해야할 경우 CamelCase 단축키로 편하게 변환하는 등 개발하는데 있어 굉장히 자주 사용하는 단축키입니다.</p>
<h3 id="translation" data-ke-size="size23">Translation</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/8579-translation">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">IDE 내에서 구글 번역기와 같은 사용성을 지원하는 플러그인입니다. <br>내부적으로 구글/알리바바/바이두 등의 번역 엔진을 사용하다보니 퀄리티가 굉장히 좋습니다. <br>특히 구글 번역처럼 <b>언어 자동 인식</b>이 되다보니 한국어로 자동인식 되는 등 사용하기가 굉장히 편합니다.</p>
<blockquote data-ke-style="style1">
<p data-ke-size="size16">특히 플러그인 메인 스폰서가 JetBrains 라서 잘 운영될 것 같습니다.</p>
</blockquote>
<p data-ke-size="size16">많은 다양한 기능들을 지원하다보니, <br><b>매번 웹브라우저로 화면 이동하는 횟수를 획기적으로 줄일수 있었습니다</b></p>
<ul data-ke-list-type="disc">
<li>선택된 단어 번역: <code>Ctrl</code> + <code>Command</code> + <code>U</code></li>
</ul>
<img src="https://blog.kakaocdn.net/dn/bPpvJu/btrowlguKo4/Zn99pYVknRG3PVh6Ha5uyk/img.png" alt="trans1"> <ul data-ke-list-type="disc">
<li>번역창 오픈: <code>Ctrl</code> + <code>Command</code> + <code>U</code></li>
</ul>
<img src="https://blog.kakaocdn.net/dn/ceppk8/btroyGYkTSm/5krWd5obeMuA6ww0CUrnB1/img.png" alt="trans2"> <ul data-ke-list-type="disc">
<li>문서 전체 번역</li>
</ul>
<img src="https://blog.kakaocdn.net/dn/tU9Gf/btrotkPW8g9/XkOIRFBboLQQsJV6K7yJk0/img.gif" alt="trans3">
<h3 id="json-parser" data-ke-size="size23">Json Parser</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/10650-json-parser">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16"><a href="https://codebeautify.org/jsonviewer">온라인 JSON Beautify</a> 와 같이 JSON을 재정렬시키는 기능을 지원합니다.</p>
<img src="https://blog.kakaocdn.net/dn/bCsi5p/btrox0QeNy0/Sd0azUjterNtTn16zjhec0/img.png" alt="json">
<p data-ke-size="size16">JSON 값을 확인하기 위해 매번 IDE =&gt; 브라우저로 화면 전환을 하고, 값을 입력하는 식의 행위가 꽤나 불편합니다. <br>특히 듀얼 모니터가 아니고 노트북 한대로 개발해야하는 경우엔 계속 화면 전환을 해야만 하기 때문에 JSON 데이터를 자주 보는 분들이라면 사용하시기에 좋습니다.</p>
<h3 id="react-snippets" data-ke-size="size23">React snippets</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/10113-react-snippets">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">React용 Snippets 입니다. <br>미리 정의된 <b>단축어</b>로 빠르게 React 코드를 생성해줍니다. <br>플러그인을 설치하시면 아래와 같이 <code>Live Template</code> 에 <code>React</code> Live Template이 추가된 것을 확인할 수 있습니다.</p>
<img src="https://blog.kakaocdn.net/dn/Xq5OG/btroyHbNr5k/Iv9fduvbNbq26uH8eKyNWK/img.png" alt="react">
<p data-ke-size="size16">단축어들을 입력하시면 빠르게 많은 양의 코드를 작성할 수 있으니 React 사용하시는 분들에겐 필수 플러그인입니다.</p>
<blockquote data-ke-style="style2">
<p data-ke-size="size16">물론 본인이 직접 Live Template을 만들어 쓰셔도 무방합니다.</p>
</blockquote>
<h3 id="randomness" data-ke-size="size23">Randomness</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/9836-randomness">Randomness</a></li>
</ul>
<p data-ke-size="size16">코드를 작성하다가 테스트나 기능 개발을 위한 랜덤값이 필요할때가 종종 있습니다. <br>그럴때 이 플러그인을 통해 <b>난수, 랜덤 문자열, UUID</b> 를 쉽게 생성할 수 있습니다.</p>
<ul data-ke-list-type="disc">
<li>단축키 : <code>Option</code> (<code>Alt</code>) + <code>R</code></li>
</ul>
<img src="https://blog.kakaocdn.net/dn/SqHhC/btrox2mZAFc/A5SDZfyG094uaBuyKpCnkk/img.gif" alt="random">
<p data-ke-size="size16">액션을 사용할 때마다 계속해서 랜덤 값이 삽입됩니다.</p>
<h3 id="eslint-restart-service-action" data-ke-size="size23">ESLint Restart Service Action</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/14119-eslint-restart-service-action">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">가끔 ESLint 변경시 자동 적용이 안될때가 있습니다. <br>그럴때 해당 플러그인이 설치 되어있으면 편하게 설정을 재적용할 수 있습니다.</p>
<ul data-ke-list-type="disc">
<li>단축키: <code>Command</code> (<code>Ctrl</code>) + <code>Shift</code> + <code>A</code> =&gt; <code>Restart ESLint Service</code> 검색 및 클릭
<ul data-ke-list-type="disc">
<li>별도의 단축키가 없어서 Action 검색 (<code>Command</code> (<code>Ctrl</code>) + <code>Shift</code> + <code>A</code>) 을 통해 실행합니다</li>
</ul>
</li>
</ul>
<img src="https://blog.kakaocdn.net/dn/6zoQb/btrox0Js5HF/lcT7OYqV8gLSsMWUXPyrK1/img.png" alt="eslint">
<h3 id="git-toolbox" data-ke-size="size23">Git Toolbox</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/7499-gittoolbox">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">IDE의 Git 기능을 확장 시켜주는 플러그인입니다.</p>
<ul data-ke-list-type="disc">
<li>Git Status 보여주기</li>
<li>에디터 내에 Git Blame 실시간 보여주기</li>
<li>현재 브랜치 Auto Git Fetch</li>
</ul>
<img src="https://blog.kakaocdn.net/dn/cOpeOr/btroxBJ0Lvx/3I7ldGJct1h1qjr2rJXXEk/img.png" alt="git1"><img src="https://blog.kakaocdn.net/dn/pYms3/btrox0vW5gB/ciGPGqiOn8osIcSLkjUkV0/img.png" alt="git2">
<p data-ke-size="size16">더 많은 기능에 대한 소개는 <a href="https://github.com/zielu/GitToolBox/wiki/Manual">공식 메뉴얼</a>을 참고하시면 좋습니다</p>
<h3 id="indent-rainbow" data-ke-size="size23">Indent Rainbow</h3>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/13308-indent-rainbow">플러그인 링크</a></li>
</ul>
<p data-ke-size="size16">들여쓰기의 깊이를 서로 다른 색으로 구별하기 쉽게 해주는 Plugin 입니다.</p>
<p data-ke-size="size16">주된 목표는 들여쓰기를 더 읽기 쉽게 만드는 것입니다. <br>잘못된 들여쓰기를 사용하면 <b>빨간색 줄을 강조</b> 표시하여 들여쓰기 문제를 더 빨리 찾을 수 있게 도와줍니다.</p>
<img src="https://blog.kakaocdn.net/dn/60jMn/btroswpvXk1/LLo5CjPKN7I76cNPsP69H0/img.png" alt="indent"></article></div>

기억보단 기록을

이동욱 (향로)

WebStorm (웹스톰)의 경우 JavaScript 개발을 목적으로한 IDE이기 때문에 기본 환경으로도 개발하는데 충분합니다. 
그렇기 때문에 플러그인이 필수는 아닙니다. 
다만, 좀 더 생산성있는 개발을 위해서는 적절한 플러그인을 사용하는 것을 권장합니다. 
특히 일부의 플러그인들은 거의 필수제로 사용되니, 아래 플러그인들을 확인해보시고 필요한 항목들은 설치해보시는 것을 추천드립니다.
기본적인 .env, .ignore 등의 플러그인은 다 설치되어있다고 가정했습니다.
생산성에 도움이 되는 플러그인들만 작성했습니다. 
테마 / 아이콘 / progress bar / power mode 등 UX에 관한 것들은 모두 배제했습니다.
String Manipulation
플러그인 링크
문자열을 다루는데 여러 편의기능을 제공하는 플러그인 입니다. 
거의 문자열에 관한 모든 기능을 제공한다고 보셔도 무방한데요. 
아래 기능 외에도 다양한 기능들을 지원합니다.
케이스 전환
정렬
필터링
증분
열 정렬
escaping
encoding
 
특히나 escaping이나 encoding의 경우 상황에 따라 빈번하게 사용되는 기능이기도 하고, 
그 외 나머지 기능들 역시 DataGrip, DataSpell 등과 같이 개발용 IDE 외에서도 사용할 수 있기 때문에 적극 추천하는 플러그인입니다.
CamelCase
플러그인 링크
단축키 하나로 지정된 코드를 각종 네이밍 규칙들로 전환해주는 플러그인입니다. 
바로 위의 String Manipulation 플러그인이 있는데도 굳이 이 플러그인을 설치해야하는 이유가 바로 단축키 때문인데요.
단축키: Option (Alt) + Shift + U
위 단축키를 수행하면 지정된 영역의 문자열이 다음의 순서로 변환됩니다.
kebab-case
SNAKE_CASE
PascalCase
camelCase
snake_case
space case
JSON으로 user_name 의 필드가 넘어오고, 이를 userName 으로 맵핑해야할 경우 CamelCase 단축키로 편하게 변환하는 등 개발하는데 있어 굉장히 자주 사용하는 단축키입니다.
Translation
플러그인 링크
IDE 내에서 구글 번역기와 같은 사용성을 지원하는 플러그인입니다. 
내부적으로 구글/알리바바/바이두 등의 번역 엔진을 사용하다보니 퀄리티가 굉장히 좋습니다. 
특히 구글 번역처럼 언어 자동 인식이 되다보니 한국어로 자동인식 되는 등 사용하기가 굉장히 편합니다.
특히 플러그인 메인 스폰서가 JetBrains 라서 잘 운영될 것 같습니다.
많은 다양한 기능들을 지원하다보니, 
매번 웹브라우저로 화면 이동하는 횟수를 획기적으로 줄일수 있었습니다
선택된 단어 번역: Ctrl + Command + U
 
번역창 오픈: Ctrl + Command + U
 
문서 전체 번역
Json Parser
플러그인 링크
온라인 JSON Beautify 와 같이 JSON을 재정렬시키는 기능을 지원합니다.
JSON 값을 확인하기 위해 매번 IDE => 브라우저로 화면 전환을 하고, 값을 입력하는 식의 행위가 꽤나 불편합니다. 
특히 듀얼 모니터가 아니고 노트북 한대로 개발해야하는 경우엔 계속 화면 전환을 해야만 하기 때문에 JSON 데이터를 자주 보는 분들이라면 사용하시기에 좋습니다.
React snippets
플러그인 링크
React용 Snippets 입니다. 
미리 정의된 단축어로 빠르게 React 코드를 생성해줍니다. 
플러그인을 설치하시면 아래와 같이 Live Template 에 React Live Template이 추가된 것을 확인할 수 있습니다.
단축어들을 입력하시면 빠르게 많은 양의 코드를 작성할 수 있으니 React 사용하시는 분들에겐 필수 플러그인입니다.
물론 본인이 직접 Live Template을 만들어 쓰셔도 무방합니다.
Randomness
Randomness
코드를 작성하다가 테스트나 기능 개발을 위한 랜덤값이 필요할때가 종종 있습니다. 
그럴때 이 플러그인을 통해 난수, 랜덤 문자열, UUID 를 쉽게 생성할 수 있습니다.
단축키 : Option (Alt) + R
액션을 사용할 때마다 계속해서 랜덤 값이 삽입됩니다.
ESLint Restart Service Action
플러그인 링크
가끔 ESLint 변경시 자동 적용이 안될때가 있습니다. 
그럴때 해당 플러그인이 설치 되어있으면 편하게 설정을 재적용할 수 있습니다.
단축키: Command (Ctrl) + Shift + A => Restart ESLint Service 검색 및 클릭
별도의 단축키가 없어서 Action 검색 (Command (Ctrl) + Shift + A) 을 통해 실행합니다
Git Toolbox
플러그인 링크
IDE의 Git 기능을 확장 시켜주는 플러그인입니다.
Git Status 보여주기
에디터 내에 Git Blame 실시간 보여주기
현재 브랜치 Auto Git Fetch
더 많은 기능에 대한 소개는 공식 메뉴얼을 참고하시면 좋습니다
Indent Rainbow
플러그인 링크
들여쓰기의 깊이를 서로 다른 색으로 구별하기 쉽게 해주는 Plugin 입니다.
주된 목표는 들여쓰기를 더 읽기 쉽게 만드는 것입니다. 
잘못된 들여쓰기를 사용하면 빨간색 줄을 강조 표시하여 들여쓰기 문제를 더 빨리 찾을 수 있게 도와줍니다.

추천하는 WebStorm Plugin

댓글