[ React ] VSCode 개발 환경 설정하기

VSCode에서 타입스크립트로 리액트 프로젝트를 개발할 때 몇 가지 환경을 설정해주면 좀 더 편리하게 개발할 수 있다.

프로그램명	용도	운영체제	기타
프리티어	코드 정렬	윈도우/macOS	권장
테일윈드CSS	CSS 스타일링		필수
헤드윈드	테일윈드CSS 클래스 분류기		선택
포스트 CSS	CSS 구문 강조 표시		선택

 

🤍 편집기 설정 파일 &  설치 및 설정하기

VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다.

Ctrl + Shift + P 를 눌러 나타난 메뉴에서 "User Settings"를 입력하고 Open User Settings (JSON) 를 선택한다.

해당하는 키와 값을 볼 수 있다.

 

✉ 프리티어 설치 및 설정

프리티어 Prettier

코드에서 띄어쓰기, 들여쓰기, 탭, 줄바꿈 등을 일정한 패턴으로 정리해 주는 프로그램.

VSCode 확장 마켓플레이스에서 Prettier - Code formatter 를 설치한다.

    //소스 코드 탭 크기를 기본값 4 -> 2
    "editor.tabSize": 2, 
    // VSCode 기본 포메터를 프리티어로 설정, 파일 저장할 때 항상 프리티어 동작.
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    // 타입스크립트 파일 (파일 확장자 .ts와 .tsx)일 때 프리티어가 기본으로 동작.
    "[typescript]": {
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

---

✉ 테일윈드CSS 설치하기

테일윈드CSS   Tailwind CSS

CSS 스타일링 코드를 쉽게 작성할 수 있도록 하는 프레임워크.

---

✉ 헤드윈드 설치하기

헤드윈드 HeadWind

테일윈드CSS 관련 코드를 이해하기 쉬운 순서로 재배치해주는 프로그램.

---

✉ 포스트CSS 설치하기

VSCode는 테일윈드CSS의 @tailwind base; 와 같은 CSS 구문을 만나면 경고 메시지를 출력한다.

@tailwind 규칙은 표준이 아니기 때문이다.

 

포스트CSS (PostCSS) 프로그램을 설치하면 없앨 수 있다.

---

✉ VSCode에서 터미널 열기

VSCode는 윈도우 파워셀 같은 터미널 기능을 지원한다.

터미널 창을 보이게 or 안 보이게 하려면 [터미널 -> 새 터미널] 메뉴를 선택하거나, Ctrl + ` 를 누른다.

---

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

VSCode 터미널에서 다음 명령으로 타입스크립트 컴파일러를 설치한다.

npm i -g typescript ts-node

타입스크립트 컴파일러는 꼭 필요하므로 다음 명령으로 제대로 설치됐는지 확인한다.

버전이 출력되면 제대로 설치된 것이다.

$ tsc -v
Version 5.1.6

ts-node -v
v10.9.1

ts-node가 실행되지 않을 때

ts-node가 설치됐지만 실행되지 않을 때가 있다.
이 현상은 윈도우에 버전이 다른 Node.js 가 설치되었을 때 발생한다.
과거에 Node.js를 설치했는데 Scoop로 Node.js를 또 설치했을 때 발생한다.

scoop로 설치한 Node.js 폴더를 지우거나 C:/사용자/사용자명/AppData/Roaming/.nvm 디렉터리를 지운 후 ts-node-v 명령을 다시 실행하면 된다.

---

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

타입스크립트 컴파일러를 설치했으므로 타입스크립트 프로그램을 만들고 컴파일해본다.

 

VSCode 터미널에서 다음 명령으로 ch01/ch01_4/src 디렉터리를 만들고 touch 명령으로 src 디렉터리에 index.ts 파일을 만든다.

touch ch01/ch01_4/src/index.ts

index.ts 파일 작성하기

console.log("hello");

VSCode 터미널에서 아래 명령을 실행하면 src/index.ts 파일의 실행 결과를 알 수 있다.

ts-node src/index.ts
hello

---

✉ 프리티어로 소스 정리하기

프리티어를 사용하려면 먼저 디렉토리에 .prettierrc.js 파일을 만들어야 한다.

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

 

터미널에서 아래 명령으로 .prettierrc.js 파일을 만든다.

touch .prettierrc.js

.prettierrc.js 파일 작성하기

module.exports = {
  //문자열에서 큰따옴표 대신 작은따옴표로 바꾸기
  singleQuote: true,
  //세미콜론(;)이 붙은 문장에서 세미콜론 모두 지우기
  semi: false,
};

프리티어가 자동으로 동작하여 큰따옴표를 작은따옴표로 변경하고, 세미콜론이 제거된 모습을 볼 수 있다.

---

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

프리티어 무시 주석을 작성한다.

그러면 다음행에서는 프리티어가 적용하지 않는다.

 

index.ts 파일 작성하기

console.log('Hello')
//prettier-ignore
console.log("hello");

프리티어 무시 주석은 타입스크립트 컴파일러의 타입 체크 기능을 무력화한다.

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

---

- <도서> 리액트 모던 웹 개발 with 타입스크립트

https://product.kyobobook.co.kr/detail/S000200550965

Do it! 리액트 모던 웹 개발 with 타입스크립트 | 전예홍 - 교보문고