리액트 개발환경 구축 0부터 (처음부터)

React의 개발환경을 구축하는데 다음과 같은 에러가 계속 났다. 

 

npm ERR! missing script: start

 

npm ERR! A complete log of this run can be found in:

 npm create-react-app를 실행하고, npm run start를 했는데 계속 위와 같은 오류가 났다.

구글링하니까 scripts 에 start 에 index.js를 추가하면 된다고하는데.. 계속 안됐다.

 

그래서 나의 해결방법 (왜 이제 작동되는지는 이해 안감..)

1. visual studio code에서 cd를 하여 현재 작업을하려는 디렉터리로 바꿨는지 확인한다

2.  cmd 창에서 npx create-react-app my-app 입력 후 엔터 

(처음 구조 말끔하게 다 구축됨 뼈대)

3. visual studio code 에서 다시 npm run start를 하니까 된다 

 (*근데 이때 다시 cd를 하여 my-app디렉터리로 바꾼 것 같다. 혹시 위 방법대로했는데 안되면 cd my-app 디렉터리로 바꾼 후 다시 npm run start를 실행해보세요)

 

개발환경 구축하는데만 몇시간이 걸렸다 

 

출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jollyssong11&logNo=221877698680 

[React]개발환경 구축 오류:npm ERR! missing script: start

아주 그냥 정리를 깔끔하게 잘해주셔서 살렸다! 

 

cd해서 my-app까지 들어가야함.

 

오타도 있었음 

export 할 때 App 대문자로 export 했어야함

 

import React from 'react';

function App(){

   

    const postRequestHandler = async () => {

        await fetch('https://react-test-e7d28-default-rtdb.firebaseio.com/test.json', {

        method: 'POST',

        body: JSON.stringify({

        "key1": "value1",

        "key2": "value2"

        }),

        headers: {

            'Content-Type':'application/json'

        }

        })

    }

    return (

        <button onClick={postRequestHandler}>Post</button>

    )

}

export default App;

 

그래야 넘어감

 

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

 

post요청

---

PS D:\personal\supercoding-workspace-react-2\react-branch-4_18\react-fundamental> git status
On branch practice/3-8
Your branch is up to date with 'upstream/practice/3-8'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   src/App.js
        modified:   src/components/Payments/ExpenseItem.js
        modified:   src/components/Payments/Expenses.js
  (use "git add <file>..." to include in what will be committed)
        src/components/Payments/Test.js

no changes added to commit (use "git add" and/or "git commit -a")
PS D:\personal\supercoding-workspace-react-2\react-branch-4_18\react-fundamental> git add .
On branch practice/3-8
Your branch is ahead of 'upstream/practice/3-8' by 1 commit.
  (use "git push" to publish your local commits)

PS D:\personal\supercoding-workspace-react-2\react-branch-4_18\react-fundamental> git commmit -m "다 추가" 
git: 'commmit' is not a git command. See 'git --help'.

The most similar command is
        commit
On branch practice/3-8
Your branch is ahead of 'upstream/practice/3-8' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean
PS D:\personal\supercoding-workspace-react-2\react-branch-4_18\react-fundamental> git push origin practice/3-8        
Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To https://github.com/MangwonCassie/react-fundamental.git
   3685602..0edb265  practice/3-8 -> practice/3-8
PS D:\personal\supercoding-workspace-react-2\react-branch-4_18\react-fundamental> cd ../
PS D:\personal\supercoding-workspace-react-2\react-branch-4_18> cd ../
PS D:\personal\supercoding-workspace-react-2> npx create-react-app practice/7-5

Creating a new React app in D:\personal\supercoding-workspace-react-2\practice\7-5.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1458 packages in 2m

241 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 14s

245 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1527 packages in 3s

245 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created 7-5 at D:\personal\supercoding-workspace-react-2\practice\7-5
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

  cd D:\personal\supercoding-workspace-react-2\practice\7-5
  npm start

Happy hacking!
PS D:\personal\supercoding-workspace-react-2> cd practice/7-5 
√ Something is already running on port 3000.

Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the      
"@babel/plugin-proposal-private-property-in-object" package without     
declaring it in its dependencies. This is currently working because     
"@babel/plugin-proposal-private-property-in-object" is already in your  
node_modules folder for unrelated reasons, but it may break at any time.

Compiled successfully!

You can now view 7-5 in the browser.

  Local:            http://localhost:3003     
  On Your Network:  http://192.168.10.100:3003

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

 

이거하고 나서 npm run build 하면 끝

 

 

 

Build

• 프로젝트를 배포하기 위해서는 소스 코드들에 공백도 많고 띄어쓰기도 많은데 이런 것들도 다 용량에 해당됨. 실제 배포 시에는 이런 용량들을 줄여서 배포해야 함
• Build : 사진 여러 개 전송 시 압축해서 보내듯이 코드를 압축해 서버에 전송하는 작업
• package.json에서 "scripts" 부분의 "build":"react-scripts build"를 확인할 수 있는데 build 명령 내리면 배포할 수 있는 파일로서 활용할 수 있는 압축도니 파일을 얻을 수 있음

npm run build

• 프로젝트 크기에 따라 시간 소요 다름
• build 완료 시 The build folder is ready to be deployed. 출력되고 build라는 폴더가 생성된 것을 확인할 수 있음

PS D:\personal\supercoding-workspace-react-2\practice\7-5> npm run build

> 7-5@0.1.0 build    
> react-scripts build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Compiled successfully.

File sizes after gzip:

  46.61 kB  build\static\js\main.1f426939.js
  1.78 kB   build\static\js\787.2d83b632.chunk.js
  541 B     build\static\css\main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

PS D:\personal\supercoding-workspace-react-2\practice\7-5> 

 

---

다 지우고 이렇게 만들면 됨

 

before

 

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

 

 

after

 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

주석과 지워버린 파일들의 Import를 삭제해서 after처럼 만들기.