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 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 를 통하여 간편하게 설치 할 수 있습니다.

@velopert
velopert / doc.md
Last active Aug 31, 2018
using prettier with eslint
View doc.md

모듈 설치

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

.eslintrc

{
You can’t perform that action at this time.