TS 개발 환경 세팅(컴파일, 개발 서버, 디버깅, 프로젝트 생성, ESLint 적용)

타입스크립트(컴파일러) 설정

• ts → js로 컴파일하는 역할

• sudo npm install -g typescript / npm i -D typescript
• 후에 tsc 타스파일이름 으로 컴파일할 수 있게 함
• 컴파일 하면 ts와 같은 파일명으로 js 파일이 생성됨

• npm init / npm init -y (?)
• package.json 파일이 생성됨
• 역할 ?

• 참고
• npm은 Node.js를 설치하면 같이 설치됨
• 이 때 js와 ts 파일을 같이 열어두지 말긔 → IDE에서 중복 함수 구현으로 오류 발생할 수 있음

컴파일 하기

1. 특정 파일 컴파일 하기 : tsc 파일
• package.json에 컴파일 명령어 선언하기 ⇒ scripts에서 “tsc” : “tsc src/main.ts”

2. 전체 프로젝트(다수의 파일) 컴파일
• tsc —init : 프로젝트 대상으로 모든 ts파일을 컴파일 한다는 뜻, 초기에 한번만 하면 됨
⇒ tsconfig.json 이 생성됨

3. 관찰 모드 : 변경될 때 마다 다시 컴파일 하도록 하는 감시 모드
1. tsc 명령어 뒤에 —watch 이나 -w 덧붙임
• 특정 파일 → tsc 파일 -w
• 전체 파일 → tsc -init 후에 tsc -w
2. 저장할 때마다 컴파일을 해서 에러 등을 콘솔창에 즉시 보내주고, 브라우저에도 반영이 바로 된다
 

개발 서버 (+자동 새로고침)

• 코드를 변경할 때마다 자동으로 페이지 새로고침이 되기 위해 기본 설정에다 도구를 설치해야 함

1. npm install : 프로젝트에 적용되는 의존성을 설치하는 명령어
• +) —save -dev : 개발 전용 의존성으로 표시 (?)
• +) lite-server : 편리한 도구(패키지) 이름, 간단한 개발 서버
• localhost:3000
• 항상 index.html 파일을 렌더링
• 컴파일 할 때마다 페이지 자동 새로고침

2. lite-server 실행
1. 우선 package.json에서 script에 “start”:”lite-server” 입력해서 명령어 등록
2. npm start 으로 개발서버 (새로) 실행
 
• 참고) node_modules 폴더 : third-party 패키지들과 그에 딸린 의존성이 저장되어 있음
⇒ npm start 시 자동으로 설치됨

프로젝트 생성(for 콘솔 테스트)

ESLint, Prettier 적용

1. ESLint 설치 및 설정
0. VSCode에서 ESLint 확장 프로그램 설치
1. eslint, @typescript-eslint/parser, @typescript-eslint/eslint-plugin 패키지를 개발 의존성으로 설치
2. eslintric.json에서 설정

{ 
	"extends": [
		"eslint:recommended", 
		"plugin:@typescript-eslint/recommended", 
		"plugin: prettier/recommended"
	]
	"parser": "@typescript-eslint/parser"
}

2. Prettier 설치 및 설정
0. VSCode에서 Prettier 확장 프로그램 설치
1. prettier, eslint-plugin-prettier, eslint-config-prettier 를 개발 의존성으로 설치
2. .prettierrc 파일에서 설정

{
	"semi": false, //세미콜론 x
	"singleQuote": true,  //작은 따옴표만
	"endOfLine": “lf” //파일의 마지막 줄은 항상 줄바꿈
}

3. .vscode 폴더에 settings.json 파일 생성 후 해당 코드 추가

{
	"[typescript]" : {
		"editor.formatOnSave": true, 
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

vscode에서 디버깅

1. 디버깅을 시작하면 launch.json 파일로 가서 서버 url 확인
• .vscode 폴더(launch.json)가 없을 시 ⇒ 왼쪽에 디버거 메뉴를 누르고 create a launch.json file 클릭)
• npm start 프로세스가 실행 중인지 확인 ⇒ package.json에서 scripts에 “start” : “lite-server” 명시

2. webRoot는 파일의 호스트라고 알려줌

3. tsconfig.json > compileOptions > sourceMap : true 로 설정

• 디버깅 창에서 watch ⇒ 변수를 임의로 조작해봤을 때, 결과를 볼 수 있다.(물론 실제엔 영향 x)

• call stack : 현재 호출된 함수를 볼 수 있음

• 실행 버튼 차례로 [스크립트 이어서 실행, 다음 줄 실행(함수 안으로 들어가진 않음), 현재 함수 호출에서 들어감, 나옴 ]

• (참고)
• vscode에서 코드 제안 : command + I