yarn add react-router-dom

yarn add firebase

yarn add redux redux-logger react-redux  

 

Redux 설정

 

1. redux 를 이용하기 위해 Provider 의 아래에 위치.

// ./index.js

import { Provider } from 'react-redux';

...

ReactDOM.render(
    <Provider>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

2. redux Folder 를 생성한다.

3. root.reducer.js 를 생성한다.

 

4. user Folder 를 생성한다.

5. user.reducer.js 를 생성한다.

 

// ./redux/user/user.reducer.js

// default value 를 설정.
const INITIAL_STATE = {
    currentUser: null
}

/*
reducer 에서는 state 와 action 을 parameter 로 사용한다.
state 에는 현재의 state (current state) 를 담고 있다.
action 은 action 의 type 과 값을 담고 있는 payload 를 포함하고 있다.
*/
const userReducer = (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload
            }
        default:
            return state;
    }
}

export default userReducer;

6. root.reducer 에 user reducer 를 포함시킨다.

// ./redux/root.reducer.js

import { combineReducers } from 'redux';

import userReducer from './user/user.reducer';

// redux 내의 state 는 하나의 큰 json object 다.
// 생성한 Reducer 를 combineReducers 를 이용하여 관리한다.
export default combineReducers({
    user: userReducer
});

7. store 를 생성하여 reducer 를 담는다.

// ./redux/store.js

import { createStore, applyMiddleware} from 'redux';
// redux code 디버깅시 유용한 middleware
import logger from 'redux-logger'; 

import rootReducer from './root.reducer';

// 사용할 middleware 를 등록
const middlewares = [logger];

// store 생성
const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default store;

8. redux  의 Provider 에 store 정보를 설정한다.

// ./index.js

...

import store from './redux/store';

...

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

9. 이제 action 을 생성한다.

// ./redux/user/user.action.js

export const setCurrentUser = user => {
    return ({
        type: 'SET_CURRENT_USER',
        payload: user
    });
}

Redux 의 사용.

 

1. Redux 에 연결한다.

 

connect()

 

// ./App.js

...

import { connect } from 'react-redux';

...

// connect(mapStateToProps, mapDispatchToProps)(Component)
// 초기에는 전달할 mapStateToProps state 값이 없으므로 null 을 전달 
export default connect(null, )(App);

2. action 을 Reducer 와 연결할 수 있도록 dispatch 에 action 을 넘겨준다.

// ./App.js

...

import { setCurrentUser } from './redux/user/user.actions';
...


class App extends React.Component {

...

something() {

  setCurrentUser({
    currentUser : {
    id: snapShot.id,
    ...snapShot.data()
    }
  });
}

...

}

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user))
})

//connect(mapStateToProps, mapDispatchToProps)(Component)
export default connect(null, mapDispatchToProps)(App);

 

3. 위 component 를 사용하는 상위 component 의 parameter 를 전달하는 부분을 삭제한다.

// ./App.js

<Header currentUser={this.state.currentUser} />

// =>

<Header />

 

4. 사용할 component 에서 redux 연결하기 위해 react-redux 의 connect 를 추가한다.

// state 를 사용할 component

import { connect } from 'react-redux';

...


const Header = ({ currentUser }) => {
    return (
        ...
    );
}

// 이름은 아무래도 상관없지만 mapStateToProps 이 redux code 표준.
// argument 로 사용되는 state 가 root reducer 의 state 다.
const mapStateToProps = (state) => ({
    currentUser : state.user.currentUser
});

// 처음에는 root reducer 의 user state 가 없으므로 null 일 것이다.
export default connect(mapStateToProps)(Header);

 

 

Site 구축 연습 중에 정리차원의 지극히 개인적인 내용입니다.

 

행복한 고수되셔요.

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'Web > React' 카테고리의 다른 글

[React] React for ECommerce Site with Redux 1  (0) 2020.01.30
[Web/React] React info ...  (0) 2020.01.29
[React] npm packages and Database info in blog site  (0) 2019.12.19
[React] React 정리  (0) 2018.02.19
Posted by woojja

댓글을 달아 주세요

React 로 작업할 때 알아두어야 할 / 알아두면 좋은 사항들에 대한 링크 정리.

 

Google Font :

https://fonts.google.com/

 

node sass :

https://github.com/sass/node-sass

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

Find it on npm: https://www.npmjs.com/package/node-sass

Follow @nodesass on twitter for release updates: https://twitter.com/nodesass

 

React Route Dom Documentation :

https://reacttraining.com/react-router/web/guides/quick-start

 

HOC (Higher-Order Component)

https://reactjs.org/docs/higher-order-components.html

A higher-order component (HOC) is an advanced technique in React for reusing component logic.

HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Concretely, a higher-order component is a function that takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

 

firebase :

https://firebase.google.com/

firebase web documentation :

https://firebase.google.com/docs/reference/js/

firebase npm :

https://www.npmjs.com/package/firebase

npm i firebase

 

imgBB : 이미지 공유 API

https://imgbb.com/

 

Template Literal (Javascript) :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 

cubic-bezier : easing-function

https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

 

 

 

 

 

 

 

 

 

 

 

행복한 고수되셔요...

Woojja ))* 

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'Web > React' 카테고리의 다른 글

[React] React for ECommerce Site with Redux 1  (0) 2020.01.30
[Web/React] React info ...  (0) 2020.01.29
[React] npm packages and Database info in blog site  (0) 2019.12.19
[React] React 정리  (0) 2018.02.19
Posted by woojja

댓글을 달아 주세요

npm i express mongoose body-parser cookie-parser morgan nodemon dotenv cors

Installing MongoDB on MAC
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/

Installing MongoDB on Windows
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/

Installing Robo3T
https://robomongo.org/

MongDB Restart
sudo brew services restart mongodb-community

npm i express-validator jsonwebtoken express-jwt formidable lodash slugify string-strip-html

 

 

killall node

kill node -p 8000

pkill -8000 node

npm start

 

 

 

import Link from 'next/link';

 

 

<a href='/Signin'>Sign In</a>

 

==> 

 

<Link href='/Signin'>

    <a>Sign In</a>

</Link>

 

 

npm install --save isomorphic-fetch es6-promise

 

npm install js-cookie

 

npm install nprogress

 

 

https://nextjs.org/docs

Importing CSS / Sass / Less / Stylus files

 

npm install @zeit/next-css

 

 

blog back end

 

1. blog model/blog scheme

2. blog route

3. add blog route to server.js

4. blog controller

5. postman test

 

 

Text Editor

npm install react-quill 

 

npm i moment react-render-html

 

DISQUS commenting System

www.disqus.com

 

npm i prop-types

 

https://github.com/kriasoft/react-starter-kit/blob/master/docs/recipes/how-to-integrate-disqus.md

 

Email system

sendgrid.com

 

in backend

npm i @sendgrid/mail

 

decode token

in frontend :

npm i jsonwebtoken // to decode token.

 

 

 




'Web > React' 카테고리의 다른 글

[React] React for ECommerce Site with Redux 1  (0) 2020.01.30
[Web/React] React info ...  (0) 2020.01.29
[React] npm packages and Database info in blog site  (0) 2019.12.19
[React] React 정리  (0) 2018.02.19
Posted by woojja

댓글을 달아 주세요

2018. 2. 19. 11:20

VisualStudio Code 를 이용하여 React 로 조그만 예제를 만들면서 정리한 내용...


개인적인 정리 내용입니다. 

 


React 를 생성하려면 WebPack이 필요하고 별도의 설정이 필요하지만 대신 

facebook 에서 만든 Create-React-App 을 사용하면 

별도의 WebPack 설치와 설정없이도 React 를 개발 할 수 있다.


npm install -g create-react-app



create-react-app movie-app 은 Terminal 에서 실행하는 것이 좋다.

VS Code 에서 실행 시 Error 가 발생한다.



cd movie-app



vscode terminal 에서 


npm start


port 를 바꾸고 싶을 때는 

"PORT=4000 npm start" 

를 입력한다.


propTypes


propTypes 변수에 담아야 한다.


    static propTypes = {

        title:PropTypes.string.isRequired,

        image:PropTypes.string.isRequired

    }



React Life Cycle


Render : componentWillMount() => render() => componentDidMount()


Update : componentWillReceiveProps() => shouldComponentUpdate() = true => componentWillUpdate() => render() => componentDidUpdate()


State 는 state 배열에 담아야 한다.

state 를 변경할 때는 

      this.setState({greeting : 'woojja'}) 와 같이  setState 를 사용하여 값을 변경


state  를 변경하면 render 가 다시 실행된다.


        movies : [

            {

              id:16,

              title:'transformer',

              poster:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsdR9axnghll6mVM3Yae1r7Il0A8yGc_JJynAiH_fCXwSANcRj'

            }, 

            ...this.state.movies // '...' : 기존의 Data 를 유지한다는 의미 

        ]


smart component, dumb component



class component (smart component) : state 를 가짐.

class Movie extends Component{


    render() {

        return(

            ...

        );

    }

}


functional component (dumb component) : state 를 가지지 않는다. Life cycle, render function 도 없고 Props 만 가지며 

단순 Return 만 존재한다.


function MoviePoster({image, title}){

    return(<img src={image} alt={title + ' Poster'} />);

}


functional component 의 Validation Check


MoviePoster.PropTypes = {

    poster : PropTypes.string.isRequired

}


Promise : 새로운 Concept (Asynchronous programming)



=> arrow function 에는 return 의미가 포함되어 있음.



www.npmjs.com/package/react-lines-ellipsis


npm install --save react-lines-ellipsis


import LinesEllipsis from "react-lines-ellipsis"




npm run build


  39.99 KB  build/static/js/main.47ccf7c1.js

  706 B     build/static/css/main.a3112408.css


압축해서 build folder 에 넣음.


Package.json 에 아래 구문을 추가

  "homepage" : "https://github.com/iPeterPan/react_movie_app",


변경했으니 다시한번 

npm run build


Install gh-pages and add deploy to scripts in package.json


npm install --save gh-pages


Package.json 에 아래 구문을 추가

"predeploy": "npm run build",

"deploy": "gh-pages -d build"


특정 branch 를 deploy 하려면

"deploy": "gh-pages -b master -d build",


The predeploy script will run automatically before deploy is run.

If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:


First, change your repository's source branch to be any branch other than master.

Additionally, tweak your package.json scripts to push deployments to master:



Deploy the site by running npm run deploy


npm run deploy


Ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:





  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject",

    "predeploy": "npm run build",

    "deploy": "gh-pages -b master -d build -repo https://github.com/iPeterPan/react_movie_app.git"

  }



행복한 고수되셔요...  ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\




'Web > React' 카테고리의 다른 글

[React] React for ECommerce Site with Redux 1  (0) 2020.01.30
[Web/React] React info ...  (0) 2020.01.29
[React] npm packages and Database info in blog site  (0) 2019.12.19
[React] React 정리  (0) 2018.02.19
Posted by woojja

댓글을 달아 주세요

이전버튼 1 이전버튼