[React+JS+TS+WebRTC] #1 프로젝트 환경 설정하기, typescript 프로젝트 만들기

1. VSCode를 실행하고 새 터미널 창을 열고 생성하고자 하는 프로젝트 경로로 이동한 후, 아래 명령어를 작성한다.

npx create-react-app 생성할프로젝트명 --template typescript

 

 

 

2. VSCode에서 Prettier과 ESLint를 찾아 설치한다.

 

Prettier 설치

 

ESLint 설치

 

 

ESLint 란 ?

ESLint는 JavaScript 코드에서 문제점을 식별하고 예방하는 도구로 이를 통해 일관된 코드 스타일을 유지하고 코드 품질을 향상할 수 있다. 

 

ESLint는 설정 파일을 사용하여 린트 규칙을 정의한다. 이 규칙은 코드 스타일, 코드 오류, 보안 문제 등 다양한 측면에서 지원된다. 예를 들어, 함수 정의 시 인자의 이름을 정의하는 것, 변수 선언 시 초기화를 권장하는 것, 반복문에서 변수를 재할당하지 않도록 제한하는 것 등이 있다.

ESLint를 사용하면 팀의 모든 개발자가 일관된 코드 스타일을 따르도록 돕고, 잠재적인 오류를 예방할 수 있다.

이를 통해 코드 리뷰 프로세스를 효율적으로 수행할 수 있고, 자동화된 빌드 및 배포 프로세스에서도 유용하게 사용할 수 있다.

ESLint는 JavaScript뿐만 아니라 TypeScript, React, Vue 등 다양한 환경에서도 사용할 수 있으며, 다양한 플러그인과 함께 사용할 수 있다.

 

Prettier 이란?

Prettier는 코드 포맷터로, 코드의 일관된 스타일을 유지하도록 도와준다. 코드 스타일을 일관성 있게 유지하는 것은 코드 가독성을 향상하고 유지보수성을 높이는 데 중요한 역할을 한다.

Prettier는 코드를 분석하고 구문 분석하여 일관된 스타일로 자동으로 포맷팅 한다. 이를 통해 개발자는 일관된 코드 스타일을 유지하기 위해 수동으로 코드를 수정하는 시간과 노력을 절약할 수 있다.

또한, Prettier는 다양한 언어 및 환경에서 사용할 수 있으며, 사용자 지정 가능한 설정을 제공하여 코드 스타일을 자신의 취향에 맞게 조정할 수 있다. 또한, 편집기 플러그인을 통해 IDE나 편집기에서 즉시 Prettier를 사용할 수 있으며, Git 훅과 같은 도구와 통합하여 코드가 커밋되기 전에 자동으로 코드를 포맷팅 하도록 설정할 수도 있다.

결론적으로, Prettier는 코드 포맷팅 작업을 자동화하여 일관된 코드 스타일을 유지하고 개발자가 더 나은 코드를 작성하는 데 집중할 수 있도록 도와주는 도구이다.

 

 

 

3. 아래 명령어를 사용해 패키지를 설치한다.

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

 

 

폴더의 root 위치에 .eslintrc 파일을 생성하고 아래 코드를 작성한다.

{
    "extends": ["plugin:prettier/recommended"]
}

 

이 코드는 ESLint의 설정 파일에 사용되는 JSON 형식의 객체로, Prettier 규칙을 적용하는 설정을 의미한다.

"extends" 는 ESLint에서 다른 설정 파일을 확장할 수 있는 기능 중 하나로, 위 코드에서는 prettier/recommended 설정 파일을 확장한다. 이 설정 파일은 Prettier에 필요한 규칙을 적용하고, eslint-config-prettier와 함께 사용할 경우 충돌하는 ESLint 규칙을 비활성화한다.

따라서 이 설정 파일을 사용하면 ESLint를 통해 코드 스타일과 코드 포맷팅을 동시에 관리할 수 있다. 코드 포맷팅 규칙은 Prettier가 담당하고, 나머지 ESLint 규칙은 일반적인 규칙 파일에서 설정하면 된다. 이를 통해 일관된 코드 스타일을 유지할 수 있으며, 코드 포맷팅과 관련된 규칙을 따로 설정할 필요가 없어지게 된다.

 

 

 

이렇게 타입스크립트 프로젝트 생성을 완료하였다.