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 {
  createAction,
  createStandardAction,
  ActionType,
} from 'typesafe-actions';
import { createReducer } from '../utils';

const SET_KEYWORD = 'header/SET_KEYWORD';

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

velopert

리액트 디버깅

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

설치

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

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

velopert

import React, { createContext, useContext } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

function Parent() {

velopert

React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 알아봅시다.

React Hook 이 2019년 2월 6일 v16.8 버전에 정식 탑재되었습니다!

프로젝트 준비

지금은 이 기능을 사용하시려면 리액트 v16.8 이상 버전을 사용하셔야 합니다. 이번 튜토리얼에서는 CRA 를 통해서 리액트 프로젝트를 생성하겠습니다.

velopert

{
	"Object Destructure from this.props": {
		"prefix": "odprops",
		"body": [
			"const { ${1:value} } = this.props;"
		],
		"description": ""
	},
	"Re-export": {
		"prefix": "rexp",

velopert

import React from 'react';

export default function asyncComponent(getComponent) {
class AsyncComponent extends React.Component {
    static Component = null;

    state = { Component: AsyncComponent.Component };
    

    componentWillMount() {

velopert

모듈 설치

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

.eslintrc

{

velopert

MongoDB 서버 준비하기

설치하기

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

macOS

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

velopert

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