개요 🔔

해당 포스팅에서는
그동안 사용해왔던 프레임워크에 포함되어 사용하는 타입스크립트가 아닌,
자바스크립트 파일을 컴파일해서 사용하고,
이를 사용하기 위해 초기 환경세팅에 대해 정리하고자 한다.

Typescript Compile 설치 🔮

  • Node.js 용 Typescript Compiler 모듈을 global 로 설치 해 준다.

-g 옵션을 주어 전역으로 설치하기 때문에
어느 경로에서나 tsc 명령어를 사용할 수 있다.

npm i typescript -g

yarn add global typescript

브라우저 테스트 🌐

Typescript 를 전역으로 설치하고,
다음 과정을 거치면 .ts 형식의 파일을 웹 브라우저에서 실행시킬 수 있다.

tsc --init

해당 명령어를 실행하면, 지정한 경로에 tsconfig.json 파일이 생성된다.

생성된 파일을 열어 다음과 같이 설정을 수정 해 준다.

"rootDir": "./" 주석 해제
"outDir": "./" 주석 해제 후 "outDir": "./dist"로 수정

rootDir 은 Typescript 소스 파일의 기본 디렉토리로 지정한다는 의미이다.
outDir 은 컴파일된 Javascipt 파일의 출력 디렉토리를 ./dist 로 변경한다는 의미이다.

설정을 모두 마쳤다면,
tsc --w 혹은 tsc --watch 명령어를 실행한다.

tsc -w 옵션은 .ts 파일을 .js 로 자동 컴파일 시켜준다.

명령어를 실행하면 지정한 폴더 경로에 /dist 폴더가 생성되고,
그 안에 컴파일된 .js 파일이 생성됨을 확인할 수 있다.

ESLint 📝

ESLint 란,
정적 문법 검사 및 코딩 스타일 등을 점검하여
런타임 오류나 코드의 가독성을 높이기 위해 사용하는 도구 (tools) 라고 한다.

  • 규칙 예시
    • const 로 선언한 변수에 값을 재 할당하면 경고
    • 변수를 선언하지 않고 사용하면 경고
    • 선언 후 사용하지 않는 변수가 있으면 경고
    • 들여쓰기를 2 tab, 4 tab 혹은 탭으로 할지에 대한 여부를 지정하여 이 규칙을 지키지 않으면 경고
  • 사전에 정의한 규칙을 지키지 않는다면,
    경고나 에러를 통해 문법 오류나 코딩 스타일을 유지할 수 있게 도와주는 도구이다.

install & init ⚠️

먼저 ESLint 를 설치하기에 앞서, package.json 파일을 생성 해 주어야 한다.

npm init -y

yarn init -y

그리고, .eslintrc.js 파일을 생성하기 위해 아래 명령어를 입력 해 준다.

npm init @eslint/config

yarn create @eslint/config

How would you like to use ESLint? 👉 problems
What type of modules does your project use? 👉 esm
Which framework does your project ues? 👉 none
Does your project use TypeScript? 👉 Yes
Where does your code run? 👉 browser
What fromat do you want your config file to be in? 👉 Javascript
Would you like to install them now? 👉 Yes
Which package manager do you want to use? 👉 npm

해당 과정을 모두 마치고 나면,
package.json 에 아래와 같이 ESLint 와 관련된 모듈들이 devDependencies 에 추가되고
루트 경로에는 .eslintre.js 파일이 생성된다.

.eslintrc.js 파일을 열어보면,
rules 객체에 빈 값을 아래와 같이 채워준다.

“no-var”: “off”,
“prefer-const”: “warn”,
“@typescript-eslint/no-unused-vars”: “warn”,
“@typescript-eslint/explicit-function-return-type”: “off”,
“@typescript-eslint/no-inferrable-types”: “off”,

VSCode 에서 Extention 에 있는 ESLint 도 설치 해 주면,
설치한 ESLint 모듈을 좀 더 다양하게 사용할 수 있다.

Error 🚫

  • Mac 환경에서 타입스크립트 컴파일 시 발생하는 에러

https://hallo-coding.tistory.com/10
👆 위 링크 참조

  • Mac 환경에서 ESLint 설치 시 발생하는 에러

npm cache clean --force
혹은
sudo npm cache clean --forec 후 명령어를 재 실행 하면 해결이 된다.

Reference 🌊

https://velog.io/@kyy00n/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-init
https://lakelouise.tistory.com/199
https://pgramdiary.tistory.com/74
https://hallo-coding.tistory.com/10