React App 만들기(1) - 프로젝트 생성

티스토리 뷰

개발/React

React App 만들기(1) - 프로젝트 생성

멍멍이코더 2023. 3. 8. 14:16

1. nodejs 설치

1) nodejs 공식사이트에서 각각의 OS에 맞는 버전을 다운로드하여 설치한다.

https://nodejs.org/en/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

2) node -v 커맨드를 통해 설치가 잘 되었는지 확인한다.

> node -v

v18.12.1

3) npx 명령어가 잘 동작하는지 확인한다.

> npx

Entering npm script environment at location:
/Users/user/Desktop
Type 'exit' or ^D when finished

npx 란?
자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구.
따라서 npm과 비교대상이 아닌 npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구이다.
npm@5.2.0 이상 버전만 깔려 있다면 npx 명령어를 사용할 수 있다.
✍️ npm = Package Manager (관리)
✍️ npx = Package Runner (실행)

2. 프로젝트 생성

https://github.com/facebook/create-react-app

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.

github.com

공식문서 가이드대로 npx 명령어를 이용하여 프로젝트를 생성한다.

npx create-react-app react-app

현재 폴더에 생성할때는 npx create-react-app . 명령어를 입력하면 된다.

2-1) 프로젝트 구성

프로젝트로 이동하여 package.json 열어본다.

cd react-app

package.json안에는 실행시킬 수 있는 script들이 들어있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

개발용 서버를 실행시킨다.

npm start

💡 src/index.js

src 폴더 밑에는 우리가 생성하는 코드들이 들어있다. src 폴더 안에서 가장 중요한 것은 src/index.js 이다. index.js는 리액트의 입구파일이며 여러가지 전역적인 설정이 들어가있다. 이것은 ReactDOM을 import하고 렌더링한다. 그러므로 중간에 있는 <App />을 지우면 화면에 아무것도 나타나지 않는다.

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

💡 src/App.js

사용자가 내용을 편집해 가면서 UI를 만들어나가는 컴포넌트이다.

💡 public/index.html

public/index.html에는 우리가 생성할 코드들이 들어갈 수 있도록 설정되어있다. index.html에는 root가 있다.

<!DOCTYPE html>
<html lang="en">
	...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

2-2) 기본 설정

불필요한 코드를 삭제하고 아래 코드만 남긴다. 불필요한 파일도 삭제하고 src/ 하위에는 index.js와 App.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;

3. 배포

npm start 명령으로 실행한 애플리케이션은 개발을 위한 애플리케이션이다. 개발하기에는 좋지만 서비스하기에는 용량도 크고 여러가지 불필요한 메시지도 표시하기 때문에 실제로 서비스에 사용할만한 결과물은 아니다. 따라서 배포할 때는 아래와 같은 방법을 이용한다.

npm run build

빌드를 마치면 프로젝트에 build라는 폴더가 생기고, build 폴더에는 index.html을 의존하는 다른 파일들이 존재하게 된다.

npx serve -s build

여기서 첫번째 주소인 http://localhost:3000으로 접속하면 실제로 서비스해서 사용할 수 있는 버전이 만들어지고, 서비스된 모습을 볼 수 있다.

'개발 > React' 카테고리의 다른 글

React 상태관리 라이브러리 - Redux vs Recoil (1)	2023.05.11
React 기본 - Router (0)	2023.05.09
React 기본 - Component, Props, Event, State (0)	2023.05.03
React 기본 - UseEffect (0)	2023.03.09
React App 만들기(2) - Button 컴포넌트 만들기 (0)	2023.03.08

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

티스토리 뷰