샘플 애플리케이션을 수정하는 것으로 시작해보자.
수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다.
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로 하겠다고 지정하는 것.
실행했을 때 나오는 주소 아무거나 들어가면 우리가 만든 웹사이트를 볼 수 있다.
그렇게 사이트에 들어가면 아까와 다르게 용량이 확 줄은 것을 볼 수 있다!! 이러한 이유로 배포 전에는 빌드 과정을 거쳐야 한다.
'개발 공부 > React' 카테고리의 다른 글
| React #6 [update, delete] (0) | 2022.08.09 |
|---|---|
| React #5 [props와 state, create, push와 concat] (0) | 2022.07.16 |
| React #4 [event 만들기, bind, setState] (0) | 2022.07.13 |
| React #3 [component 만들기,React Developer Tools, props, state, key] (0) | 2022.07.13 |
| react #1 [component 개념, 개발환경 구축하기] (0) | 2022.07.13 |
샘플 애플리케이션을 수정하는 것으로 시작해보자.
수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다.
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로 하겠다고 지정하는 것.
실행했을 때 나오는 주소 아무거나 들어가면 우리가 만든 웹사이트를 볼 수 있다.
그렇게 사이트에 들어가면 아까와 다르게 용량이 확 줄은 것을 볼 수 있다!! 이러한 이유로 배포 전에는 빌드 과정을 거쳐야 한다.
'개발 공부 > React' 카테고리의 다른 글
| React #6 [update, delete] (0) | 2022.08.09 |
|---|---|
| React #5 [props와 state, create, push와 concat] (0) | 2022.07.16 |
| React #4 [event 만들기, bind, setState] (0) | 2022.07.13 |
| React #3 [component 만들기,React Developer Tools, props, state, key] (0) | 2022.07.13 |
| react #1 [component 개념, 개발환경 구축하기] (0) | 2022.07.13 |
