nomad code_react js로 영화앱 만들기_#5.0 (create-react-app)

# create-react-app

CLI(커맨드 라인 인터페이스).

리액트를 사용하기 위해 필요한 환경을 한번에 조성해주는 인터페이스.

# create-react-app 사용하기

1. node js 설치

https://nodejs.org/ko/

Node.js

 

 

운영체제에 맞는 node.js를 설치

제대로 설치됐는지 확인하려면 터미널에 아래 명령어를 입력한다.

node -v

정상적으로 설치가 되었다면 node.js의 버전이 출력된다

 

create-react-app을 사용하기 위해서는 node.js의 npx라는 커맨드를 사용하기 때문에 npx도 터미널에 입력해서 오류가 안뜨는지 확인한다.

2. create-react-app 폴더 생성

create-react-app 명령어는 자동으로 폴더를 생성하기 때문에 폴더를 만들지 않은 상태에서 원하는 위치에서 터미널에 명령어를 입력하면 된다.

npx create-react-app react-for-beginner

npx create-react-app 뒤에 오는 이름은 폴더명이 되므로 원하는 이름을 적으면 된다.

정상적으로 폴더가 생성되었다면 다음과 같이 보여진다.

3. package.json

생성된 폴더 안의 package.json을 보면 react팀이 설정해놓은 설정값들이 들어있다.

이 안의 start를 실행해보자

npm start
// or
npm run start

(주의 :  create-react-app으로 생성한 폴더의 경로에서 명령어를 입력해야 함)

위 명령어를 입력하면 개발용 서버를 만든다.

자동으로 브라우저가 열릴수도 있고 아니더라도 터미널에서 생성된 Local링크를 클릭하면 만들어진 페이지를 볼 수 있다.

4. src

만들어질, 모든 파일을 넣는 폴더

index.js 파일에 앞서 했던 구조들이 미리 세팅되어있다. index.js로 구성한 내용은 public폴더의 index.html에 그려서 출력된다.

4. 기본 구성

create-react-app으로 생성된 파일들 중에서 src의 App.js와 index.js의 파일을 제외한 모든 파일을 지운다.

그리고 각각의 파일은 아래와 같이 정리한다.

*index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

*App.js

function App() {
  return (
    <div>
      <h1>Welcome Back!</h1>
    </div>
  );
}

export default App;