React - Sample Web App에 관하여

React Sample Web App에 관하여

1. create react app이 기본적으로 제공하는 샘플 웹앱

• 실행
  • npm run start / npm start : create react app으로 개발환경을 만들고 난 후 npm run start 혹은 npm start을 terminal에 작성해 실행할 수 있다.
  • 개발을 할 때 접속해서 개발 중인 앱을 확인하기 위한 주소(이 주소들 중 하나로 들어가면 확인 가능) 
  • Local: http://localhost:3000 On Your Network: http://192.168.35.217:3000
  • 처음 실행했을 때 웹브라우저 상에 보여지는 앱은 create react app이 가장 최소한의 앱을 미리 구현해서 보여주는 앱 이다.(즉 react 기술로 만들어진 웹앱이다)
• 끄기
  • terminal창에 ctrl + C 입력
  • 끈 후 reload를 해도 실행되지 않음

---

2. 샘플 웹앱 수정

Javascript의 경우

• public 폴더
  • index.html
    • 샘플 웹앱 실행 시 처음 보여지는 페이지
    • react를 통해 만든 컴포넌트들을 id가 root인 해당 코드 안에 들어가도록 해야 한다.
    • <div id="root"></div>
• src 폴더
  • public - index.html에서 <div id="root"></div> 안에 들어가는 컴포넌트들은 src 안 파일들이다.
  • 개발 작업시 대부분의 파일들은 src 폴더 안에 넣게 될 것이다.
  • index.js
    • 진입 파일(entry file)

        ReactDOM.render(
              <React.StrictMode>
                <App />
              </React.StrictMode>,
              document.getElementById('root')
        );

      • document.getElementById('root') : id가 root인 태그를 선택하는 js 선택자 같은 문법, 이것을 기반으로 하여 public-index.html 에서 <div id="root"></div>의 root가 document.getElementById('root')의 root가 된다. 그래서 root 변경 시 두 코드에서 다 변경해줘야 한다.
      • <App/>
        • react로 만든 사용자 정의 태그, 즉 컴포넌트이다.
        • create react app이 샘플로 만든 저 컴포넌트의 실제 구현은 <App/>컴포넌트의 실제 구현은 import App from './App'; 에서 from 뒤 App.js 파일에서 function 혹은 class로 만들어진 App 안에서 볼 수 있다.
  • App.js :
    • 컴포넌트의 실제 구현을 function 혹은 class로 만들어진 App 안에서 볼 수 있다.
    • 실제 의 내용은 function 혹은 class로 만들어진 App 속 return 안에 들어 있다.
    • return 안에 기본적으로 있는 내용들을 지우고 실제 구현하고자 하는 내용을 작성하면 된다. 수정 후 저장 시 create react app이 구축해놓은 환경에 의해서 파일을 수정할 때마다 자동으로 웹브라우저를 reload 해줌
    • 반드시 react는 하나의 태그 안쪽에 나머지 태그들이 있어야 한다. 즉 가장 바깥 쪽에는 태그 하나가 있어야 한다.

CSS의 경우

• create-react-app의 지배 하에서 css 수정 방법
• src 폴더
  • index.css 수정
  • index.js에서 <App />은 import App from './App';에서 import 뒤 App과 동일하므로 이름 변경 시 같이 변경해야 한다. import Laura from './App'; 인 경우 < Laura /> 여야 함. from 뒤에는 파일의 이름을 입력하는 공간이라 파일의 이름을 변경하지 않는 이상 그대로 두기
  • App.css
    • App이라고 하는 이름의 App.js 안에 들어 있는 react의 컴포넌트가 load 됐을 경우 App.css도 같이 load 된다.
    • App이라는 컴포넌트의 디자인을 그 App 안에 넣는 것

---

3. 배포 Deploy

• 캐시 비우기 및 강력 새로고침
  • 개발자 도구(F12) - Network 켠 후 - 새로고침 아이콘 오른 쪽 클릭 - 캐시 비우기 및 강력 새로고침 empty Cache and Hard Reload
  • 보통은 성능을 높이기 위해서 무언 가를 다운로드 받아서 보관해놨다가 그 다음엔 접속을 안하는데 그것이 바로 캐시(cache)이다. 그 캐시를 다 지우는 것이다.
• 개발자와 사용자 입장에서의 인터넷 환경
  • react가 개발의 편의성을 위해서 여러가지 기능들을 추가해놓은 상태이기 때문에 초기화면에서 캐시 비우기 및 강력 새로고침을 해도 데이터가 은근 많이 남아있다. 그래서 create react app의 개발환경은 상당히 파일의 무게가 무거운 것을 알 수 있다.
  • 개발자의 경우 파일의 무게가 무거워도 괜찮지만 사용자 입장에서 무거우면 보안적인 문제가 발생할 수 있다. 그러므로 개발 모드와 사용자 입장에서 실행 시킬 production mode 가 있다.
• 개발자의 경우
  • 개발 환경 실행 : npm run start / npm start
• 사용자의 경우(production mode)
  • 실제로 서비스 하는 경우 build 안 파일들 사용
  • 실 서버 환경 구축웹서버가 document를 찾는 최상위 폴더(directory)에다가 build 폴더 안 파일들을 위치시키면 된다.
  • create react app을 활용하여 production mode의 application 만드는(build) 방법
    1. npm run build
    2. directory 구조에서 개발 모드에서는 없었던 build 폴더가 생성됨
       • build 폴더 안 index.html은 읽을 수 없을 정도로 복잡한데 그 이유는 create react app이 실제 production mode에서 사용되는 app을 만들기 위해서 이미 가지고 있는 public-index.html에서 공백 등 불필요한 용량을 차지하고 있는 것들을 수정해서 만든 결과이기 때문이다(용량이 훨씬 작아짐).
       • create react app이 src 폴더에서 작업했던 여러 파일들을 용량을 줄이거나 보안적으로 또는 심리적으로(error, 경고 메시지 등) 좋지 않은 것들을 없애는 작업을 한 다음에 build 안 index.html이 그것을 load할 수 있도록 알아서 처리 해줌
• serve
  • serve 명령어 실행 후 해당 주소로 들어가보면 개발 모드보다 훨씬 용량이 줄어든 웹사이트를 볼 수 있다.
  • npm install -g serve : 해당 컴퓨터 어디에서나 serve 라는 명령어를 통해서 웹서버 설치 가능
  • npx serve -s build : 한번만 실행시킬 웹서버를 실행시키는 것을 다운로드 받아서 실행시킬 때 build라는 폴더를 document root로 하겠다는 뜻

---

Tips

• VS code에서 view-appearance-show panel 후 하단에서 terminal 선택하면 commend line 즉, 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내부적으로 설치되어 있기 때문에 편리하다.