작업 환경 준비하기

1. 콘솔 설치

   $ yarn create react-app blog-frontend
   $ yarn add eslint-config-prettier

2. 설정 파일 만들기

• .prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

• .eslintrc.json

{
  "env": {
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "ShareArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "no-unsued-vars": "warn",
    "no-console": "off"
  }
}

• .jsconfig.json

{
  "compilerOptions": {
    "target": "es6"
  }
}

라우터 적용 (src/pages 만들기)

1. 콘솔 설치

   $ yarn add react-router-dom

2. 라우터 컴포넌트 만들기

• LoginPage.js - 로그인

• RegisterPage.js - 회원가입

• WritePage.js - 글쓰기

• PostPage.js - 포스트 읽기

• PostListPage.js - 포스트 목록

3. 라우트 컴포넌트별 각 페이지 만들기

• 예시: pages/LoginPage.js

import React from 'react';

const LoginPage = () => {
  return <div>로그인</div>;
};

export default LoginPage;

4. 프로젝트 엔트리 파일 index.js에서 BrowserRouter로 App 컴포넌트 감싸기

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

5. App 컴포넌트에서 Route 컴포넌트를 사용하여 각 라우트의 경로 지정하기

• src/App.js

import React from 'react';
import { Route } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import PostListPage from './pages/PostListPage';
import WritePage from './pages/WritePage';
import PostPage from './pages/PostPage';

const App = () => {
  return (
    <div>
      <>
        <Route component={PostListPage} path={['/@:username', '/']} exact />
        <Route component={RegisterPage} path="/register" />
        <Route component={WritePage} path="/write" />
        <Route component={PostPage} path="/@:username/:postId" />
        <Route component={LoginPage} path="/login" />
      </>
    </div>
  );
};

export default App;

스타일 설정 (src/lib/styles/..)

1. 콘솔 설치

   $ yarn add styled-components

2. 색상 코드 만들기

• src/lib/styles/palette.js

// source: https://yeun.github.io/open-color/
const palette = {
    gray: [
      '#f8f9fa',
      '#f1f3f5',
      '#e9ecef',
      '#dee2e6',
      '#ced4da',
      '#adb5bd',
      '#868e96',
      '#495057',
      '#343a40',
      '#212529',
    ],
    cyan: [
      '#e3fafc',
      '#c5f6fa',
      '#99e9f2',
      '#66d9e8',
      '#3bc9db',
      '#22b8cf',
      '#15aabf',
      '#1098ad',
      '#0c8599',
      '#0b7285',
    ],
  };
  
  export default palette;

자주 사용하는 컴포넌트 만들기(src/components/common/..)

1. Button 컴포넌트를 스타일 컴포넌트로 작성하기

• components/common/Button.js

import React from 'react';
import styled from 'styled-components';
import palette from '../../lib/styles/palette';

// 스타일 컴포넌트에는 늘 styled 등을 붙여준다. 

const styledButton =styled.button`
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
padding: 0.25rem 1rem;
color: white;
outline: none;
cursor: pointer;
background: ${palette.gray[8]};
&:hover{
    background: ${palette.gray[6]};
}
`

const Button = props => <StyledButton {...props}/>;

export default Button;

2. 만든 컴포넌트 렌더링하기

• pages/PostListPage.js

import React from 'react';
import Button from '../components/common/Button';

const PostListPage = () => {
  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
};

export default PostListPage;

글로벌 스타일 수정하기(src/index.css)

• index.css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* 스무스한 효과를 준다고 하는데 나는 솔직히 모르겠다. 
    https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth 참고 
    */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  min-height: 100%;
}

#root {
  min-height: 100%;
}

/*추후 회원 인증 페이지에서 배경 화면을
 페이지의 전체 영역에 채우기 위한 용도*/
html {
  height: 100%;
}

/* 링크의 색상 및 밑줄 없애기*/
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: inherit;
  /* 모든 엘리먼트의 box-sizing 값을 border-box로 설정*/
}
code {
  font-family: source-code-pro, Menlo, Monaco, Conslas, 'Courier New', monospace;
}

리덕스 적용 (src/module/..)

1. 필요한 모듈 설치
   $ yarn add redux react-redux redux-actions immer redux-devtools-extension

2. 리듀서 작성

• src/modules/auth.js

import { createAction, handleActions } from 'redux-actions';

const SAMPLE_ACTION = 'auth/SAMPLE_ACTION';

export const sampleAction = createAction(SAMPLE_ACTION);

const initialState = {};
const auth = handleActions(
  {
    [SAMPLE_ACTION]: (state, action) => state,
  },
  initialState,
);

export default auth;

3. 루트 리듀서 작성

• src/modules/index.js

import { combineReducers } from 'redux';
import auth from './auth';
const rootReducer = combineReducers({
  auth,
});

export default rootReducer;

지역 컴포넌트 만들기 (components/auth/..)

1. 컴포넌트 작성

• components/auth/AuthForm.js

import React from 'react';
import styled from 'styled-components';

/*
회원가입 또는 로그인 폼을 보여줌
 */ 
const AuthFormBlock = styled.div``;

const AuthForm = () => {
    return (
        <AuthFormBlock>
        AuthForm
        </AuthFormBlock>
    )
};

export default AuthForm;

• 컴포넌트 작성시 styled-components 스타일링할 경우, 최상위 컴포넌트(=스타일링 컴포넌트) 에 Block , 혹은 Wrapper 등의 단어를 붙여준다.

2. 레이아웃 컴포넌트 작성

• src/components/auth/AuthTemplate.js

import React from 'react';
import styled from 'styled-components';

/**
회원가입/로그인 페이지의 레이아웃을 담당하는 컴포넌트 
 */

const AuthTemplateBlock = styled.div``
const AuthTemplate = () => {
    return (
        <AuthTemplateBlock>
        </AuthTemplateBlock>
    );
};

export default AuthTemplate;

3. vs 코드의 snippet 기능을 사용하면 작업 시간을 줄일 수 뿐만 아니라 매우 유용