[NativeScript][IDE] Visual Studio Code 이용

NativeScript 에서는 아래 화면과 같이 Visual Studio Code 와 WebStorm을 소개 한다.

Tool 소개 사이트 : https://nativescript.nl/tools/nativescript-ides/

위 사이트 에 나와 있던 내용이다.

WebStorm은 개인적으로 사용하면 무료이지만, 기업에서는 사용할려면 돈을 지불 해야 한다.

그래서 나 같은 경우 무료인 Visual Studio Code로 결정 했다.

그럼 Visual Studio를 설치 하고, 빌드까지 해보겠다.

1. Visual Studio Code 다운 로드

위에 나온 https://code.visualstudio.com/ 사이트 가서 다운 받은 후, 압축 을 해제 한다. (MacOS 임)

압축 해제 하고, 실행만 하면 문제 없이 실행 될 것이다.

2. NativeScript 플러그인 설정

https://www.nativescript.org/nativescript-for-visual-studio-code 사이트로 이동 후,

' Download Extension' 버튼을 누른다.

그럼 다운 'Install' 버튼을 누른다.

그럼 아래와 같이 확장 하실 건지 물어보는 창이 뜬다.

'Visual Studio Code 열기' 를 누른다.

이제 마지막으로 '설치'를 누른 후, 다시 로드 하면 완료 된다.

이제 빌드를 할려면 기본적인 template 소스를 받아야 한다.

참고로 정확하게 실행 하기 위해선 아래 올려 놓은 글이나 NativeScript quick setup 사이트로 가서 환경 설정을 해놓으셔야 합니다.

환경 설정 : http://gogorchg.tistory.com/entry/NativeScriptVue-%EA%B8%B0%EB%B3%B8-Template-%EC%83%9D%EC%84%B1

NativeScript quick setup : https://docs.nativescript.org/start/quick-setup

그럼 소스를 받아 봅시다.

콘솔창을 열어 놓은 상태에서 아래 명령어를 입력 하세요. NativeScript template 소스를 생성 하는 명령어 임.

tns create HelloWorld --template nativescript-template-ng-tutorial

생성된 HelloWorld 폴더로 이동 한다.

cd HelloWorld

이제 실행을 해보자!

tns run ios

or

tns run android

위와 같은 형태는 콘솔 창에서 실행 하는 것이다.

그럼 왜.. IDE를 쓰지??

당연 Visual Studio Code 에서 디버깅 및 실행이 가능 하다.

먼저, 위에서 받았던 소스를 불러 와 보자.

좌측 상단 '폴더 열기' 버튼을 누른 후, 다운 받은 'HelloWorld' 폴더를 선택 하고 열기 버튼을 누른다.

폴더를 열면 아래와 같은 형태로 불러와 진다.

이제 왼쪽 메뉴 중 4번째 벌레 모양(디버그 탭) 을 선택 한다. 그럼 상단에 '구성 없음' 이라는 선택바가 있을 것이다.

선택바를 선택 하면 하단 과 같은 팝업이 뜰 것이고, '구성 추가...' 메뉴를 선택 한다.

상단 중간에 환경 선택 하는 부분이 나오는데 여기서 'NativeScript'를 선택 한다.

그럼 자동적으로 NativeScript를 빌드 활 수 있는 launch.json 파일이 생성 되고, 선택 바에서 빌드 형태를 선택 할 수 있게 된다.

좀 더 다양한 빌드 구성은 하단에 '구성 추가...' 버튼이나 선택바에 있는 메뉴를 이용하면 된다.

그럼 참고 하세요.