[MernStack] Blog 만들기 12. Front_Router세팅

  이번 강의편은 에러가 너무 많이 발생하여서 노드를 삭제하고 LTS버전으로 재설치하고 이것저것 삽질하느라 나도 이해를 못했다..
우선 흐름을 파악하고 추후에 수정하겠다.

나는 차라리 Java로 짜는 Spring이나 JSP가 훨씬 더 쉬운것 같다..

---

 

1. component 폴더에 Header.js와 Footer.js를 만든다.

<Header.js>

import React from 'react';

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

export default Header;

<Footer.js>

import React from 'react';

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

export default Footer;

 

 

2. 라우터 세팅

routes폴더안에 2개의 폴더를 생성한다.

첫 번째, 누구나 접근 할 수 있는 normalRoute폴더
두 번째, 권한이 있는 사람만 접근 가능한 protectedRoute를 만든다

접근제한 라우터는(protectedRoute) 게시글 수정은 글을 작성한 사람만이 가능하기에 
게시글 수정 URL로 권한이 없는 자의 접근을 막는 역할을 한다.
우선 폴더만 생성하고 추후에 작업할 것 이다.

2.1 routes폴더 안에 Roter.js 파일을 생성한다.

<Router.js>

import React, { Fragment } from 'react'
import Header from '../components/Header'
import Footer from '../components/Footer'

//{(retrun)} ...이고 {} 없이 ()사용하면 retrun을 생략한다.
const MyRoter = () => (
  <Fragment> 
      <Header/>
      <h2>Hello Body</h2>
      <Footer/>
  </Fragment>  
);

export default MyRoter;

여기서 <Fragment>~</Fragment> 이러한 형식을
<>~ </> 으로 Fragment를 생략 가능하다.

3. src의 app.js 추가 및 수정

<app.js>

import React from 'react'

import {Provider} from 'react-redux'
import {ConnectedRouter} from 'connected-react-router'
import store,{history} from './store'
import MyRoter from './routes/Router'

import "bootstrap/dist/css/bootstrap.min.css"


const App = () => {
    return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <MyRoter />
            </ConnectedRouter>
        </Provider>
    );
}

export default App;

 

 

 

그 다음 터미널을 실행 후  client 폴더로 이동후 npm run start를 하여 react를 실행한다.

 

---

 

마지막에 npm run start 했을시 에러가 뜬다면 아래 두 사이트를 참고하길.
https://stackoverflow.com/questions/39959900/npm-start-error-with-create-react-apphttps://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

---

이거 괜찮겠는데..?