Skip to content

Instantly share code, notes, and snippets.

@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

{
@velopert
velopert / typescriptreact.json
Created May 19, 2018
TypeScript VSCode snippet
View typescriptreact.json
{
"Create Stateless component": {
"prefix": "rsc",
"body": [
"import * as React from 'react';",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {",
" someProps: boolean;",
"}",
"",
View debug-react.md

리액트 디버깅

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

설치

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

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

@velopert
velopert / counter.js
Created Mar 15, 2018
Painless typed Redux reducer with Flow and Immer
View counter.js
// @flow
import { createAction, handleActions, type ActionType } from 'redux-actions';
import produce from 'immer';
/* ACTION TYPE */
const INCREASE = 'counter/INCREASE';
/* ACTION CREATOR */
const increase = createAction(INCREASE, (value: number) => value);
You can’t perform that action at this time.