블록체인의 DApp 개발을 하다보면 웹사이트 구성에 Javascript가 꼭 필요하다는 걸 알 수 있습니다.
또 Javascript는 강력한 블록체인 라이브러리들을 제공하는데(web3.js, ether.js 등등) 이런 이유들로 블록체인 공부에 앞서 javascript를 공부하고 있습니다
오늘은 한걸음 더 나아가, Javascript에 안정성을 더한 Typescript를 살펴보고 환경설정을 해본뒤, 기본 개념들을 살펴보겠습니다
TypeScript란 무엇인가?
TypeScript는 JavaScript의 상위 집합(superset) 언어입니다.
Javascript에서 타입 검사가 확장 추가된 언어라고 보면 됩니다
타입 검사란 변수가 문자인지,숫자인지, bool값인지 등을 미리 선언해 두는 것입니다.
타입 검사 기능은 프로젝트 진행 시 에러를 사전에 방지하고, 프로그램의 품질과 생산성을 높혀 줍니다
타입스크립트는 런타임이 따로 존재하지 않고 컴파일러가 존재해 타입스크립트=> 자바스크립트로 컴파일해 실행합니다
용어정리
*상위 집합(superset) :
자연수와 정수를 예로 들면 자연수의 집합은 정수 집합의 상위 집합입니다.
*런타임 환경 :
프로그램이 실행되는 환경을 의미합니다. 핸드폰의 경우 ios,Android 가 런타임 환경이고 HTML,CSS,JS 를 모아 만든 페이지가 실행되는 웹 브라우저(크롬 등등) 도 런타임 환경입니다.
*컴파일 :
예를 들자면,서로 다른 언어로 된 책을 통번역하는 것입니다. 타입스크립트라는 언어를 자바스크립트라는 언어로 파일 전체를 한번에 바꾸는 행위입니다
TypeScript 환경설정하기 (23년 08월 기준)
Node.js 가 설치된 것을 가정하고 환경설정을 진행합니다. Node.js 가 설치되지 않았다면 먼저 설치 후 다시 시도하시길 바랍니다
1. package.json 초기화
터미널에 입력해주면 됩니다. vscode의 경우 [ctrl+ `] 을 입력하면 터미널이 열립니다
npm init -y
2. typescript 패키지 설치
npm install -D typescript주의사항 : -D는 대문자이고 typescript는 소문자로 작성해주셔야 합니다.
-D 란 ?
-D 는 'Development Dependency" 를 의미합니다. 해당 패키지는 개발 환경에서만 필요하고, 실제 배포시에는 필요하지 않다는 뜻을 가지고 있습니다. 우리가 개발할때만 쓰일 패키지를 다운받는다! 라는 거죠.
용어정리
*패키지:
코드와 메타데이터를 묶어 재사용 가능한 단위로 제공하기 위한 것입니다
*라이브러리:
특정 작업을 수행하거나 문제를 해결하기 위해 미리 작성된 코드의 모음입니다
*package.json:
어떤 패키지가 설치됐는지 적어두는 장부 개념입니다. 이 장부를 바탕으로 npm 을 통해 다른 프로젝트를 진행할때 참고해서 다운로드 받을 수 있습니다
3. 설치유무 확인
잘 설치되었는지 중간점검을 해보겠습니다. 아래의 코드를 터미널에 입력해줍니다
npx tsc --version
npx 란 ?
npm 쓰고 있었는데 갑자기 npx 가 나왔습니다. 원래는 npm scripts 에 명령어를 미리 설정 해두고 실행해야 하지만 npx를 사용하면 미리 설정해두지 않아도 간편하게 명령어를 실행 할 수 있습니다. npx를 통한 명령어와 npm을 통한 명령어 모두 장단점이 있기에 둘다 사용됩니다.
tsc 란 ?
타입스크립트 컴파일러(typescript compiler)의 약자입니다. 이 명령어는 ts 코드를 js코드로 컴파일 하는 역할을 합니다
4. tsconfig.json 생성
다음으로 아래의 명령어를 입력해 줍니다
npx tsc --init
명령어가 정상적으로 입력되면 tsconfig.json 파일이 생성됩니다.
여기까지가 설정 끝입니다!!
tsconfig.json이란?
타입스크립트는 컴파일러를 통해 자바스크립트로 변환됩니다. 이때, 변환된 파일을 어디에 저장할지, 어떤 파일을 컴파일 하고 어떤 파일을 컴파일 하지 않을지 등의 설정을 해주는 공간입니다. 영어로 configure는 설정하다 라는 의미를 갖습니다.
tsconfig.json 예시사진
객체 안에 compilerOptions라는 또다른 객체가 보입니다. 이 객체 안에서 컴파일 설정을 해주면 됩니다.
설정은 너무너무 많아서 하나하나 설명드리기 보다는 핵심적인 몇개만 다음 게시글에서 알려드리겠습니다
