velopert

import * as React from 'react';
import { inject, observer } from 'mobx-react';

import Header from 'components/base/Header';
import RootStore from 'stores';

interface HeaderContainerProps {}

interface InjectedProps extends HeaderContainerProps {
  mode: string;

velopert

MongoDB 서버 준비하기

설치하기

MongoDB 서버를 사용하기 위해서는, 우선 설치를 해주어야 합니다.

macOS

macOS 에서는 Homebrew 를 통하여 간편하게 설치 할 수 있습니다.

velopert

모듈 설치

yarn add eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

.eslintrc

{

velopert

{
	"Create Stateless component": {
		"prefix": "rsc",
		"body": [
			"import * as React from 'react';",
			"",
			"interface ${1:${TM_FILENAME_BASE}}Props {",
			"  someProps: boolean;",
			"}",
			"",

velopert

리액트 디버깅

리액트 프로젝트를 VSCode 와 Chrome 을 통하여 손쉽게 디버깅 하는 방법을 알아보겠습니다.

설치

Debugger For Chrome VSCode 익스텐션을 설치하세요.

그 다음에는, 프로젝트의 루트경로에 .vscode/launch.json 파일을 만드세요.

velopert

// @flow
import { createAction, handleActions, type ActionType } from 'redux-actions';
import produce from 'immer';

/* ACTION TYPE */
const INCREASE = 'counter/INCREASE';


/* ACTION CREATOR */
const increase = createAction(INCREASE, (value: number) => value);

velopert

mLab에서 호스팅 받기

만약에 MongoDB 를 PC에 설치하는것이 부담스럽다면, mLab 에서 무료로 호스팅을 받을 수 있습니다.

회원가입 / 로그인을 하고 상단의 Create New 버튼을 누르고,

velopert

react-hot-loader 적용하기

react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 개발도구는 아니지만, 앱의 규모가 커지면 개발서버가 수정될때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 1~6초씩 끊길 수도 있습니다. 특히, styled-components 를 사용하게 되는 경우엔, 스타일이 JS 안에 있어서, 스타일을 수정 할 때마다 새로고침이 된다는게 조금 불편할수도 있겠죠.

이렇게 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 코드를 조금 건들여주면 가능합니다. 하지만, 어플리케이션의 state 를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있습니다.

이전에는, webpack 쪽에서 설정을 해야 될 것이 있었기 때문에, 무조건 yarn eject 를 해주어야 했지만, 이제는 바벨 설정만 하면 되므로 eject 하는 작업은 선택적입니다. 최신 react-hot-loader 는 굉장히 많이 편해졌답니다.

설치하기

velopert

리액트 Higher-order Component (HOC)

코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용합니다. 자, 그런데 컴포넌트 기능 상에서도, 자주 반복되는 코드들이 나타날 수 있습니다. 소프트웨어 개발 원리 중에서 DRY 라는 개념이 있죠 - 같은 작업을 반복하지 마라 (Don't repeat yourself)

리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들은, HOC 를 만들어서 해결해줄 수 있습니다. HOC 는, 하나의 함수인데요, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여합니다. 직접 만들어볼 때 까지는 감이 잡히지 않을 수도 있습니다. 한번, 직접 만들어봅시다!

이 튜토리얼은 Codsandbox 에서 진행하겠습니다. 프로젝트 열기

반복되는 코드 발견하기

velopert

import React from 'react';
import PageTemplate from 'components/common/PageTemplate';
import PostContainer from 'containers/post/PostContainer';
import AskRemoveModalContainer from 'containers/modal/AskRemoveModalContainer';
import * as postActions from 'store/modules/post';

const PostPage = ({match}) => {
  const { id } = match.params;

  return (