velopert

리액트 디버깅

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

설치

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

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

velopert

import {
  createAction,
  createStandardAction,
  ActionType,
} from 'typesafe-actions';
import { createReducer } from '../utils';

const SET_KEYWORD = 'header/SET_KEYWORD';

export const setKeyword = createStandardAction(SET_KEYWORD)<string>();

velopert

설치 할 항목

• Node.js : 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데에 사용됩니다.
• Yarn : 자바스크립트 패키지를 관리하기 위해서 사용됩니다. Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠릅니다.
• Code Editor (VS Code, Atom, ...) : 코드 에디터는 여러분이 좋아하는걸 사용하시면 됩니다. 저는 VS Code 를 사용하여 강의를 진행하겠습니다.

Windows

Node.js

https://nodejs.org/ko/ 에 들어가서 좌측 LTS 버전을 설치하면 됩니다

Yarn

https://yarnpkg.com/en/docs/install#windows-tab 에 들어가서 인스톨러를 사용하여 설치하세요.

velopert

import { useReducer, useEffect } from 'react';

type LoadingAction = {
  type: 'LOADING';
};

type SuccessAction<T> = {
  type: 'SUCCESS';
  data: T;
};

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

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisities

velopert

현재 Android Studio에서 Emulator를 추가 할 때 S - arm64 버전이 존재하긴 하지만, offline 상태가 풀리지 않는 버그가 있습니다. 지금 AVD에서 받을 수 있는 이미지는 Revision 3 인데, 이를 Revision 2로 낮추면 정상적으로 작동합니다.

참고 링크: Stackoverflow

먼저, Android Studio에서 상단 메뉴의 Android Studio - Check for updates를 눌러서 Android Studio 및 SDK를 최신으로 올리세요.

그 다음 아래 명령어를 사용하면 터미널에서 바로 SDK를 다운로드 받아서 설치할 수 있습니다.

velopert

const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const getClientEnvironment = require('./env');
const paths = require('./paths');

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

velopert

// 이 함수는 파라미터로 액션의 타입 (예: GET_USER) 과 Promise 를 만들어주는 함수를 받아옵니다.
export function createAsyncDispatcher(type, promiseFn) {
  // 성공, 실패에 대한 액션 타입 문자열을 준비합니다.
  const SUCCESS = `${type}_SUCCESS`;
  const ERROR = `${type}_ERROR`;

  // 새로운 함수를 만듭니다.
  // ...rest 를 사용하여 나머지 파라미터를 rest 배열에 담습니다.
  async function actionHandler(dispatch, ...rest) {
    dispatch({ type }); // 요청 시작됨

velopert

리액트 Higher-order Component (HOC)

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

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

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

반복되는 코드 발견하기