02. 소스코드 수정방법

1. 디렉토리의 구조

01. index.js

src 폴더에서 index.js 파일이 있는데 이 파일은 입구 역할을 한다.

npm start를 터미널에 입력하여 create-react-app을 구동시키면 index.js 파일을 찾고 그대로 동작하게 된다.

10행의 <App />이라는 태그가 브라우저 UI의 전체이다. 그리고 이 태그의 파일은 App.js이다.

 

02. App.js

App.js 는 UI를 만드는 역할을 한다.

따라서 App.js를 편집하면서 UI를 만드는 것이다.

App.js파일로 이동하여 아래 그림처럼 입력하면

브러우저가 아래와 같이 보이게 된다.

그렇다면 Hello React! 가 가운데에 위치하는 이유는 뭘까?

그 이유는 App.css 때문이다.

 

03. App.css / index.css

 App.css는 브라우저의 디자인을 변경할 때 이용한다.

App.css로 이동하여 다 지우고 다음과 같이 입력하면

아래와 같이 브러우저가 바뀌는 것을 확인할 수 있다.

따라서 App.js의 디자인을 수정하고 싶을 때는 App.css를 수정하면 된다.

index.css도 마찬가지이다. 기존에 작성되어 있던 코드를 다 지우면 

기본적으로 샘플 앱에서 사용하고 있던 css를 초기화하여 깔끔한 상태로 시작할 수 있다.

 

04. index.html

다시 index.js로 돌아가 7행을 보면 <App />가 아이디 값이 root라는 이름으로 render되어 있다.

이것은 public 폴더의 index.html에서 온다.

확인해보기 위해 public - index.html로 이동하여 31행을 아래와 같이 수정한다.

그리고 브라우저를 확인해보면 

위와 같이 빨간색 테두리가 생기는 것을 볼 수 있다.

---

2. 배포

터미널을 열어 기존에 켜져 있던 개발 환경을 끄기 위해 ctrl c를 눌러 꺼준다.

그리고 npm run build를 입력하여 배포판을 만든다.

그렇다면 위와 같이 build라는 폴더가 생긴다. build 폴더 안의 index.html을 보면 공백 없이 코드가 있다.

공백이 없는 이유는 배포를 할 때 용량을 최대한 줄이기 위해서 그렇다.

build 결과를 실행시키기 위해서 npx serve -s build를 입력한다.

serve -s build는 build라는 폴더안의 .html파일을 서비스 해준다는 의미이다.

터미널에 위와 같이 결과가 나오면 Local 주소를 클릭하여 이동한다.

그러면 위와 같이 localhost가 3000번인 브라우저가 열린다. 

이것은 개발환경을 위한 버전이 아니라 실제로 서비스에서 사용할 수 있는 버전의 파일이 만들어지고 서비스 되진 것이다.

 

강의 영상 - https://opentutorials.org/course/4900/31264