6. Redux를 위한 세팅

안녕하세요, 프로독학러 입니다.

이번 포스팅 이후부터는 React 의 Redux 에 대해서 알아가 볼 예정입니다.

따라서 이번 포스팅에서는 Redux 를 위한 세팅 및 코드 작성에 도움을 주는 세팅을 하겠습니다.

먼저 Redux 에 필요한 패키지파일들을 설치하겠습니다.

터미널 프로그램의 루트폴더에서 아래의 명령어를 입력해 줍니다.

npm install --save redux react-redux

패키지를 통해 설치된 파일들의 사용은 추후에 개념과 함께 알아가도록 하겠습니다.

다음으로 코드 작성에 도움을 주는 몇 가지 세팅들을 해 보도록하겠습니다.

1) Atom 에디터의 Snippets 기능

Atom 에디터에는 Snippets 라는 기능이 있습니다.

Snippets 에 코드를 작성해 두면, 해당 코드를 호출하는 명령어를 통해 빠르게 코드를 작성할 수 있습니다.

React 컴포넌트를 만드는 코드의 기본적인 틀은 거의 모두 비슷하므로 컴포는트를 만들고 익스포트하는 코드를 Snippets 에 등록해 보겠습니다.

Atom 에디터의 상단 메뉴에서 File - Snippets 를 클릭합니다.

클릭하면 아래와 같은 모습의 cson 파일이 열립니다.

파일의 최하단의 다음의 코드를 추가하여 줍니다.

'.source.js':
    'React Component':
        'prefix': 'rc'
        'body': '''
        import React, { Component } from 'react';
        import PropTypes from 'prop-types';

        const propTypes = {
        };
        const defaultProps = {
        };

        class ${1:MyComponent} extends Component {
            state = {

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

        ${1:MyComponent}.propTypes = propTypes;
        ${1:MyComponent}.defaultProps = defaultProps;

        export default ${1:MyComponent};
        '''
 

위의 코드에서 ${1:MyComponent} 라고 된 부분은 생성돠 동시에 커서가 위치하는 곳입니다.

prefix 부분에 정의한 문자를 통해 Snippets 를 사용할 수 있습니다.

새로 만든 파일에서 rc 를 입력하면 위의 코드를 바로 생성할 수 있습니다.

2) eslint 에디터에서 사용하기 (Atom editor)

eslint 를 이용하여 에디터에서 실시간으로 문법오류가 있는 것을 알아낼 수 있습니다.

eslint 의 설치는 Atom 에디터의 상단메뉴에서 File - Settings - Install 에서 진행합니다.

Install packages 에서 'eslint' 를 검색합니다.

목록에서 linter-eslint 를 설치합니다. (저는 설치돼 있는 상태여서 위의 사진처럼 뜹니다.)

eslint 를 설치하면 dependency 를 자동으로 설치할 것이냐고 물어봅니다.

필요한 dependency 패키지를 모두 설치합니다.

(linter, linter-ui-default, intentions, busy-signal 이 설치됩니다.)

airbnb에서 javascript 스타일가이드를 오픈소스로 공개했습니다.

우리의 에디터에서 이 규칙을 사용하기 위해 프로젝트의 루트폴더에 다음명령어를 통해 패키지를 설치합니다.

npm install --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react

해당 파일을 atom 에디터에서 불러올 수 있도록 루트폴더에 .eslintrc.js 파일을 만들어 줍니다.

파일의 내용은 아래의 코드를 붙여넣기 합니다.

(./.eslintrc.js)

module.exports = {
  "extends": "eslint-config-airbnb",
  "parser": "babel-eslint",
  "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
  "rules": {
      "class-methods-use-this": 0,
      "comma-dangle": 0,
      "react/prop-types": 0,
      "linebreak-style": 0,
      "key-spacing": 0,
      "quotes": 0,
      "indent": 0,
      "Fatal":0,
      "react/jsx-indent":0,
      "react/jsx-filename-extension":0,
      "react/jsx-indent-props":0,
      "space-infix-ops":0,
      "padded-blocks":0,
      "spaced-comment":0,
      "arrow-body-style":0,
      "prefer-destructuring":0,
      "prefer-template": "error",
      "no-console": ["error", { allow: ["warn", "error", "log"] }],
      "no-else-return": 0,
      "no-undef": 0
    },
  "plugins": [
        "react"
    ]
};

위의 코드에서 rules 는 eslint 의 규칙을 정의한 부분입니다.

값을 0 으로 주면 해당 규칙을 사용하지 않겠다는 의미입니다. (off)

만약 eslint 를 사용하다가 사용하고 싶지 않은 규칙이 있다면 다음과 같이 규칙을 off 하면 됩니다.

eslint 는 위의 캡쳐와 같이 실시간으로 문법적 오류를 알려줍니다.

오류가 있는 행에 왼쪽에 빨간점으로 표시하고, 커서가 위치한 곳에서 오류의 내용을 알려줍니다.

그리고 내용을 알려주는 곳에 있는 링크 모양을 클릭하면 해당 문법사항에 대한 옵션을 자세하게 볼 수 있습니다.

문법사항의 제목은 괄호안에 있는 문자인데, 위의 경우에서는 'semi' 입니다.

만약 semi 옵션을 끄고싶다면, .eslintrc.js 파일로 들어가 rules 에 규칙을 추가해 주면 됩니다.

위의 코드의 32번째 줄에서 semi 옵션을 off (0) 했습니다.

저장을 한 뒤 이전의 파일에서 확인해보면, 

오류가 검출되지 않습니다. (바로 업데이트가 되지 않는다면 검사할 파일을 한번 저장하면 바뀐옵션이 적용됩니다.)

*semi 옵션은 끄지 않는것을 추천드립니다. (예제를 위해 해 본것이니 따라하지 않으셔도 됩니다.)

여기까지 Redux 를 위한 준비과정을 마쳤습니다.

다음 포스팅 부터는 Redux 에 대해서 본격적으로 알아가 보도록하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/reactjs-tutorials

http://gnujoow.github.io/dev/2016/09/22/Dev4-lets-use-linter/

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)