프로젝트 구성 및 기본 설정 추가

프로젝트 Github

프로젝트 깃헙 해당 링크로 접속하여 Readme 참고
: 전세계 코로나 현황을 보여주는 사이트(존스홉킨스 코로나 현황 사이트 참고 Toy project)

🔨 프로젝트 초기 설정하기

1. npm 초기화

npm init -y

해당 명령어를 IDE의 터미널 창에 입력 후, 다음과 같이 package.json 파일이 생성됬는지 확인한다. (*작업하는 프로젝트 폴더로 cd후 npm명령어를 실행한다.)

2. 타입스크립트 라이브러리 설치

npm i typescript --save-dev 

다음 명령어를 실행 후, package-lock.json 파일과 node_modules 폴더가 제대로 설치됐는지 확인한다.

3. 설정 파일 생성 및 기본값 추가

tsconfig.json 파일을 새로 생성 후 다음과 같이 compilerOption을 초기화

{
    "compilerOptions": {
        "allowJs": true,
        "target": "ES5",
        "outDir": "./built",
        "moduleResolution": "Node",
    },
    "include": ["./src/**/*"]
}

• allowJs: JS 파일 사용 허용
• target: 허용 JS 문법 범위
• outDir: JS 파일은 명시된 폴더(built)로 emit됨
• moduleResolution: Node.js CommonJS 실행을 위함
• include: src 폴더 밑에 있는 파일들만 컴파일

4. 자바스크립트 파일을 타입스크립트 파일로 변환

단순히 파일의 확장자를 .js 에서 .ts 로 변경 후 저장

5. tsc 명령어로 타입스크립트 컴파일

1. package.json에서 scripts에 "build": "tsc" 추가

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  }

2. npm run build 후 타입스크립트 파일로 정상 작동하는지 확인
   (이때 타입에 대한 작업은 일절 하지 않았기 때문에, 오류가 나는게 정상입니다.)
   

위 과정들을 모두 거치면 프로젝트의 기본 구성 및 설정이 끝났습니다! 🥳