create-react-app을 이용하여 react typescript의 프로젝트 생성하기

안녕하세요. AlbertKo입니다.

전에 React typscript 프로젝트 만드는 방법에 대해서 글을 작성했는데요,

사실 그렇게 일일이 파일을 만들고 세팅을 해주지 않아도 되는 방법이 있습니다.

바로 create-react-app 줄여서 cra라고 부르도록 하겠습니다.

위의 일종의 cli를 이용하면 되는데요,

"아니 쉬운 방법이 있다면서 왜 그렇게 복잡하게 돌아갔어요??"

;;네... 확실히 쉬운 방법이 있지만

이왕 공부하는거 하나 하나 집어가면서 해보는 것도 분명 좋은 방법이라고 생각을 했습니다.

확실히 하나 하나 집어가는 과정을 저 역시 강의로 글을 쓰면서 많은 도움이 되었고요

생산성을 따지면 당연히 쉬운 방법으로 하는 것이 맞지만, cli에서 생성해 주는데로만 했다면

webpack이 무엇인지, 로더는 뭐고 세팅은 어떻게 왜 그렇게 하는지 다들 몰랐을거 아닙니까.

뭐든 직접 해보면 그만큼 득이되는 법입니다! 화내지 마세요 ㅜㅜ

그래서 그 쉽다는 create-react-app은 어떻게 설치하고 사용하는지 알려드리도록 하겠습니다.

create-react-app 설치하기

간단합니다. cli들은 제가 알기로는 무조건 글로벌로 설치를 해주면 됩니다.

npm i -g create-react-app

설치가 됬다면 모든 준비는 끝났습니다.

프로젝트 생성하기

프로젝트 생성하는 방법은 여러가지가 있습니다.

---

NPM

npm init react-app <project_name>

---

NPX

npx create-react-app <project_name>

---

Yarn

yarn create react-app <project_name>

하지만, 다 집어치우고 보통은 이렇게 쓸겁니다.

create-react-app <project_name>

해당 명령어를 입력하게 되면 현 터미널 디렉토리에서 혼자 막 뭘하다가 프로젝트 네임으로 쓴 폴더가 똭 하고 나타날겁니다.

자 이렇게 프로젝트가 만들어졌습니다!

기존에 복잡하게 했던 세팅들 없이도 똭! 하고 만들어졌네요

"아니 저거 자바스크립트로 되있잖아. 타입스크립트로 생성되야할거 아니야 ㅡㅡ"

맞습니다. 타입스크립트로 생성이 되야하죠. 다 방법이 있습니다.

javascript로 개발을 하시는 분들도 계실것 같아서 한 번 보여드렸습니다.

ts로 만드는 방법은 아까와 똑같지만 옵션 하나만 넣어주면 됩니다.

create-react-app <project_name> --scripts-version=react-scripts-ts

이렇게 해주고 나면

짜잔! 수작업으로 하면 귀찮고 힘드고 머리아픈 세팅이 이렇게 전부 끝나있습니다!

터미널에서

npm start

를 입력해주면

이렇게 "Welcome to React"

자 그러면 여기까지 간단하게 리액트 프로젝트 생성하기였습니다!

"아니 ㅋㅋㅋㅋ 자세히 보니깐 webpack 세팅을 못하는데???"

아니요...! 아니요!! 가능합니다. 'eject'라는 것을 사용해주면 가능해집니다.

대신에 다 좋은데 yarn은 필수로 설치가 되어있어야 합니다!!

터미널에서

yarn eject

를 해주신 후에 "이거 한 번 하면 못 되돌림. 할거임???"이라는 질문에 긍정의 yes에 y를 입력해주면

이렇게... 설정파일들이 들어나옵니다.

여기서 웹팩 건드실게 있으면 건드시면 됩니다만 개인적으로

직접 막 만질 정도록 세세한 세팅이 필요한게 아니면 굳이 필요한가 싶습니다.

아 그리고 참고로, create-react-app 을 이용하여 ts 기반으로 프로젝트를 생성하면 ts-loader 로더로 세팅이 자동으로 되어있습니다.

이걸 awesome-typescript-loader로 바꿀려고 시도를 해봤는데 동작이 안되며,

https://github.com/wmonk/create-react-app-typescript/pull/74 

여기를 들어가서 보시면 별로 추천을 하지 않습니다.

그렇게 큰 성능차이인지... 잘 모르겠습니다만 ts-loader로 사용해도 큰 문제가 없다고 생각이 듭니다.

여기까지 하겠습니다.

모두 수고하셨습니다.