본문 바로가기
Otter's [ 개발새발 ]/# 프론트엔드 공부 - Typescript

[Typescript] VS Code - Typescript 실시간 실행

by byeonPig 2022. 10. 4.

[ 발단 ]

타입스크립트 공부를 서적을 통해 시작하려고 하는데, 타입 스크립트의 경우 실행을 위해서는 자바스크립트로 트랜스파일하는 과정을 거쳐야 한다. 이를 위해서 그때마다 terminal에서 명령을 통해 변환 후 실행하는 과정을 거쳐야 한다. 공부 과정에서 수도 없이 실행해야 할텐데 이 과정이 매우 비효율적이라고 생각했다.


해결 - Code Runner(VS Code Extension)와 ts-node(node.js 모듈) 이용 

 

[ 과정 ]

1. npm install -g ts-node

 

npm install 명령어를 이용해 ts-node 모듈을 전역설치(-g: global)한다.

 

npm install -g ts-node

 

 

권한 에러...

mkdir 명령어를 실행 중 권한 에러가 발생했다. 

-g 옵션이 어떤 의미인지 몰랐을 때라 간단하게 공부하는 local directory의 권한을 chmod -R 777 명령어로 간단하게 풀어줬지만 해결되지 않았다.

알고보니 -g 옵션이 전역설치 명령어로 내 PC의 노드모듈을 저장하는 directory에 ts-node 모듈을 설치하는 것이기 때문에 해당 directory에 대한 권한을 요구하는 것이었다...(좀만 생각해보면 당연한 이야기지만... 바보 수달...ㅎㅎ...)

그래서 누가 내 PC를 해킹하거나 건들 일은 없겠지만... 그래도 sudo 명령어를 이용해 일시적으로 관리자 권한을 이용해 설치하는 것이 맞다고 생각해 그렇게 문제를 해결했다.

 

 2. Code Runner VS Code Extension 설치

 

Code Runner
 

Code Runner - Visual Studio Marketplace

Extension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C,

marketplace.visualstudio.com

 

3. 실행!

 

실행은 오른쪽 위 버튼 중 Run Code 버튼을 누르거나 단축키(나의 경우 Control + Option + N)를 이용해 코드를 실행할 수 있다!

짠~! ㅎㅎ

 

꾸준히 열심히!