Skip to content

Instantly share code, notes, and snippets.

Minjun Kim velopert

Block or report user

Report or block velopert

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View debug-react.md

리액트 디버깅

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

설치

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

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

View react-hot-loader.md

react-hot-loader 적용하기

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

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

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

설치하기

@velopert
velopert / useAsync.ts
Created Jul 27, 2019
useAsync written in TypeScript
View useAsync.ts
import { useReducer, useEffect } from 'react';
type LoadingAction = {
type: 'LOADING';
};
type SuccessAction<T> = {
type: 'SUCCESS';
data: T;
};
View ContextSample-2.js
import React, { createContext, useContext } from 'react';
const MyContext = createContext('defaultValue');
function Child() {
const text = useContext(MyContext);
return <div>안녕하세요? {text}</div>
}
function Parent() {
@velopert
velopert / asyncActionUtils.js
Created Jul 14, 2019
React Context + useReducer + async actions example
View asyncActionUtils.js
// 이 함수는 파라미터로 액션의 타입 (예: 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
velopert / hooks.old.md
Created Mar 27, 2019
리액트의 새로운 기능, Hooks 알아보기 (OLD)
View hooks.old.md

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

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

프로젝트 준비

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

@velopert
velopert / webpack.config.server.js
Created Mar 3, 2019
Webpack v4 config for React SSR
View webpack.config.server.js
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
velopert / header.ts
Created Feb 16, 2019
Redux + TypeScript
View header.ts
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
velopert / Codesnippet.json
Created Jan 16, 2019
TypeScript React Code snippet
View Codesnippet.json
{
"Object Destructure from this.props": {
"prefix": "odprops",
"body": ["const { ${1:value} } = this.props;"],
"description": ""
},
"Re-export": {
"prefix": "rexp",
"body": [
"export { default as ${1:MyComponent} } from './${1:MyComponent}';"
@velopert
velopert / react-hoc.md
Last active Oct 14, 2018
리액트 Higher Order Component (HOC)
View react-hoc.md

리액트 Higher-order Component (HOC)

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

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

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

반복되는 코드 발견하기

You can’t perform that action at this time.