Blog App 1 Scaffold

0.앱 구조

blog-app

• api
  • db.json
• client
  • public
    • index.html
    • modal.html
  • src
    • actions
      • index.js
      • types.js
    • apis
      • streams.js
    • components
      • StreamCreate.js
      • StreamDelete.js
      • StreamEdit.js
      • StreamForm.js
      • StreamList.js
    • App.js
    • GoogleAuth.js
    • Header.js
    • Modal.js
  • reducers
    • authReducer.js
    • index.js
    • streamReducer.js
  • history.js
  • index.js

 

1api/db.json

// npm 설치

npm i json-server

 

// json-server 가동

 "scripts": {
  
    "start": "json-server -p 3001 -w db.json",
    
  },

 

// db.json 파일에 데이터 저장

{
  "streams": [
    {
      "title": "My Stream",
      "description": "This is a great stream.",
      "id": 1
    }
  ]
}

 

2.src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore,applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk"

import reducers from "./reducers";

// chrome dev tools 설정

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// store 생성 및 redux 적용

const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(reduxThunk))
  );
  
// Provider를 통해 App 컴포넌트와 스토어(상태저장소)를 연결

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.querySelector("#root")
);

크롬 데브툴즈 설정

 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

 

store생성 및 redux적용

 

const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk)));

 

Provider를 통해 App 컴포넌트와 스토어 연결

ReactDOM.render(<Provider store={store}><App /></Provider>, document.querySelector("#root"));

 

3.components/App.js

import React from "react";
import { Router, Route } from "react-router-dom";

import Header from "./Header";
import StreamList from "./streams/StreamList";
import StreamShow from "./streams/StreamShow";
import StreamDelete from "./streams/StreamDelete";
import StreamEdit from "./streams/StreamEdit";
import StreamCreate from "./streams/StreamCreate";
import history from "../history"

class App extends React.Component {
  render() {
    return (
      <div className="ui container">
        <Router history={history}>
          <div>
            <Header />
            <Route path="/" exact component={StreamList} />
            <Route path="/streams/new" exact component={StreamCreate} />
            <Route path="/streams/edit/:id" exact component={StreamEdit} />
            <Route path="/streams/delete/:id" exact component={StreamDelete} />
            <Route path="/streams/show" exact component={StreamShow} />
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

 

라우터에 history 생성

<Router history={history}>

 

Header 컴포넌트 삽입

<Header />

 

Route 설정

 <Route path="/" exact component={StreamList} />
 <Route path="/streams/new" exact component={StreamCreate} />
 <Route path="/streams/edit/:id" exact component={StreamEdit} />
 <Route path="/streams/delete/:id" exact component={StreamDelete} /> 

4.history.js

import createHistory from "history/createBrowserHistory"

export default createHistory()

 

5.HEADER.js

import React from 'react';
import { Link } from 'react-router-dom';
import GoogleAuth from './GoogleAuth';

const Header = () => {
  return (
    <div className="ui secondary pointing menu">
      <Link to="/" className="item">
        Streamy
      </Link>
      <div className="right menu">
        <Link to="/" className="item">
          All Streams
        </Link>
        <GoogleAuth />
      </div>
    </div>
  );
};

export default Header;