웹 TIL) 220330 2권의 리액트 책을 보며 비교해보기 - npx, npm,컴포넌트,배포방법(실서버배포)

웹 TIL) 220330 2권의 리액트 책을 보며 비교해보기 - npx, npm,컴포넌트,배포방법(실서버배포)

2022. 3. 31. 00:06ㆍ카테고리 없음

1. npx

표현1 : 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지

표현2 : (프로젝트 이름) 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지움

- 컴퓨터 공간을 낭비하지 않는다, 설치를 실행할 때마다 새로 다운로드 하기 때문에 항상 최신 상태

2. React에서의 index.html * 리액트 동작 원리 *

표현1 : 왜 <div id="root"></div> 사이가 비어 있었는지 알 수 있을거야. 리액트는 우리가 작성한(수정한) 프로젝트 폴더에 있는 코드를 자바스크립트를 이용해서 해석해. 그리고 해석한 결과물을 index.html로 끼워넣어. 우리가 App.js나 index.js와 같이 작성한 파일들을 리액트가 해석해서 index.html에 끼워 넣는거야

표현2 : public이라는 디렉터리에는 index.html이 있습니다. Create React App을 실행하면 나오는 첫 화면이 웹 브라우저 상에서 index.html이라는 파일을 실행한 결과입니다. index.html 파일의 내용 중 여러분이 신경 써야 할 것은 거의 없습니다. 그중에서 중요한 부분은 <div id="root"></div> 입니다. = JS에서의 document.getElementById("root");와 동일

리액트를 통해 컴포넌트를 만들어 나갈 것입니다. 그리고 그 컴포넌트들은 id가 "root"인 div 요소 안에 들어가게 Create React App이 약속해놨습니다.

그리액트 프로그래밍을 하게 되면 대부분 파일은 src라는 디렉터리에 넣게 될 것입니다. 그중에서 특히 앱의 진입점 역할을 하는 파일은 index.js 입니다.

3. 컴포넌트 import App from './App';

표현1 : ReactDOM.render(<App />, document.getElementById('root'));

아이디가 root인 엘리먼트에 App 컴포넌트를 그린다고 생각하면 돼. 이 코드가 바로 App.js 파일에 작성한 코드를 index.html의 아이디가 root인 엘리먼트에 넣어주는 거지.

표현2: import 다음에 나오는 'App'은 다른 이름으로 변경할 수 있습니다(하지만 첫 글자는 대문자여야 합니다) App을 다른 이름으로 변경했다면 그 아래의 render() 내에 있는 <App /> 사용자 정의 태그도 변경한 이름으로 바꿔야 합니다.

~

import MyReactApp from './App';

~ 

ReactDOM.render(

    <React.StrictMode>

        <MyReactApp />

그렇지만 from 뒤에 나오는 './App'은 다른 이름으로 바꿀 수 없습니다. 왜냐하면 이 부분은 .js가 생략된 파일의 이름이기 때문입니다.

App.js를 보면 App.css를 import 하는 부분을 볼 수 있는데, 따라서 App.js에 있는 App이라는 컴포넌트가 로드됐을 때 App.css도 함께 로드됩니다. 그러면서 App.css에 정의된 스타일이 적용되는 것입니다. App.css는 App이라는 컴포넌트의 디자인을 입력하는 곳이라고 생각하면 됩니다.

4. 배포

책1 : 깃허브 배포

책2 : 배포(deploy) 실 서버 배포

크롬 개발자 도구 > Network > 새로고침 하는 부분에서 마우스 우클릭 '캐시 비우기 및 강력 새로고침' >