[IntelliJ] Quokka plugin 소개 및 사용법

Javascript 개발을 진행하다보면, 프로토 타입을 개발을 위한 격리된 공간이 필요할때가 있습니다.

• 특정 라이브러리의 함수가 어떤 결과를 출력하는지 확인하고 싶은 경우
• JS를 강의하거나, 테스트로 실행 후 결과를 바로 확인하고 싶은 경우

보통 이런 이유로 온라인 편집기 (브라우저 개발자 도구의 Console)를 사용합니다.
하지만 이런 온라인 편집기의 최대 단점은 기존에 사용하던 개발환경이 아니라는 것입니다.

 

게다가 그간 사용하던 단축키와 다르니 매번 할때마다 버벅버벅 헤매여서 시간을 효율적으로 쓰기 어렵죠T.T..

 

이 모든 단점을 해결해줄 Quokka 플러그인을 소개합니다!

 

---

# 설치 방법

 

저는 주로 IntelliJ 프로그램에서 주로 사용하고 있어,

해당 프로그램에서 설치하지만 VS Code에서도 지원하고 있는듯 합니다.ㅎㅎ

 

intelliJ IDEA - Preference - Plugins - Marketplace 에서 quokka 설치

 

위 사진에서 보이는 것처럼 Jetbrains Marketplace에서 제공하는 Quokka 플러그인을 설치합니다.

 

★ 필수 ★

Qukka 플러그인을 설치하기 전 node와 babel 이 설치되어있다는 가정입니다.

Quokka 플러그인에서 내부적으로 node와 babel을 사용하는 것 같습니다. 만약 이 2개 모두 설치가 안되어 있으면, Quokka 플러그인 내부의 설정파일에서 node와 babel 사용에 대한 설정해줘야하는데 이때부터 피곤해질 수 있습니다.ㅎㅎ

 

[참고] Quokka 플러그인 글로벌 설정파일에서 node와 babel 사용을 위한 위치 설정

https://quokkajs.com/docs/configuration.html#global-config-file

 

 

---

# 사용법

(1) Action 검색 (mac : ⌘ + shift + a)로 quokka 를 검색합니다.

 

 

(2) Quokka 모드로 전환되면, 신규 스크립트 파일을 생성하고, 테스트를 해보면 실시간으로 테스트가 가능합니다.

 

Quokka plugin play 

 

---