[20190902 TIL] position / 미들웨어

2019-09-02 TIL

position

static

기본값 position: static; 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.

relative

relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다.

두 개이상의 속성일 때, 유용하게 사용할 수 있습니다.

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다.

fixed

고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤이 되더라도 늘 같은 곳에 위치한다는 뜻입니다.

absolute

absolute는 가장 다루기 까다로운 위치 지정 값입니다. absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)를 기준으로 삼고, 페이지 스크롤에 따라 움직입니다. “위치가 지정된” 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트를 가리킵니다.

미들웨어

리덕스 미들웨어(middleware)는 액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다.

리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업을 여러 가지가 있습니다. 단순히 전달받은 액션을 콘솔에 기록할 수도 있고, 전달받은 액션 정보를 기반으로 액션을 아예 취소해 버리거나 다른 종류의 액션을 추가로 디스패치할 수도 있습니다.

미들웨어는 특히 네트워크 요청과 같은 비동기 작업을 할 때 매우 유용합니다.

redux-logger 라이브러리 사용

$ yarn add redux-logger

import { createStore, applyMiddleware } from 'redux';
import modules from './modules';

import { createLogger } from 'redux-logger';

/* 로그 미들웨어를 만들 때 설정을 커스터마이징할 수 있습니다.
   https://github.com/evgenyrodionov/redux-logger#options
*/

const logger = createLogger();

const store = createStore(modules, applyMiddleware(logger));

export default store;

미들웨어로 비동기 액션 처리

[ redux-thunk 사용하기 ] ↓ [ thunk로 웹 요청 다루기 ] ↓ [ redux-promise-middleware로 웹 요청 다루기 ] ↓ [ redux-pender로 웹 요청 다루기 ]

redux-thunk

리덕스를 사용하는 애플리케이션에서 비동기 작업을 처리할 때 가장 기본적인 방법은 redux-thunk 미들웨어를 사용하는 것입니다. 이 미들웨어는 리덕스를 개발한 댄 아브라모프가 만든 것으로 리덕스 공식 매뉴얼에서도 이를 사용하여 비동기 작업을 다룹니다. 이를 사용하면 매우 직관적이고 간단하게 비동기 작업을 관리할 수 있습니다.

• thunk 란?

  • thunk는 특정 작업을 나중에 할 수 있도록 미루려고 함수 형태로 감싼 것을 의미합니다.
  • const x = 1 + 2; 이 코드를 실행하면 1 + 2 연산을 바로 진행합니다.
  • const foo = () => 1 + 2; 이렇게 하면 1 + 2 연산을 코드가 실행될 때 바로 하지 않고, 나중에 foo() 함수를 호출할 때 합니다.

• redux-thunk는 무엇을 하는 미들웨어일까?

  • 이 미들웨어는 함수를 디스패치할 수 있게 함으로써 일반 액션 객체로는 할 수 없는 작업들도 할 수 있게 합니다.

redux-promise-middleware

Promise 기반의 비동기 작업을 좀 더 편하게 해 주는 미들웨어입니다.

redux-pender

Promise 기반 액션들을 관리하는 미들웨어가 포함되어 있는 라이브러리입니다.