VSCode 로 TypeScript 시작하기

VSCode 로 TypeScript 시작하기

NPM설치

먼저 NPM을 설치합니다. https://nodejs.org/en/ 에 들아가서 최신 버전을 받습니다. 

사이트에 들어가면 아래 사진과 같은 페이지를 볼 수 있습니다. ( 2019-2-22 기준 )

잠깐, NPM을 아직 모르신다구요? NPM은 Node Package Module의 약자로 Node.js 에서 사용 가능한

모듈들을 패키지화 시킨 것 입니다. 결국은 타입스크립트를 하기 위해선 Node.js가 필요한 것이죠.

[그림1. npm 다운로드 페이지]

먼저 왼쪽 10.15.1 LTS 과 오른쪽 11.10.0 Current가 있습니다. 

LTS는 Long Term Supported 줄임말로써 영어에서 나오듯 장기적으로 지원되는 즉, 신뢰도가 높은 버전입니다. 유지/보수와 보안에 초점을 맞춰 대부분 유저에게 추천되는 버전입니다.

그와 반대로 오른쪽 Current는 최신 버전입니다. 업데이트가 잦고 기능이 변경될 확률이 높습니다. 간단한 테스트 할때는 사용하셔도 됩니다. 하지만 추천하지는 않습니다.

이제 원하시는 경로에 다운로드를 하시면 되겠습니다.

Package.json 생성

다운이 완료 되셨으면 workspace를 생성해보겠습니다. 아무경로에 원하시는 폴더로 경로를 만듭니다.

저는 a드라이브 nodejs라는 폴더를 만들었습니다. 

[그림2. Workspace 지정]

필자는 작업중인 단계여서 안에 package.json이 있습니다. 현재는 저폴더에 아무것도 있으면 안됩니다.

만드신 경로를 기준으로 CMD창을 열어봅니다. 현재 디렉토리에서 바로 CMD를 설정 안해주셨다면 

Window 10 기준으로는 Shift + 마우스 오른쪽 키를 누르면 CMD창을 열수 있는 항목이 나옵니다.

자 이제, 명령어로 npm init 를 쳐주면 끝입니다. 

[그림3. package.json]

저 명령어를 입력하게 되면 질문들이 여러개 나옵니다. 뭐 package이름은 무엇으로 할껏이냐 그냥 모두 질문에 엔터 누르면 됩니다 ㅎㅎ.. 이제 저 package.json 으로 필요한 모듈을 다운 받게 되면 저기로 무엇을 다운 받고 버전이 무엇인지 확인할 수 가 있습니다. 여기까지가 끝입니다. 솔직히 이부분도 VSCode로 가능합니다! VSCode에는 내장 cmd창이 있거든요 ㅎㅎ

VSCode 다운로드

https://code.visualstudio.com/download 여기 사이트에 들어가 해당 운영체제에 맞게 설치를 해주시면 되겠습니다.  이제 VSCode를 열어 보겠습니다. 아래 사진을 기준으로 왼쪽 메뉴에 집중해주세요.

왼쪽 빨간색 네모 박스를 클릭해 자신이 사용하고 싶은 에디터 라이브러리를 다운 받아주세요.  저는 아래 사진 과 같이 4개만 받았습니다. 공통점은 개발하고자 하는 언어를 더욱더 쉽게 해주죠

이정도만 다운 받아도 타입스크립트를 개발하는데 문제는 없습니다. 이제 모든 준비는 끝났습니다. 아래 그림과 같이 아까 package.json을 설치한 경로로 열어줍니다.

자이제 확장자가 .ts인 파일을 하나 만들어 줍니다. 그리고 아래와 같이 코드를 입력해 줍니다.

VScode 맨 상단에 Terminal 이라는 창이 보일겁니다. 그중 new Terminal을 눌러 cmd창을 키우고 아래와 같이 명령어를 쳐줍니다. 

쨘.. 드디어 출력문이 나왔군요,,. map을 사용해보았습니다. 이런식으로 타입스크립트를 연습해 보면 됩니다.

다음 장에는 타입스크립트 문법을 설명하겠습니다,. ㅎㅎ

2월도 곧 끝이네요... 홧팅 ㅎ