[MernStack] Blog 만들기 10. Front작업, React 설치

저번달은 개인 사정으로 포스팅을 하지 못했습니다 !!
다시 오랜만에 이어서 글을 쓸려고하니 뭐가 뭔지 하나도 모르겠지만 포스팅을 다시 처음부터 보고 이어서 작성하겠습니다.

이제부터는  Front 작업 입니다.

 

---

1.React 설치

client폴더를 생성 후 client 경로로 이동하여 ( cd client)

$> npx create-react-app .  

리엑트 패키지를 설치한다.
(  (.)의 의미는 현재 폴더에 설치하겠다는 뜻임)
( 만약 npx create-react-app mert 라고 하면 mert라는 폴더에 설치가 된다)

 

 

설치가 성공적으로 완료 되었다면 public , src폴더가 생긴다.

 

2. 필요없는 파일 삭제 및 정리

src폴더에서 app.js와 index.js를 제외하고 나머지 파일들 삭제한다.
추후에 작업할 assets, componets,redux,routes폴더 생성한다.

 

3. src의  App.js와 index.js 코드 정리

<App.js>

//import logo from './logo.svg'; //삭제
//import './App.css';  //삭제
import React from 'react' //추가


const App = ()=> {
  return (
    <div>
     Hello
    </div>
  );
}

export default App;

funtion부분을 const로 바꾸고 위와 같이 바꿔준다.

<index.js>

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

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

 

index.js도 위와 같이 바꿔준다.

 

App.js의 div태그안에 hello를 넣어줬기 때문에 React서버를 실행하면 hello가 나올것이다.

$> npm start

터미널에 실행하면  로컬서버 주소로 웹이 실행된다.

 

 

<에러 발생시>

There might be a problem with the project dependency tree.

It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.1.0"

이런 에러가 발생한다면  작업하고 있는 최상위 루트로 이동하여
npm uni babel-loader 를 해주어 babel 을 삭제한다.

그 다음 8.1.0으로 설치 한다.

npm i babel-loader@8.1.0 -D

 

---

이런 사이트가 있었다니..?