도커의 network

도커 1.9.0 버전부터 네트워크를 생성할 수 있는 기능이 정식으로 추가되었습니다. 이때 네트워크를 생성하고
컨터이너를 연결시키면 해당 네트워크 안에 속한 컨테이너끼리 접속할 수 있습니다.
link 옵션은 사라질 예정

sudo docker network create vkein-network

sudo docker run --name db -d --network vkein-network nginx

context/index.js

import React, { Component, createContext} from 'react'

const context = createContext()

const { Provider , Consumer: SimpleConsumer } = context

class TodoProvider extends Component {

    state = {
        idx: 0,
        todos : [
            { idx: 0 , text:'test', checked : false }
        ]
    }

    actions = {
        insert_todo : (value) => {

            let new_idx = this.state.idx
            new_idx++

            this.setState({
                idx: new_idx,
                todos: [
                    ...this.state.todos,
                    {
                        idx: new_idx,
                        text: value,
                        checked: false
                    }
                ]
            })

        },
        delete_todo: (idx) => {
            this.setState( {
              ...this.state,
              todos: this.state.todos.filter((data) => data.idx !== idx)
          })
        },
        toggle_todo: (idx) => {
            this.setState( {
                ...this.state,
                todos: this.state.todos.map( (data) => {
                    if(data.idx === idx){
                        data.checked = !data.checked
                    }
                    return data
                })
            })
        }
    }


    render() {

        const { state, actions } = this
        const value = {state , actions }
        return (
            <Provider value={value}>
                {this.props.children}
            </Provider>
        )
    }
}

export {
    TodoProvider, SimpleConsumer
}

App.js

import React from 'react';
import { TodoProvider } from './context/index'
import TodoList from './components/TodoList'
import TodoInsert from './components/TodoInsert'
import './App.css';

function App() {
  return (
      <TodoProvider>
        <div className="App">
          <TodoList/>
          <TodoInsert/>
        </div>
      </TodoProvider>
  );
}

export default App;

components/TodoInsert.js

import React, { Fragment, Component } from 'react'
import { SimpleConsumer } from '../context/index'
import styled from 'styled-components'

class Todo extends Component {

    state = {
        input : ''
    }

    handleChange = (e) => {
        this.setState({
            input: e.target.value
        })
    }

    handleSave = (e) => {
        this.props.setValue(this.state.input)
        this.setState({input : ''})
    }

    handleUp = (e) => {
        if(e.keyCode === 13){
            this.handleSave()
        }
    }


    render() {
        return (
            <Fragment>
                <Input type="text" value={this.state.input} 
                onChange={this.handleChange} 
                onKeyDown={this.handleUp}>
                </Input>
                <button onClick={this.handleSave}>저장</button>
            </Fragment>
        )
    }
}

const Input = styled.input`
    margin-left: 20px;
    width: 250px;
    margin-right: 5px;
`


const SendsContainer = () => (
    <SimpleConsumer>
        {
            ({actions})=> (
                <Todo setValue={actions.insert_todo}/>
            )
        }
    </SimpleConsumer>
)

export default SendsContainer

components/TodoList.js

import React from 'react'
import { SimpleConsumer } from '../context/index'
import styled from 'styled-components'

const list = () => {
    return (
        <ul>
            <SimpleConsumer>
                {
                    ({state, actions}) => {
                        return state.todos.map(t =>
                            <Li key={t.idx}>
                                <Span done={t.checked ? true : false} onClick={ (e) =>
                                    actions.toggle_todo(t.idx)
                                }>{t.text}</Span>
                                <Button onClick={ (e) =>
                                    actions.delete_todo(t.idx)
                                }>삭제</Button>
                            </Li>
                        )
                    }

                }
            </SimpleConsumer>
        </ul>
    )
}

const Li = styled.li`
    width: 280px;
    position: relative;
    margin: 3px;
`

const Span = styled.span`
   text-decoration : ${props => props.done ? "line-through" : "none"};
   cursor: pointer;
`

const Button = styled.button`
    position: absolute;
    right:0;
`

export default list

modules/post.js

import { createAction, handleActions } from 'redux-actions'  
import axios from 'axios'  
import { applyPenders } from 'redux-pender'

function getPostAPI(postId) {  
return axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`) }

const GET\_POST = 'GET\_POST'  
const INCREMENT = 'INCREMENT'  
const DECREMENT = 'DECREMENT'

export const getPost = createAction(GET\_POST, getPostAPI);  
export const increment = createAction(INCREMENT)  
export const decrement = createAction(DECREMENT)

const initialState = {  
    idx : 0,  
    data: {  
        title: '',  
        body: ''  
    }  
}

const reducer = handleActions({  
    [INCREMENT] : (state, action) => ({  
            ...state,  
            idx: state.idx++  
    }),  
    [DECREMENT] : (state, action) => ({  
            ...state,  
            idx: state.idx--  
    })  
}, initialState)

export default applyPenders(  
    reducer, [  
    {  
        type: GET_POST,  
        onSuccess: (state, action) => {  
        // 성공했을 때 해야 할 작업이 따로 없으면 이 함수 또한 생략해도 됩니다.  
        const { title, body } = action.payload.data;  
        return {  
            ...state,  
            data: {  
                    title,  
                    body  
                }  
            }  
        }  
    }]  
)

modules/index.js

import { combineReducers } from "redux";  
import post from './post';  
import { penderReducer } from 'redux-pender'

export default combineReducers({  
post,  
pender: penderReducer  
})

store.js

import { createStore, applyMiddleware } from "redux";  
import modules from './modules'  
import penderMiddleware from 'redux-pender'

const store = createStore(modules, applyMiddleware(penderMiddleware()))

export default store

index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import './index.css';  
import App from './App';  
import \* as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux'  
import store from './store'

ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change  
// unregister() to register() below. Note this comes with some pitfalls.  
// Learn more about service workers: [https://bit.ly/CRA-PWA](https://bit.ly/CRA-PWA)  
serviceWorker.unregister();

App.js

import React, { Component } from 'react';  
import { bindActionCreators } from 'redux';  
import { connect } from 'react-redux'  
import './App.css';  
import \* as postActions from './modules/post'

class App extends Component{  
    render(){

        const { PostActions, post }  = this.props
        console.log(post)

        return (
            <div className="App">
              <h1>1</h1>
              <button>+</button>
              <button>-</button>
              <hr/>
              <div></div>
              <div></div>
            </div>
        );
    }  
}

export default connect(  
    (state) => ({  post: state.post  }),  
    (dispatch) => ({  PostActions : bindActionCreators(postActions, dispatch)  })  
)(App);

code server

VSCode 온라인

wget https://github.com/cdr/code-server/releases/download/1.1156-vsc1.33.1/code-server1.1156-vsc1.33.1-linux-x64.tar.gz
tar xvfz code-server1.1156-vsc1.33.1-linux-x64.tar.gz
sudo mv code-server1.1156-vsc1.33.1-linux-x64/code-server /usr/local/bin
mkdir ~/project
cd ~/project
PASSWORD=1q2w3e4r nohup code-server -p 8080 --allow-http &

http://xxxx:8080 접속합니다. 비밀번호는 1q2w3e4r 입니다.

출처 : https://github.com/subicura/workshop-init

https://velog.io/@taewo/리액트-Styled-Components-76jsolbaf8

div 태그 안에 요소를 화면 정중앙에 배치시키는 방법

display: flex;
height: 100%; 
justify-content: center; 
align-items: center;