React 2. VSCode 개발 환경 설정

내가 기존에 잘 몰랐던, 개발을 하는데 도움이 많이 될만한 것들만 작성을 하도록 하겠다.

 

 

1. 편집기 설정 파일 이해하기

 

일단 VSCode의 파일 → 기본 설정 → 설정에서 폰트 사이즈, 탭 사이즈 등을 설정할 수 있다.

난 여기서 탭 사이즈를 4에서 2로 변경한 후, 저장을 하였다.

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

 

단축키 Ctrl + Shift + P를 누르고 "User Settings"를 입력한 후, "기본 설정 : 사용자 설정 열기(JSON)"를 클릭한다.

여기서 settings.json의 내용을 확인할 수 있다.

원래도 많은 설정들이 되어 있었지만, 방금 추가로 설정해준 "editor.tabSize" : 2를 확인할 수 있다.

 

 

 

2. 프리티어 설치와 설정하기

 

프리티어 설치는 이미 되어 있지만, 설정을 조금 더 상세하게 해준다.

여기서 프리티어란,

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

아래 사진과 같은 프로그램을 찾아서 설치해주면 된다.

 

 

여기서 끝나는게 아니다.

설치 후에는 settings.json 파일에서 설정을 해줘야만 제대로 동작을 한다.

 

"editor.formatOnSave": true
=> 파일을 저장할 때 항상 프리티어를 동작하게 하는 것.

"editor.defaultFormatter": "esbenp.prettier-vscode"
=> VSCode의 기본 포매터를 프리티어로 설정하는 것.

"[typescript]": {   
  "editor.formatOnPaste": true,   
  "editor.formatOnSave": true,   
  "editor.defaultFormatter": "esbenp.prettier-vscode" 
}
=> 타입스크립트 파일(파일 확장자 .ts와 .tsx일 때, 프리티어가 기본으로 동작하게끔)

 

 

 

3. 헤드윈드 설치하기

 

헤드윈드(Headwind)란, tailwind CSS 코드를 이해하기 쉬운 순서로 재배치해주는 프로그램이다.

 

 

 

4. PostCSS 설치하기

 

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

그 이유는, @tailwind 규칙은 표준이 아니기 때문이다.

이 불필요한 메시지는 PostCSS라는 프로그램을 설치하면 없앨 수 있다고 한다.

 

 

 

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

 

VSCode 터미널을 열어준 후, 다음 명령어를 입력해 타입스크립트 컴파일러를 설치한다.

이후, 제대로 설치되었는지 확인을 하기 위해서는 tsc와 ts-node의 버전을 확인하면 된다.

 

npm i -g typescript ts-node
=> npm을 사용하여 typescript와 ts-node를 설치한다.

tsc- v
ts-node -v
=> 설치가 성공적으로 되었다면 버전이 몇인지 나온다.

 

여기서 ts-node란, Node.js에서 타입스크립트를 직접 실행시키는 도구이다.

 

ts는 기본적으로 컴파일이 필요한 언어이다.

즉, 원래는 ts 코드를 js 코드로 변환한 후에야 사용할 수 있다는 얘기이다.

하지만 ts-node는 ts 파일을 미리 컴파일하지 않고 바로 실행시키는 엔진이므로, 이런 과정을 생략한다.

JIT(Just In Time)로 타입스크립트를 자바스크립트로 내부적으로 변환하여 즉시 실행 가능하다.

 

그런데 가끔 ts-node가 실행되지 않는 경우가 있다고 한다.
그것은 윈도우 버전이 다른 Node.js가 설치되었을 때 발생한다고 한다.
즉, 과거에 Node.js를 설치했는데 scoop로 Node.js를 다시 설치했을 때 발생한다.

이 경우에는 scoop로 설치한 Node.js 폴더를 삭제하거나
C:/사용자/사용자명/AppData/Roaming/.nvm 디렉토리를 지운 후
ts-node -v 명령어를 다시 실행시키면 된다고 한다.

 

 

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

 

다음 명령으로 ch01/ch01_4/src 디렉토리를 만든다.

 

mkdir -p  ch01/ch01_4/src
=> 나는 rcp 폴더 내에서 바로 ch01/ch01_4/src 디렉토리를 생성했다.
=> 상위 디렉토리인 ch01/ch01_4를 찾을 수 없으므로,
=> ch01/ch01_4/src 디렉토리를 한 번에 생성해주려면 mkdir 위에 -p를 붙여야 한다.
=> (Mac에서만 -p를 붙이면 된다는데 window를 사용하는 나도 -p를 붙여야 했다...)

 

이 다음은 touch 명령어를 사용하여 index.ts 파일을 생성해준다.

 

touch란, 주로 파일을 생성하거나 기존 파일의 타임스탬프를 변경하는데 사용한다.

예를 들어, touch index.ts 명령어를 사용하면 index.ts라는 새로운 파일을 생성하거나,

이미 존재하는 파일이라면 해당 파일의 수정 시간이 현재 시간으로 업데이트 된다.

 

touch를 설치할 때는 VSCode 터미널 내에서 scoop install touch로 손쉽게 설치해도 되고,

나는 scoop을 별도로 설치하지 않았기 때문에

Windows PowerShell에서 "npm install -g touch-cli" 명령어를 입력하여 touch를 설치해줬다.

 

그리고 여기서 scoop란, window용 설치 프로그램이다.

개발에 필요한 도구들을 일일이 해당 웹사이트에 접속해 내려받기란 번거로운 일 아닌가.

이런 번거로움을 덜고자 scoop라는 윈도우용 설치 프로그램을 사용한다.

명령 줄에서 프로그램을 쉽게 설치하게 해주는 프로그램이다.

 

touch ch01/ch01_4/src/index.ts
=> touch 명령어를 사용하여 ch01/ch01_4/src/index.ts 파일을 생성해주었다.
=> ch01/ch01_4/src 디렉토리 아래에 있는 index.ts 파일

 

그리고 ch01/ch01_4 디렉토리에 접근한다.

이렇게 접근하는 이유는, cd 명령어를 여러 번 사용하지 않고도 파일을 실행할 수 있도록 하기 위해서이다.

 

접근 후에 index.ts 파일 내에 console.log("Hello world!"); 코드를 작성한다.

코드를 작성 후 저장을 했다면,  ts-node src/index.ts 명령어를 통하여 파일의 실행 결과를 확인한다.

Hello world!라고 뜨는 것을 확인할 수 있다.

 

cd ch01/ch01_4
ts-node src/index.ts

 

 

7. 프리티어로 소스 정리해보기

 

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

이 파일은 프리티어가 소스 코드를 정리할 때 참조하는 파일이다.

고로 타입스크립트가 아닌 타입스크립트로 구현을 해야 한다.

 

touch 명령어를 통하여 .prettierrc.js 파일을 생성한다.

ch01_4 디렉토리 아래에서 생성해준다.

 

touch .prettierrc.ts

 

생성을 했다면, 파일을 열고 코드를 입력한다.

 

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

 

이제 index.ts 파일로 넘어가, 다시 파일을 저장하면, 위에 설정한 조건에 맞게 코드가 변한다.

 

 

그런데 가끔씩 특정 코드에서 프리티어를 동작하지 않게끔 하고 싶을 수도 있지 않은가.
그럴 때는 프리티어 무시 주석을 작성해주면 된다.

프리티어가 동작하지 않게끔 하고 싶은 코드 위에 // prettier-ignore 주석을 작성해준다.

 

console.log('Hello world!')

// 프리티어 무시 주석 : 특정 코드에서 프리티어가 동작하지 않게끔 작성
// prettier-ignore
console.log("Hello");

 

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

그렇기 때문에 개발이 끝난 코드에만 프리티어 무시 주석을 작성해야 한다.