react#2 [샘플 어플리케이션 수정해서 코딩하기, 배포하기]

 

샘플 애플리케이션을 수정하는 것으로 시작해보자.

수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다.

---

​

JS 코딩하기

public 파일은 샘플 애플리케이션이 나타나는 index.html이 있는 파일이다.

이 index.html을 살펴보면,

이렇게 id root가 있다. 리액트를 사용하면서 만들어지는 component는 모두 이곳에 넣기로 creat-react-app은 약속되어 있다.

​

실제로 개발자 도구를 통해 살펴보면

​

이렇게 root 안에 리액트로 만들어진 태그들이 들어있는 것을 볼 수 있다.

​

그렇다면 이러한 component들은 어떤 파일에서 만들 수 있는가?

​

그것은 바로 src 디렉토리 안에 있는 파일을 수정해서 만들 수 있다. 그래서 앞으로 대부분의 파일들은 src 안에 넣게 될 것!!

​

src에서 index.js 파일을 살펴보면

여기서 document.getElementById('root')를 통해서 위에서 index.html에서 봤던 root를 선택하게 되는 것이다.

그리고 <App /> 이 부분이 리액트를 통해 만든 사용자 정의 태그, component이다. 이 component의 실제 구현은 위의 import를 통해서 './App'(=./App.js | .js가 생략됨)인 것.

​

즉, <App />이라는 사용자 정의 태그가 실제로 구현되는 내용은 App.js 파일인 것이다.

그래서 샘플 어플리케이션을 수정하려면 표시된 부분의 안의 내용을 수정하면 된다. 반드시 하나의 태그로 감싸 져있어야 하기 때문에 <div className="App"> 태그 안에서 수정해야 한다.

​

예를 들어,

이렇게 코드를 수정하면

이렇게 페이지의 내용이 바뀐다!

​

CSS 코딩하기

css는 어떻게 수정할까?

index.js 내의 import './index.css'부분이 있다. 그럼 index.css를 수정하면 디자인이 바뀔 것이다.

​

이렇게 index.css 를 수정해주면

이렇게 수정된 모습을 볼 수 있다.

​

즉, import '파일이름' 을 통해 파일을 연결할 수 있는 것.

​

그런데 App.js 파일 안에도 import './App.css' 부분이 있다.

​

이것의 의미는 App.js 파일에 있는 리액트의 컴포넌트가 로드됐을 때 App.css도 같이 로드가 되는 것 즉 App이라고 하는 컴포넌트의 디자인을 App안에 넣는 것이다.

​

deploy 하는 법

​

지금까지의 react app을 살펴보자.

개발자 도구에서 네트워크탭을 이용해서 살펴보면 1.7mb를 다운받는 것을 알 수 있다.

아무것도 안해놨는데 1.7mb나 차지하는 이유는??

개발의 편의성을 위해 리액트에서 여러 가지 도구들을 제공하는데 그래서 creat-react-app은 무게가 무거운 편이다.

개발자들이 사용하는 도구로선 무거워도 상관없지만 사용자들이 사용하는 웹이 이렇게 무거워서는 안 된다!

​이것이 빌드를 해야 하는 이유이다.

 

creat-react-app을 빌드할 때 "npm run build"를 터미널에 입력하면 bulid라는 파일이 새로 추가된다.

이 build 안에 있는 index.html은 공백이 하나도 없다. 그 이유는 creat-react-app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해서 공백과 같이 불필요하게 용량을 차지하는 것들을 제거했기 때문

또한 src내에 있던 파일들도 용량을 줄여서 index.html 파일이 그 파일을 로드할 수 있도록 알아서 처리한다.

​

+) 빌드란?

-컴파일된 코드를 실제로 실행할 수 있는 상태로 만드는 과정. 개발자가 작성한 코드 파일 및 라이브러리 이미지 등을 압축하는 과정이 빌드이다. 프로그래밍 코드를 압축해서 전체 크기를 줄이고, 난독화하기 위해 진행한다. 이렇게 빌드한 후에 배포 과정이 이루어지게 된다.

​

​

즉 실제로 서비스할 때는 build 안에 있는 파일을 쓰면 된다.

그래서 Web Server가 문서를 찾는 최상위 디렉토리 "document root"에 build 디렉토리 안에 있는 파일들을 위치시키면 실서버 환경이 완성된다.

​

---

serve라는 명령어를 통해서 npm을 통해 설치할 수 있는 웹서버가 있다.

​

npm install -g serve

npx serve(한 번만 실행시킬 웹서버)

​

이 두 가지를 통해서 웹서버를 만들 수 있다.

​

npx serve -s build

로 입력을 하면 웹서버를 만들어서 실행시킬 때 우리가 만든 build라는 파일을 doucument root로 하겠다고 지정하는 것.

​

실행했을 때 나오는 주소 아무거나 들어가면 우리가 만든 웹사이트를 볼 수 있다.

그렇게 사이트에 들어가면 아까와 다르게 용량이 확 줄은 것을 볼 수 있다!! 이러한 이유로 배포 전에는 빌드 과정을 거쳐야 한다.