로그인 페이지를 만드는 과정

참고 사이트 : https://thebook.io/080203/ch13/02/04/

학습하며 알게된 리액트 지식을 정리한 글입니다.

스타일 설정

styled-components를 사용하여 스타일링을 하는 방법이 있다고 해서 이용해보기로 했다! 우선 styled-components를 설치해야 한다.

npm i styled-components

다운이 되었다면, src/lib/styles 디렉터리를 만든 다음에 palette.js라는 파일에

https://gist.github.com/velopert/fda9083ddedcbbef30bb40362f9d01c4

이곳의 코드를 복붙해준다!

Redux 개발자도구 사용하기

리덕스 개발자 도구를 사용하면, 현재 페이지 상태를 개발자 도구에서 조회할 수 있다.

예를 들어, 지금까지 어떤 액션들이 디스패치 되었는지, 그리고 액션에 따라 상태가 어떻게 변화했는지 확인 할 수 있다.

npm install --save redux-devtools-extension

출처: https://react.vlpt.us/redux/06-redux-devtools.html

Redux-saga 사용하기

리덕스 사가는 리덕스 생태계를 지탱하고 있는 다양한 미들웨어 중 핫한 미들웨어라고 한다.
비동기적 반응을 효율적으로 수행할 수 있다.

*미들웨어? 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어이다. 웹브라우저에서 데이터베이스로부터 데이터를 저장하거나 읽어올 수 있도록 중간에 존재하는 것이다.

사용방법

터미널 설치
```
npm i redux react-redux redux-saga
```
lib 폴더 안에 createRequestSaga.js 파일안에 해당 코드를 붙여줌.

import { call, put } from 'redux-saga/effects';
import { startLoading, finishLoading } from '../modules/loading';

export const createRequestActionTypes = type => {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;
  return [type, SUCCESS, FAILURE];
}; 

export default function createRequestSaga(type, request) {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;

  return function*(action) {
    yield put(startLoading(type)); // 로딩 시작
    try {
      const response = yield call(request, action.payload);
      yield put({
        type: SUCCESS,
        payload: response.data
      });
    } catch (e) {
      yield put({
        type: FAILURE,
        payload: e,
        error: true
      });
    }
    yield put(finishLoading(type)); // 로딩 끝
  };
}

코드리뷰

src 폴더 안의 파일들이 웹페이지 코딩의 핵심이라고 볼 수 있다.
components라는 폴더를 생성하여 컴포넌트들을 제작하고 우리 눈에 보이는 페이지를 제작한다.
components들 중에서도 페이지 전반에 있어서 이용되는 파일들은 common이라는 폴더를 하나 더 제작하여 담아준다.
containers라는 폴더를 생성하여 실제 핵심 event들을 담아준다. 예를 들어, 비밀번호가 일치하지 않았을 경우 오류를 띄우는 동작들을 의미한다.
pages라는 폴더를 생성하여 컴포넌트들을 묶어준다.
index.js에서 로그인 전 후 페이지 동작을 나눌 수 있다.