Instantly share code, notes, and snippets.

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}';"
View vscode_js_snippet.js
{
"Object Destructure from this.props": {
"prefix": "odprops",
"body": [
"const { ${1:value} } = this.props;"
],
"description": ""
},
"Re-export": {
"prefix": "rexp",
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;
View install-mongodb.md

MongoDB 서버 준비하기

설치하기

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

macOS

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

View doc.md

모듈 설치

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

.eslintrc

{
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 파일을 만드세요.

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);
View mlab-host.md

mLab에서 호스팅 받기

만약에 MongoDB 를 PC에 설치하는것이 부담스럽다면, mLab 에서 무료로 호스팅을 받을 수 있습니다.

회원가입 / 로그인을 하고 상단의 Create New 버튼을 누르고,

View react-hot-loader.md

react-hot-loader 적용하기

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

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

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

설치하기