카테고리 없음

Node.js 클론코딩 실습(2)

카멜레온개발자 2023. 5. 5. 12:59

1. 리액트 앱 만들기

> npx create-react-app movie_app_2023

* 생성이 안되고 에러가 나서. 시키는대로 해봤다

* 그리고는 다시 생성하니 생성이 되는듯

2. VS Code로 방금생성한 파일 열기(D:\Study\React\movie_app_2023)

1) README.md 파일을 다음과 같이 수정

#Movie App 2023

React JS Fundamentals Course 2023

2) package.json파일 수정

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

  [변경전]
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },

     [변경후]

3. 실행

1) 콘솔을 생성된 폴더로 이동해서 npm start 명령을 실행한다

2) 3000번 포트를 쓰고 있다고 다른 포트로 실행하겠냐고 물어본다

실행이 성공했다고 표시되고, 아래의 창이 나타난다

4. git 저장소 초기화

5. github 사이트의 저장소 만들기

 

 

생성하고 나면 소스 업로드는 설명을 따르면 된다

echo "# movie_app_2023" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/hdongle/movie_app_2023.git
git push -u origin main

* github에 올라감

6. 파일 삭제(선택된 파일 삭제)

7. 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(
    <App />
);
[변경전] [변경후]

 

8. 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;
import React from "react";

function App() {
  return (
    <div className="App"/>
  );
}

export default App;

 

9. npm start로 시작하면 아무것도 없는 브라우저가 뜬다

 

10. App.js를 다음과 같이 수정하면 Hello!!! 문구가 나타난다.

[변경전] [변경후]
import React from "react";

function App() {
  return (
    <div className="App"/>
  );
}

export default App;
import React from "react";

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

export default App;