Skip to content

Instantly share code, notes, and snippets.

Avatar

Minjun Kim velopert

View GitHub Profile
@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 / vscode_js_snippet.js
Created Sep 9, 2018
my favorite js snippets
View vscode_js_snippet.js
{
"Object Destructure from this.props": {
"prefix": "odprops",
"body": [
"const { ${1:value} } = this.props;"
],
"description": ""
},
"Re-export": {
"prefix": "rexp",
@velopert
velopert / HeaderContainer.tsx
Created Aug 27, 2018
using mobx inject with typescript
View HeaderContainer.tsx
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
velopert / install-mongodb.md
Last active Jul 31, 2018
MongoDB 운영체제별 설치하기
View install-mongodb.md

MongoDB 서버 준비하기

설치하기

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

macOS

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

You can’t perform that action at this time.