프로젝트 시작전 개발 작업환경 설정하기

React

<1> ESLint

ESLint는 문법 검사 도구이다. VS Code의 MarketPlace에서 설치가 가능하다. ESLint를 사용하면, 코드를 작성할 때 실수를 하면 에러 또는 경고메시지를 VS Code 에디터에서 바로 확인이 가능하다.


<2> Prettier

Prettier는 코드 스타일 자동 정리 도구이다. VS Code의 MarketPlace(Prettier-Code formatter)에서 설치가 가능하다.

[1] 현재 프로젝트의 루트 디렉터리(src, public 등의 디렉터리들이 위치한 곳)에서 .prettierrc 라는 파일을 생성한다.

[2] 들여쓰기, 따옴표, 세미콜론 등 원하는 스타일을 커스터마이징을 할 수 있다.

1
2
3
4
5
6
7
8
// .prettierrc

{
  "singleQuote": true, // 작은 따옴표 사용
  "semi": true, // 세미콜론은 언제나 사용
  "useTabs": false,
  "tabWidth": 2 // 들여쓰기 시 탭 대신 공백을 두칸 사용
}

[3] 저장할 때, 자동으로 코드 정리하기

코드 스타일을 정리하기 위해서는 F1을 누르고, Format이라고 입력후, Enter를 눌러야 한다. 이 대신에, 코드를 저장할 때 마다 자동으로 코드 스타일을 정리하는 방법이 있다.

[3-1] Vs Code의 메뉴 중에서, Code - 기본설정 - 설정 메뉴에 들어간다.
[3-2] “format on save”를 검색하여 체크박스에 체크한다.

위와 같이하면, 저장할 때마다 코드가 자동으로 정리가 된다.


<3> Reactjs Code Snippets

React 컴포넌트 및 라이프사이클 함수를 작성할 때, 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다. Reactjs Code Snippets는 VS Code의 MarketPlace에서 설치가 가능한데, 제작자가 charalampos karypidis인 것을 설치한다.

이를 사용하면, 단축키로 컴포넌트 코드를 간편하고 빠르게 생성할 수 있다.

[1] rsc -> Enter

함수형 컴포넌트를 생성한다.

[2] rcc -> Enter

class형 컴포넌트를 생성한다.


<4> 컴포넌트를 자동으로 불러오기(import)

[1] 루트 디렉터리에 jsconfig.json 파일을 생성한다.

[2] Ctrl + Space를 누르고 Enter를 누른다.

[3] 그러면, 다음과 같은 코드가 자동완성된다.

1
2
3
4
5
6
7
// jsconfig.json

{
  "compilerOptions": {
    "target": "es6"
  }
}

위와 같이 하게되면, 불러오고 싶은 컴포넌트의 파일이 열려 있지 않아도, 자동완성을 통해 컴포넌트를 불러와서 사용이 가능하다. 예를 들어, 부모 컴포넌트에서 어떤 A 컴포넌트의 이름을 작성하면, 따로 import A 이런식으로 작성하지 않아도 자동으로 작성이 된다.