리액트(3)- VSCode 타입스크립트 개발환경 설정

프로그램 설치 목록

- 프리티어 ( 코드정렬)

- 테일윈드CSS ( CSS 스타일링 )

- 헤드윈드 ( 테일윈드 CSS 클래스 분류기 )

- 포스트CSS ( CSS 구문 강조 표시 )



색 테마 변경

VSCode의 테마 변경 방법은 [File -> Preferences -> Color Theme ]



한국어 언어팩 설치

마켓플레이스에서 Korean을 검색하고 한국어 언어 팩을 설치 후 VSCode를 다시 시작하면 된



편집기 설정

[파일 -> 기본 설정 -> 설정] 메뉴에서 소스 코드의 탭 크기를 기본값 4에서 2로 바꾼다. VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다. ctrl + shift + p 버튼을 누르고 user settings를 입력하면 [기본설정:사용자 설정 열기(JSON)]를 선택해 settings.json 파일을 볼 수 있다.  tab 크기를 2로 바꾼 내용이 나올거다

{
    "editor.tabSize": 2
}

프리티어

프리티어는 띄어쓰기, 들어쓰기, 탭, 줄바꿈 등을 일정한 패턴으로 보기 좋게 종리해주는 프로그램이다. 마켓플레이스에서 prettier로 검색해서 [Prettier - Code formatter]를 설치한다. 프리티어는 설치 후 settings.json 파일에 설정을 해줘야 제대로 작동한다.

{
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
테일윈드 CSS 

테일윈트 CSS라는 프레임워크로 CSS 스타일링을 쉽게 하려면 마켓플레이스에서 "Tailwind CSS"로 설치한다.



헤드윈드

테일윈드 CSS관련 코드를 이해하기 쉬운 순서대로 재배치해주는 프로그램이다. "Headwind"로 검색해 설치한다.



포스트 CSS 

VScode는 테일윈드 CSS의 @tailwind base;와 같은 CSS 구문을 만나면 경고 메시지를 출력한다. 이유는 @tailwind 규칙이 표준이 아니기 때문이다. 이런 경고 메시지는 포스트 CSS 프로그램을 설치하면 없앨 수 있다. 마켓플레이스에서 PostCSS로 검색하여 설치한다.



VSCode에서 터미널 열기

VSCode는 윈도우 파워셀 같은 터미널을 지원한다.  [터미널 -> 새 터미널] 메뉴를 선택하거나 Ctrl + ` 를 눌러서 띄울 수 있다. 터미널 오른쪽 위에 더하기 아이콘으로 터미널을 여러 개 열 수있다.



타입스크립트 컴파일러 설치하기

VSCode 터미널에서 명령어를 입력하여 타입스크립트 컴파일러를 설치한다

    npm i -g typescript ts-node

설치가 됐는지 다음 명령어로 확인한다

    tsc -v

    ts-node -v



타입스크립트 프로그램 만들고 컴파일

먼저 C:\rcp에서 디렉터리를 만든다.

    mkdir ch01/ch01_4/src

touch 명령어로 src 디렉터리에 index.ts파일을 만든다.  macOS는 mkdir 다음에 -p를 붙여준다.

    touch ch01/ch01_4/src/index.ts

 index.ts 파일에 console.log("Hello world"); 를 입력해서 VSCode 터미널에 t실행 명령어를 입력한다.

    ts-node src/index.ts

그럼 Hello world가 출력된다.



프리티어로 소스 정리

프리티어를 사용하려면 디렉터리에 .prettierrc.js 파일을 만든다

이 파일은 프리티어가 소스 코드를 정리할 때 참조하는 파일로 타입스크립트가 아닌 자바스크립트로 구현한다. 다음 명령어를 입력해 파일을 만든다.

    touch .prettierrc.js

.prettierrc.js 파일을 열어 다음과 같이 입력한다.

module.exports = {
    singleQuote: true,
    semi: false,
}
singleQuote는 큰따옴표 대신 작은따옴표로 바꾸라는 설정이고, semi는 ;이 붙은 문장에서 세미콜론을 지우라는 설정이다.
index.ts 파일에서 몇글자 추가하면 수정사항이 생기고 저장을 누르면 "는 '로 ;은 없어진다. 
*프리티어가 동작하지 않은 경우
기본적으로 VSCode에 여러 개의 포메터가 탑재되어 있어서 충돌이 나는 경우가 있다.  ctrl + shift + p를 눌러서 [Format Document]를 눌러서 한 번 실행해 준다.


프리티어 동작하지 않게 하기
// prettier-ignore를 쓰면 저장되어도 프리티어가 작동하지 않는다
console.log('Hello world')
// prettier-ignore
console.log("Hello world");
// prettier-ignore 밑에 소스는 "이고 ; 이 있다.