IntelliJ(WebStorm)를 어떻게 가볍게 사용할까?

IntelliJ(WebStorm)를 어떻게 가볍게 사용할까?

이번에 처음 사용하게 된 IntelliJ(WebStorm)를 어떻게 하면 가볍게 사용 가능한지 알아보고 있었는데 IntelliJ(WebStorm)와 관련된 것들에 대해 깊게 찾아보고 있다.
그 중 IntelliJ(WebStorm)와 VSCode의 차이점은 무엇인가? 라는 의문을 가지게 되었다. 간단하게 내린 결론은 IntelliJ(WebStorm)는 Java JVM에서 통해 동작하고 VSCode는 V8기반의 Electron에서 동작하고 있다는 점 이다.

그래서 IntelliJ(WebStorm)을 어떻게 가볍게 사용하기 위한 옵션 끄기, 메모리 관리등에 대한 설명에 앞서 JVM, V8기반 Electron에 대해 간단하게 설명하고자 합니다. (JVM, Electron에 대한 설명은 너무 간단하므로 많은 내용은 REF를 참고 바랍니다.)

JVM 이란

Java Virtual Machine

글자대로 자바 가상 기계(컴퓨터) 입니다.
자바는 운영 체제에 종속되지 않아 이를 실행시키기 위해 만들어진 가상 기계라고 생각하면 됩니다.

자바 프로그램, 자바 바이트코드로 컴파일되는 다른 언어로 작성된 프로그램을 실행할 수 있게 해주는 가상시스템
(출처: WIKI)

JVM은 두가지 주요 기능이 있습니다.

1. 자바 프로그램이 모든 장치 or 운영 체제에서 실행되도록 허용
2. 프로그램 메모리를 관리 및 최적화 합니다.

V8기반 Electron 이란

Electron은 NodeJS를 기반으로 JavaScript, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다.

Electron의 핵심 구성요소를 보겠습니다.

1. 오픈소스 웹브라우저 크로미움(Chromium)
2. 브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 NodeJS
3. 오픈소스 자바스크립트 엔진 V8

다음과 같이 구성되어 있고 프론트엔드로 크로미움 / 백엔드로 NodeJS를 사용하여 크로미움 렌더링 라이브러리를 NodeJS와 결합하며 이 둘을 V8을 공유합니다.

Electron 장/단점

Electron 장점

1. 낮은 진입 장벅
   JavaScript, HTML, CSS 및 기타 웹 기술을 사용
2. 개발 속도/비용 감소
   JavaScript 인터프리터 방식 + 웹 애플리케이션의 비즈니스 로직, 디자인 및 구조를 재사용
3. 크로스 플랫폼 지원
   다양한 OS에 적합한 록앤필을 맞추며 친숙한 JavaScript, HTML, CSS를 활용해 애플리케이션을 구성
4. 노드 접근 권한 관리
   웹뷰에서 NodeJS에 대한 접근 권한을 관리

Electron 단점

1. 큰 설치 파일 용량
   크로미움과 NodeJS가 포함되어 있기 때문에 기본 100MB이상
2. 상대적으로 느린 속도
   데스크톱 애플리케이션은 시스템 리소스, RAM을 많이 차지
3. 크로스 플랫폼 빌드
   하나의 플랫폼에서 모든 플랫폼용 데스크톱 애플리케이션을 빌드할 수 없습니다. (데스크톱 애플리케이션이 기본 OS에 대한 종속성을 가질 경우, 해당 플랫폼에서만 컴파일할 수 있습니다.)

가볍게 만들기

여기서 초점을 잡은 부분은 1. JVM 메모리 2. 언어 관리 옵션 입니다.
아직, 많은 메모리를 잡아먹는 개발을 하지 않았지만 추 후 메모리를 잡아먹는 부분을 잘 파악하기 위해 작성하게 되었습니다.
우선 가볍게 만들기 들어가기 앞서 Memory 사용량을 알기 위해 IntelliJ Memory Indicator을 실행시켜 확인을 해봅시다.

1. JVM Memeory

메모리 관리 영역에 대한 JVM 플래그들을 살펴보고 수정하면 성능을 발전시키는 데 도움이 될 것입니다. 우선 대표적인 2가지 옵션을 알아보고 나머지 옵션을 필요에 따라 추가하면 됩니다. (나머지 옵션 링크를 통해 확인 가능)

-Xmx

IntelliJ IDEA를 실행하기 위해 JVM이 할당할 수 있는 최대 메모리 힙 크기를 제한합니다. (기본값은 플랫폼에 따라 다릅니다.)

-Xms

IntelliJ IDEA를 실행하기 위해 JVM에서 할당한 초기 메모리를 지정합니다. (기본값은 플랫폼에 따라 다릅니다. / -Xmx의 절반으로 설정)

Setting 옵션

현재 사용하는 언어는 HTML, CSS, JavaScript 입니다. 해당 옵션을 가볍게 살펴보고 이외 언어의 옵션들은 사용하지 않으면 실행되지 않지만 IntelliJ에서 이러한 옵션들을 어떻게 찾아가는지 확인이 어렵습니다. 또한 IntelliJ는 모든 옵션을 켜두고 줄여가는 형식이기 때문에 사용하지 않는 언어에 관한 옵션들은 꺼두는 것이 좋다고 판단하여 특정 Options들을 정리하게 되었습니다.

다음과 같이 IntelliJ Setting에서 열어보며 확인을 해본 결과
Inspections, Language Injections, TextMate Bundles, Diagrams을 수정하면 될 것 같았습니다.

Inspections

컴파일하기 전에 비정상적인 코드를 감지하고 수정하는 일련의 코드 검사

Language Injections

코드에 포함된 다른 언어의 코드 조각으로 작업할 수 있습니다. 문자열 리터럴에 언어(HTML, CSS, XML, ...)를 삽입하면 해당 리터럴을 편집하기 위한 포괄적인 코드 지원을 받을 수 있습니다.

TextMate Bundles

TextMate/SublimeText 2 번들을 가져오고 IntelliJ IDEA의 색 구성표를 TextMate 색 구성표에 매핑합니다.

Diagrams

다이어그램의 기본 가시성 설정 및 레이아웃을 구성할 수 있습니다.

마치며

IntelliJ(WebStorm)을 사용하게 되면서 IntelliJ(WebStorm)은 VSCode와 다르게 옵션이 켜져있고 끄는 형식으로 작업을 한다고 합니다.
그래서 IntelliJ(WebStorm)자체에서 잡아먹는 것들도 많아 무겁다는 인식이 더욱더 많아진 것 같다는 생각을 했습니다.
이번에 IntelliJ(WebStorm)을 간소화 시켜 사용하는 방법에 대해 간단 포스팅을 하였는데 직접 사용해보면서 수정하는 것이 좋을 것 같다는 생각을 많이 하게 되는 포스팅입니다.

REF

https://www.infoworld.com/article/3272244/what-is-the-jvm-introducing-the-java-virtual-machine.html
https://doozi0316.tistory.com/entry/1%EC%A3%BC%EC%B0%A8-JVM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%9E%90%EB%B0%94-%EC%BD%94%EB%93%9C%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B2%83%EC%9D%B8%EA%B0%80
https://en.wikipedia.org/wiki/Java_virtual_machine
https://www.samsungsds.com/kr/insights/1239178_4627.html
https://www.electronjs.org/
https://linux.systemv.pe.kr/%EC%9C%A0%EC%9A%A9%ED%95%9C-jvm-%ED%94%8C%EB%9E%98%EA%B7%B8%EB%93%A4-part-4-%ED%9E%99-%ED%8A%9C%EB%8B%9D/
https://blog.ddoong2.com/2019/07/29/IntelliJ-IDEA-%EC%98%B5%EC%85%98/