React - React App 만들기&비우기

이번 글은 React 프로젝트를 처음으로 만들고

프로젝트를 시작하기 좋게 백지화시키는 작업을 해보겠습니다.

 

먼저 cmd를 켜고 원하는 디렉터리 경로에서 다음의 코드를 입력해서 프로젝트를 생성하겠습니다.

npx create-react-app [AppName]

 

React App 만들기

위의 코드를 입력하면 npm을 통해 필요한 패키지들을 설치하며 프로젝트를 생성합니다.

텍스트 편집기로 VisualStudio Code를 사용하고 있어 다음의 코드를 입력해 VSCode를 실행시키겠습니다.

 

code my_day

 

생성된 project VSCode 창

 

생성된 React app을 실행시켜 보겠습니다. 

VSCode내에서 터미널을 사용할 수 있기때문에 그걸 이용하겠습니다.

프로젝트의 경로에서 다음의 코드를 입력합니다.

npm start

 

npm start

 

터미널에서 성공적으로 컴파일을 진행한 뒤,

2개의 url을 주며 App을 browser에서 볼 수 있다고 설명해줍니다.

 

자동으로 띄워진 browser 창을 통해 보면 다음과 같은 화면이 보이실 겁니다.

 

src/App.js를 수정하여 저장 및 reload 하여 본인의 App을 만들라고 알리고 있습니다.

 

그럼 이제 프로젝트를 진행하기 위해 기본으로 입력되어있는 것들을 제거해보겠습니다. 

 

저는 개인적으로 이 과정을 React App 비우기라 칭하겠습니다.

 

 

 

 

# 삭제하는 파일

 

# 1. logo.svg

# 2. serviceWorker.js

# 3. index.css

# 4. App.test.js

# 5. App.css

 

 

# 수정하는 파일

파일을 삭제하는 것이 아닌 일부 수정하는 목록에 대해서 일단 작성해보겠습니다.

 

# 1. Package.json

 

해당 파일에선 scripts 내의 test와 eject를 제거하겠습니다.

test는 test runner를 실행하는데 필요하다고 하고, eject는 react app을 생성할 때 필요한 한 군데로 모아둔 모듈들을 다시 풀어 해쳐놓는 작업을 합니다.

 

둘 다 아직 제 수준에선 필요로 하지 않기 때문에 지우겠습니다.

 

# 2. ReadMe.md

 

ReadMe.md는 React App에 대한 안내 사항들을 담고 있어, 저의 프로젝트에 대한 설명을 채워 놓기 위해서 수정하겠습니다.

 

Default ReadMe.md

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

 

## Available Scripts

 

In the project directory, you can run:

 

### `npm start`

 

Runs the app in the development mode.<br />

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

 

The page will reload if you make edits.<br />

You will also see any lint errors in the console.

 

### `npm test`

 

Launches the test runner in the interactive watch mode.<br />

See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

 

### `npm run build`

 

Builds the app for production to the `build` folder.<br />

It correctly bundles React in production mode and optimizes the build for the best performance.

 

The build is minified and the filenames include the hashes.<br />

Your app is ready to be deployed!

 

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

 

### `npm run eject`

 

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

 

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

 

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

 

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

 

## Learn More

 

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

 

To learn React, check out the [React documentation](https://reactjs.org/).

 

### Code Splitting

 

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

 

### Analyzing the Bundle Size

 

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

 

### Making a Progressive Web App

 

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

 

### Advanced Configuration

 

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

 

### Deployment

 

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

 

### `npm run build` fails to minify

 

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

 

# 3. index.js

css 파일(3번 line)과 serviceWorker 파일(5번 line)의 import 문을 지우고, 주석 문 및 serviceWorker의 함수 호출 문 (9~12번 line)을 지우겠습니다. 

 

 

# 4. App.js

logo를 지웠기 때문에 logo import문(2번 line)을 지워줍니다.

그리고 App() function안의 return 문 중 태그 <div className = "App"></div>를 남기고,

내용은 <h1>My Day</h1> 로 바꾸겠습니다.

 

여기까지 수행을 하면 browser에 보이는 App의 모습은 다음과 같습니다.

 

 

 

React App 비우기 후의 모습

 

 

# GitHub에 올리기

이렇게 비워진 프로젝트를 이제 GitHub에 올려보겠습니다.

 

먼저 GitHub에 빈 repository를 생성하고,

repository의 url을 가져와 다음 작업을 수행하겠습니다.

 

VS Code에서 터미널을 열면 프로젝트의 경로 위에서 바로 수행할 수 있습니다.

 

프로젝트의 경로에서

1. git init

2. git remote add origin [Remote Repository's URL]

3. git add.

4. git commit -m [Commit massage]

5. git push origin master

을 차례로 수행합니다.

 

그런 후 GitHub에 와보면 다음과 같이 파일들이 업로드된 것을 볼 수 있습니다.

 

 

GitHub에 올라간 프로젝트

 

이렇게 이번 글을 마치겠습니다.

 

 

---

# 참고 자료

 

https://academy.nomadcoders.co/

Academy

 

 

---

# 작성 록

2020/03/04

 

배운 지 얼마 되지 않았는데 정리를 하지 않았더니 다시 강의를 듣고 작성하게 됩니다.

오늘도 기록의 중요성을 다시금 느낍니다.