Typescript 초기 세팅 + 삭제된 repo 복구

수경, Sugyeong·2022년 4월 9일
0

Typescript

목록 보기
1/1
post-thumbnail

글을 쓰기에 앞서 해당 레포지토리 초기 세팅을 하면서 약간의 해프닝이 있었다.

무슨 정신 이었는지 삭제해서는 안되는 레포지토리를 삭제하고 말았다.

그 찰나의 순간은 사소한 동기로부터 시작 되었다. 타입스크립트로 초기 세팅을 해본 적이 없었고 기존에 npx create-react-app 프로젝트명 으로 입력하고 .js 파일로 세팅하는 것에 익숙했다. 당연히 그렇게 세팅 하니 파일들이 원하던 타입스크립트 세팅이 아니었다. 이미 github 에서 레포지토리를 생성하고 git remote add origin을 하였기에 해당 레포지토리를 삭제해야했다.

그 과정에서 문제가 일어난 것이다. 삭제해야할 레포가 아닌 다른 레포가 삭제가 되었고 내 잔디밭도 뽑힌 기분이란 말로 설명할 수 없다. 마치 내가 원하지 않던 무서운 놀이기구를 타고 나서 다리가 후들거리며 걸어 내려오는 것과 같았다.

정신없이 구글링을 하고 나서야 다행히도 설정>Repositories>Deleted Repositories 의 레포지토리 휴지통 기능으로 삭제한 레포지토리를 복구할 수 있다는 것을 알게 되었다. 너무나도 감사하고 또 감사하다.

90 일 이내에 생성한 레포지토리가 기준이며 It may take up to an hour for repositories to be displayed here. You can only restore repositories that have no forks or have not been forked. 라는 문구가 뜬다. 복구 가능하다는 것을 알았음에도 기다리는 1시간 내내 초조했다.

또 다른 문제를 해결하는 방법을 알게 된 시간이었다만 심장이 철렁했기에 다시는 반복하고 싶지는 않다 😂 복구할 수 있게 해준 Github 에게도 감사하다.


1. Create-React-App

기존에는 Javascript 의 확장된 문법인 JSX가 지원되는 React 프로젝트를 초기 세팅하고 진행하는 것에 익숙했다.

Typescript 강의를 수강하며 본격적으로 배우면서 Typescript 의 여러 장점들로 하여금 React 와 Typescript 가 결합된 개인 토이 프로젝트를 진행해보고 싶다는 생각이 들었다.

Typescript 는 자바스크립트에 타입을 부여한 언어로 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환하는 컴파일 과정을 거치게 되는데 이 단계에서 오류를 포착하여 에러를 사전에 방지할 수 있다는 장점이 있다. 또한 변수 등에 타입을 지정하여 개발자의 의도를 명확하게 코드로 기술할 수 있게 되어 가독성을 높이고 예측할 수 있게 하여 디버깅을 쉽게 한다.

생성하는 방법은 아래와 같다.

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

기존의 방식인

npx create-react-app 생성할 프로젝트 이름

과는 다르게 --template typescript 이 붙는 것을 알 수 있다.

이것을 Custom Template(사용자 정의 템플릿) 이라고 한다.

Create-React-App 공식 문서에 따르면 사용자 정의 템플릿을 사용하면 Create React App의 모든 기능을 계속 유지하면서 프로젝트를 생성할 템플릿을 선택할 수 있다고 한다.

또한 --template typescript 로 작성하면 Create React App을 위한 공식 TypeScript 템플릿이라고 한다.


2. eslint & prettier

공식 문서에 따르면 eslint 는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 한다고 한다. 코드를 분석 후 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 빨간줄, 혹은 노란줄 등의 경고를 띄워준다. (문법 교정의 역할)

prettier 는 자동으로 코드의 스타일을 맞춰주는 기능(Code Formatting) 을 지원하고 있으며 eslint 와 함께 사용된다고 한다. 예를 들어 한 줄에 담긴 코드 길이가 길다면 최대 줄 길이를 제한하는 규칙을 만들고 한 눈에 보기 좋게 Wrapping 하는 기능 등을 제공한다.

1. Extension 설치

eslint 와 prettier 모두 VScode 상에서 검색 후 install 을 해준다.


2. NPM Package 로 설치

CRA(create-react-app)로 시작할 경우 package.json에서 확인할 수 있듯 ESLint는 기본적으로 설치되어 있다.

따라서, eslint 추가 설정을 위한 패키지만 설치해준다.

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

eslint-config-prettier 는 필요하지 않거나 prettier와 충돌할 수 있는 모든 설정을 비활성화 해준다.

eslint-plugin-prettier 는 prettier 를 eslint 의 규칙으로 실행되게끔 해준다.

3. .eslintrc

파일의 Root 위치에 .eslintrc 라는 파일을 만들고

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

를 비롯한 코드 포맷터 설정을 작성한다.

이 플러그인은 코드 포맷팅과 관련된 다른 모든 ESLint 규칙을 비활성화하고 잠재적인 버그를 감지하는 규칙만 활성화하는 경우 가장 잘 작동한다. eslint-config-prettier 를 사용하여 모든 형식 지정 관련 ESLint 규칙을 비활성화할 수 있다.

이 플러그인은 플러그인과 eslint-config-prettier 를 모두 한 번에 설정하는 plugin:prettier/recommended config 와 함께 제공된다.


<출처>
Create-React-App
Eslint
Prettier
eslint-plugin-prettier

0개의 댓글