React를 하기 위한 기초적인 환경 구성

 

개발환경 설정

node 설치 (버전 확인)

node -v
npm install -g create-react-app

 

리액트 앱 생성

다음과 같은 장점이 있어서 npx로 설치를 합니다.

1. 간편한 설치: "npx"는 npm 패키지를 다운로드하지 않고 바로 실행할 수 있도록 해주는 도구입니다. 따라서 "create-react-app"을 전역으로 설치할 필요가 없습니다.
2. 최신 버전의 React 템플릿: "create-react-app"은 항상 React의 최신 버전을 사용하여 애플리케이션을 생성합니다. 이는 React의 새로운 기능과 최적화를 즉시 활용할 수 있게 해줍니다.
3. 설정의 간소화: "create-react-app"은 기본적으로 React 애플리케이션을 생성하는 데 필요한 모든 설정을 자동으로 처리합니다. 이는 개발자가 초기 설정에 시간을 쏟지 않고 바로 코딩에 집중할 수 있도록 도와줍니다.
4. 기본적인 개발 서버 포함: "create-react-app"은 개발을 위한 기본적인 개발 서버를 제공하여 개발자가 빠르게 프로토타입을 만들고 실시간으로 변경 사항을 확인할 수 있도록 합니다.
5. 최신 JavaScript 표준 지원: "create-react-app"은 최신 JavaScript 표준을 사용하여 프로젝트를 설정합니다. 이는 최신 ECMAScript 표준을 사용하여 개발할 수 있게 해주며, Babel과 같은 도구를 사용하여 이전 브라우저와의 호환성도 자동으로 처리합니다.

npx create-react-app my-app

 

 

 

 

생성을 하면 이런 식으로 생성하게 된다.

 

여기서 이제 처음부터 개발자가 개발할 때 기존 것을 제거하고 핵심만 남기는 작업을 해서 정리해본다.

일단 css 를 다 다시 만들기 위해서 제거한다.

파일 삭제 리스트

• src
  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • reportWebVitals.js
  • setupTests.js

src/App.js 수정

기존 코드

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

수정 코드

function App() {
  return (
    <div>
      <h1> Hello World!</h1>
    </div>
  );
}

export default App;

src/index.js 수정

기존 코드

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

수정 코드

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>
);

 

프로젝트 실행

package.json

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

 

npm start

 

localhost:3000에 나오는 것을 확인할 수 있습니다

 

ReactJS로 영화 웹 서비스 만들기 에서 알려준 방법을 사용하여 기본적인 환경을 구성해봤다.

기초적인 환경 구성이 어려웠던 분들은 위의 내용을 참고하시면 좋을 것 같습니다!

 

추가) 의존성으로 다시 설치해야할 경우

 

새로운 것을 만들다가 새로운 패키지를 설치하다 보니, 의존성으로 인해 아예 망가지는 경우가 생겼다.

ChatGPT한테 물어봐서 지우라해서 지웠더니, 어떤 것부터 설치할 지 모르는 상황이 생겼다.

그래서 다시 할 경우에 대해서도 정리해본다.

1. 파일 및 폴더 제거

• node_modules
• package.json
• package_lock.json

2. package.json 새로 만들기

일단 기본 베이스는 기존 것을 참고해서 이런 식으로 작성해두면 좋을 것 같다.

{
    "name": "my-app", # 원하는 것 입력
    "version": "0.1.0", # 원하는 것 입력
    "private": true,
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

 

3. 추가 패키지 설치

npm install react-router-dom
npm install react 
npm install react-scripts

 

일단 이런식으로 설치하면 다시 환경을 구성할 수 있다. 

 

추가) gh-page 를 이용해서 github page에 올려보기

1. 패키지 설치

npm install gh-pages

 

2. package.json에 명령어 및 홈페이지 주소 추가 추가

{
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "deploy": "gh-pages -d build",  # 추가
        "predeploy": "npm run build"    # 추가
      },
    "homepage": "https://[id].github.io/[repository_name]/" # 맞춰서 작성
}

 

3. 케바케) github에 추가를 하지 않은 경우 다음과 같은 작업을 해야함.

# Add a remote origin
git remote add origin https://github.com/[username]/[repository].git

# Verify the remote was added
git remote -v

 

4. 배포하기

npm run deploy

5. 배포결과

어느정도 시간이 지나면, 배포가 된 결과를 볼 수 있습니다.

https://[username].github.io/[repository-name]/