Skip to content

Instantly share code, notes, and snippets.

View velopert's full-sized avatar

Minjun Kim velopert

3.7k followers · 34 following
View GitHub Profile
@velopert
velopert / PostPage.js
Created November 7, 2017 07:12
SSR 참고 자료
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 / counter.js
Created March 15, 2018 06:06
Painless typed Redux reducer with Flow and Immer
// @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 February 16, 2018 12:54
mLab 에서 MongoDB 호스팅 받기

mLab에서 호스팅 받기

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

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

@velopert
velopert / typescriptreact.json
Created May 19, 2018 04:55
TypeScript VSCode snippet
{
"Create Stateless component": {
"prefix": "rsc",
"body": [
"import * as React from 'react';",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {",
" someProps: boolean;",
"}",
"",
@velopert
velopert / install-mongodb.md
Last active July 31, 2018 17:21
MongoDB 운영체제별 설치하기

MongoDB 서버 준비하기

설치하기

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

macOS

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

@velopert
velopert / doc.md
Last active August 31, 2018 01:58
using prettier with eslint

모듈 설치

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

.eslintrc

{
@velopert
velopert / asyncRoute.js
Last active September 3, 2018 13:54
Server Side Rendering & Async Route (Code Splitting) for React-Router v4
import React from 'react';
export default function asyncComponent(getComponent) {
class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
@velopert
velopert / vscode_js_snippet.js
Created September 9, 2018 06:01
my favorite js snippets
{
"Object Destructure from this.props": {
"prefix": "odprops",
"body": [
"const { ${1:value} } = this.props;"
],
"description": ""
},
"Re-export": {
"prefix": "rexp",
@velopert
velopert / hooks.old.md
Created March 27, 2019 01:59
리액트의 새로운 기능, Hooks 알아보기 (OLD)

React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 알아봅시다.

React Hook 이 2019년 2월 6일 v16.8 버전에 정식 탑재되었습니다!

프로젝트 준비

지금은 이 기능을 사용하시려면 리액트 v16.8 이상 버전을 사용하셔야 합니다. 이번 튜토리얼에서는 CRA 를 통해서 리액트 프로젝트를 생성하겠습니다.




  


  




    


          
    

      

        
        

          

              @velopert
          

          

            
                velopert
                / ContextSample-2.js
            
            

              Last active
              July 14, 2019 13:16
            

              
                Context Sample
              
          

        

      

        

  

    
    


        



  


  

        

          
          import React, { createContext, useContext } from 'react';
        

        

          
          

        

        

          
          const MyContext = createContext('defaultValue');
        

        

          
          

        

        

          
          function Child() {
        

        

          
            const text = useContext(MyContext);
        

        

          
            return <div>안녕하세요? {text}</div>
        

        

          
          }
        

        

          
          

        

        

          
          function Parent() {