[Do it! w. TS] 01. 개발환경 설정

1. 편집기 설정파일  설정

 

파일 -> 기본설정 -> 설정

ctrl + ,  -> user settings(json) 선택 : json형식으로 보겠다는 것

탭사이즈 2로 변경

 

2. prittier 설치하고 설정파일에 적용

 

 settings.json

{
    "editor.inlineSuggest.enabled": true,
    "github.copilot.enable": {
        "*": true,
        "plaintext": false,
        "markdown": false,
        "scminput": false
    },
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    }
}

3. Tailwind CSS 설치

css 프레임워크 설치

 

4. Headwind 설치

Tailwind CSS를 이해하기 쉬운 순서로 재배치해 주는 프로그램

 

5. PostCSS 설치

vs코드에서는 tailwind CSS의 css 구문을 마나면 경고메시지를 출력한다.  @tailwind는 표준이 아니기 때문이다. 이러한 불필요한 경고는 Post CSS를 사용하여 없앨 수 있다.

 

6. typescript 설치

$ npm i -g typescript ts-node

added 19 packages in 3s

$tsc -v
Version 5.1.3

$ ts-node -v
v10.9.1

만약 ts-node 명령어가 실행되지 않는다면 버전이 다른 Node.js가 이미 설치되어 있는 경우일 수 있다. 윈도우 환경이라면 C:/사용자/사용자명/AppData/Roaming/.nvm 디렉터리를 지운 후 ts-node -v 명령어를 재실행 해보자.

 

7. 타입스크립트 파일 만들고 테스트해보기

자신이 테스트할 경로에 index.ts 생성하고 아래의 내용 적기

//index.ts
console.log("Hello world!");

터미널에서 실행해보기

$ ts-node ./index.ts 
Hello world!

8. prettier로 소스 정리해보기

원하는 경로의 소스를 prettier로 정리하려면 해당 경로의 상위 디렉토리에 .prettierrc.js 파일을 생성하고 아래의 코드를 적어준다.

이 때 반드시 파일명에 .과 rc가 들어간다는 점을 주의할 것.

 

내 경우는 /do-it-react/ch01/ch01_4/src 디레토리의 소스를 정리하고자 /do-it-react/ch01/ch01_4 에 .prettierrc.js 파일을 생성하였다.

// .prettierrc.js
module.exports = {
  singleQuote: true,
  semi: false,
}

다시 index.ts 파일을 열어보면 아래와 같이 쌍따옴표가 홑따옴표로 변환된 것을 볼 수 있다. 뿐만아니라 세미콜론도 사라졌다.

//index.ts
console.log('Hello world!')

 

9. 특정 코드에서 프리티어 동작하지 않게 하기

//prettier-ignore 주석을 해당 코드의 행 위에 추가해준다. 바로 아래의 행에만 적용된다.

//index.ts
console.log('Hello world!')
//prettier-ignore
console.log("Hello");
console.log('world!')

Hello 부분에 쌍따옴표와 세미콜론이 남아있는 것을 볼 수 있다. world도 무시하려면 그 위에 //prettier-ignore를 하나 더 달아주면 된다.

 

10. 프리티어 무시 주석 사용시 주의점

프리티어 무시 주석은 타입스크립트 컴파일러의 타입 체크 기능을 무력화 한다. 따라서 개발이 끝난 코드에만 무시 주석을 적용해야 한다. 만약 개발이 끝난 코드를 수정해야 한다면 무시 주석을 제거하여 타입스크립트 컴파일러가 인라인 컴파일 기능을 정상으로 수행하도록 해줘야 한다.