Create React App을 이용하여 React 앱, TypeScript 시작하기(with github)

React와 Typescript 조합을 사용하여 개발을 하게 되어 공부하자는 의미로 이 글을 끄적여본다

 

 

 

Create React App를 이용하는 방법에는 여러가지가 있다고 한다

하지만 일단 나는 Create React App 홈페이지에 있는 빠른 시작을 따라해보았다

 

npx create-react-app my-app
cd my-app
npm start

 

여기서 npx는 실수가 아닌 npm 5.2+ 버전의 패키지 실행 도구라고 한다

 

npm start를 하면 http://localhost:3000/ 가 열린다

 

하지만 여기서 나는 Typescript와 리액트를 함께 이용해볼까한다

이미 생성된 Create React App에 Typescript를 적용하는 방법이 있지만 나는 작업한 것이 1도 없기에 그냥 새로 만드는 걸로 했다

Create React App에 Typescript를 적용하는 방법도 Create React App 홈페이지를 보고 따라했다

 

앱을 생성하기 전에 먼저 이것들을 설치해야한다고 한다

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

그 다음에 앱 생성하기!

npx create-react-app noname --template typescript
# or
yarn create react-app noname --template typescript

 

npx 와 yarn 두가지 방법이 있는데 나는 두번째 yarn으로 생성했다

 

이렇게해서 Create React App을 이용하여 TypeScript로 React 앱 만들기의 첫걸음을 뗐다

 

조금씩 하나씩 배워나가기 위해서 github에 repository를 만들어 commit을 해볼까한다

그래서 덤으로 github repository 만들기도 추가해본다

 

github에 로그인 > 오른쪽 상단 + > New repository

 

그럼 이런 화면이 나온다

Repository name을 쓰면 되지만 나는 지을 이름이 없어서 noname이라고 지었고

Description에는 설명을 쓰면 되는데 난 건너 뛰었다

Public과 Private는 말 그대로 공개할건지 비공개로 할건지 선택하는건데 Private는 유료라는 말이 있어서 일단은 공개로 했다ㅋㅋㅋ

 

그리곤 Create repository!!!

 

 

그럼 다음 화면으로 넘어간다 여기서는 터미널에 명령어를 입력해서 올리고 싶은 소스 코드가 저장될 공간을 만들면 된다

내가 올리고 싶은 소스 코드가 있는 디렉토리로 가서 

 

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/......
git push -u origin master

위 명령어를 입력해주면 github repository에 올라간다

 

이렇게해서 Create React App을 이용하여 React 앱, TypeScript 시작하기와 github에 올리고 싶은 소스 코드 repository 올리기 끝!