공부기록/Typescript

[타입스크립트] 타입스크립트 컴파일, lite-server 설치

Jenner 2023. 1. 17. 13:34

초기설정: 

처음 만든 폴더를 vscode에서 연다

 

해당 폴더에 index.html파일을 생성한다

 

 

app.js 파일을 import해준다

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Understanding TypeScript</title>
    <script src="app.js" defer></script>
  </head>
  <body></body>
</html>

 

 

app.ts파일을 생성하고 잘 뜨는지 console.log 코드를 작성해준다.

 

console.log("Code");

 

 

 

 

타입스크립트  컴파일해주기

ctrl+shift+`를 눌러 vs code에서 터미널을 실행해준뒤 (실행하면 현재 경로의 터미널이 열린다)
아래의 명령어를 입력해 app.ts파일을 컴파일해준다 

 

tsc app.ts

 

그러면 app.js파일이 생성된다.

 

 

lite-server 설치하기

 

터미널에서 npm init으로 package.json파일을 만들어준다. (lite-server를 설치할 기본작업이다. )
설치할 땐 모두 엔터를 눌러 기본값으로 설정해준다. 

 

npm init

 

package.json파일이 생성된 것을 볼 수 있다. 

 

 

{
  "name": "chapter2",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

 

 

live-server를 설치해 준다.

 

npm install --save-dev lite-server

 

 

npm install 명령어로 설치해 주는 것인데, 

개발전용으로 하기 위해 --save-dev를 입력하고 

lite-server를 설치해 준다. 

 

개발전용으로 하게 되면 메인코드의 일부로 실행되는 코드를 포함하지 않게 된다. 

 

 

 

Package.json파일에 script부분 설정을 변경해준다. 

 

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },

 

이제 npm start로 스크립트를 실행할 수 있다. 

 

 

 

lite-server는 package.json 파일 옆에 항상 index.html 파일을 제공하는 간단한 개발 서버다.

이 파일은 기본적으로 여기 보이는 이 URL인 localhost:3000에서 애플리케이션을 제공한다.

원래는 디렉토리의 다른 파일이 변경될 때마다 페이지를 자동으로 다시 로드하지 않지만
lite-server를 이용하게 되면 자동으로 로드해준다.