velog

# PWA 적용하기

## 1. 노드 모듈 인스톨

pwa에 관련한 웹팩 모듈을 인스톨 해준다.

```bash
yarn add -D webpack-pwa-manifest workbox-webpack-plugin
```

## 2. manifest.json 파일 생성

`public/manifest.json`

```json
{
    "name": "react-webpack",
    "short_name": "react",
    "description": "react todo list app with pwa",
    "background_color": "#ffffff",
    "crossorigin": "use-credentials",
    "theme_color": "#eeeeee",
    "filename": "manifest.json"
}
```

## 3. webpack 설정 추가

`webpack.config.js`

```js
...
const WebpackPwaManifest = require('webpack-pwa-manifest')
const { GenerateSW } = require('workbox-webpack-plugin')
const manifest = require('./public/manifest.json')

...

const pwaPlugin = new WebpackPwaManifest(manifest)

const workboxPlugin = new InjectManifest({
    swSrc: './src/sw.js',
    swDest: 'sw.js',
})
...

{
    ...
    plugins: [htmlPlugin, cssPlugin, pwaPlugin, workboxPlugin],
}
```

`src/sw.js`

```js
workbox.core.skipWaiting()
workbox.core.clientsClaim()

workbox.routing.registerRoute(
    new RegExp('https://jsonplaceholder.typicode.com'),
    new workbox.strategies.StaleWhileRevalidate()
)

self.addEventListener('push', event => {
    const title = 'Get Started With Workbox'
    const options = {
        body: event.data.text(),
    }
    event.waitUntil(
        self.ServiceWorkerRegistration.showNotification(title, options)
    )
})

workbox.precaching.precacheAndRoute(self.__precacheManifest)
```

manifest 와 service worker 설정까지 추가하였다.

## 4. serviceWorker 작동 시키기.

`src/index.js`

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Root from './components/Root'
import './styles/index.scss'

ReactDOM.render(<Root />, document.getElementById('root'))

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
            .register('/sw.js')
            .then(registration => {
                console.log('SW registered', registration)
                registration.pushManager.subscribe({ userVisibleOnly: true })
                Notification.requestPermission().then(p => {
                    console.log(p)
                })
            })
            .catch(e => {
                console.log('SW registration failed: ', e)
            })
    })
}
```

개발자 도구를 켜고 Application 탭을 클릭한 후, Sercice Workers 탭을 클릭 하면 서비스 워커가 잘 붙은것을 볼수 있다.
또한 offline 으로 설정 한뒤 새로고침을 해도 새로고침 후 오프라인에서도 앱이 동작하는 것을 볼수 있다.
runTimeCaching 옵션에서 jsonplaceholder URL을 등록하였기 때문이다.

마지막으로 푸쉬 노티피케이션까지도 구현되었다. 테스트는 Application 탭의 Service Workers 아래에 push 버튼을 눌러보면 할수있다.



react + pwa + webpack PWA 적용하기

# 나의 이직기

안녕하세요?
오늘 제가 쓸 글은 이직을 하면서 느꼈던 점과,
저의 첫 이직을 하면서 있었던 이야기들에 대한 내용입니다.

1. 왜 이직을 하게 되었는가?

이유는 간단합니다. 회사에서 할 일이 없었습니다..
물론, 면접관들이 물어봤을때엔 이런식으로 답하진 않았습니다. :)

> 이직을 하게 된 주된 이유는, 개발 환경에 대한 아쉬움이 컸기 때문입니다. 개발 문화가 자리 잡지 않아, 주니어 개발자인 저에게는 회사에서 일을 하며 성장 할 수 있을까? 라는 의문이 들기 시작했고, 좀더 나은 개발 문화를 가진 조직을 찾아 나서게 되었습니다.

라고 답변 한 것 같네요. 

2. 이력서 / 서류 준비

저는 일단 원티드를 통해서, 이력서 및 서류 접수를 했습니다.
(원티드... 수습기간 끝나면, 50만원 챙길... 읍읍)

물론, 금전적 이유도 있고 하지만 원티드는 제가 평소에도 즐겨 보는 앱입니다. 이유는, 개발 모집 관련 글을 보면서 "아 요즘에 프런트엔드 쪽은 이런 기술을 원하는 구나" 혹은, "아 요즘 회사들은 이런 기술을 프런트엔드 쪽에서 주로 쓰는구나" 하는 최신 동향들을 바로 알 수 있기 때문이었지요.

또한, 프런트엔드 개발 직군이 아닌 백엔드나 머신러닝, 혹은 Ops쪽의 모집요강도 살펴보며 "요즘 회사들은 이런식으로 개발팀을 꾸려 나가는 구나" 라는 생각도 할 수 있습니다.

주니어 개발자인 저로 써는 제가 학생때 부터 해왔던 작업물을 포함하여, 최대한 제가 개발했던 내용들을 자세히 쓰려고 노력했습니다.

처음에 이력서를 돌릴때에는, 너무 대충 썼다는 느낌을 제가 강하게 받았습니다. 이유는 제 사이드 프로젝트에 대한 내역을 깊게 안썼고, 회사 이력도 간단하게만 써서 그런 것 같습니다.

처음 이력서를 돌린 회사들에는 당연히 저의 개발이력에 대해 알기가 힘들었고, (주니어 개발자이고, 첫 직장이었으므로 직장에 대한 이력만 가지고는 파악하기 힘들수도 있다는 생각이었습니다.) 따라서 서류 불통과 소식이 들려왔습니다.

이것을 계기로 마음먹었습니다. "아 좀더 자세하게 나의 개발을 알려야 하는구나!" 라는 생각이 들면서, 영혼을 끌어모아 제가 했던 사이드 프로젝트들을 적어나가기 시작했습니다.

그러다보니 두번째 개정판 이력서가 완성 되더군요.

이 이력서로 5~7군데 정도 돌린 것 같습니다. 거기서 면접을 보러간 회사는 총 3군데 였습니다.

> 이력서는 지원하는 회사가 최대한 자신을 많이 알 수 있도록, 혹은 나에대해 궁금증을 가질 수 있도록 써라! 라는 것을 느꼈던것 같네요 :) 회사가 나에대해 궁금해야 면접도 보고 싶기 마련이겠죠?

3.  코딩 테스트 혹은 과제와 면접

드디어,,, 불통소식만 듣던 제가 서류 통과가 된 기업들이 몇개 생기기 시작했습니다.

일단 서류 불통만 되던 저에게는 굉장히 기쁜 일이었습니다.

요즘 개발 직군을 뽑는 회사들은 대부분 사전 과제 혹은 코딩테스트를 면접 전에 치르게 하더군요.

제가 1년 전, 학생 때 구직을 했을 때에는 이런 기업들이 거의 없었는데 말이죠. (스타트업 위주, 이미 그때도 대기업은 코딩테스트가 빡시기로 유명했죠..)

뭔가 좋은 변화 인 것 같습니다. 코딩으로 나를 좀더 보여줄수 있는 계기라고 생각이 들었 던 것 같네요 :)

사전 과제를 제시한 기업들도 있었고, 코딩테스트를 먼저 본 기업도 있었습니다.

사전 과제의 경우 대부분 미니 프로젝트 형식으로 주어졌으며, typescript 와 redux / mobx 같은 전역 상태 관리 툴을 사용하여 미니 프로젝트를 완성시키는 과제였습니다.

코딩 테스트의 경우, 요즘 온라인 코딩 테스트가 발달 되어 있어서 링크를 보내주고 3~4시간 정도 걸리는 코딩 테스트를 먼저 치루게 하더군요.

저는 코딩테스트를 직장에서 했습니다.. 크크
짜릿한 경험 이었고, 코딩테스트 치루면서 재밌었던 기억이 있네요.
뭔가 다시 기초에 대해 공부한다는 느낌도 많이 들었고, 재밌는 수학 문제를 푸는 기분 이었습니다. 

> 사전과제와 코딩테스트를 하면서 저의 실력에 대해 많이 돌아본것 같습니다. 좀더 나은 방법론이 무엇일까? 혹은 어떻게 하면 이 문제를 좀더 효율적으로 풀수 있을까? 라는 질문을 저에게 던지면서, 한단계 성장할 수 있었던 기회였습니다.

자, 이제! 코테 혹은 사전과제를 통과했습니다.
고대하던 면접의 시간이 다가오면서 면접을 준비 하게 되었습니다..

제가 가장 유용하게 본 프런트엔드 면접 기술 질문 모음이 있는데, 소개하고자 합니다.

https://github.com/yangshun/front-end-interview-handbook

https://github.com/JaeYeopHan/Interview_Question_for_Beginner


이 두 레포지토리 인데요, 정말 이 레포지토리에 적힌 질문들이 많이 나왔습니다!

> 면접을 준비하면서 이론에 대해서 많이 공부하게 된거 같아요. 확실히 좋은 개발자는 실무와 동시에 이론 지식이 많이 있어야 하는 것 같습니다. 이론이 받쳐진 개발자는 좀더 깊이있고, 최적화된 코드를 만들수 있는것 같아요.

제가 이번 이론 공부를 하면서 제일 큰 수확은 Event Loop에 대해서 많이 알게 되었다는 것인데요. 

항상 Event Loop라는 것을 알고는 있었지만, 명확하게 알지는 못했는데, 이번 기회로 개념이 확립 된 것 같아서 기분이 좋습니다.

말이 나온김에, Event Loop에 대한 궁금증을 많이 풀어준 유튜브영상을 소개 드리려고 합니다.

https://www.youtube.com/watch?v=8aGhZQkoFbQ

한글 자막도 있으니, 이벤트 루프에 대해서 공부해보고 싶으신 분들은 정말 한번 꼭 보시길 추천드립니다. 좋은 영상입니다.

자 이제, 공부를 했으니 면접을 보러 가야겠죠?

저의 경우는 3전 2패 1승 입니다.

뭔가 나름대로 준비도 많이 해갔고, 같은 지식으로 같은 포지션의 직군의 면접을 보았는데, 왜 어떤곳은 떨어지고 어떤곳은 합격 한 것일까요?

제 결론은 이렇습니다.

> 회사의 특성에 따라, 혹은 회사가 처한 상황에 따라 뽑으려고 하는 개발자들이 다릅니다. 따라서 같은 레벨의 개발자라도 면접을 보면서 느끼는 성향이나 지원자의 개발 철학에 따라서 면접은 당락이 좌우된다고 봅니다.

따라서, 떨어지더라도 최선을 다했으면 너무 자신을 탓하지 않아도 될거 같아요! 단지 그 회사와 나는 지금 맞지 않았던 것이라고 생각하는 편이 좀더 긍정적인 생각을 하게 되는 것 같습니다. 또한 그게 사실인것 같기도 하구요. :)

4. 면접 그리고 컬쳐 면접

대부분 1차면접은 실무면접으로 이루어지고, 그 다음 면접은 컬쳐면접으로 이루어 집니다.

컬쳐면접은 지원하려는 회사가 갖고 있는 문화나 특성에 대해서 지원자와 fit를 맞추어 보는 시간이라고 할수 있습니다.

따라서 컬쳐면접을 통해 회사는 지원자의 철학이나 성향을 파악 할 수 있고, 지원자는 회사의 문화나 일을 하는 방식 혹은 비젼에 대해서도 알아 볼 수 있는 중요한 시간입니다.

저는 이직 사유가 개발 문화에 대한 아쉬움이었기 때문에, 개발 문화나 일을 하는 방식에 대해서 물어 보았던 것 같아요.

> 컬쳐 면접에서는 되도록 솔직하게 말하는 것이 좋은 것 같습니다. 속이거나 억지로 맞춘어 그 회사에 실제로 들어갔을 때에는 정말 문화적인 fit가 맞지 않으면 힘들 수 있거든요. 면접관 분과 최대한 솔직하고 진솔한 이야기를 나누는 것이 좋은 컬쳐면접의 예라고 할 수 있을것 같습니다 :)

5. 처우 협상

사실 이 처우 협상 과정에서 조금 삐걱댄 적이 있었습니다.
지금 회사에서의 이해관계 때문이었는데요.

선배들은 "최대한 마무리를 다 짓고, 회사에다 이직을 한다고 얘기를 할 때에는 최대한 나중에 해라. 너를 먼저 생각하고, 회사는 일단 제쳐두어라." 라는 얘기를 많이 해주었습니다.

근데, 제가 처한 상황은 좀 달랐습니다. 2명이서 일하는 부서에서 1명이 나간다고 먼저 말을 했기 때문이지요.

남은 1명인 저는, 회사에 먼저 말을 해주는 것이 회사에 좋지 않을까? 라는 생각이 들었고, 마무리를 제대로 짓지 않은 상황에서 회사와 이직 관련 이야기를 나누게 되었습니다.

참 총체적 난국이 벌어졌습니다.
회사는 저를 잡으려 했고, 저는 그 상황에서 갈피를 잠시 잡지 못했습니다. 여러가지 이유에 머리가 복잡 해 졌고, 살짝 위험한 상황까지 왔으나.. 개발자의 마인드로 어디부터 잘못 된 것인가? 무엇이 궁극적인 목적인가? 라는 질문들을 다시 던지며 마지막은 이해관계를 잘 정리했던것 같습니다 :)

> 이미 이직하기로 마음먹었다면, 현 회사는 신경쓰지 마세요 :) 어차피 떠날 회사이고, 최대한 모든 결정을 마무리 지은 후에 말을 하는것이 좋다는 것을 뼈저리게 느꼈습니다.

또한, 처우 협상에서 가장 중요한것은 처우 겠지요.
처우란 결국 연봉을 말합니다.

이 부분에서도 지인들에게도 많이 도움을 청하고, 저 혼자서도 고민을 많이 해보았는데 내린 결론은 다음과 같습니다.

> 연봉을 너무 올려서 이직을 하게되면, 그만큼 퍼포먼스를 내지 않으면 옮긴 회사에서 연봉을 올리기 힘들다. 또한, 다음 직장으로 이직 하기에도 그 올린 연봉을 맞춰주는 회사는 많지 않다. 따라서 이직할때에 돈보다는 내가 진짜로 이직하려는 이유가 무엇인가? 를 먼저 생각해야 한다. 

저는 이러한 고민을 바탕으로 제가 진짜 이직 하려는 이유는,

"개발을 행복하게, 또한 재미있게 하기 위함" 이구나 라는것을 뼈저리게 느꼈습니다.

"나는 개발을 하며 집중할때 행복을 느끼는 사람" 이구나 라는 것을 느낀 뒤로, 돈에 대한 욕심은 많이 줄었던 것 같습니다.

6. 마무리~

지인분이 이런말을 했습니다.

> 이직을 하려 할때 받는 스트레스는, 이혼을 하려 할때 받는 스트레스와 그 스트레스의 크기가 비슷하다.

정말 맞는 말입니다. 
현재 다니고 있는 회사도 내가 다니고 싶기에 들어왔고, 그 현 직장을 떠난 다는 것은 무엇인가를 포기하고 다른 하나를 쟁취하기 위함이죠.

그러기에, 정들었던 첫 회사를 떠나는 것이 쉽지만은 않았던 것 같습니다.

허나, 내가 궁극적으로 바라는 것이 무엇인가? 나는 무엇을 위해 이직을 하려 하는가? 를 잘 생각해보고, 그것이 불순한 마음이 아니라면 충분히 도전해볼만 하다고 생각합니다 :)

모든 이직러분들에게 건승을 기원하며, 이 글을 마칩니다!

읽어주셔서 감사합니다 🤘🏻





나의 이직기

# 투두 리스트 만들기

## 1. src/components/Root.js 생성

`src/components/Root.js`

```jsx
import React from 'react'

const Root = () => {
    return <div>Hello world!</div>
}

export default Root
```

`src/index.js`

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Root from './components/Root'

ReactDOM.render(<Root />, document.getElementById('root'))
```

## 2. 스타일 관련 폴더 생성 및 sass-loader 추가

```bash
yarn add -D node-sass sass-loader
```

`webpack.config.js`
원래 스타이 설정 부분(test: css)로 되었던 부분을
아래와 같이 변경.

```js
{
    test: /\.(css|scss)$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: isDevelopMode
                        ? '[path][name]__[local]--[hash:base64:5]'
                        : '[name]__[local]--[hash:base64:5]',
                },
                importLoaders: 1,
                sourceMap: true,
            },
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true,
            },
        },
    ],
},
```

`src/styles/index.scss`

```scss
body {
    color: blue;
}
```

`src/index.js`

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Root from './components/Root'
import './styles/index.scss'

ReactDOM.render(<Root />, document.getElementById('root'))
```

이제 다시 개발서버를 키면, 글자 색상이 blue로 바뀐것을 볼수있다.

`index.scss`

```scss
body {
    margin: 0;

    height: calc(100vh);

    display: flex;
    justify-content: center;
    align-items: center;
}
```

## 3. TodoWrapper 생성

`src/components/TodoWrapper/index.js`

```jsx
import React from 'react'
import s from './style.scss'

const TodoWrapper = () => {
    return <div className={s.wrapper}>TodoWrapper</div>
}

export default TodoWrapper
```

`src/components/TodoWrapper/style.scss`

```scss
.wrapper {
    border: 3px solid #ababab;

    padding: 30px;
    width: 500px;
    height: auto;
}
```

`src/components/Root.js`

```jsx
import React from 'react'
import TodoWrapper from './TodoWrapper'

const Root = () => {
    return <TodoWrapper />
}

export default Root
```

## 4. TodoTitle & TodoList 컴포넌트 생성

`src/components/TodoTitle/index.js`

```jsx
import React from 'react'
import s from './style.scss'

const TodoTitle = () => {
    return <div className={s.wrapper}>React Todo List</div>
}

export default TodoTitle
```

`src/components/TodoTitle/style.scss`

```scss
.wrapper {
    font-size: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eeeeee;
}
```

`src/components/TodoList/index.js`

```jsx
import React from 'react'
import s from './style.scss'

const TodoList = ({ todoList }) => {
    const todoItem = todoList.map(({ id, todo }) => {
        return (
            <div key={id} className={s.todoItem}>
                {todo}
            </div>
        )
    })
    return <div className={s.wrapper}>{todoItem}</div>
}

export default TodoList
```

`src/components/TodoList/style.scss`

```scss
.wrapper {
    color: blue;
}
```

api 를 가져오기 위한 axios 모듈 설치

```bash
yarn add axios
```

`src/components/TodoWrapper/index.js`

```jsx
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import s from './style.scss'
import TodoTitle from '../TodoTitle'
import TodoList from '../TodoList'

const TodoWrapper = () => {
    const [todoList, setTodoList] = useState([])

    const getTodoList = async () => {
        try {
            const { data: todoList } = await axios.get(
                'https://jsonplaceholder.typicode.com/todos'
            )
            setTodoList(todoList.splice(0, 10))
        } catch (e) {
            console.log(e)
        }
    }

    useEffect(() => {
        getTodoList()
    }, [])

    return (
        <div className={s.wrapper}>
            <TodoTitle />
            <TodoList todoList={todoList} />
        </div>
    )
}

export default TodoWrapper
```



react + pwa + webpack 투두 리스트 만들기

# 리액트 프로젝트를 웹팩으로 설정하기.

## 1. 프로젝트 생성 및 깃 저장소 master 푸시.

```bash
mkdir react-webpack
yarn init -y
git init
```

`.gitignore`

```
build/
node_modules/
.DS_Store
yarn.lock
```

```bash
git remote add origin https://github.com/yungblud/react-webpack
git add .
git commit -m "init"
git push origin master
```

## 2. 프로젝트 구조 설정 및 기초가 되는 node module 인스톨

1. src 폴더 생성.
2. public 폴더 생성.
3. es6 문법을 사용하기 위한 노드 모듈 설치.

```bash
yarn add -D @babel/core @babel/preset-env @babel/preset-react
```

## 3. 웹팩 관련 모듈 설치

```bash
yarn add -D webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
```

## 4. webpack.config.js 설정

webpack.config.js 파일 생성

`webpack.config.js`

```js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: './index.html',
})

const config = mode => {
    const isDevelopMode = mode === 'development'
    return {
        entry: './src/index.js',
        output: {
            path: path.join(__dirname, '/build'),
            filename: 'index.bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
                {
                    test: /\.(css)$/,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                modules: {
                                    localIdentName: isDevelopMode
                                        ? '[path][name]__[local]--[hash:base64:5]'
                                        : '[name]__[local]--[hash:base64:5]',
                                },
                                importLoaders: 1,
                                sourceMap: true,
                            },
                        },
                    ],
                },
            ],
        },
        plugins: [htmlPlugin],
    }
}

module.exports = (env, argv) => {
    const { mode } = argv
    return config(mode)
}
```

기본적인 리액트를 웹팩으로 띄울수 있는 설정만 하였다.

## 5. public 폴더에 index.html 생성

`index.html`

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React PWA Webpack</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>
```

id 를 root로 하는 태그생성.

## 6. .babelrc 파일 설정

.babelrc 파일 생성

`.babelrc`

```json
{
    "presets": ["@babel/env", "@babel/react"]
}
```

## 7. react 관련 모듈 인스톨

```bash
yarn add react react-dom
```

## 8. src/index.js 생성

`src/index.js`

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

const Root = () => <div>Hello World!</div>

ReactDOM.render(<Root />, document.getElementById('root'))
```

## 9. package.json scripts 명령어 추가.

`package.json`

```json
"scripts": {
    "build:prod": "webpack --mode=production",
    "build:dev": "webpack --mode=development"
},
```

이제 yarn build:prod 혹은 yarn build:dev 를 하면 build 폴더가 생성되면서, 번들링이 잘 된것을 볼수있다.

## 10. hot reload 를 사용 할수 있는 개발용 서버 띄우기.

`package.json`

```json
"scripts": {
    "start:dev": "webpack-dev-server --mode=development --open --hot",
    ...
}
```

start:dev 를 추가.
yarn start:dev 를 해보면 개발용 서버가 8080포트에 띄워진다.



react + pwa + webpack 리액트 프로젝트를 웹팩으로 설정하기.



[![Video Label](http://img.youtube.com/vi/8aGhZQkoFbQ/0.jpg)](https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=emb_title)

# EventLoop 를 알아보기 전에, JS 는 어떻게 이루어져 있는가?

1. Call Stack: 프레임들의 스택.

2. Task queue: 처리할 메시지의 대기열. (비동기로 호출되는 함수들(콜백 함수)이 이곳에 쌓인다.)

3. Heap Memory: 구조화 되지 않은 메모리 공간.

즉, 모든 콜 스택들이 빠지고 나서야, Task Queue 에 쌓여있던 것들이 이벤트 루프에 의해서 콜스택이 비어있기를 기다리다가 다시 콜스택으로 들어가서 실행.

따라서 이벤트에 걸려있는 핸들러는 절대 먼저 실행 될 수 없다.

# JS에서의 비동기 동작.

JS: 싱글 쓰레드로 동작한다.

그 말은 즉슨 한 함수가 끝나기 전까지 다른 함수가 진행중인 함수를 막을 수 없다는 것.


그렇담, 비동기적으로 작동하는 것은 어떻게 구현할까?

js는 이렇게 비동기를 구현한다.

```js
while(queue.waitForMessage()){
  queue.processNextMessage();
}
```

queue에 메시지가 들어오기를 계속 기다린다.
그리고, queue.waitForMessage() -> true가 되는 순간(queue에 메시지가 들어왔다 는 뜻.) 바로 들어온 메시지를 실행한다.
하지만 싱글 쓰레드의 성질이 있는만큼, 기존 먼저 들어온 메시지가 있다면, 그 메시지가 끝나고 난 뒤 그 후에 들어온 메시지를 실행한다.

다음과 같은 자바스크립트 코드가 있다고 가정하자.
```js
console.log('Hi!'); // 동기

setTimeout(() => {
    console.log('Yay!');
}, 4000); // 비동기

console.log('Bye!'); // 동기

```

Hi! 와 Bye!를 찍는 콘솔 로그 함수들은 모두 동기적으로 작동한다.

따라서 코드가 위에서 아래로 실행될때에, `console.log('Hi!');`는 제일 먼저 콜 스택에 쌓인다.
실행 되면 pop 되어 콜스택에서 사라진다.

그리고 콘솔 창에 Hi! 를 찍게 된다.

다음 코드인 setTimeout 함수가 콜스택으로 들어간다.
`setTimout(cb, 4000);`
콜스택에서 setTimeout 함수가 나온다.

그렇지만 아무것도 동작 하지 않고 다음 코드인 Bye!를 찍는 콘솔로그 함수가 다시 콜스택에 들어간다.
Pop 된다. Bye!가 찍힌다.

그리고 4초뒤에 Yay!가 찍힌다.

왜그럴까?

생각 같아서는 Hi! -> 4초간 기다림 -> Yay! -> Bye! 가 찍혀야 할 것 같은데 말이다.

여기서 Event Loop 가 나온다.

이벤트 루프의 역할은 콜스택을 주시 하는 것이다.

즉, 이벤트 루프에 쌓인 이벤트들은 콜스택을 계속 모니터링하면서 눈치를 보다가,
콜스택이 비었을시 이벤트 루프에 있는 이벤트들을 콜스택에 잽싸게 넣는다.

그제서야 이벤트 루프에서 아무것도 안하고 빙빙 루핑하던 이벤트가 실행된다.

위 코드로 다시 돌아가보면, 동기 함수인 콘솔로그들이 모두 콜스택에서 빠져나가고 나서야(모두 실행되고 나서야),
setTimeout의 콜백인 `console.log('Yay!');` 가 이벤트 루프에 담겨있다가, 4000ms 의 대기시간을 가진 뒤 실행 되는 것이다.


그렇다면, setTimeout 의 딜레이 시간을 0으로 두면 어떨까?

```js
console.log('Hi!'); // 동기

setTimeout(() => {
    console.log('Yay!');
}, 0); // 비동기

console.log('Bye!'); // 동기

```

마찬기지다. 결과는 똑같다. Hi! -> Bye! -> Yay!가 된다.

이유는 위에서 설명한 것과 같다.

0초를 딜레이 한다는것이 동기적으로 작동하게 만든다는 의미는 절대 아닌것이다.

# web API

단순 자바스크립트 함수가 아닌 web API를 타는 함수들은 비동기라고 볼수있다.
위의 setTimeout 함수도 webAPI를 타는 함수이기 때문에, 제일 마지막에 실행 되었던 것이다.

Ajax 도 마찬가지이다.

```js
console.log('Hi! again.');

fetch(.......).then(() => {
    console.log('Fetched!');
});

console.log('Bye! again.');
```

위 코드는 Ajax 통신의 예제이다.

자 마찬가지로, 먼저 Hi! again을 찍는 콘솔 로그함수가 콜스택에 쌓이고, 빠져나오고 실행된다.
그다음 fetch 함수가 콜스택으로 들어가는데, webAPI인 fetch를 실행함으로,fetch 함수는 XHR통신이 모두 완료될때까지 계속 일한다.
하지만 콜스택에서는 fetch 함수가 이미 빠져나간다.
따라서 Bye!again을 찍는 함수가 콜스택으로 들어갔다 나옴으로써 실행되며 Bye!again. 이 먼저 찍히고,
XHR 통신이 마무리 되었다면, fetch의 콜백인 `console.log('Fetched!');` 가 task queue로 들어가게 되고 이벤트루프는 비어있는 콜스택을 발견하고 콜백함수를
콜스택으로 넣는다.

이제서야 `console.log('Fetched!');`가 실행 되는 것이다.

좀더 심화된 예제를 보자.

```js
console.log('Oops!');

button.addEventListener('click', () => {
    console.log('hehe did you click me?');
});

setTimeout((() => {
    console.log('I waited 3000ms!');
}), 3000);

console.log('Yay!');
```

자 위 코드는 어떻게 실행될것인지 예상이 가십니까??

결과는 아래와 같습니다.

```bash
Oops!
Yay!
I waited 3000ms!
```

`hehe did you click me?` 는 버튼을 클릭할때 실행됩니다.

따라서 무조건 Oops! 와 Yay! 보다는 늦게 실행 될수밖에 없습니다.

web api이기 때문이죠, 마찬가지로 이벤트 루프의 주시하에 Task Queue에 상주하고 있다가, 동기함수들이 실행되고 나서야 콜스택으로 가서 실행됩니다.

만약 3초 안에 잽싸게 버튼을 누른다면, I waited 3000ms! 보다 먼저 찍히겠죠.

근데 저 3000ms , 즉 3초가 정확한 3초를 의미할까요?

정답은 `아니다.` 입니다.

왜냐면 함수를 모두 처리하기 까지의 최소 지연 시간이 3초 라는 의미기 때문이지요.

따라서 setTimeout 의 두번째인자를 0으로 두어도, 비동기적으로 작동합니다.

이유는 최소 기다림의 시간이 0ms 라는 말이지, 0ms 만에 실행되지는 못합니다. 비동기 함수이기 때문에, task queue 에서 기다렸다 실행되기 때문이죠.

# async 함수들의 이점 (benefit)

자 그렇다면, 브라우저의 렌더링은 비동기일까요?
맞습니다.

웹 api 이잖아요.

애초에 브라우저가 렌더링 하여 보여주는것 자체가 비동기 event 라는 겁니다.

render queue 라고도 하는데, 다른 비동기 웹 API 보다 우선권을 갖습니다. (하지만 콜스택에 들어가는 동기 함수보다는 우선권이 작습니다.)
따라서 매 16ms 마다 큐에 렌더가 들어가고 스택이 깨끗해진 후에야 렌더링을 합니다.

그런데, 그 위에 많은 동기 이벤트(비동기가 아닙니다, 동기!)를 쌓게 되면, 브라우저 렌더링이 멈추겠죠?

왜냐면, 다른 콜스택에 들어간 동기 함수를 먼저 실행하고 있기 때문입니다. 그럴때, 브라우저는 작동이 멈춥니다.

처리하는데 시간이 많이 걸리는 작업들을 동기 함수로 구현하게 된다면 그 동기 함수를 여러번 실행 하다보면, 브라우저가 멈춥니다.
이유는 렌더 비동기 함수가 다른 시간이 많이 걸리는 동기 함수들을 콜스택에서 사라지기까지 기다리기 때문이죠.

그러나, 동기 함수가 아닌 비동기 함수로로 시간이 걸리는 작업들을 구현하게 되면, 브라우저가 멈추는 현상이 훨씬 줄어듭니다.

왜냐면, 비동기 함수들 중간중간에 렌더 함수가 끼어들수 있기 때문입니다. (16ms 마다 끼어들수 있음.)

# Don't block the Event Loop!

이벤트루프를 막지 말아라! 라는 말은 결국 쓸데없이 시간이 많이드는 일들은 동기 함수로 구현하지 말고 비동기함수로 구현하라는 말입니다.
비동기 함수는 이벤트 루프를 막는 확률이 적죠. 

저 어딘가에서 뒤에서 실행되다가, 실행이 완료되면 그때 콜백을 콜스택에 넣으니까요.

# Web API 그리고 Javascript Engine

정말 pure 한 자바스크립트 함수들, 예를 들면 console.log() 같은 함수들은 동기적 함수입니다.

진짜 자바스크립트 그 자체 함수이기 때문이죠. 즉, 이벤트가 아니라는 겁니다.

근데 우리가 실 상용하고 있는 웹앱들은 이벤트 투성이입니다. 즉 배열을 돌리거나, 덧셈 뺄셈 과 같은 사칙연산을 하거나 이런 함수들로만 이루어져있지 않단 말이죠.

그렇다면 이런 Web API 이벤트들은 어떻게 실행될수 있는 걸까요?

정답은 바로 Javascript Engine 에 있습니다.

대표적으로 구글에서 만든 V8 엔진이 있죠. 현재 크롬에서 사용하고있는 자바스크립트 엔진입니다.

* 링크: https://velog.io/@godori/JavaScript-engine-1 

위 링크에서 자바스크립트 엔진에 대해 더 자세히 알아볼수 있습니다.

이러한 자바스크립트 엔진을 타는 이벤트들은 모두 비동기 함수입니다. browser API 를 타는 함수들 이죠.

위에서 자주 쓰인 setTimeout도 자바스크립트 엔진에서 돌아갑니다.
우리가 자주쓰는 이벤트리쓰너도 마찬가지 입니다.

이런 자바스크립트 엔진에 대해서 자세히 공부하면, 좀더 event loop를 이해하는데 도움이 되지 않을까 싶습니다.



### 추가적으로, 이 글에서 맞지 않는 내용이 발견 된다면 그 즉시 댓글로 보고해주세요!!!!!




Event Loop??? 그게 뭔데??

요새 통 글을 쓰지 못하였다. 아니 안썼다고도 할수 있겠다.
오늘 처음으로 내게 질문 주신 분이 있어서, 정말 오랜만에 내 블로그에 방문하였다. 처음으로 질문을 받는 다는 것 자체가 나에게는 굉장히 설레는 일이었고, 누군가 나의 글을 보면서 나의 튜토리얼을 따라하는 사람도 있구나 라는 생각에 최대한 정성스럽게 답변을 해드리고 싶었다.

무튼, 질문때문에 내 블로그에 정말 오랜만에 방문 하였는데, 이유는 간단한거 같다. 원래 튜토리얼 쓰던 글이 있었는데, 여러가지 다른 일들에 치이다 보니, 그냥 내팽개쳐 버렸고.. 그 결과 무관심을 낳게되었다.

나름 만들때는 열의있게 만든 블로그인데, 왠지모르게 멀어져 간듯한 느낌이다. 음 쓰던 튜토리얼을 마무리 지을지, 아니면 삭제 하고 다른 글들을 올릴지는 미정이지만, 블로그 관리를 좀 더 해야겠다. 좀 더 많은 사람들에게 도움이 되고 싶은 마음이 제일 크기 때문이다. 또한, 글을 쓰게 되면서 한번 더 나의 코드를 보게 되었고, 좀더 깔끔한 코드를 완성할수 있었던것도 사실이다.

그렇다면!
그동안 무슨일이 있었냐 하면... 바로 리액트 개발자로써 최종 합격하게 되었다!
정말 감사한 일이다. 간절히 바래왔던 리액트 개발자로써의 꿈이 이루어지는 순간이었다. 당시 정말 행복했고, 아드레날린이 솟구침을 느낄수 있었다.

![YES!](https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif)

허나.. 아직 학생 신분인 나는 학교 졸업작품과 회사와 연동하여 실습하는 프로젝트 수업을 마치고 가야만 했다.. 고맙게도 회사에서는 기다려준다는 연락이 왔고, 이 때 동안 바쁘게 바쁘게 살았던 이유는 바로 두 프로젝트를 완성하기 위함이었다. 뭐 한마디로 학교에서의 마무리를 짓고, 회사로 나올 준비를 했다고 보면 될 것 같다. 

두 프로젝트 모두 내가 해야 할 일은 마무리 지었고, 이제 회사에 갈 날만을 기다리고 있다. 또한, 학교에서의 모든 짐을 털어 내기도 하였다. 뭐 여러가지 일들이 있었지만, 사적인 일이므로 속으로만 시원하다고 생각 하도록 하겠다!

역시 사람은 무엇을 하던간에, 거저 얻어지는 것은 의미가 없나보다... 여름방학 부터 취업을 하려고 정말 노력했지만, 마음대로 되지 않았다. 나는 이때까지 어른들이나 먼저 취업한 사람들이 취업에서 혹은 면접에서 떨어질때에, "그 회사랑 너랑 안맞는거야" 라고 하는것이 단지 나를 위로하려고 하는 그런 말인줄로만 생각했는데, (그런의미도 당연히 있지만.. ㅋㅋ) 단순한 그런 말은 아니었던것 같다. 

한창 취업이 안될때에, 주변인들에게 염치불구하고 취업에 대해 많이 물어보았다. 그중 한분은 이렇게 말을 하였다. "회사입장에서, 더군다나 스타트업이라면 사람을 뽑는것이 예사일이 아닙니다. 대부분 절대 사람을 막 들이거나 일용직 처럼 생각하면서 뽑지 않아요." 


돌이켜 보면 정말 맞는 말이다. 내가 사회에 대한 불신이 가득했던지 혹은 취업이 안되어서 부정적으로 바라보았는지, 저 말이 그 당시에는 사실 잘 와닿지 않았다. 근데 여러군데 면접을 보러다니니까 확실히 위 두 말들이 모두 사실이었다. 정말 갖고 싶은 실력의 개발자라면 뭐... 어딜 가던지 일은 할수 있겠다만, 나는 신입으로 들어가는 것이었기 때문에, 지원자들 대부분 실력은 대동소이 하다고 생각 한다. (다분히 나의 주관적인 생각) 허나 그 중에서 사람을 뽑는 다면, 정말 그 사람이 주는 느낌, 신뢰감, 우리와 맞을 것 같다는 느낌적인 느낌이 강하게 작용할거라고 생각이 든다.

또한, 그 사람이 회사와 맞다는 것은, 사용해보았던 기술 스택들도 크게 작용하는 것 같다. 예전에 취업을 준비할때, 주변인에게 한번 물어본적이 있었다. "스타트업에 취업하려하는데, 해줄수 있는 조언같은것 있나요?" 라고.

답은 이러했다. "음.. 일단 아무리 화려하게 프로젝트를 했다 하더라도, 기본을 무시하거나, 기본이 부족한 개발자들은 지원을 하더라도 많이 떨어지는 것을 보았다. 그리고 또한 회사의 성격과 맞는 (예를 들면 음악 스트리밍 관련 회사라면 음악 스트리밍 프로젝트가 있다면 큰 가산점이 된다 라는 뜻) 프로젝트를 해본 경험이 있다면, 도움이 많이 될것이다."

주옥같은 말이다. 

무튼 이제 마무리를 지어야 겠다. 나의 글은 항상 주저리주저리 하다 끝나는것 같다... ㅋㅋㅋ (뭐 어디까지나 일기형식의 글이니까..)

1년동안 나름 다사다난 했지만, 그래도 내 목표하나만큼은 이룰수 있었고, 그의 원동력은 바로 간절함이었다. 그 간절함이 없었다면 나는 아직도 내가 무엇을 하려고 하는지, 어떤 개발자가 되어야 하는지 애초에 깨닫지 못했을 것이고, 목표를 이룰수 없었을 거라는 생각이 든다.

앞으로도 이 초심 잃지 않고 쭉 가자!

![Steady](https://media.giphy.com/media/26BRNjat0rzLxmWXe/giphy.gif)









2018년 겨울을 맞이하며 남기는 글

> 오랜만에 벨로그에 글을 남기네요! 최근 취업준비를 하다보니 글을 남길 시간이 없었습니다! 그 사이 벨로그에 좋은 글들이 많이 올라왔네요! 점점 많은 글들이 올라오는 것이 보기 아주 좋습니다. 글에 대한 설명을 하자면 제 블로그에 먼저 글을 올려서, 저에 대한 일기같은 형식의 문체 입니다. 그러나 현 시대의 젊은이라면, 혹은 신입 개발자라면 같이 공감 할 수 있는 분들이 있을것 같아서 올려보는 글이니, 관심 있는 분들은 가볍게 읽어 주시면 감사하겠습니다. 원글은 https://killi8n.com/post/5bc73813fb3ef567f38234d1 에서 보실수 있습니다. 감사합니다.

오랜만에 글을 쓴다. 벌써 2018년도 10월 중순에 접어들었고, 곧있으면 겨울이 올것 같은 기분이 든다. 시간은 나이가 들수록 더 빨리 간다더니, 맞는 말인것 같다. 1주일이 체감상 3일같다. 

근래 1주~2주 정도는 뭔가 효율적인 삶을 살진 않았던것 같다. 머리에 드는 생각들에 갇혀서 무언가 행동에 옮겨야 할 것들이 있다는 것을 인지 했지만, 막상 행동으로 옮기지는 못한 느낌이었다. 

사실 지금 무엇이 우선순위이고, 무엇이 차후에 해도 되는것인지 인식하기가 쉽지 않다. 곧있으면 학교 시험기간이라 당분간은 개발에 집중을 하지 못할것 같다. 

개발을 하다가 아이디어가 떠올라 막상 시작했지만, 완벽하게 끝내지 못한것이 몇 있는데, 조금더 딜레이 기간이 있을것 같다.

또한, 최근에는 다시 취업전선에 뛰어 들면서 여러가지를 느끼게 되었다. 전까지만 해도 내가 신입 개발자로서 어떠한 수준인지, 어느 정도로 내가 개발자로서 자신이 있는지 피상적으로만 느낄뿐, 정확한 인식을 하지는 못했던것 같다. 허나, 취업하려고 여러군데 이곳저곳 많지는 않지만 나에게 맞을 만한 곳에 이력서를 넣고, 나의 프로젝트들을 정리한 자료들을 돌렸다. 덕분에 나의 수준을 알게 된것 같다.

확실히 좋은 개발자들이 많고, 딱 보기에 소문이 좋게 난 기업들 혹은 스타트업들에서는 나를 찾지 않았다. 지금 나의 개발자로서의 역량은 딱 거기까지인것 같다. 뭔가 조금 할줄은 알지만, 특출난 무언가가 없는 그런 애매한 상태.

사람을 뽑는 사람 입장으로써 내가 나를 보아도 크게 와닿는 개발자로써의 프로젝트가 없었다. 조금더 나의 아이디어가 부각된 체계적인 개발 방식이 필요하다는 것을 느꼈다.

이때까지는 단순한 호기심 및 즉흥적인 재미로 프로젝트를 만들어 온것 같다. 이런식으로 가다가는 무언가 내가 내 발에 채일것 같은 느낌이 많이 들었다. 이제는 조금더 프로 개발자로써의 느낌을 많이 살리는 프로젝트를 심도있게 만들어 보아야 겠다는 생각이 든다.

또한 나는 단순한 코더인가? 역량있는 개발자 인가? 라는 질문에도 자신이 없다.
그냥 취미로 하는 개발자라면 모를까, 내 꿈을 향해 달려가는 이 시점에서 단순한 코더로 내가 정체하게 된다면 나의 미래에 안좋은 영향을 상당히 가져다 줄 것이다. 조금더 심도있게 개발 및 개발환경을 더 공부해야 겠다는 생각이 든다.

2018년이 아직 2달 조금 넘게 남아있지만, 지금 시점에서 돌아보면 근 10개월간 허겁지겁 달려온것 같다. 작년까지만 해도 마음이 이렇게 무겁진 않았는데 말이다. 나를 위한 시간을 갖지 못한 것이 사실이고, 꿈을 좇아간다는 핑계로 나를 조금 돌보지 못한것도 사실인것 같다. 단계단계 올라가야 하는데 무언가 두칸씩, 세칸씩 가려다보니 욕심으로 인해 무언가를 망칠것도 같다. 허나 난 내가 바보가 아니라고 생각하고, 그 당시에 나에게 최선의 선택을 했다고 생각하기에 어떤 선택을 내렸어도 절대 헛된 선택은 아니라고 생각한다.

이제 결론을 짓자면, 나는 현재 매우 애매한 상태이다. 또한 나에 대한 자신감이 긴가 민가 하다. 이러한 시기일수록 나를 좀더 믿고 나의 마음에서 우러나오는 소리를 더 경청해야 겠다는 생각이 든다. 부정적인 생각들은 털어버리고 긍정적인 생각까지는 못하더라도 부정적인 생각의 빈도를 줄이려고 노력해야겠다. 언젠가는 나도 누가 같이 일해보고 싶은, 먼저 찾는 그런 사람이 될수 있을것이다.

남은 2018년 조금더 노력하자. 남의 눈보다는 나의 마음에 경청하되, 남에게 피해를 주지 않으면서, 나에게 선물을 줄수있는 삶을 살자.



2018년 가을을 맞이하면서 드는 생각들

일단 권한을 설정 해야 하니까, Django로 돌아옵시다.

django-rest-knox 라는 패키지를 다운로드 해야합니다.


```bash
$ (venv) pip install django-rest-knox
```

`settings.py`

```python
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'notes',
    'rest_framework',
    'knox',
]

...
# 제일 하단에 추가해줍니다.
# 처음에 10개만 받아오기 위해 PAGE_SIZE를 설정했습니다.
# 그리고 기본 권한을 knox의 token을 기반으로 설정했습니다.
REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 10,
    'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
}
```

```bash
$ (venv) python manage.py makemigrations
$ (venv) python manage.py migrate
```

이제 기본 권한을 설정했으니, notes 모델에서 owner 필드를 추가해주겠습니다.

`notes/models.py`

```python
from django.db import models
from django.contrib.auth.models import User


class Notes(models.Model):
    text = models.CharField(max_length=255)
    owner = models.ForeignKey(
        User, related_name="notes", on_delete=models.CASCADE, null=True
    )
    created_at = models.DateTimeField(auto_now=False, auto_now_add=True)

    def __str__(self):
        return self.text

```

User 모델을 가져온뒤, foreign key로 설정했네요.


그리고 모델을 수정했으니 다시한번 migrate 해줍니다.

```bash
$ (venv) python manage.py makemigrations
$ (venv) python manage.py migrate
```

views.py에서는 모든 노트를 불러왔던것을 이제 owner별로 불러오는 작업을 해주겠습니다. 그리고, 노트를 만들때, owner 필드에 값을 넣어야겠죠?

`notes/views.py`

```python
from rest_framework import viewsets, permissions
from .models import Notes


class NoteViewSet(viewsets.ModelViewSet):
	permission_classes = [permissions.IsAuthenticated, ]
    serializer_class = NoteSerializer

    def get_queryset(self):
        return self.request.user.notes.all().order_by("-created_at")

    def perform_create(self, serializer):
        serializer.save(owner=self.request.user)
```

자 이제, 회원가입 및 로그인에 대한 API 구현을 해보겠습니다.


`notes/serializers.py`

```python
from rest_framework import serializers
from .models import Notes
from django.contrib.auth.models import User
from django.contrib.auth import authenticate

...

# 회원가입 시리얼라이저

class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ("id", "username", "password")
        extra_kwargs = {"password": {"write_only": True}}

    def create(self, validated_data):
        user = User.objects.create_user(
            validated_data["username"], None, validated_data["password"]
        )
        return user


# 접속 유지중인지 확인할 시리얼라이저

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ("id", "username")


# 로그인 시리얼라이저 

class LoginUserSerializer(serializers.Serializer):
    username = serializers.CharField()
    password = serializers.CharField()

    def validate(self, data):
        user = authenticate(**data)
        if user and user.is_active:
            return user
        raise serializers.ValidationError("Unable to log in with provided credentials.")

```

위와같이 serializer를 만들고, 


`notes/views.py`

```python
from rest_framework import viewsets, permissions, generics
from rest_framework.response import Response
from .models import Notes
from .serializers import (
    NoteSerializer,
    CreateUserSerializer,
    UserSerializer,
    LoginUserSerializer,
)
from knox.models import AuthToken

....



class RegistrationAPI(generics.GenericAPIView):
    serializer_class = CreateUserSerializer

    def post(self, request, *args, **kwargs):
        if len(request.data["username"]) < 6 or len(request.data["password"]) < 4:
            body = {"message": "short field"}
            return Response(body, status=status.HTTP_400_BAD_REQUEST)
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.save()
        return Response(
            {
                "user": UserSerializer(
                    user, context=self.get_serializer_context()
                ).data,
                "token": AuthToken.objects.create(user),
            }
        )


class LoginAPI(generics.GenericAPIView):
    serializer_class = LoginUserSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data
        return Response(
            {
                "user": UserSerializer(
                    user, context=self.get_serializer_context()
                ).data,
                "token": AuthToken.objects.create(user),
            }
        )


class UserAPI(generics.RetrieveAPIView):
    permission_classes = [permissions.IsAuthenticated]
    serializer_class = UserSerializer

    def get_object(self):
        return self.request.user

```

serializer들도 만들어 줍니다.

`notes/urls.py`

```python
from django.conf.urls import url
from .views import NoteViewSet, RegistrationAPI, LoginAPI, UserAPI


note_list = NoteViewSet.as_view({"get": "list", "post": "create"})

note_detail = NoteViewSet.as_view(
    {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
)


urlpatterns = [
    url("^notes/$", note_list, name="note-list"),
    url("^notes/(?P<pk>[0-9]+)/$", note_detail, name="note-detail"),
    url("^auth/register/$", RegistrationAPI.as_view()),
    url("^auth/login/$", LoginAPI.as_view()),
    url("^auth/user/$", UserAPI.as_view()),
]

```
이렇게 url 라우팅도 해주면 장고작업은 끝이납니다.

postman 에서 body에 raw -> JSON형태로
```json
{
	"username": "testing",
	"password": "1234"
}
```
를 넣어주시고, http://localhost:8000/api/auth/register/ 와 http://localhost:8000/api/auth/login/ 을 POST 방식으로 실행하면 잘 실행이 될것입니다.

또한 접속된 유저 정보를 보기  위해서는, http://localhost:8000/api/auth/user/ 로 Headers 에 Authorization 항목을 넣고 __token 토큰값__ 으로 GET 실행 하면 유저 정보가 뜨게됩니다.

마지막으로 로그아웃을 구현하는것은 간단합니다.

`d_note/urls.py`

```python
from django.contrib import admin
from django.urls import path

from notes import urls
from django.conf.urls import include, url

urlpatterns = [
    path("admin/", admin.site.urls),
    url(r"^api/", include(urls)),
    url(r"^api/auth", include("knox.urls")),
]

```
다음과 같이 설정하면, /api/auth/logout/ 으로 Authorization: token 토큰값 으로 실행하면 로그아웃이 됩니다.


Dnote 5 - 1. Django - 권한 설정 및 로그인 / 회원가입 구현

음 이제 마지막이네요!

그러나 로그인 후 에러가 나타나는 현상을 방지하기 위해,

NoteContainer를 다음과 같이 바꿔주도록 하겠습니다!

`containers/NoteContainer.js`

```jsx
...
import * as authActions from "store/modules/auth";

...


componentDidMount() {
  // 에러 초기화
  this.props.initializeError();
  this.getNotes();
  window.addEventListener("scroll", this.handleScroll);
}

...

const mapDispatchToProps = dispatch => {
  return {
    changeNoteInput: ({ value }, isEditing) => {
      dispatch(noteActions.changeNoteInput({ value }, isEditing));
    },
    addNote: () => {
      dispatch(noteActions.addNote());
    },
    getNotes: () => {
      dispatch(noteActions.getNotes());
    },
    toggleNote: ({ id, text }) => {
      dispatch(noteActions.toggleNote({ id, text }));
    },
    updateNote: () => {
      dispatch(noteActions.updateNote());
    },
    deleteNote: ({ id }) => {
      dispatch(noteActions.deleteNote({ id }));
    },
    getMoreNotes: ({ lastId }) => {
      dispatch(noteActions.getMoreNotes({ lastId }));
    },
    //에러 초기화
    initializeError: () => {
      dispatch(authActions.initializeError());
    }
  };
};

...
```

404페이지를 완성하고 장고서버로 빌드된 리액트를 띄워볼까요?

다음과 같이 NotFound 컴포넌트를 생성해주세요.


`components/common/NotFound/NotFound.js`

```jsx
import React from "react";
import styles from "./NotFound.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const NotFound = () => (
  <div className={cx("not-found")}>
    <div className={cx("description")}>
      Hmm...
      <br /> You've reached some weird page!
      <div className={cx("go-back")}>Go Back</div>
    </div>
  </div>
);

export default NotFound;


```

`components/common/NotFound/NotFound.scss`

```css
@import "utils";

.not-found {
  background: $oc-violet-7;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  .description {
    color: white;
    font-size: 2rem;

    @include media("<medium") {
      font-size: 1.5rem;
      margin-left: 1rem;
      margin-right: 1rem;
    }
    .go-back {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
      color: white;
      font-weight: 700;

      border: 1px solid white;
      border-radius: 2px;

      cursor: pointer;

      user-select: none;

      &:hover {
        background: $oc-violet-6;
      }

      &:active {
        background: $oc-violet-7;
      }
    }
  }
}

```


`components/common/NotFound/index.js`
```js
export { default } from './NotFound';
```

컨테이너도 하나 만들어 줍니다.

`containers/NotFoundContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import NotFound from "components/common/NotFound";

export class NotFoundContainer extends Component {
  render() {
    return <NotFound />;
  }
}

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NotFoundContainer);

```

페이지에 반영해줍니다.

`pages/NotFound.js`

```jsx
import React from "react";
import NotFoundContainer from "containers/NotFoundContainer";
const NotFound = () => {
  return <NotFoundContainer />;
};

export default NotFound;

```

이렇게 하면 나름 깔끔한 NotFound페이지가 보여지게 됩니다.

이제 뒤로가기 기능을 추가해보겠습니다.

`containers/NoteContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import NotFound from "components/common/NotFound";
import { withRouter } from "react-router-dom";

export class NotFoundContainer extends Component {
  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };
  render() {
    const { handleGoBack } = this;
    return <NotFound onGoBack={handleGoBack} />;
  }
}

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(NotFoundContainer)
);

```

`components/common/NotFound/NotFound.js`

```jsx
import React from "react";
import styles from "./NotFound.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const NotFound = ({ onGoBack }) => (
  <div className={cx("not-found")}>
    <div className={cx("description")}>
      Hmm...
      <br /> You've reached some weird page!
      <div className={cx("go-back")} onClick={onGoBack}>
        Go Back
      </div>
    </div>
  </div>
);

export default NotFound;

```

이제 뒤로가기도 잘됩니다!

자 이제는 빌드한것을 띄우는 노드 서버를 하나 개설해 보겠습니다.
그 전에 yarn build로 미리 빌드 해주세요.

우리의 백엔드와 프론트엔드가 있는 같은 위치에 build-server라는 폴더를 만들어 주세요. 그리고 그 폴더로 들어가서 

```bash
yarn init -y 
```

를 해주십시오.

그다음에 다음 명령어로 필요한 node 패키지들을 다운받아줍니다.


```bash
yarn add koa koa-connect-history-api-fallback koa-proxy koa-static
```

저희는 express보다 조금더 가벼운 노드 서버 라이브러리인 koa를 사용하겠습니다.

그리고 src 폴더를 하나 만들고 그 밑에 index.js 를 만들어주세요.

`src/index.js`

```js
const Koa = require("koa");

const proxy = require("koa-proxy");

const path = require("path");
const serve = require("koa-static");
const fallback = require("koa-connect-history-api-fallback");

const buildPath = path.join(__dirname, "../../frontend/build");

const port = 4000;

const app = new Koa();

app.use(
  proxy({
    host: "http://localhost:8000",
    match: /^\/api\/*.*/
  })
);

app.use(fallback());

app.use(serve(buildPath));

app.listen(port, () => {
  console.log("build server is running on port", port);
});

```

다음과 같이 작성해줍니다.

저희의 빌드 된 파일은 frontend/build 에 들어가 있으므로, 그 파일을 serve해주는 것입니다.

그런데, 저희는 백엔드 포트를 8000번을 사용하므로, proxy를 설정해주어야 합니다.

그 후에 fallback을 사용하여 빌드된 리액트의 라우팅을 모두 싱크시켜줍니다.

자 이렇게 하고 localhost:4000 에 접속하면 잘뜨게 됩니다!







Dnote 7. React - 404페이지 완성 및 빌드된 리액트 띄우기

AWS를 쓰는 ... (무료로쓰는 혹은 돌려막기 하는...) 저같은 사용자에게 꼭필요한 DB덤프하고 덮어쓰기 !

이 블로그 또한 10개월 남짓 남은것 같은데 한 9개월 정도 남았을때에 덤프 과정이 필요할거 같아서 서핑 후 글을 남긴다.

# 덤프하기 

일단 몽고디비가 깔려있다면, mongodump라는 명령어로 덤프를 시켜야한다.

아래 명령어를 실행하게 되면 내 현재 위치에 dump라는 폴더가 생기게된다.

```bash
mongodump --host 127.0.0.1 --port 27017
```

--out 명령어로 위치를 지정해줄수도 있다. host와 port는 기본값인 127.0.0.1과 27017을 사용했다.

```bash
mongodump --out ~/mongo_backup --host 127.0.0.1 --port 27017
```

혹은 아이디와 비밀번호로 잠금된 몽고디비라면

```bash
mongodump --out ~/mongo_backup --host 127.0.0.1 --port 27017 -u계정명 -p계정비번 
```

으로 가능하고, 또한 모든 데이터베이스를 덤프하려는게 아니면 --db옵션을 사용하여 선택적으로 덤프가 가능하다.

```bash
mongodump --out ~/mongo_backup --host 127.0.0.1 --port 27017 -u계정명 -p계정비번 --db 선택적으로 복구하려는 db명
```

즉, dump 명령어를 정리하자면 다음과 같다.

```bash
mongodump --out 덤프지정위치(디렉터리) --host 127.0.0.1 --port 27017 -u계정명 -p계정비번 --db 선택적으로 복구하려는 db명
```

# 복구하기

덤프를 했으니, 덤프를 해놓은 데이터들을 바탕으로 복구를 해야한다.

마찬가지로 mongodb가 설치되어 있다면, command창에서 mongorestore를 사용가능 할것이다.

```bash
mongorestore --host 127.0.0.1 --port 27017 -u계정명 -p비번 --drop 원래디비에서 드랍시킬 디비명 --db 선택적으로 복구하려는 db명 "복구하려는 덤프된 디렉터리 위치"
```

--drop 옵션은 덤프하려는 데이터와 현재 디비에있는 데이터가 겹칠시 drop시키는 기능이다.

나의 블로그 복구를 예로들어보겠다.

## ex)

```bash
mongorestore --host 127.0.0.1 --port 27017 --drop myblog --db myblog ~/mongo_backup
```















> 유용하게 보셨다면 다른 좋은글이 있을지는 모르겠으나,,, 함들러보세요!

https://killi8n.com



Mongodb 덤프하고 백업하기

이제 무한 스크롤링 기능을 구현해 보겠습니다.

무한 스크롤링은 브라우저가 아래에 닿았을때, 저희가 마지막으로 보여주는 노트 아이템의 id를 기준으로 다음 10개의 노트 아이템들을 받아올 예정입니다.

NoteContainer에 다음을 추가해주겠습니다.

`containers/NoteContainer.js`

```jsx
...

componentDidMount() {
  this.getNotes();
  // 스크롤링 이벤트 추가
  window.addEventListener("scroll", this.handleScroll);
}

componentWillUnmount() {
  // 언마운트 될때에, 스크롤링 이벤트 제거
  window.removeEventListener("scroll", this.handleScroll);
}

...

handleScroll = () => {
  const { innerHeight } = window;
  const { scrollHeight } = document.body;
  // IE에서는 document.documentElement 를 사용.
  const scrollTop =
    (document.documentElement && document.documentElement.scrollTop) ||
    document.body.scrollTop;
  // 스크롤링 했을때, 브라우저의 가장 밑에서 100정도 높이가 남았을때에 실행하기위함.
  if (scrollHeight - innerHeight - scrollTop < 100) {
    console.log("Almost Bottom Of This Browser");
  }
};
```

일단 스크롤링을 해야하므로 노트들을 20개정도 추가해주세요.

그리고 스크롤링해서 바닥에 닿으면 console에 로그가 찍힙니다.

그러면 이제 바닥에 거의 닿았을때, 더 많은 노트를 가져오는 API를 작성한후, redux처리를 해서 기능을 구현해야 합니다.

장고쪽으로 다시 돌아와주세요.

`notes/views.py`

```python
class LoadMoreNotes(generics.ListAPIView):
    permission_classes = [permissions.IsAuthenticated, ]
    serializer_class = NoteSerializer

    def get(self, request, *args, **kwargs):
        flagId = kwargs['id']
        notes = Notes.objects.filter(owner=self.request.user).filter(id__lt=flagId).order_by('-created_at')[:10]
        isLast = False
        if len(notes) < 10:
            isLast = True
        serializer = self.get_serializer(notes, many=True, context={"request": request})
        return Response({
            "notes": serializer.data,
            "isLast": isLast
        })
```

`notes/urls.py`

```python
from django.conf.urls import url
from .views import NoteViewSet, RegistrationAPI, LoginAPI, UserAPI, LoadMoreNotes
# LoadMoreNotes 가져오기


note_list = NoteViewSet.as_view({"get": "list", "post": "create"})

note_detail = NoteViewSet.as_view(
    {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
)


urlpatterns = [
    url("^notes/$", note_list, name="note-list"),
    url("^notes/(?P<pk>[0-9]+)/$", note_detail, name="note-detail"),
    url("^notes/next/(?P<id>[0-9]+)/$", LoadMoreNotes.as_view()),
    # 상단을 추가해줍니다
    url("^auth/register/$", RegistrationAPI.as_view()),
    url("^auth/login/$", LoginAPI.as_view()),
    url("^auth/user/$", UserAPI.as_view()),
]

```
url: `/api/notes/next/{id}/`

이렇게 되면 url의 id를 바탕으로 작성자의 노트중 id 이후의 10개를 가져옵니다.

그럼 이제 API작업은 끝났으니, 다시 리액트로 돌아와서 무한스크롤링을 마저 구현해보겠습니다.

redux의 notes모듈에서 더 받아오기 epic을 추가해주겟습니다.

`modules/notes.js`

```js
import { ajax } from "rxjs/observable/dom/ajax";
import { of } from "rxjs";
import { map, mergeMap, catchError, withLatestFrom, 
        // 잠시간의 delay를 두어 로딩뷰를 띄우기 위해 추가해줍니다.
        delay } from "rxjs/operators";
import { ofType } from "redux-observable";

...


const GET_MORE_NOTES = "notes/GET_MORE_NOTES";
const GET_MORE_NOTES_SUCCESS = "notes/GET_MORE_NOTES_SUCCESS";
const GET_MORE_NOTES_FAILURE = "notes/GET_MORE_NOTES_FAILURE";

...

export const getMoreNotes = lastId => ({
  type: GET_MORE_NOTES,
  payload: {
    lastId
  }
});

export const getMoreNotesSuccess = ({ notes, isLast }) => ({
  type: GET_MORE_NOTES_SUCCESS,
  payload: {
    notes,
    isLast
  }
});

export const getMoreNotesFailure = error => ({
  type: GET_MORE_NOTES_FAILURE,
  payload: {
    error
  }
});

....


const getMoreNotesEpic = (action$, state$) => {
  return action$.pipe(
    ofType(GET_MORE_NOTES),
    // 0.75초간의 딜레이를 줍니다.
    delay(750),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      const { lastId } = action.payload;
      return ajax
        .get(`/api/notes/next/${lastId}/`, {
          "Content-Type": "application/json",
          Authorization: `token ${token}`
        })
        .pipe(
          map(response => {
            const { notes, isLast } = response.response;
            return getMoreNotesSuccess({ notes, isLast });
          }),
          catchError(error =>
            of({
              type: GET_MORE_NOTES_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};

...


const initialState = {
  noteInput: "",
  notes: [],
  error: {
    triggered: false,
    message: ""
  },
  editing: {
    id: null,
    text: ""
  },
  // 아래 추가.
  isLast: false,
  isLoading: false
};

...

case GET_MORE_NOTES:
      return {
        ...state,
        isLoading: true
      };
case GET_MORE_NOTES_SUCCESS:
  return {
    ...state,
    notes: state.notes.concat(action.payload.notes),
    isLast: action.payload.isLast,
    isLoading: false
  };
case GET_MORE_NOTES_FAILURE:
  return {
    ...state,
    error: {
      triggered: true,
      message: "ERROR WHILE LOAD MORE, TRY AGAIN"
    }
  };

...

export const notesEpics = {
  addNoteEpic,
  getNotesEpic,
  updateNoteEpic,
  deleteNoteEpic,
  getMoreNotesEpic
};
```

`modules/index.js`
```js
import { notes, notesEpics } from "./notes";
import { auth, authEpics } from "./auth";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes, auth });
export const rootEpics = combineEpics(
  notesEpics.addNoteEpic,
  notesEpics.getNotesEpic,
  notesEpics.updateNoteEpic,
  notesEpics.deleteNoteEpic,
  authEpics.loginEpic,
  authEpics.registerEpic,
  authEpics.checkUserEpic,
  authEpics.logoutEpic,
  notesEpics.getMoreNotesEpic
);

```

`containers/NoteContainer.js`
```jsx

....

handleScroll = () => {
  const { innerHeight } = window;
  const { scrollHeight } = document.body;
  const scrollTop =
    (document.documentElement && document.documentElement.scrollTop) ||
    document.body.scrollTop;
  if (scrollHeight - innerHeight - scrollTop < 100) {
    if (!this.props.isLoading && !this.props.isLast) {
      const lastId = this.props.notes[this.props.notes.length - 1].id;
      this.props.getMoreNotes({ lastId });
    }
  }
};

.....

const mapStateToProps = state => ({
  noteInput: state.notes.noteInput,
  notes: state.notes.notes,
  error: state.notes.error,
  editing: state.notes.editing,
  // 아래 추가.
  isLast: state.notes.isLast,
  isLoading: state.notes.isLoading
});

const mapDispatchToProps = dispatch => {
  return {
    changeNoteInput: ({ value }, isEditing) => {
      dispatch(noteActions.changeNoteInput({ value }, isEditing));
    },
    addNote: () => {
      dispatch(noteActions.addNote());
    },
    getNotes: () => {
      dispatch(noteActions.getNotes());
    },
    toggleNote: ({ id, text }) => {
      dispatch(noteActions.toggleNote({ id, text }));
    },
    updateNote: () => {
      dispatch(noteActions.updateNote());
    },
    deleteNote: ({ id }) => {
      dispatch(noteActions.deleteNote({ id }));
    },
    // 아래 추가.
    getMoreNotes: ({lastId}) => {
      dispatch(noteActions.getMoreNotes({lastId}));
    }
  };
};
....
```
이렇게 되면 바닥에 닿았을때, 0.75초 간격으로 가져오게 됩니다.

중복 받아오기를 방지하기 위하여 isLoading이거나, isLast일때에는 받아오지 않게 설정해놓았습니다.

자 이제 로딩 뷰를 보여줘야겠죠?

```bash
$ yarn add better-react-spinkit
```
위와같은 모듈을 받아줍니다.

잘 만들어진 로딩뷰를 보여주는 모듈입니다.

그리고 LoadingView 컴포넌트를 다음과 같이 만들어줍니다.


`components/notes/LoadingView/LoadingView.js`

```jsx
import React from "react";
import styles from "./LoadingView.scss";
import classNames from "classnames/bind";
import { ChasingDots } from "better-react-spinkit";

const cx = classNames.bind(styles);

const LoadingView = ({ isLoading }) => {
  if (!isLoading) return null;
  return (
    <div className={cx("loading-view")}>
      <ChasingDots color={"black"} size={60} />
    </div>
  );
};

export default LoadingView;

```

`components/notes/LoadingView/LoadingView.scss`

```css
@import "utils";

.loading-view {
  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 1rem;
  padding-bottom: 1rem;
}

```
`components/notes/LoadingView/index.js`

```js
export { default } from './LoadingView';
```

이 컴포넌트를 컨테이너에 반영합니다.

`containers/NoteContainer.js`

```jsx
...
import LoadingView from "components/notes/LoadingView";

...


render() {
  const { noteInput, error, notes, editing, isLoading } = this.props;
  const {
    handleChange,
    addNote,
    handleToggle,
    updateNote,
    deleteNote
  } = this;
  return (
    <div>
      <NoteWrapper>
        <InsertForm
          noteInput={noteInput}
          onChangeInput={handleChange}
          onAdd={addNote}
          error={error}
        />
        <NoteList
          notes={notes}
          editing={editing}
          onToggle={handleToggle}
          onChange={handleChange}
          onUpdate={updateNote}
          onDelete={deleteNote}
        />
        <LoadingView isLoading={isLoading} />
      </NoteWrapper>
    </div>
  );
}
...

```

오 이제 로딩뷰도 보여지고, 무한 스크롤링이 아주 잘됩니다.


근데 한가지 문제점이 남아있죠~ 바로 isLast가 아닌 상태에서 즉, 10개만 받아왔다고 가정하고, 나머지 10개가 남아있다는 상황에서 위에서부터 삭제를 하면 10개는 모두 사라지지만, 나머지 10개가 받아와지지 않습니다.

이 문제를 해결하기 위해 다음과 같이 변경해줍니다.

`containers/NoteContainer.js`

```jsx
deleteNote = ({ id }) => {
  const { deleteNote } = this.props;
  deleteNote({ id });

  const scrollHeight =
    (document.documentElement && document.documentElement.scrollHeight) ||
    document.body.scrollHeight;
  const clientHeight =
    (document.documentElement && document.documentElement.clientHeight) ||
    document.body.clientHeight;
  const offsetFlag = scrollHeight - clientHeight < 100;
  if (offsetFlag) {
    const lastId = this.props.notes[this.props.notes.length - 1].id;
    if (!this.props.isLast) {
      this.props.getMoreNotes({ lastId });
    }
  }
};
```

지웠을때, 남아있는 스크롤의 높이가 100보다 작아지면 만약 isLast가 아니라면 더 받아오는 형식입니다.

그러나 이렇게 했을때에도 버그가 있습니다.

엄청나게 빨리 눌렀을때에 로딩이 되는도중에도 삭제가 진행되기 때문인데요.

이 버그를 고쳐보겠습니다.

`containers/NoteContainer.js`

```jsx
deleteNote = ({ id }) => {
  const { deleteNote } = this.props;
  // 현재 props의 isLoading이 아닐때만 지워줍니다.
  if (!this.props.isLoading) {
    deleteNote({ id });
  }

  const scrollHeight =
    (document.documentElement && document.documentElement.scrollHeight) ||
    document.body.scrollHeight;
  const clientHeight =
    (document.documentElement && document.documentElement.clientHeight) ||
    document.body.clientHeight;
  const offsetFlag = scrollHeight - clientHeight < 100;
  if (offsetFlag) {
    const lastId = this.props.notes[this.props.notes.length - 1].id;
    if (!this.props.isLast) {
      this.props.getMoreNotes({ lastId });
    }
  }
};
```

유후 이제 버그도 고쳤고 무한스크롤링도 되고 삭제시에도 더 많은 노트들을 보여줄수 있습니다!



Dnote 6 - 1. React - 무한 스크롤링 기능 구현.

자 이제는 로그인과 회원가입이 되었으니 로그인이 되었을때, 유지하는 기능을 추가하고, 로그인이 만약 안되었다면, 접속시 바로 로그인 페이지로 넘겨보고, 마지막으로 로그아웃 기능까지 구현해보겠습니다.

일단 장고 앱에서는 회원가입만 하더라도, 토큰을 부여하게 됩니다. 그러니까, 회원가입 하자마자 로그인을 한다고 생각하시면 될것 같습니다.

일단 로그인을 유지하려면 localStorage를 이용해야 합니다.

따라서 로그인이나 회원가입이 완료되면 저희 redux 의 auth에서 logged라는 state가 있는데, 이 logged가 true로 바뀌게 됩니다.

`modules/auth.js`

```js
case REGISTER_SUCCESS:
  return {
    ...state,
    logged: true,
    userInfo: {
      id: action.payload.user.id,
      username: action.payload.user.username,
      token: action.payload.token
    }
  };

...


case LOGIN_SUCCESS:
  return {
    ...state,
    logged: true,
    userInfo: {
      id: action.payload.user.id,
      username: action.payload.user.username,
      token: action.payload.token
    }
  };
```

위와 같이 말이죠. 그리고 userInfo라는 state도 그에 맞에 변경이 됩니다.

저희는 이제 이 값들을 AuthContainer에서 componentDidUpdate로 이용할 계획입니다.

`containers/AuthContainer.js`

```jsx
componentDidUpdate(prevProps, prevState) {
  // 하단에 AuthContainer를 withRouter로 감쌌기 때문에, history를 props로 이용할수 있습니다.
  const { history } = this.props;
  if (prevProps.kind !== this.props.kind) {
    this.initialize();
  }

  if (prevProps.logged !== this.props.logged && this.props.logged) {
    // logged가 true가 되면 localStorage에 값을 저장합니다. 
    localStorage.setItem(
      "userInfo",
      JSON.stringify({
        id: this.props.userInfo.id,
        username: this.props.userInfo.username,
        token: this.props.userInfo.token
      })
    );
    // 값을 저장후, main페이지로 이동시켜줍니다.
    history.push("/");
  }
}
```

자 이제 회원가입이나 로그인을 해보시면 이동하고, chrome 개발자 콘솔을 사용하여 localStorage로 쳐보시면 값이 저장된것을 알수 있습니다. 또한 localStorage에는 문자열밖에 저장하지 못하므로, JSON.stringify를 사용하여 JSON을 문자열로 변환시켜줍니다. 

아직까지는 에러가 발생하죠? 이유는 간단합니다, 저희가 메인 페이지로 이동하자마자 NoteContainer에서는 componentDidMount로 바로 노트 리스트를 받아오기 때문인데요, 저희는 아직 Header에 토큰값을 넘겨주지 않았기 때문에 401 에러가 뜹니다.


이 에러를 고쳐주기 위해서는 redux의 notes모듈로 넘어가서 Header값에 Authorization을 넣어주어야 합니다.

`modules/notes.js`

```jsx
const getNotesEpic = (action$, state$) => {
  return action$.pipe(
    ofType(GET_NOTES),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      // localStorage의 userInfo를 JSON.parse를 통해 string을 JSON화 시킨후 token값만 가져옵니다.
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      // 헤더에 Authroization을 토큰값과 함께 넣어줍니다.
      return ajax
        .get(`/api/notes/`, {
          "Content-Type": "application/json",
          Authorization: `token ${token}`
        })
        .pipe(
          map(response => {
            const notes = response.response;
            return getNotesSuccess({ notes });
          }),
          catchError(error =>
            of({
              type: GET_NOTES_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};
```

음 이렇게 바꾸고나니 또 에러가뜨죠? 이유는 저희가 django 앱에서 rest framework의 paging 기능을 사용했기 때문인데요, 이렇게 되면 받아올때 다음과 같은 정보들을 받게 됩니다.

```js
{count: 0, next: null, previous: null, results: []}
```
이런식으로 말이죠, count는 받아오는 아이템의 갯수, next는 다음 페이지의 api url, previous는 전 페이지의 api url, results에는 아이템들의 리스트값이 담겨 옵니다. 따라서 results라는 변수로 response값을 다시 가져와야 합니다.

`modules/notes.js`

```js
case GET_NOTES_SUCCESS:
  return {
    ...state,
    notes: action.payload.notes.results
  };
```

reducer의 GET_NOTES_SUCCESS 부분을 다음과 같이 바꿔줍니다. 이렇게 되면 오류가 나지 않고, 받아온 리스트들을 잘 보여주게 됩니다. 

저희는 다른 payload들은 사용하지 않습니다. 예를들면, count, next, previous같은 것들인데요, 단순히 보여주기만 한다면 위의 값들을 이용하여 무한스크롤링을 해도 상관이 없습니다만 저희는 중간에 삭제를 하거나 수정을 하기 때문에 마지막 아이템을 기준으로 다시 노트들을 가져옵니다. 따라서 딱히 이용할 이유가 없으므로, 일단 results값만 사용하겠습니다.

자 이제는 다시 auth모듈로 돌아가서 로그인 정보를 유지하고 로그인 되지 않았다면, auth page로 보내는 기능을 추가하겠습니다. 전에 저희가 django에서 만든 checkUser 를 이용할 계획입니다.

`modules/auth.js`

```js
...
const CHECK_USER = "auth/CHECK_USER";
const CHECK_USER_SUCCESS = "auth/CHECK_USER_SUCCESS";
const CHECK_USER_FAILURE = "auth/CHECK_USER_FAILURE";

const SET_USER_TEMP = "auth/SET_USER_TEMP";

...

export const checkUser = () => ({
  type: CHECK_USER
});

export const checkUserSuccess = () => ({
  type: CHECK_USER_SUCCESS
});

export const checkUserFailure = error => ({
  type: CHECK_USER_FAILURE,
  payload: {
    error
  }
});

export const setUserTemp = ({ id, username, token }) => ({
  type: SET_USER_TEMP,
  payload: {
    id,
    username,
    token
  }
});

...

const checkUserEpic = (action$, state$) => {
  return action$.pipe(
    ofType(CHECK_USER),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      return ajax
        .get(`/api/auth/user/`, {
          "Content-Type": "application/json",
          Authorization: `token ${token}`
        })
        .pipe(
          map(response => {
            return checkUserSuccess();
          }),
          catchError(error =>
            of({
              type: CHECK_USER_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};

...
case CHECK_USER_SUCCESS:
  return {
    ...state
  };
case CHECK_USER_FAILURE:
  return {
    ...state,
    logged: false,
    userInfo: {
      id: null,
      username: "",
      token: null
    }
  };
case SET_USER_TEMP:
  return {
    ...state,
    logged: true,
    userInfo: {
      id: action.payload.id,
      username: action.payload.username,
      token: action.payload.token
    }
  };

export const authEpics = { registerEpic, loginEpic, checkUserEpic };


```

`modules.index.js`

```js
import { notes, notesEpics } from "./notes";
import { auth, authEpics } from "./auth";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes, auth });
export const rootEpics = combineEpics(
  notesEpics.addNoteEpic,
  notesEpics.getNotesEpic,
  notesEpics.updateNoteEpic,
  notesEpics.deleteNoteEpic,
  authEpics.loginEpic,
  authEpics.registerEpic,
  authEpics.checkUserEpic
);

```

위와같이 작성한후, 전역적으로 사용할 BaseContainer.js 를 만들어줍니다.

`containers/BaseContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import * as authActions from "store/modules/auth";
import { withRouter } from "react-router-dom";

export class BaseContainer extends Component {
  componentDidMount() {
    this.checkUser();
  }

  checkUser = () => {
    const { checkUser, setUserTemp, history } = this.props;

    // 먼저 localStorage에 값이 저장되있는지 확인, userInfo값이 있다면, 로그인을 한것으로 인식하고,
    // 바로 setUserTemp를 실시.
    // 이를 하는 이유는 새로고침 했을시, state가 초기화 되어 logged값도 false로 바뀌는데, 새로고침 했을시
    // 로그인을 유지하기 위함.
    if (localStorage.getItem("userInfo")) {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      setUserTemp({
        id: userInfo.id,
        username: userInfo.username,
        token: userInfo.token
      });
      return;
    }

    // 만약 userInfo값이 localStorage에 없을때에는, api통신을 실시.
    checkUser();

    // 만약 checkUser가 실패 했다면, logged는 false로 바뀌므로, 로그인 페이지로 이동시킨다.
    // 또한, /auth/register에서는 /auth/login으로 이동할 필요가 없으므로, auth라는 path가 url에 포함될때는 제외시킨다
    if (!this.props.logged && !window.location.pathname.includes("auth")) {
      history.push("/auth/login");
    }
  };

  render() {
    return <div />;
  }
}

const mapStateToProps = state => ({
  logged: state.auth.logged
});

const mapDispatchToProps = dispatch => {
  return {
    checkUser: () => {
      dispatch(authActions.checkUser());
    },
    setUserTemp: ({ id, username }) => {
      dispatch(authActions.setUserTemp({ id, username }));
    }
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(BaseContainer)
);

```

그리고 이 BaseContainer를 App.js에 반영한다.

`components/App.js`

```jsx
import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { Main, Auth, NotFound } from "pages";
import BaseContainer from "containers/BaseContainer";

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/" exact={true} component={Main} />
          <Route path="/auth/:kind" exact={true} component={Auth} />
          <Route component={NotFound} />
        </Switch>
        <BaseContainer />
      </div>
    );
  }
}

export default App;

```
이렇게 되면 로그인이 되었다면, 새로고침을 해도 로그인 상태가 유지됩니다.

만약 로그인이 되어있지 않다면, /auth/login으로 이동하겠죠.

그렇다면 이제 로그아웃 기능을 구현해볼까요?

`modules/auth.js`

```js
...

const LOGOUT = "auth/LOGOUT";
const LOGOUT_SUCCESS = "auth/LOGOUT_SUCCESS";
const LOGOUT_FAILURE = "auth/LOGOUT_FAILURE";

...

export const logout = () => ({
  type: LOGOUT
});

export const logoutSuccess = () => ({
  type: LOGOUT_SUCCESS
});

export const logoutFailure = () => ({
  type: LOGOUT_FAILURE
});


....

const logoutEpic = (action$, state$) => {
    return action$.pipe(
      ofType(LOGOUT),
      withLatestFrom(state$),
      mergeMap(([action, state]) => {
        const token = localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).token
          : null;
        return ajax
          .post(
            `/api/auth/logout/`,
            // post의 body를 비워놓는다.
            {},
            {
              "Content-Type": "application/json",
              Authorization: `token ${token}`
            }
          )
          .pipe(
            map(response => {
              // success시 localStorage에서 userInfo 삭제.
              localStorage.removeItem("userInfo");
              return logoutSuccess();
            }),
            catchError(error => {
              of({
                type: LOGIN_FAILURE,
                payload: error,
                error: true
              });
            })
          );
      })
    );
  };

....

case LOGOUT_SUCCESS:
  return {
    ...state,
    logged: false,
    userInfo: {
      id: null,
      message: "",
      token: null
    }
  };
case LOGOUT_FAILURE:
  return {
    ...state,
    error: {
      triggered: true,
      message: "LOGOUT ERROR, PLEASE TRY AGAIN"
    }
  };

...

export const authEpics = { registerEpic, loginEpic, checkUserEpic, logoutEpic };
```

`modules/index.js`

```js
import { notes, notesEpics } from "./notes";
import { auth, authEpics } from "./auth";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes, auth });
export const rootEpics = combineEpics(
  notesEpics.addNoteEpic,
  notesEpics.getNotesEpic,
  notesEpics.updateNoteEpic,
  notesEpics.deleteNoteEpic,
  authEpics.loginEpic,
  authEpics.registerEpic,
  authEpics.checkUserEpic,
  authEpics.logoutEpic
);
```

로그아웃 버튼을 눌러야 하기 때문에 HeaderContainer를 만들어줍니다.

`containers/HeaderContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import Header from "components/structure/Header";
import * as authActions from "store/modules/auth";

export class HeaderContainer extends Component {
  handleLogout = () => {
    const { logout } = this.props;
    logout();
  };
  render() {
    const { handleLogout } = this;
    return <Header onLogout={handleLogout} />;
  }
}

const mapStateToProps = state => ({});

const mapDispatchToProps = dispatch => {
  return {
    logout: () => {
      dispatch(authActions.logout());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HeaderContainer);

```

그리고 components의 MainStructure에서 Header를 HeaderContainer로 변경해줍니다.

`components/structure/MainStructure/MainStructure.js`

```jsx
import React from "react";
import styles from "./MainStructure.scss";
import classNames from "classnames/bind";
import HeaderContainer from "containers/HeaderContainer";

const cx = classNames.bind(styles);

const MainStructure = ({ children }) => (
  <div>
    <HeaderContainer />
    <main>{children}</main>
  </div>
);

export default MainStructure;

```
이제 로그아웃버튼을 누르면 로그아웃 통신이 일어나게 되는데 페이지 변경이 안되죠? 다음과 같이 변경해줍니다.

`containers/BaseContainer.js`

```jsx
componentDidUpdate(prevProps, prevState) {
  if (prevProps.logged !== this.props.logged && !this.props.logged) {
    window.location.href = "/auth/login";
  }
}
```
로그아웃 한채로 / 로 이동하면 다시 로그인 페이지로 돌아오게됩니다.
(register페이지 제외)
자 이제 로그아웃 기능까지 완료되었습니다! 

아 그리고 빼먹은 부분이 있는데, 이제는 모든 CRUD기능들에 Authorization Header를 붙여줘야 합니다. 안그러면 401 에러가 뜨게됩니다.

`modules/notes.js`

```js
const addNoteEpic = (action$, state$) => {
  return action$.pipe(
    ofType(ADD_NOTE),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      return ajax
        .post(
          `/api/notes/`,
          { text: state.notes.noteInput },
          {
            "Content-Type": "application/json",
            Authorization: `token ${token}`
          }
        )
        .pipe(
          map(response => {
            const note = response.response;
            return addNoteSuccess(note);
          }),
          catchError(error =>
            of({
              type: ADD_NOTE_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};

const deleteNoteEpic = (action$, state$) => {
  return action$.pipe(
    ofType(DELETE_NOTE),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      return ajax
        .delete(`/api/notes/${action.payload.id}/`, {
          "Content-Type": "application/json",
          Authorization: `token ${token}`
        })
        .pipe(
          map(response => {
            return deleteNoteSuccess({ id: action.payload.id });
          }),
          catchError(error =>
            of({
              type: DELETE_NOTE_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};

const updateNoteEpic = (action$, state$) => {
  return action$.pipe(
    ofType(UPDATE_NOTE),
    withLatestFrom(state$),

    mergeMap(([action, state]) => {
      const token = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).token
        : null;
      return ajax
        .patch(
          `/api/notes/${state.notes.editing.id}/`,
          {
            text: state.notes.editing.text
          },
          {
            "Content-Type": "application/json",
            Authorization: `token ${token}`
          }
        )
        .pipe(
          map(response => {
            const note = response.response;

            return updateNoteSuccess({ note });
          }),
          catchError(error =>
            of({
              type: UPDATE_NOTE_FAILURE,
              payload: error,
              error: true
            })
          )
        );
    })
  );
};
```

이렇게 되면 CRUD도 정상 작동합니다.








Dnote 5 - 3. React - 로그인 유지 및 로그아웃 기능 구현.

자 이제 생성은 되는데, 아무것도 없이 엔터만 치면 에러가 나겠죠?

이 에러를 반영해주는 작업들을 해보겠습니다.

redux의 initialState에 다음을 추가해줍니다.

`modules/notes.js`

```js
const initialState = {
  noteInput: "",
  notes: [],
  // 에러 관련 state 등록.
  error: {
    triggered: false,
    message: ""
  }
};
```

`containers/NoteContainer.js`

```jsx
...

render() {
    const { noteInput, error } = this.props;
    const { handleChange, addNote } = this;
    return (
      <div>
        <NoteWrapper>
          <InsertForm
            noteInput={noteInput}
            onChangeInput={handleChange}
            onAdd={addNote}
            error={error}
          />
        </NoteWrapper>
      </div>
    );
  }

...

const mapStateToProps = state => ({
  noteInput: state.notes.noteInput,
  notes: state.notes.notes,
  error: state.notes.error
});
```
`components/notes/InsertForm/InsertForm.js`

```jsx
import React from "react";
import styles from "./InsertForm.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const InsertForm = ({ noteInput, onChangeInput, onAdd, error }) => {
  const handleChange = e => {
    const { value } = e.target;
    onChangeInput({ value });
  };

  const handleKeyPress = e => {
    if (e.key === "Enter") {
      onAdd();
    }
  };

  return (
    <div className={cx("form")}>
      <div className={cx("title")}>Insert Your Note Here...</div>
      <div className={cx("error")}>
        {error.triggered && (
          <div className={cx("message")}>{error.message}</div>
        )}
      </div>
      <input
        type="text"
        name="note"
        value={noteInput}
        onChange={handleChange}
        onKeyPress={handleKeyPress}
      />
    </div>
  );
};

export default InsertForm;
```

이제 에러가 생기면 반영이 됩니다. 그러나 제대로 입력했을때도 남아있으니, 이부분을 고쳐보겠습니다.

`store/modules/notes.js`

```js
case ADD_NOTE_SUCCESS:
      const { note } = action.payload;
      return {
        ...state,
        notes: [note].concat(state.notes),
        noteInput: "",
        // 성공시 에러 초기화.
        error: {
          triggered: false,
          message: ""
        }
      };
```

다음에는 생성된 노트들을 보여주는 처리를 해보겠습니다.




Dnote 4 - 5. React - 노트 생성 시 에러 처리.

`components/notes/InsertForm/InsertForm.js`

```jsx
import React from "react";
import styles from "./InsertForm.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const InsertForm = () => {
  return (
    <div className={cx("form")}>
      <div className={cx("title")}>Insert Your Note Here...</div>
      <input type="text" name="note" />
    </div>
  );
};

export default InsertForm;

```

`components/notes/InsertForm/InsertForm.scss`

```css
@import "utils";

.form {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  .title {
    border-bottom: 1px solid $oc-gray-8;
    padding-bottom: 0.75rem;

    font-size: 1.25rem;
    font-weight: 500;
  }

  input {
    margin-top: 0.75rem;
    height: 2.5rem;
    border: 1px solid $oc-gray-5;
    border-radius: 2px;

    outline: none;

    font-size: 1.5rem;
    padding: 0.25rem;

    background: $oc-gray-5;

    color: white;
    font-weight: 600;

    flex: 1;
  }
}
```

`components/notes/InsertForm/InsertForm.js`

```js
export { default } from './InsertForm';
```


이 InsertForm을 Main 페이지에 반영해보겠습니다.

`pages/Main.js`

```jsx
import React from "react";
import MainStructure from "components/structure/MainStructure";
import InsertForm from "components/notes/InsertForm";

const Main = () => {
  return (
    <MainStructure>
      <InsertForm />
    </MainStructure>
  );
};

export default Main;
```

이렇게 되면 너무 넓이가 넓어지므로, wrapper컴포넌트를 하나 만들어야합니다.

`components/notes/NoteWrapper/NoteWrapper.js`

```jsx
import React from "react";
import styles from "./NoteWrapper.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const NoteWrapper = ({ children }) => (
  <div className={cx("wrapper")}>{children}</div>
);

export default NoteWrapper;
```

`components/notes/NoteWrapper/NoteWrapper.scss`

```css
@import "utils";

.wrapper {
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  width: 1024px;
  @include media("<medium") {
    width: 95%;
  }

  padding-top: 1rem;
  padding-bottom: 1rem;
}
```

`components/notes/NoteWrapper/index.js`

```js
export { default } from './NoteWrapper';
```

이제 이 wrapper로 InsertForm을 감싸줍니다.

`pages/Main.js`

```jsx
import React from "react";
import MainStructure from "components/structure/MainStructure";
import InsertForm from "components/notes/InsertForm";
import NoteWrapper from "components/notes/NoteWrapper";

const Main = () => {
  return (
    <MainStructure>
      <NoteWrapper>
        <InsertForm />
      </NoteWrapper>
    </MainStructure>
  );
};

export default Main;
```

위치가 나름 잡아졌죠?

그렇다면 이제 이 입력폼을 가지고 실제로 redux를 사용하여 django와 통신하여 새 노트를 한번 만들어보겠습니다.

일단 노트 input의 value 상태를 반영할 action과 리듀서를 생성해보겠습니다.

`store/modules/notes.js`

```js
const CHANGE_NOTE_INPUT = "notes/CHANGE_NOTE_INPUT";

export const changeNoteInput = ({ value }) => ({
  type: CHANGE_NOTE_INPUT,
  payload: { value }
});

const initialState = {
  noteInput: ""
};

export const notes = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_NOTE_INPUT:
      return {
        ...state,
        noteInput: action.payload.value
      };

    default:
      return state;
  }
};
```

이제 이 모듈을 index에서 반영해줍니다.

`store/modules/index.js`

```js
// 원래 있던 ping은 삭제해도 무방합니다.
import { notes } from "./notes";
import { combineReducers } from "redux";

export const rootReducers = combineReducers({ notes });
```

그럼 이제 이 모듈을 사용해서 input값을 관리해볼까요?

일단 그러기 위해서 container를 하나 생성해주어야합니다.

`containers/NoteContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import InsertForm from "components/notes/InsertForm";
import NoteWrapper from "components/notes/NoteWrapper";

import * as noteActions from "store/modules/notes";

export class NoteContainer extends Component {
  handleChange = ({ value }) => {
    const { changeNoteInput } = this.props;
    changeNoteInput({ value });
  };

  render() {
    const { noteInput } = this.props;
    const { handleChange } = this;
    return (
      <div>
        <NoteWrapper>
          <InsertForm noteInput={noteInput} onChangeInput={handleChange} />
        </NoteWrapper>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  noteInput: state.notes.noteInput
});

const mapDispatchToProps = dispatch => {
  return {
    changeNoteInput: ({ value }) => {
      dispatch(noteActions.changeNoteInput({ value }));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NoteContainer);
```

그런 뒤에 pages에서 이 컨테이너만 렌더해줍니다.

`pages/Main.js`

```jsx
import React from "react";
import MainStructure from "components/structure/MainStructure";
import NoteContainer from "containers/NoteContainer";

const Main = () => {
  return (
    <MainStructure>
      <NoteContainer />
    </MainStructure>
  );
};

export default Main;
```

이제 InsertForm 컴포넌트에서 마무리 작업을 해줍니다.

`components/notes/InsertForm/InsertForm.js`

```jsx
import React from "react";
import styles from "./InsertForm.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const InsertForm = ({ noteInput, onChangeInput }) => {
  const handleChange = e => {
    const { value } = e.target;
    onChangeInput({ value });
  };

  return (
    <div className={cx("form")}>
      <div className={cx("title")}>Insert Your Note Here...</div>
      <input
        type="text"
        name="note"
        value={noteInput}
        onChange={handleChange}
      />
    </div>
  );
};

export default InsertForm;
```

이제 리덕스 데브툴스로 보면 입력을 할때마다 값이 바뀌는것을 알수 있습니다.

다음에는 이 값을 가지고 실제 노트를 하나 생성해보겠습니다.






Dnote 4 - 3. React - 입력 폼 만들고 상태 관리.

`store/modules/notes.js`

```js
import { ajax } from "rxjs/observable/dom/ajax";
import { of } from "rxjs";
import { map, mergeMap, catchError, withLatestFrom } from "rxjs/operators";
import { ofType } from "redux-observable";

const CHANGE_NOTE_INPUT = "notes/CHANGE_NOTE_INPUT";

const ADD_NOTE = "notes/ADD_NOTE";
const ADD_NOTE_SUCCESS = "notes/ADD_NOTE_SUCCESS";
const ADD_NOTE_FAILURE = "notes/ADD_NOTE_FAILURE";

export const changeNoteInput = ({ value }) => ({
  type: CHANGE_NOTE_INPUT,
  payload: { value }
});

export const addNote = () => ({
  type: ADD_NOTE
});
export const addNoteSuccess = note => ({
  type: ADD_NOTE_SUCCESS,
  payload: {
    note
  }
});
export const addNoteFailure = error => ({
  type: ADD_NOTE_FAILURE,
  payload: {
    error
  }
});

const addNoteEpic = (action$, state$) => {
  return action$.pipe(
    ofType(ADD_NOTE),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      return ajax.post(`/api/notes/`, { text: state.notes.noteInput }).pipe(
        map(response => {
          const note = response.response;
          return addNoteSuccess(note);
        }),
        catchError(error =>
          of({
            type: ADD_NOTE_FAILURE,
            payload: error,
            error: true
          })
        )
      );
    })
  );
};

const initialState = {
  noteInput: "",
  notes: []
};

export const notes = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_NOTE_INPUT:
      return {
        ...state,
        noteInput: action.payload.value
      };
    case ADD_NOTE_SUCCESS:
      const { note } = action.payload;
      return {
        ...state,
        notes: [note].concat(state.notes),
        noteInput: ""
      };
    case ADD_NOTE_FAILURE:
      return {
        ...state,
        error: {
          triggered: true,
          message: "Error! Please Try With Unempty Note"
        }
      };
    default:
      return state;
  }
};

export const notesEpics = {
  addNoteEpic
};
```

위와 같이 note를 추가하는 epic과 액션, 리듀서들을 생성해주세요.

그리고, index.js에서 epic을 반영해주세요.

`modules/index.js`

```js
import { notes, notesEpics } from "./notes";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes });
export const rootEpics = combineEpics(notesEpics.addNoteEpic);

```

처음으로 epic이 나왔는데요, 이 epic은 configure에서 다음과 같이 등록해주어야 사용할수 있습니다.

`store/configure.js`

```js
import { createStore, applyMiddleware, compose } from "redux";
import { createEpicMiddleware } from "redux-observable";

import { rootReducers, rootEpics } from "./modules";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const epicMiddleware = createEpicMiddleware();

export default createStore(
  rootReducers,
  composeEnhancers(applyMiddleware(epicMiddleware))
);

epicMiddleware.run(rootEpics);
```

이제 container로 다시 돌아와서 다음 작업들을 해줘야합니다.

`containers/NoteContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import InsertForm from "components/notes/InsertForm";
import NoteWrapper from "components/notes/NoteWrapper";

import * as noteActions from "store/modules/notes";

export class NoteContainer extends Component {
  handleChange = ({ value }) => {
    const { changeNoteInput } = this.props;
    changeNoteInput({ value });
  };

  addNote = () => {
    const { addNote } = this.props;
    addNote();
  };

  render() {
    const { noteInput } = this.props;
    const { handleChange, addNote } = this;
    return (
      <div>
        <NoteWrapper>
          <InsertForm
            noteInput={noteInput}
            onChangeInput={handleChange}
            onAdd={addNote}
          />
        </NoteWrapper>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  noteInput: state.notes.noteInput,
  notes: state.notes.notes
});

const mapDispatchToProps = dispatch => {
  return {
    changeNoteInput: ({ value }) => {
      dispatch(noteActions.changeNoteInput({ value }));
    },
    addNote: () => {
      dispatch(noteActions.addNote());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NoteContainer);
```

`components/notes/InsertForm/InsertForm.js`

```jsx
import React from "react";
import styles from "./InsertForm.scss";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

const InsertForm = ({ noteInput, onChangeInput, onAdd }) => {
  const handleChange = e => {
    const { value } = e.target;
    onChangeInput({ value });
  };

  const handleKeyPress = e => {
    if (e.key === "Enter") {
      onAdd();
    }
  };

  return (
    <div className={cx("form")}>
      <div className={cx("title")}>Insert Your Note Here...</div>
      <input
        type="text"
        name="note"
        value={noteInput}
        onChange={handleChange}
        onKeyPress={handleKeyPress}
      />
    </div>
  );
};

export default InsertForm;

```

근데 이상태로는 오류가 납니다, 이유는 proxy설정을 안했기 때문인데요, package.json에서 프록시 설정을 해줍니다.

`package.json`

```js
"proxy": "http://localhost:8000"
```

자 이제 엔터를 치면 노트가 생성됨을 알수 있습니다.

크롬 개발자도구를 키고, network에서 보시면 201 생성이 뜨죠?

![Imgur](https://i.imgur.com/zeTJmsp.png)




Dnote 4 - 4. React - 노트 생성 기능 구현.

Django API를 바탕으로, 리액트에서 로그인 및 회원가입 기능을 구현해보겠습니다.

이제 첫 화면에서는 오류가 나겠죠? 401 Unauthorized가 나옵니다.
권한 설정을 했는데, 저희는 Header에 Authorization을 주지 않아서 그런건데요, 일단 이 오류는 무시하고 로그인 회원가입 기능을 구현하겠습니다.

다음 파일들을 생성해줍니다.

`components/auth/AuthForm/AuthForm.js`

```jsx
import React from "react";
import styles from "./AuthForm.scss";
import classNames from "classnames/bind";
import { Link } from "react-router-dom";

const cx = classNames.bind(styles);

const AuthForm = ({ kind }) => {
  return (
    <div className={cx("auth-form")}>
      <div className={cx("title")}>{kind.toUpperCase()}</div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>username</div>
        <input type="text" name="username" />
      </div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>password</div>
        <input type="password" name="password" />
      </div>
      <div className={cx("auth-button")}>{kind.toUpperCase()}</div>
      {kind === "register" ? (
        <Link to={`/auth/login`} className={cx("description")}>
          if you already have account...
        </Link>
      ) : (
        <Link to={`/auth/register`} className={cx("description")}>
          if you don't have an account...
        </Link>
      )}
    </div>
  );
};

export default AuthForm;

```


`components/auth/AuthForm/AuthForm.scss`

```css
@import "utils";

.auth-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border: 3px solid $oc-gray-6;
  border-radius: 3px;
  width: 512px;

  @include media("<medium") {
    width: 100%;
    border: none;
    top: 0%;
    transform: translate(-50%, 0%);
  }

  padding: 1rem;
  .title {
    text-align: center;

    font-size: 2rem;
    font-weight: 700;
    user-select: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .error {
    display: flex;
    justify-content: center;
    .message {
      font-size: 1.25rem;
      font-weight: 500;
      color: $oc-red-7;
    }
  }

  .line-wrapper {
    display: flex;
    flex-direction: column;

    .input-title {
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    input {
      height: 3rem;
      outline: none;
      border: 1px solid $oc-gray-6;
      border-radius: 2px;
      font-size: 1.5rem;
      padding: 0.5rem;

      font-weight: 600;
    }
  }

  .line-wrapper + .line-wrapper {
    margin-top: 1.5rem;
  }

  .auth-button {
    // height: 3rem;
    background: $oc-violet-7;

    margin-top: 2rem;
    border: 1px solid $oc-violet-7;
    border-radius: 2px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;

    text-align: center;

    color: white;
    font-weight: 600;
    font-size: 1.5rem;

    cursor: pointer;
    user-select: none;

    &:hover {
      background: $oc-violet-8;
    }

    &:active {
      background: $oc-violet-7;
    }
  }

  .description {
    padding-top: 1rem;
    padding-bottom: 0.5rem;

    display: flex;
    flex-direction: row-reverse;

    font-size: 1.2rem;
    color: $oc-blue-7;

    @include media("<medium") {
      justify-content: center;
    }
  }
}

```
`components/auth/AuthForm/index.js`

```js
export { default } from './AuthForm';
```

그리고 pages의 Auth를 손봐야합니다.

`pages/Auth.js`

```jsx
import React from "react";
import AuthForm from "components/auth/AuthForm";

const Auth = ({ match }) => {
  // App.js /:kind로 설정해둔 값입니다.
  const { kind } = match.params;
  return (
    <div>
      <AuthForm kind={kind} />
    </div>
  );
};

export default Auth;

```

이제 redux의 auth module을 생성해볼까요?

일단 다음 액션들만 처리해주겠습니다.

`modules/auth.js`

```js
const INITIALIZE_INPUT = "auth/INITIALIZE_INPUT";

const CHANGE_INPUT = "auth/CHANGE_INPUT";

export const initializeInput = () => ({
  type: INITIALIZE_INPUT
});

export const changeInput = ({ name, value }) => ({
  type: CHANGE_INPUT,
  payload: {
    name,
    value
  }
});

const initialState = {
  form: {
    username: "",
    password: ""
  }
};

export const auth = (state = initialState, action) => {
  switch (action.type) {
    case INITIALIZE_INPUT:
      return {
        ...state,
        form: {
          username: "",
          password: ""
        }
      };
    case CHANGE_INPUT:
      let newForm = state.form;
      newForm[action.payload.name] = action.payload.value;
      return {
        ...state,
        form: newForm
      };

    default:
      return state;
  }
};

```

`modules/index.js`

```js
import { notes, notesEpics } from "./notes";
import { auth } from "./auth";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes, auth });
export const rootEpics = combineEpics(
  notesEpics.addNoteEpic,
  notesEpics.getNotesEpic,
  notesEpics.updateNoteEpic,
  notesEpics.deleteNoteEpic
);

```

`containers/AuthContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import AuthForm from "components/auth/AuthForm";
import { withRouter } from "react-router-dom";
import * as authActions from "store/modules/auth";

export class AuthContainer extends Component {
  componentDidMount() {
    const { initializeInput } = this.props;
    initializeInput();
  }

  componentDidUpdate(prevProps, prevState) {
    const { initializeInput } = this.props;

    if (prevProps.kind !== this.props.kind) {
      initializeInput();
    }
  }

  handleChangeInput = ({ name, value }) => {
    const { changeInput } = this.props;
    changeInput({ name, value });
  };
  render() {
    const { kind, username, password } = this.props;
    const { handleChangeInput } = this;
    return (
      <AuthForm
        kind={kind}
        username={username}
        password={password}
        onChangeInput={handleChangeInput}
      />
    );
  }
}

const mapStateToProps = state => ({
  username: state.auth.form.username,
  password: state.auth.form.password
});

const mapDispatchToProps = dispatch => {
  return {
    initializeInput: () => {
      dispatch(authActions.initializeInput());
    },
    changeInput: ({ name, value }) => {
      dispatch(authActions.changeInput({ name, value }));
    }
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(AuthContainer)
);

```

`pages/Auth.js`

```jsx
import React from "react";
import AuthContainer from "containers/AuthContainer";

const Auth = ({ match }) => {
  const { kind } = match.params;
  return (
    <div>
      <AuthContainer kind={kind} />
    </div>
  );
};

export default Auth;

```

`components/auth/AuthForm/AuthForm.js`

```jsx
import React from "react";
import styles from "./AuthForm.scss";
import classNames from "classnames/bind";
import { Link } from "react-router-dom";

const cx = classNames.bind(styles);

const AuthForm = ({ kind, onChangeInput, username, password }) => {
  const handleChange = e => {
    const { name, value } = e.target;
    onChangeInput({ name, value });
  };
  return (
    <div className={cx("auth-form")}>
      <div className={cx("title")}>{kind.toUpperCase()}</div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>username</div>
        <input
          type="text"
          name="username"
          value={username}
          onChange={handleChange}
        />
      </div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>password</div>
        <input
          type="password"
          name="password"
          value={password}
          onChange={handleChange}
        />
      </div>
      <div className={cx("auth-button")}>{kind.toUpperCase()}</div>
      {kind === "register" ? (
        <Link to={`/auth/login`} className={cx("description")}>
          if you already have account...
        </Link>
      ) : (
        <Link to={`/auth/register`} className={cx("description")}>
          if you don't have an account...
        </Link>
      )}
    </div>
  );
};

export default AuthForm;

```

이렇게 까지하면, 폼인풋들을 상태관리 할수 있고, 레지스터와 로그인 페이지간 이동할때, 모든 인풋밸류가 초기화 됩니다.

그렇다면 이제 API통신을 통해 login 과 register기능을 구현해보겠습니다.

그리고 그에따른 에러처리를 해보도록 하죠.

`modules/auth.js`

```js
....

const REGISTER = "auth/REGISTER";
const REGISTER_SUCCESS = "auth/REGISTER_SUCCESS";
const REGISTER_FAILURE = "auth/REGISTER_FAILURE";

const LOGIN = "auth/LOGIN";
const LOGIN_SUCCESS = "auth/LOGIN_SUCCESS";
const LOGIN_FAILURE = "auth/LOGIN_FAILURE";

const INITIALIZE_ERROR = "auth/INITIALIZE_ERROR";
...

export const register = () => ({
  type: REGISTER
});

export const registerSuccess = ({ user, token }) => ({
  type: REGISTER_SUCCESS,
  payload: {
    user,
    token
  }
});

export const registerFailure = error => ({
  type: REGISTER_FAILURE,
  payload: {
    error
  }
});

export const login = () => ({
  type: LOGIN
});

export const loginSuccess = ({ user, token }) => ({
  type: LOGIN_SUCCESS,
  payload: {
    user,
    token
  }
});

export const loginFailure = error => ({
  type: LOGIN_FAILURE,
  payload: {
    error
  }
});


export const initializeError = () => ({
  type: INITIALIZE_ERROR
});

...

const registerEpic = (action$, state$) => {
  return action$.pipe(
    ofType(REGISTER),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const { username, password } = state.auth.form;
      return ajax.post(`/api/auth/register/`, { username, password }).pipe(
        map(response => {
          const { user, token } = response.response;
          return registerSuccess({ user, token });
        }),
        catchError(error =>
          of({
            type: REGISTER_FAILURE,
            payload: error,
            error: true
          })
        )
      );
    })
  );
};

const loginEpic = (action$, state$) => {
  return action$.pipe(
    ofType(LOGIN),
    withLatestFrom(state$),
    mergeMap(([action, state]) => {
      const { username, password } = state.auth.form;
      return ajax.post(`/api/auth/login/`, { username, password }).pipe(
        map(response => {
          const { user, token } = response.response;
          return loginSuccess({ user, token });
        }),
        catchError(error =>
          of({
            type: LOGIN_FAILURE,
            payload: error,
            error: true
          })
        )
      );
    })
  );
};

...
const initialState = {
  form: {
    username: "",
    password: ""
  },
  error: {
    triggered: false,
    message: ""
  },
  logged: false,
  userInfo: {
    id: null,
    username: "",
    token: null
  }
};

export const auth = (state = initialState, action) => {
  switch (action.type) {
    case INITIALIZE_INPUT:
      return {
        ...state,
        form: {
          username: "",
          password: ""
        }
      };
    case CHANGE_INPUT:
      let newForm = state.form;
      newForm[action.payload.name] = action.payload.value;
      return {
        ...state,
        form: newForm
      };
    case INITIALIZE_ERROR:
      return {
        ...state,
        error: {
          triggered: false,
          message: ""
        }
      };
    case REGISTER_SUCCESS:
      return {
        ...state,
        logged: true,
        userInfo: {
          id: action.payload.user.id,
          username: action.payload.user.username,
          token: action.payload.token
        }
      };
    case REGISTER_FAILURE:
      switch (action.payload.status) {
        case 400:
          return {
            ...state,
            error: {
              triggered: true,
              message: "WRONG USERNAME OR PASSWORD"
            }
          };
        case 500:
          return {
            ...state,
            error: {
              triggered: true,
              message: "TOO SHORT USERNAME OR PASSWORD"
            }
          };
        default:
          return {
            ...state
          };
      }
    case LOGIN_SUCCESS:
      return {
        ...state,
        logged: true,
        userInfo: {
          id: action.payload.user.id,
          username: action.payload.user.username,
          token: action.payload.token
        }
      };
    case LOGIN_FAILURE:
      switch (action.payload.status) {
        case 400:
          return {
            ...state,
            error: {
              triggered: true,
              message: "WRONG USERNAME OR PASSWORD"
            }
          };
        case 500:
          return {
            ...state,
            error: {
              triggered: true,
              message: "PLEASE TRY AGAIN"
            }
          };
        default:
          return {
            ...state
          };
      }

    default:
      return state;
  }
};


```

`modules/index.js`

```js
import { notes, notesEpics } from "./notes";
import { auth, authEpics } from "./auth";
import { combineReducers } from "redux";
import { combineEpics } from "redux-observable";

export const rootReducers = combineReducers({ notes, auth });
export const rootEpics = combineEpics(
  notesEpics.addNoteEpic,
  notesEpics.getNotesEpic,
  notesEpics.updateNoteEpic,
  notesEpics.deleteNoteEpic,
  authEpics.loginEpic,
  authEpics.registerEpic
);

```

`containers/AuthContainer.js`

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import AuthForm from "components/auth/AuthForm";
import { withRouter } from "react-router-dom";
import * as authActions from "store/modules/auth";

export class AuthContainer extends Component {
  componentDidMount() {
    this.initialize();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.kind !== this.props.kind) {
      this.initialize();
    }
  }

  initialize = () => {
    const { initializeInput, initializeError } = this.props;
    initializeError();
    initializeInput();
  };

  handleChangeInput = ({ name, value }) => {
    const { changeInput } = this.props;
    changeInput({ name, value });
  };

  handleLogin = () => {
    const { login } = this.props;
    login();
  };

  handleRegister = () => {
    const { register } = this.props;
    register();
  };
  render() {
    const { kind, username, password, error } = this.props;
    const { handleChangeInput, handleLogin, handleRegister } = this;
    return (
      <AuthForm
        kind={kind}
        username={username}
        password={password}
        onChangeInput={handleChangeInput}
        onLogin={handleLogin}
        onRegister={handleRegister}
        error={error}
      />
    );
  }
}

const mapStateToProps = state => ({
  username: state.auth.form.username,
  password: state.auth.form.password,
  userInfo: state.auth.userInfo,
  logged: state.auth.logged,
  error: state.auth.error
});

const mapDispatchToProps = dispatch => {
  return {
    initializeInput: () => {
      dispatch(authActions.initializeInput());
    },
    changeInput: ({ name, value }) => {
      dispatch(authActions.changeInput({ name, value }));
    },
    initializeError: () => {
      dispatch(authActions.initializeError());
    },
    register: () => {
      dispatch(authActions.register());
    },
    login: () => {
      dispatch(authActions.login());
    }
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(AuthContainer)
);


```

`components/auth/AuthForm/AuthForm.js`

```jsx
import React from "react";
import styles from "./AuthForm.scss";
import classNames from "classnames/bind";
import { Link } from "react-router-dom";

const cx = classNames.bind(styles);

const AuthForm = ({
  kind,
  onChangeInput,
  username,
  password,
  onLogin,
  onRegister,
  error
}) => {
  const handleChange = e => {
    const { name, value } = e.target;
    onChangeInput({ name, value });
  };

  const handleKeyPress = e => {
    if (e.key === "Enter") {
      switch (kind) {
        case "register":
          onRegister();
          return;
        case "login":
          onLogin();
          return;
        default:
          return;
      }
    }
  };
  return (
    <div className={cx("auth-form")}>
      <div className={cx("title")}>{kind.toUpperCase()}</div>
      <div className={cx("error")}>
        {error.triggered && (
          <div className={cx("message")}>{error.message}</div>
        )}
      </div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>username</div>
        <input
          type="text"
          name="username"
          value={username}
          onChange={handleChange}
          onKeyPress={handleKeyPress}
        />
      </div>
      <div className={cx("line-wrapper")}>
        <div className={cx("input-title")}>password</div>
        <input
          type="password"
          name="password"
          value={password}
          onChange={handleChange}
          onKeyPress={handleKeyPress}
        />
      </div>
      {kind === "register" ? (
        <div className={cx("auth-button")} onClick={onRegister}>
          {kind.toUpperCase()}
        </div>
      ) : (
        <div className={cx("auth-button")} onClick={onLogin}>
          {kind.toUpperCase()}
        </div>
      )}
      {kind === "register" ? (
        <Link to={`/auth/login`} className={cx("description")}>
          if you already have account...
        </Link>
      ) : (
        <Link to={`/auth/register`} className={cx("description")}>
          if you don't have an account...
        </Link>
      )}
    </div>
  );
};

export default AuthForm;


```


이렇게 되면 API 통신이 완료됩니다. 그에따른 오류처리도 됩니다.

다음 에서는 로그인을 유지하고, 로그인이 되지 않았을때에는, 로그인 페이지로 보내고, 로그아웃 기능을 구현해보겠습니다.





Dnote 5 - 2. React - 로그인 및 회원가입 기능 구현.

기본적인 스타일과 구조를 잡았으니, 이제 리덕스를 설정해야겠습니다.

리덕스는 글로벌하게 상태관리를 할수있게 도와주는 도구라고 생각하는데요, 딱히 복잡하지 않은 프로젝트에서는 굳이 리덕스를 사용하지 않아도 된다고 생각합니다. 허나 저는 API통신을 할 것이고, 평소에 리덕스를 사용해왔기 때문에, 리덕스 스토어에서 전체 상태를 관리할 예정입니다.

또한 이 튜토리얼의 리덕스는 redux-observable을 사용합니다. rxjs의 개념이 도입된 라이브러리 인데요, rxjs의 개념을 가지고 계신 분들이라면 충분히 따라오실수 있고, 만약 아니라도, API통신에만 rxjs가 사용되므로, 각자 궁금하신 부분들은 https://redux-observable.js.org/ 이 페이지에서 학습하셔도 금방 따라오실수 있을거라고 생각합니다.

자 그럼 이제부터 리덕스 설정을 해보겠습니다.

store폴더 밑에 modules 폴더를 생성해주세요.

그리고 일단 redux-devtools로 띄워봐야 하니, 간단하게 modules 밑에 ping.js라는 파일을 생성해서 스테이트를 생성해보겠습니다.

그전에 리덕스 설정에 필요한 라이브러리들을 다운로드 해줘야합니다.

```bash
$ yarn add redux react-redux redux-observable rxjs rxjs-compat
```

`store/modules/ping.js`

```js
const PING = "PING";

const initialState = {
  ping: "ping"
};

export const ping = (state = initialState, action) => {
  switch (action.type) {
    case PING:
      return {
        ping: "pong"
      };
    default:
      return state;
  }
};

```

그리고 modules밑에 index.js를 생성해주세요. 다음과 같이 작성해줍니다.

`modules/index.js`

```js
import { ping } from "./ping";
import { combineReducers } from "redux";

export const rootReducers = combineReducers({ ping });

```

다음으로 store밑에 configure.js 를 생성해주세요.

`store/configure.js`

```js
import { createStore, applyMiddleware, compose } from "redux";
import { createEpicMiddleware } from "redux-observable";

import { rootReducers } from "./modules";

// 크롬 데브 툴스 설정입니다.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const epicMiddleware = createEpicMiddleware();

export default createStore(
  rootReducers,
  composeEnhancers(applyMiddleware(epicMiddleware))
);

```

그리고 Root.js에서 다음과 같이 코딩해줍니다.

`Root.js`

```jsx
import React from "react";
import App from "components/App";
import { Provider } from "react-redux";
import store from "store/configure";

const Root = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
};
export default Root;
```

크롬 devtools에서 표식이 뜨면서 개발자 도구를 눌러서 보면 다음과 같이 뜨나요?? * 혹시 크롬 데브툴스가 없다면, redux-devtools로 검색하셔서 웹스토어 추가 해주시면 됩니다. *

![Imgur](https://i.imgur.com/EbTU21N.png)

기본적인 리덕스 설정이 끝났습니다!






Dnote 3 - 3. React - 개발 환경 설정 및 구조 잡기. (Redux 설정하기)

지난 튜토리얼에서 만든 API를 바탕으로 통신하여, 리액트에서 CRUD를 실시해보겠습니다.

일단 처음에 react-router-dom을 사용하여 클라이언트쪽 라우팅을 해보겠습니다.

```bash
$ yarn add react-router-dom
```

`Root.js`

```jsx
import React from "react";
import App from "components/App";
import { Provider } from "react-redux";
import store from "store/configure";
import { BrowserRouter } from "react-router-dom";

const Root = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  );
};

export default Root;

```


Root.js를 다음과 같이 BrowserRouter로 감싸줍니다.

그런 뒤 라우팅에 쓰이게 될 pages들을 생성하겠습니다.

pages밑에 다음과 같은 파일들을 생성해주세요.

`Main.js`: 노트들이 리스트되어 나타날 페이지

```jsx
import React from "react";

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

export default Main;

```

`Auth.js`: 로그인 / 회원가입 페이지

```jsx
import React from "react";

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

export default Auth;

```

`NotFound.js`: 라우팅 되지 않은 곳에서 나타날 페이지

```jsx
import React from "react";

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

export default NotFound;

```

그런뒤 이 페이지들을 한곳에 모아줄 index.js를 생성합니다.

`pages/index.js`

```js
export { default as Main } from "./Main";
export { default as Auth } from "./Auth";
export { default as NotFound } from "./NotFound";
```

App.js에서 페이지들을 라우팅 해줍니다.

`App.js`

```jsx
import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { Main, Auth, NotFound } from "pages";

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/" exact={true} component={Main} />
          <Route path="/auth/:kind" exact={true} component={Auth} />
          <Route component={NotFound} />
        </Switch>
      </div>
    );
  }
}

export default App;
```

라우팅이 끝났으면, 이제 다음과 같은 주소들이 작동할것입니다.

http://localhost:3000/ -> Main
http://localhost:3000/auth/login -> Auth
http://localhost:3000/auth/register -> Auth
http://localhost:3000/alskjdalskdj -> NotFound

그럼 이제 라우팅은 되었으니, 실제 UI들을 조금씩 만들어보겠습니다.

메인 스트럭쳐를 뜻하는 structure 폴더를 components 밑에 생성해줍니다.

그 뒤 Header를 만들어주겠습니다.

![Imgur](https://i.imgur.com/qVw6aCd.png)

다음과 같은 구조를 가집니다! 
아 그리고 로그아웃 버튼을 만들기 위해 react-icons를 인스톨 해줍니다.
 또한, color제공 라이브러리인 open-color와 미디어 쿼리를 좀더 자유롭게 사용하게 해주는 include-media도 다운로드 해주겠습니다. 
 classnames는 여러개의 클래스를 한번에 사용하게도 하고, scss와 bind하여 굳이 styles라는 이름을 사용하지 않아도 되게하는 라이브러리 입니다.

```bash
$ yarn add react-icons open-color include-media classnames
```

그리고 이 라이브러리들을 모든 scss에서 적용할수 있게 해보겠습니다.

`styles/utils.scss`

```css
@import "~open-color/open-color";
@import "~include-media/dist/include-media";

$breakpoints: (
  small: 320px,
  medium: 768px,
  large: 1024px,
  wide: 1400px
);

```
앞으로 모든 scss파일에서 임포트 하게될 utils.scss를 생성했습니다.



`Header.js`

```jsx
import React from "react";
import styles from "./Header.scss";
import classNames from "classnames/bind";
import { Link } from "react-router-dom";
import { MdLock } from "react-icons/md";

const cx = classNames.bind(styles);

const Header = ({ onLogout }) => (
  <div className={cx("header")}>
    <Link to={"/"} className={cx("logo")}>
      D-Note
    </Link>
    <div className={cx("logout")}>
      <MdLock onClick={onLogout} />
    </div>
  </div>
);

export default Header;
```

`Header.scss`

```css
@import "utils";

.header {
  background: $oc-violet-6;
  height: 5rem;

  display: flex;
  align-items: center;

  .logo {
    color: white;

    font-weight: 800;
    font-size: 1.5rem;

    cursor: pointer;

    margin-left: 1rem;

    user-select: none;
  }

  .logout {
    margin-left: auto;
    margin-right: 1rem;
    color: white;

    font-weight: 800;
    font-size: 2rem;

    cursor: pointer;
  }
}
```

`index.js`

```js
export { default } from './Header';
```

그럼 이제 이 헤더를 반영시켜볼까요?

`pages/Main.js`

```jsx
import React from "react";
import Header from "components/structure/Header";

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

export default Main;
```

잘 나타나나요?

근데 이런식으로 매 페이지에서 Header를 import 하는건 비효율 적이므로, 페이지 구조를 만들어주는 컴포넌트를 하나 생성하겠습니다.

`components/structure/MainStructure.js`

```jsx
import React from "react";
import styles from "./MainStructure.scss";
import classNames from "classnames/bind";
import Header from "components/structure/Header";

const cx = classNames.bind(styles);

const MainStructure = ({ children }) => (
  <div>
    <Header />
    <main>{children}</main>
  </div>
);

export default MainStructure;
```

`components/structure/index.js`

```jsx
export { default } from './MainStructure';
```

그리고 이 MainStructure를 Main 페이지에 반영해줍니다.

`pages/Main.js`

```jsx
import React from "react";
import MainStructure from "components/structure/MainStructure";

const Main = () => {
  return <MainStructure>Main Page</MainStructure>;
};

export default Main;
```

다음에는 노트를 입력하는 노트 입력 폼을 만들어보겠습니다.









Dnote 4 - 2. React - 페이지 구조 생성.

이제 웹통신을 할 장고 API를 설정해보겠습니다.

django쪽 디렉터리에서 앱을 하나 생성해줍니다.

```bash
$ (venv) python manage.py startapp notes
```

`settings.py`
```python
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # notes 앱 추가
    'notes',
]
```

일단, REST Framework를 사용할 것이기 때문에 먼저 인스톨부터 하죠.

```bash
$ (venv) pip install djangorestframework
```

그런뒤 마찬가지로 INSTALLED_APPS 에 추가합니다.

```python
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # notes 앱 추가
    'notes',
    # rest framework 추가
    'rest_framework',
]
```

저희가 notes 앱 에서 쓸 파일들은 다음과 같습니다.

`urls.py`: API 라우팅

`models.py`: 모델

`serializers.py`: 모델을 참조하여 serializing

`views.py`: 실제 일을 하는 곳. serializer 참조.

일단 models.py 에서 모델을 생성해야합니다.

`notes/models.py`

```python
from django.db import models

class Notes(models.Model):
    text = models.CharField(max_length=255)
    created_at = models.DateTimeField(auto_now=False, auto_now_add=True)

    def __str__(self):
        return self.text

```

한줄 노트가 들어갈 text필드와 만들어진 날짜를 구분하는 created_at필드를 가진 Notes모델을 생성했습니다.

항상 모델을 등록한후에는 migration을 해주어야 합니다.

```bash
$ (venv) python manage.py makemigrations
$ (venv) python manage.py migrate
```

serializer를 생성하겠습니다.

`notes/serializers.py`

```python
from rest_framework import serializers
from .models import Notes


class NoteSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notes
        fields = ("id", "text")
```

다음과 같이 Note 모델을 시리얼라이징 해주는 시리얼라이저를 생성했습니다.

그리고 views.py에서 ViewSet을 하나 만든 후 urls.py에서 라우팅 해주겠습니다.

`notes/views.py`

```python
from rest_framework import viewsets
from .serializers import NoteSerializer
from .models import Notes


class NoteViewSet(viewsets.ModelViewSet):
    serializer_class = NoteSerializer

    def get_queryset(self):
        return Notes.objects.all().order_by("-created_at")

    def perform_create(self, serializer):
        serializer.save()
```

`notes/urls.py`

```python
from django.conf.urls import url
from .views import NoteViewSet

note_list = NoteViewSet.as_view({"get": "list", "post": "create"})

note_detail = NoteViewSet.as_view(
    {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
)


urlpatterns = [
    url("^notes/$", note_list, name="note-list"),
    url("^notes/(?P<pk>[0-9]+)/$", note_detail, name="note-detail"),
]
```

그 다음 root앱의 urls.py에서 notes의 urls.py를 반영해줍니다.

`urls.py`

```python
from django.contrib import admin
from django.urls import path

from notes import urls
from django.conf.urls import include, url

urlpatterns = [
	path("admin/", admin.site.urls), 
    url(r"^api/", include(urls))
]
```

이제 다음의 url들이 통신이 될것입니다.

http://localhost:8000/api/notes/ (GET - Note List)
http://localhost:8000/api/notes/ (POST - Create Note)
http://localhost:8000/api/notes/{id}/ (GET - Get Single Note by id)
http://localhost:8000/api/notes/{id}/ (PATCH - update partial)
http://localhost:8000/api/notes/{id}/ (DELETE - destroy a single note by id)


일단 권한 설정을 하지 않았습니다. 
지금까지 만들어놓은 API를 가지고 react에서 반영해보겠습니다.










Dnote 4 - 1. Django - CRUD API 작업

자 redux설정에 앞서 잠시 기본 적인 sass 스타일의 틀을 잡고 가보겠습니다.

`styles/index.scss`

```css
@import url("//fonts.googleapis.com/css?family=Do+Hyeon:400");

body {
  margin: 0;
  box-sizing: border-box;
  font-family: "Do Hyeon", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: inherit;
}

a {
  text-decoration: inherit;
  color: inherit;
}

```

설명을 드리자면 도현체를 사용하기 위해서 도현체를 import시키고, 전체적인 body태그의 스타일을 해준것입니다. 
또한 a 태그로 링크를 걸때, 자동적으로 나오는 못생긴 스타일들을 없애주었습니다.

이제 index.js에 이 스타일을 불러와야 하는데, 불러오기 전에 경로를 비교하여 불러오기 귀찮으므로, .env파일을 생성하여 NODE_PATH를 src로 정해줍니다.

이렇게 하면 src를 기준으로 불러올수 있습니다.

`src/.env`

```js
NODE_PATH=src
```

그런 뒤 앱을 한번 다시 실행시켜주세요.

이제 index.js로 돌아와서 스타일을 임포트한후 확인해보겠습니다.

`src/index.js`

```js
import React from "react";
import ReactDOM from "react-dom";
// 기존에 있던 App을 지웠습니다.
import "styles/index.scss";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(<div>도현체</div>, document.getElementById("root"));
registerServiceWorker();

```

도현체가 나타나서 잘뜨나요?

그렇다면 성공입니다. 이제는 기본적인 개발 구조를 잡아보겠습니다.

일단 원래 있던 파일들을 조금 삭제할 건데요, 다음 파일들을 일단 삭제하겠습니다.

`src/App.css`
`src/App.test.js`
`src/index.css`
`src/logo.svg`

그리고 src 밑에 다음과 같은 폴더들을 생성해줍니다.

`containers`: 리액트 컨테이너 파일들 집합
`components`: 리액트 컴포넌트 파일들 집합
`pages`: Routing에서 사용될 page 파일들 집합
`store`: redux모듈들과 configure파일들 집합

그리고 원래 있던 App.js를 components로 옮겨주고, src밑에 나중에 리덕스 스토어를 반영할 Root.js를 생성해줍니다.

App.js는 다음과 같이 코드를 비워줍니다.

`components/App.js`

```jsx
import React, { Component } from "react";

class App extends Component {
  render() {
    return <div>App.js</div>;
  }
}

export default App;

```

`src/Root.js`

```jsx
import React from "react";
import App from "components/App";

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

export default Root;

```



그리고 이 Root.js를 index에서 렌더시켜줍니다.

`src/index.js`

```jsx
import React from "react";
import ReactDOM from "react-dom";
import Root from "./Root";
import "styles/index.scss";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(<Root />, document.getElementById("root"));
registerServiceWorker();
```

잘 나타나나요? 그렇다면 성공입니다.

다음에서는 redux설정을 통해서 redux-devtools (크롬 웹스토어) 로 반영해보겠습니다.




Dnote 3 - 2. React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)

Dnote 4 - 6. React - 노트 리스트 구현 및 수정 / 삭제 기능 구현.

> # 각 프로젝트 생성

```bash
# 프로젝트 워크스페이스로 이동해주세요.
# 큰 집 안에 backend와 frontend가 있는 구조입니다.

# 루트 폴더를 생성합니다.
$ mkdir dnote
$ cd dnote

# React 프로젝트를 생성합니다.

$ create-react-app frontend
...
...
...
# react 앱 생성 완료!

# django 프로젝트가 위치할 디렉터리를 생성합니다.
$ mkdir backend
$ cd backend
```

> # Django - Virtual Env 생성

```bash
# 저는 python3를 쓰기 때문에 
# 다음과 같이 virtual env를 생성해주겠습니다.
# virtualenv 가 없다면 pip install virtualenv 로 설치 하여 주세요
$ virtualenv --python=python3 venv

# 마지막 venv는 virtual env 폴더의 이름이므로 
# 원하는 이름으로 해주어도 무방합니다.
```

> # Django - Virtual Env 실행

```bash
# 장고 앱 개발에서는 항상 virtual env가 사용됩니다.
# 따라서 개발시 제일 처음으로 venv를 실행해주세요!

# mac
$ source venv/bin/activate

# windows
$ venv\Scripts\activate.bat

# venv환경에서 탈출하려면 deactivate 명령어를 치시면 됩니다.

# venv가 액티베잇 되었으면 터미널 앞쪽에 (venv)가 붙게 됩니다.
```

> # django 설치 / project 생성

```bash
$ (venv) pip install django
$ (venv) django-admin startproject dnote
$ (venv) cd dnote
$ (venv) ./manage.py migrate
$ (venv) ./manage.py runserver
```
http://localhost:8000 으로 들어가시면 첫화면을 보시게 될 것 입니다.

다음 글에서는 React 개발 환경 설정 및 구조를 잡아 보겠습니다. 또한 sass 및 redux등의 개발 기초작업을 해보겠습니다.








Dnote 2. React / Django 프로젝트 생성.

자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요?

```bash
$ cd frontend
# 저는 vscode를 쓰므로..
$ code ./
```
> # eject 하기

sass를 사용하려면 eject를 해서 설정파일들을 만져줘야 하므로 일단 eject부터 하겠습니다.


```bash
$ yarn eject
....
...
...
# eject completed.

# 실행 전에 바로 eject하면 오류가 나므로 다시 모듈을 다운로드 해줍니다.

$ yarn
# 혹은 npm install
# 저는 yarn을 쓰므로 앞으로는 yarn으로 진행하겠습니다.

$ yarn start
```
첫화면이 잘 뜬다면 다음으로 넘어가겠습니다.

> # sass 설정

일단 css대신 scss를 쓰려면 다음 패키지들을 다운로드 해주세요.

```bash
$ yarn add --dev node-sass sass-loader
```
그리고 `config/paths.js` 로 이동해주세요.

`config/paths.js`
```js
// config after eject: we're in ./config/
module.exports = {
  dotenv: resolveApp(".env"),
  appBuild: resolveApp("build"),
  appPublic: resolveApp("public"),
  appHtml: resolveApp("public/index.html"),
  appIndexJs: resolveApp("src/index.js"),
  appPackageJson: resolveApp("package.json"),
  appSrc: resolveApp("src"),
  yarnLockFile: resolveApp("yarn.lock"),
  testsSetup: resolveApp("src/setupTests.js"),
  appNodeModules: resolveApp("node_modules"),
  publicUrl: getPublicUrl(resolveApp("package.json")),
  servedPath: getServedPath(resolveApp("package.json")),
  // 추가해줍니다.
  styles: resolveApp("src/styles")
};
```

그런 다음 src밑에 styles폴더를 생성하여 주세요.

그 후 `config/webpack.config.dev.js` 로 이동하여 주세요.

`config/webpack.config.dev.js`
```js
{
  test: /\.css$/,
  use: [
    require.resolve("style-loader"),
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1
      }
    },
    {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: () => [
          require("postcss-flexbugs-fixes"),
          autoprefixer({
            browsers: [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })
        ]
      }
    }
  ]
},
// "file" loader makes sure those assets get served by WebpackDevServer.
```
쭉 내리다보면 위와같은 부분이 있는데, 찾는 팁을 드리자면
ctrl + f 하고 .css로 찾은뒤 첫번째로 찾아지는 부분입니다.

저 위 코드들을 쭉 복사하신후 바로 밑에 붙여넣기 해주세요.

그 뒤에 다음과 같이 설정해줍니다.

```bash
{
	# css 를 scss로 바꿔줍니다.
  test: /\.scss$/,
  use: [
    require.resolve("style-loader"),
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1
      }
    },
    {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: () => [
          require("postcss-flexbugs-fixes"),
          autoprefixer({
            browsers: [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })
        ]
      }
    },
    # 추가해줍니다.
    {
      loader: require.resolve("sass-loader"),
      options: {
        includePaths: [paths.styles]
      }
    }
  ]
},
```

`config/webpack.config.prod.js`로 이동해줍니다.

`config/webpack.config.prod.js`

```js
// 여기서도 .css 를 찾은뒤 밑으로 똑같이 복사해줍니다.

{
  // css -> scss
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve('style-loader'),
          options: {
            hmr: false,
          },
        },
        use: [
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              minimize: true,
              sourceMap: shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          // 추가해줍니다.
          {
            loader: require.resolve("sass-loader"),
            options: {
              includePaths: [paths.styles]
            }
          }
        ],
      },
      extractTextPluginOptions
    )
  ),
  // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
```

자 이제 sass에 대한 환경 설정은 모두 끝났습니다.









Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정)

> 벨로그가 오래 살아남았으면 하는 바람으로 올려보는 글.

개발을 하다보면 여러가지 피로도에 휩싸이게 된다.

일단 처음에 시작한 작업들이 흐지부지 하게 되거나, 내가 할 수 있었던것 같았던 작업들이 장벽에 부딪혔을때 등등 여러가지 요인들에 의해 작업 피로도들이 점점 나타나기 시작한다.

개발자를 업으로 삼는 사람들에게는 이 조그마한 피로도들이 쌓이기 시작하면 나비효과로 번지게 된다.

나의 경우는 학생이므로, 큰 규모의 개발을 하지도 않고, 개발이라고 해봤자, 내가하는 사이드 프로젝트들이 대부분인데, 간혹 학교에서 시험이 있다거나 프로젝트 과제가 있다거나 해서 하던 사이드 프로젝트들이 우선순위에서 밀리게 되므로써 흐지부지하게 되는 경우가 있을때 피로도들이 쌓이는 것 같다.

이럴때 나의 경우는 그냥 하던 프로젝트들은 어차피 진행할 것이므로, 크게 미련을 두지않고, 그 상황에 내가 해보고 싶었던 공부나 무언가 신선한 충격을 주는 아티클 들에 대해 살펴보는 것으로 풀기도 한다.

개발해야지 라는 수렁텅이에 빠진 뇌에 조금은 프레시한 공기를 넣어준달까...

오늘은 추석 연휴가 시작되는 (나에게는) 날이다. 월화수만 학교를 나가는 나에게는 오늘 밤부터 연휴 시작인것이다.

딱히 알바도 하지않고, 어디에 치이지 않아서 좋지만, 나름 이런 여유가 나는 시기를 그냥 보낼수는 없다고 생각한다.

항상 나를 채찍질 하지만, 뭐 그렇다고 너무 사명감을 가지고 열심히 하는것도 아니라 평소에 시간이 있어도 둘러보지 않았던 것들에 대해 둘러보려고한다.

예를들면, serverless 라던지?.. go lang이라던지... tensorflow라던지... blockchain 이라던지.. 

뭐 이것들 중에서 하나라도 둘러보기만 하더라도, 혹은 약간 맛보기만 하더라도 나중에 분명 도움이 될거라고 생각한다.

요즘 학교에 다니는 것에 대해서도 많은 회의감을 느낀다. 애초에 전문대 일뿐더러, 원래 2년제에서 3년제로 작년에 전환 했기에 이 마지막 학기가 참 나에게는 무겁기도 하고, 왜 3년제 전환했나 싶기도 하다. 근데 뭐 그 상황의 나에게는 최선의 선택을 했다고 생각하기에 크나큰 후회는 하지 않고, 어차피 후회해봤자 나에게 도움이 되는것은 없기 때문에 내가 하고싶고, 내가 열정을 가지고 있는 개발쪽에 시간을 더 투자하고 싶은 마음이고, 그러고 있는것 같다.

뭐 이런 문제들이 남들이 해결해 주는것도 아니라고 생각하고, 내가 제일 고민을 많이 털어놓는 부모님에게 약간의 상담을 받는 정도이다.

결국 살아가다 보면, 내가 열심히 하다보면, 딱히 별것 아닌 문제들이고 오히려 내가 배부른 고민을 하는게 아닌가 싶다.

어차피 한 학기 남았으니까.... 마지막까지 열심히(?) 다닐지는 모르겠지만 나에게 누를 끼쳐서는 안된다고 생각한다.

맘잡고 개발한지 1년반정도? 된것 같다. 뭐 학생때 파란만장하게 놀았기 때문에 전문대에 오게된것이고, 모든게 나의 노력 부족에 대한 결과물일 뿐더러, 오히려 지금이라도 맘잡고 하는게 나는 나에게 대견스럽다. 

개발.. 뭐 참 아리까리 하지만 지금은 나름대로 내 개발을 즐기고 있다. 더도 덜도 아니다. 그냥 개발이 좋아지기 시작했고, 앞으로도 그럴것 같다.

뭐 여러 한국의 좋은 개발자들을 보면 대부분 어릴때 (학생 시절) 부터 개발에 관심을 가진것 같다. 개발은 결국 실력이기에 몇년간의 갭 차이를 내가 바로 줄이기는 어렵겠지만.. 뭐 1년반만에 뭔가 그냥 주도적으로 개발에 많이 재미를 붙인것 자체가 타고난 개발자가 아닌 나에게는 큰 결과물이라고 생각한다.

이번 여름방학때 모 기업에 지원을 했고, 나름 사람이 많이 급했던지, 주니어 개발자인 나를 시니어 개발자를 모집하는 곳에 합격시켰다. 나는 아직 학생 신분이어서 조기취업을 선택해야 했다. 여러 고민끝에 입사를 포기하게 되었다.

그 당시에는 많은 아쉬움과 안타까움이 나에게 많았다. 입사를 포기한 이유가 학생 신분이라는 것에 국한되는것 이었기 때문이다. 내가 조기취업 한다면 할수 있었지만, 담당 교수님과 주변 여러 의견들에 대다수가 굳이 한 학기 남기고 위험하게 졸업 취소될수 있는 조기취업에 반대 하는 입장이었다. 결국 선택은 내가 했던 것이기에 남을 탓하는것은 절대 아니다.

뭐 그러나 결국 최종 목표가 취업이었고, 학교 다니는것도 지긋지긋 했기 때문에 조기취업을 하고자 마음먹고 방학에 들어섰으나, 결국 입사를 포기한 내가 무언가 바보같기도 했지만 나름 잘이겨내고 있다.

그래서 차 방안으로 요즘 대기업에 원서를 넣어보았다. 처음에 네이버 인턴 모바일 앱개발에 넣었는데, 서류에서 낙방했다. 그래서 신입 공채로 frontend개발쪽으로 넣었다. 결과는 아직 나오지 않았고, 딱히 많은 기대는 하지 않는다. 뭐 대기업이니까, 서류 합격한다고 해도 코딩 시험이 남아있고 내 주어진 상황에 최선을 다할 뿐이다.

그냥 뭐 이때까지 이런저런 얘기를 했는데, 결론은 그렇다.

나같은 학교는 재미없고, 그렇다고 취업할수도 없고, 이러한 상황, 즉 무언가 마음대로 안되는 상황에서 개발을 한다는것 자체가 피로도가 쌓인다. 처음에는 그냥 내 마음을 돌볼 결흘이 없었기에, 무작정 닥치는대로 코딩만 했는데, 요즘에 책도 보고 하다보니 내 마음을 다스리는게 코딩을 좀더 효율적으로 할수 있게 도와주더라는것을 깨닫게 되었다.

이러한 나와 비슷한 상황에서는 코딩에 대한 피로도가 쌓이는데, 이 피로도는 단순히 문제가 해결되지 않는다는 것에서 비롯된 피로도라기 보다는.. 내 주어진 상황에서 나는 이걸 하고 싶은데, 시간이 없다거나 우선순위에서 밀려난다거나 해서 흐지부지하게 되어 나타나는 피로도를 말한다.

근육 뭉칠때는 운동으로 풀듯이 그냥 뭔가 신선한 충격을 주는 개발 공부에 관심을 가지면 자연스레 풀리는것같다.

그러다보면 내가 원래 시작했던 프로젝트들에도 자연스레 손이가게 되고 귀찮지만 다시 시작 하게된다.
시작하다보면 끝을 볼수 있겠지.

다시 뭐 내 이야기로 돌아가면, 또한 생각정리를 해보자면, 지나간 여러 일들이 눈에 거슬리지 않을수는 없다고 생각한다. 뭐 나름 충격이었던 경험들도 포함되있고, 사람이란게 잊고싶은 기억도 바로 잊혀지지는 않으니까..

이런 상황에서 내 마음을 털어놓을수 있는 부모님과 여자친구가 있다는 것에 매우 감사한다.

이런 나에게 장애물들이 되는 여러 상황들을 잊으려고 노력하고, 미래를 보는것이 나에게는 최선이라고 생각하고, 끊임없이 다시 나를 채찍질 해야겠다.


> 원글 : https://killi8n.com/post/5ba23767b17fd60398c3da3e




개발에 대한 피로도를 푸는 나의 방법? 및 요즘 드는 생각들..

안녕하세요? 딱히 제가 만든 프로젝트가 대단한 것은 아니지만, 장고와 리액트로 작업을 할때 저는 처음에 삽질을 많이 했는데요, 이러한 삽질을 하며 만들어본 경험을 바탕으로 리액트와 장고로 한줄 노트앱을 만드는 과정을 공유하고자 해서 튜토리얼을 써보게 되었습니다.

https://velog.io/@killi8n/Django-React-%EB%A1%9C-%EC%B2%AB-%ED%99%94%EB%A9%B4-%EB%9D%84%EC%9B%8C%EB%B3%B4%EA%B8%B0-55jm970olw

위 링크에 들어가시면 지난 튜토리얼을 보실수 있습니다.


사실, 이번 튜토리얼은 지난 번에 썻던 Django와 React를 이용해서 첫 화면 띄워보기에 이어지는 튜토리얼 입니다. 본 아이디어는 지난 글에도 썼듯이 http://v1k45.com 에 나오는 튜토리얼입니다.

아이디어와 많은 정보들을 위 블로그에서 얻었음을 알리며, 이 튜토리얼에서는 원글을 완전히 똑같이 따라하진 않았으며, 원래 글에는 구현되있지않은 무한스크롤링도 나름 구현해 보았으니 관심이 있으신분들은 나름 도움이 되리라고 생각하며, 글을 쓰도록 하겠습니다.

이번에는 장고 서버로 리액트를 띄우는 과정을 가장 마지막에 해보도록 하고, 일단 React Dev모드에서 Backend(Django)와 통신하고, 모든 기능들을 추가 시킨 후 build하여 8000번에 띄워보도록 해보겠습니다!

Redux를 사용할 예정인데, Redux는 rxjs를 활용한 redux-observable을 API통신에만 사용하여 구현해볼 예정입니다!
(나머지 상태관리는 redux를 통해 이루어지지만, rxjs를 이용하지는 않았습니다.)

> # 개요
1. [소개](http://www.google.co.kr)
2. [React / Django 프로젝트 생성](https://killi8n.com/post/5ba3ab51b17fd60398c3da40)
3. 
	1. [React - 개발 환경 설정 및 구조 잡기.(sass 설정)](https://killi8n.com/post/5ba3ab6eb17fd60398c3da41)
    2. [React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)](https://killi8n.com/post/5ba47cdcb17fd60398c3da42)
    3. [React - 개발 환경 설정 및 구조 잡기. (Redux 설정하기)](https://killi8n.com/post/5ba48178b17fd60398c3da43)
4. 
	1. [Django - CRUD API 작업](https://killi8n.com/post/5ba4e776b17fd60398c3da44)
    2. [React - 페이지 구조 생성](https://killi8n.com/post/5ba4ee30b17fd60398c3da45)
    3. [React - 입력 폼 만들고 상태 관리](https://killi8n.com/post/5ba4f258b17fd60398c3da46)
    4. [React - 노트 생성 기능 구현](https://killi8n.com/post/5ba4f70fb17fd60398c3da47)
    5. [React - 노트 생성 시 에러 처리](https://killi8n.com/post/5ba4fb13b17fd60398c3da48)
    6. [React - 노트 리스트 구현 및 수정 / 삭제 기능 구현](https://killi8n.com/post/5ba65f62be54be359e528453)
5. 
	1. [Django - 권한 설정 및 로그인 / 회원가입 구현](https://killi8n.com/post/5ba66554be54be359e528454)
    2. [React - 로그인 및 회원가입 기능 구현](https://killi8n.com/post/5ba67282be54be359e528456)
    3. [React - 로그인 유지 및 로그아웃 기능 구현](https://killi8n.com/post/5ba7366cbe54be359e528457)
6. 
	1. [React - 무한 스크롤링 기능 구현](https://killi8n.com/post/5ba7384bbe54be359e528458)
7. [React - 404페이지 완성 밑 빌드된 리액트 띄우기](https://killi8n.com/post/5ba759e8be54be359e528459)

# Github Repo
## https://github.com/yungblud/d-note

> # 프로젝트 미리보기

일단 무엇을 하려는지는 알아야겠죠??

input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱이며, 스크린샷을 첨부하도록 하겠습니다.

## 그냥 화면..

![Imgur](https://i.imgur.com/yusIEhg.png)

## 무한 스크롤링 화면..


![Imgur](https://i.imgur.com/plSZf0y.png)


## 클릭하여 수정하기 화면..


![Imgur](https://i.imgur.com/DpUiPv5.png)

> ## 로그인 / 회원가입 화면..

![Imgur](https://i.imgur.com/JvbJJwE.png)


![Imgur](https://i.imgur.com/fBLLxz1.png)

그렇다면 이제 본격적으로 코딩을 해볼까요?

다음글에서 계속됩니다...





Dnote 1. 소개

> 이곳에 쓰인 모든 글은 http://v1k45.com/blog 의 http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ 에 쓰여진 대로 진행함을 알립니다.

> 또한 이 글의 원본은 https://killi8n.com 에 있음을 알립니다! (블로그 홍보는 안 
비밀...)

이번에 올릴 글은 장고와 리액트로 dev 모드와 production 모드로 화면 띄워보기 입니다. 일단 구조는 Root 앱 밑에 Frontend(React) , Backend(Django) 두 폴더가 있는 구조 입니다.

# 프로젝트 생성 하기

```bash
mkdir Deact
# make react project directory from cra
create-react-app deact-frontend

# django project
mkdir deact-backend

cd deact-backend

# make virtual env
virtualenv --python=python3 venv

# activate virtual env
source venv/bin/activate

# install django
pip install django

django-admin startproject deact

cd deact
python manage.py migrate
python manage.py runserver

```

자 그리고 이제 react directory로 와서 eject를 시켜주세요.

```bash
yarn eject
```

# React와 Django 통합하기

다시 django 디렉토리로 와서 다음 명령어로 인스톨 해줍니다.

```bash
pip install django-webpack-loader
```

그 다음에 settings.py에서 INSTALLED_APPS 에 'webpack_loader'를 추가해줍니다. 그리고 webpack_loader에 관한 설정과 저희의 리액트 앱을 보여줄 template에 관한 설정도 추가해줍니다.

> settings.py

```python
...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader',
]

...

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates"),],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

...

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': 'bundles/',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.dev.json'),
        }
}

```

그리고 templates 디렉토리를 장고 프로젝트의 Root디렉토리 밑에 만든후, index.html을 추가합니다.

> templates/index.html

```html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Deact</title>
</head>

<body>
    <div id="root">
    </div>
    {% render_bundle 'main' %}
</body>

</html>
```

그리고 urls.py에 해당 템플릿 뷰를 라우팅 해줍니다.

> urls.py

```python
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name="index.html")),
]

```


이제 localhost:8000 으로 접속하면, 다음과 같이 오류가 날것입니다!
리액트 프로젝트에서 webpack loader설정을 안해서 나는 당연한 오류입니다.

![Imgur](https://i.imgur.com/CMeIfq5.png)

이제 리액트로 넘어와서 다시 설정을 해줘야 합니다.


```bash
# webpack bundle tracker 설치
yarn add --dev webpack-bundle-tracker
```

> config/path.js

```js
module.exports = {
  dotenv: resolveApp(".env"),
  appBuild: resolveApp("build"),
  appPublic: resolveApp("public"),
  appHtml: resolveApp("public/index.html"),
  appIndexJs: resolveApp("src/index.js"),
  appPackageJson: resolveApp("package.json"),
  appSrc: resolveApp("src"),
  yarnLockFile: resolveApp("yarn.lock"),
  testsSetup: resolveApp("src/setupTests.js"),
  appNodeModules: resolveApp("node_modules"),
  publicUrl: getPublicUrl(resolveApp("package.json")),
  servedPath: getServedPath(resolveApp("package.json")),
  // 추가 해줍니다.
  statsRoot: resolveApp("../deact-backend/deact")
};
```

> config/webpack.config.dev.js

```js
// bundleTracker를 import 해 줍니다.
const BundleTracker = require('webpack-bundle-tracker');
// publicPath와 publicUrl을 다음과 같이 변경해줍니다.
const publicPath = 'http://localhost:3000/';
const publicUrl = 'http://localhost:3000/';

// entry 부분을 아래와 같이 변경해줍니다.
entry: [
    require.resolve("./polyfills"),
    require.resolve("webpack-dev-server/client") + "?http://localhost:3000",
    require.resolve("webpack/hot/dev-server"),
    require.resolve("react-dev-utils/webpackHotDevClient"),
    paths.appIndexJs
],
  
// 가장 아래의 plugins 쪽에 다음을 추가해줍니다. 
plugins: [
	...
  	new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
]

```



> config/webpackDevServer.config.js

```js
// host 밑에 다음을 추가해줍니다.
host: host,
headers: {
  'Access-Control-Allow-Origin': '*'
},
```

자 이제 다시 yarn start로 시작 한후, localhost:8000으로 접속하면 첫 화면이 뜰것입니다.

여기까지 Dev모드의 React를 띄우는 것을 알아 보았는데요, 그럼 이번에는 build된 React를 띄우는 Prod 모드를 알아봅시다.

루트 프로젝트 아래의 deact 앱 아래에 production_settings.py를 다음과 같이 생성해줍니다.

> deact/deact/production_settings.py

```python 
from .settings import *

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "assets"),
]

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': 'bundles/',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.prod.json'),
        }
}
```
그 다음에 templates 디렉토리와 같은 위치에 assets/bundles 디렉토리를 차례로 생성해줍니다. 나중에 리액트앱이 빌드 될때 파일이 이곳으로 모이게 됩니다.

그리고 다시 리액트의 config/paths.js 에서 appBuild를 아까 만든 assets/bundles 경로로 설정해줍니다.

> config/paths.js

```js
module.exports = {
  dotenv: resolveApp(".env"),
  // 변경 할 부분입니다. 
  appBuild: resolveApp("../deact-backend/deact/assets/bundles"),
  appPublic: resolveApp("public"),
  appHtml: resolveApp("public/index.html"),
  appIndexJs: resolveApp("src/index.js"),
  appPackageJson: resolveApp("package.json"),
  appSrc: resolveApp("src"),
  yarnLockFile: resolveApp("yarn.lock"),
  testsSetup: resolveApp("src/setupTests.js"),
  appNodeModules: resolveApp("node_modules"),
  publicUrl: getPublicUrl(resolveApp("package.json")),
  servedPath: getServedPath(resolveApp("package.json")),
  statsRoot: resolveApp("../deact-backend/deact")
};

```

그리고 config/webpack.config.prod.js 에서 다음과 같은 작업들을 해야합니다.

> config/webpack.config.prod.js

```js
// Bundle Tracker를  import해줍니다(상단)
const BundleTracker = require('webpack-bundle-tracker');

// 기존의 publicPath를 다음과 같이 바꿔줍니다.
const publicPath = "/static/bundles/";
// 기존의 cssFilename을 다음과 같이 변경해줍니다. (앞의 static/ 을 없애줍니다.)
const cssFilename = 'css/[name].[contenthash:8].css';

// 약 67 번째 라인에 있는 경로도 모두 static을 제거 해줍니다.
...
output: {
  ...
  
  filename: "js/[name].[chunkhash:8].js",
  chunkFilename: "js/[name].[chunkhash:8].chunk.js",
  
  ...
}
  
// 약 140번째 라인의 경로도 static을 제거해줍니다.
  
{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve("url-loader"),
    options: {
      limit: 10000,
      name: "media/[name].[hash:8].[ext]"
    }
},
  
  
// 약 223번째 라인의 경로도 static을 제거해줍니다.
  
options: {
      name: "media/[name].[hash:8].[ext]"
}
  
// 마지막 plugins 에 다음을 추가해줍니다.
  
plugins: [
	...
  	new BundleTracker({
      path: paths.statsRoot,
      filename: "webpack-stats.prod.json"
    })	
  	...
]
...
```
쉽게 설명을 해드리면 ctrl + f 로 static을 검색하신후, 경로로 잡히는 모든것을 삭제해 주시면 됩니다. 그 후 plugins 에 bundleTracker관련 코드를 추가해 줍니다.

그리고 리액트 쪽에서 build를 해줍니다.
```bash
yarn build
```

그 후 장고 쪽에서 다음과 같은 명령어로 production 모드를 띄워줍니다.

```bash
python manage.py runserver --settings=deact.production_settings
```

잘 뜨나요? 
여기 까지 되셨다면 production도 띄울수 있게 된것입니다!











