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
@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);
@velopert
velopert / mlab-host.md
Created Feb 16, 2018
mLab 에서 MongoDB 호스팅 받기
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 는 굉장히 많이 편해졌답니다.

설치하기

@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 에서 진행하겠습니다. 프로젝트 열기

반복되는 코드 발견하기

@velopert
velopert / PostPage.js
Created Nov 7, 2017
SSR 참고 자료
View PostPage.js
import React from 'react';
import PageTemplate from 'components/common/PageTemplate';
import PostContainer from 'containers/post/PostContainer';
import AskRemoveModalContainer from 'containers/modal/AskRemoveModalContainer';
import * as postActions from 'store/modules/post';
const PostPage = ({match}) => {
const { id } = match.params;
return (
@velopert
velopert / asyncRoute.js
Last active Sep 3, 2018
Server Side Rendering & Async Route (Code Splitting) for React-Router v4
View asyncRoute.js
import React from 'react';
export default function asyncComponent(getComponent) {
class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
@velopert
velopert / reducer.js
Created May 9, 2017
solution, using immutablejs
View reducer.js
import { List, Map, fromJS } from 'immutable';
const initialState = Map({
fruits: fromJS([ // this will turn this array into List of Map
{
"itemName": "banana",
"price": 1.00,
"quantityRemaining": 10
},
{
@velopert
velopert / App.js
Last active May 20, 2017
LifeCycle API 실습
View App.js
import React, {Component} from 'react';
import ColorBlock from './ColorBlock';
function getRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16);
}
class App extends Component {
constructor(props) {
super(props);
@velopert
velopert / 각 운영체제별 Node.js 및 에디터 설치.md
Last active May 22, 2018
각 운영체제별 Node.js 및 에디터 설치
View 각 운영체제별 Node.js 및 에디터 설치.md

설치 할 항목

  • Node.js : 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데에 사용됩니다.
  • Yarn : 자바스크립트 패키지를 관리하기 위해서 사용됩니다. Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠릅니다.
  • Code Editor (VS Code, Atom, ...) : 코드 에디터는 여러분이 좋아하는걸 사용하시면 됩니다. 저는 VS Code 를 사용하여 강의를 진행하겠습니다.

Windows

Node.js

https://nodejs.org/ko/ 에 들어가서 좌측 LTS 버전을 설치하면 됩니다

Yarn

https://yarnpkg.com/en/docs/install#windows-tab 에 들어가서 인스톨러를 사용하여 설치하세요.

View vscode-extensions.md

Mateiral Neutral Theme
ESLint
Babel ES6/ES7
Code Beautifier
Material Icon Theme
Guides
React-Beautify
jsx
Reactjs code snippets

You can’t perform that action at this time.