DEV Community: 김재원

I created react hooks for reducing re-rendering caused of statement change.

김재원 — Wed, 08 May 2019 17:02:25 +0000

In React, a component will be re-rendered when state is changed.
What will be happened if the state is changed very frequently?
The component will be re-rendered frequently. It will affect to performance.

use-flush will help component to be re-rendered just once in n seconds.

Now, Let's take a look how it works and how to use it.

Explanation

Let's assume that the state will be changed very frequently like below.

+ means every n seconds.
* means state is changed.

+--------+--------+--------+--------
  * *   *  ** *** *  *    *

The flushed state will be changed in every n seconds like below.

+--------+--------+--------+--------
         *(3)     *(6)     *(2)

Installation

$ npm i -S use-flush

Usage

If you click 5 times in 2 seconds, flushedCount will be [0, 1, 2, 3, 4].

import React, { useState } from 'react';
import { render } from 'react-dom';
import useFlush from 'use-flush';

const appRoot = document.getElementById('app');

const App = () => {
  const [count, setCount] = useState(0);
  const flushedCount = useFlush(count, 2000);

  return (
    <>
      <p>
        FLUSHED COUNT : {flushedCount.join(', ')}
      </p>
      <button onClick={() => { setCount(count + 1); }}>
        CLICK!
      </button>
    </>
  );
};

render(
  <App />,
  appRoot
);

You can check it on this repository.
Any PRs are welcome. :)

Create your own blog easily with Gatsby

김재원 — Wed, 15 Aug 2018 14:54:45 +0000

Gatsby is a Static site generator. (There are so many kinds of generator like Jekyll(Ruby), Hexo(Node.js), Hugo(Go), etc.) Gatsby support PWA(Progressive Web App), Hot reloading, SSR(Server Side Rendering).

You can see more detailed in this link.

Install Gatsby CLI and Gatsby Starter

$ npm i -g gatsby-cli
$ gatsby new <<BLOG_NAME>> https://github.com/wonism/gatsby-advanced-blog
$ cd <<BLOG_NAME>>
$ npm run dev

Basic structure of project

The project has the following structure.

src/
├── components
│   ├── ... # Many of shared sections
│   └── layout.jsx # general layout for page
├── constants
├── containers # to connect states to react component
├── html.jsx # page template for page
├── pages # pages of your web site
│   ├── 404.jsx
│   └── index.js
├── postComponents # react application that will be added in page
│   └── ...
├── resources # asset files
│   └── images
├── store # to use redux
│   ├── ...
│   └── index.js
├── templates # template for creating page with file system
│   └── ...
└── utils # utilities
    └── ...

Create a post

$ mkdir src/pages/<<DIRECTORY_NAME>>
$ touch src/pages/<<DIRECTORY_NAME>>/index.md

These markdown files are referred by the gatsby-source-filesystem and converted to HTML files by gatsby-transformer-remark.

These are called at build time. You can check this createPages in gatsby-node.js.

Caution

There is a .sample.md file in <<PROJECT_ROOT>>/src/pages.
If you delete this file, you can not get category, image, etc. in frontmatter of GraphQL query.

The .sample.md file serves as the dummy data and creates custom frontmatter fields.

The basic components of a markdown file

--------
path: "/hello-world/"
category: "Sample"
tags: ["tag", "should", "be", "array"]
title: "Hello, World!"
date: "2018-08-15T00:00:00.000Z"
summary: "You can create your own blog with Gatsby!"
--------

Content of this page

path is a required attribute to create a page. It must be unique.
category allows you to create category pages and access to pages like /categories/<<CATEGORY_NAME>>/<<PAGE_NUMBER>>.
tags allows you to create tag pages and access to pages like /tags/<<TAG_NAME>>/<<PAGE_NUMBER>>.
As you can see the name oof property. title is the title of the page, and summary is a summary of the page.
date is the date the post was created, and posts are sorted based on it.

(You can more detailed information about the formatting in gray-matter.)

Those will be called by query in src/templates/Post.jsx. and you can run the query directly on http://localhost:8000/___graphql

Add image into post

images: ["(<<src/resources/>>)PATH_TO/IMAGE"]

Use an absolute path including http:// or https://. or use a relative path relative to src/resources.
(On line 145 ofcomponents/Post/index.jsx, the image is imported via IF CONDITION ? <<image>> : '<<src/resources/${image}>>'

Add react application into post

--------
path: "/inject-app/"
category: "Sample"
tags: ["tag", "must", "be", "array"]
title: "Injecting React application"
date: "2018-08-15T00:00:00.000Z"
summary: "You can inject react application into post"
components: [{
  rootId: 'sample-component', # <div id="sample-component"></div> must be in contents
  fileName: 'sample', # this will render src/postComponents/sample/index.jsx
}]
--------

1. ...

<div id="sample-component"></div>

2. ...

Put an object in the array. Object has to include the path to the file of the react application that is to be added and the ID of the tag to be rendered.

Then, in the middle of the article, add the tag with this ID where you want to insert the react application.

Add tweet into post

--------
path: "/inject-tweet/"
category: "Sample"
tags: ["tag", "must", "be", "array"]
title: "Injecting Tweet"
date: "2018-08-15T00:00:00.000Z"
summary: "You can inject tweet into post"
tweets: [{
  rootId: 'sample-tweet', # <div id="sample-tweet"></div> must be in contents
  userId: 'twitter', # twitter user id
  tweetId: '977557540199456775', # tweet id
}]
--------

1. ...

<div id="sample-tweet"></div>

2. ...

Put an object in the array. Object has to include the tweet's ID and the author or the tweet and the ID of the tag to be rendered.

You can use it as you added the react application.

Add codes into post

If you write the three back quote before and after the codes that you want to highlight, It will be highlighted by gatsby-remark-prismjs.

Add portfolios

$ mkdir src/resources/<<DIRECTORY_NAME>>
$ touch src/resources/<<DIRECTORY_NAME>>/index.md

--------
type: "portfolio"
title: "Gatsby Advanced Blog"
date: "2018-08-15T00:00:00.000Z"
path: "/portfolios/portfolio-1/"
images: [
  "test-1/1.png",
  "test-1/2.png",
]
--------

# Gatsby Advanced Blog

## What I did
- Develop Gatsby Advanced Blog

## Libraries / Tools
- ReactJS
- Redux
- Redux saga
- ...

[Go to Web Site →](https://github.com/wonism/gatsby-advanced-blog)

path is a required attribute to create a page. It must be unique.
type is a value that allows you to specify the format of the page, in this case it should be portfolio.
title is the title of the portfolio.
images are the images you want to attach to the portfolio and have the same value as the post's. Images are rendered in the order they were added to the array.
Portfolios are sorted based on the data. Give a bigger value to the portfolio to show first.

Portfolios will be shown one the portfolio page. and if there are more than 4, they will be shown on the home page.

(You can see it in src/components/Home and modify how it is rendered.)

Add resume

--------
type: "resume"
title: "Resume"
date: "2000-01-01T00:00:00.000Z"
path: "/resume/"
--------

## Experience
- Engineer at OOO ∙ 2000. 01 ~ Present
  - Develop something
  - Maintain something

## Education
- B.S. in Computer Science Engineering at OOO
  - 2000. 01 ~ 2000. 01

## Projects
- Gatsby Advanced Blog (https://github.com/wonism/gatsby-advanced-blog) ∙ 2000. 01 ~ Present
  - Integrate Redux
    - Use Redux, Redux Saga, Reselect...

## Skills
- JavaScript
  - ES2015+
  - ReactJS
  - Lodash
- CSS
  - SASS
  - Less

path is a required attribute to create a page. It must be unique.
type is a value that allows you to specify the format of the page, in this case it should be portfolio.

Other features

On the right side of the GNB, you can search posts by title, summary, tag, category, etc. of the post.
When you add codes in markdown, a button will be created automatically. If user clicks the button, user can copy the codes.

Deployment

You can build the application with npm run build.
Then you can distribute it where you want. such as Github Page, AWS S3 or Netlify.

You can see this article on this link.

New react boilerplate with saga, selector, emotion, ssr etc...

김재원 — Sat, 02 Jun 2018 15:42:38 +0000

Reacteum supports these.

Redux (design with ducks modula redux style)
Asynchronous redux with redux-saga
Selectors pattern with reselector
CSS in JS with react-emotion
Client side routing with react-router-dom
Code splitting
Handing meta tags with react-helmet
Server side rendering
Test with jest
Formatting codes with eslint & prettier

Segment integrations with redux on react and react-native

김재원 — Sat, 19 May 2018 14:01:51 +0000

Does anyone use segment for data analytics?
Segment is the infrastructure for gathering customer data.
And It supports so many analytics tools like Google Analytics, Mixpanel, Facebook Pixel and etc..

And redux-segment-node is a redux middleware to help developer to use segment easily.

Now, Let's take a look how to use this.

Installation

$ npm i -S redux-segment-node

Demo

# replace the `key` with your `Segment API key` in `config.json`
$ npm run dev
# and visit localhost:7777

Usage

// import { applyMiddleware, createStore } from 'redux';
import createSegmentTracker from 'redux-segment-node';

const segmentMiddleware = createSegmentTracker({
  key: 'API_KEY',
  flushAfter: 1000,
});

const middleware = applyMiddleware(segmentMiddleware);

// const store = createStore(/* ... */);

// identify (recommended: pass `userId` in `eventPayload`)
store.dispatch({
  type: 'SIGN_IN',
  analytics: {
    eventType: 'identify',
    eventPayload: {
      userId: 'UUID',
    },
  },
});

// track (required: pass `event` in `eventPayload`)
// If you pass the `signout` or `logout` as an `event` in `track` type,
// The `userId` will be removed.
store.dispatch({
  type: 'CLICK_CTA_BUTTON',
  analytics: {
    eventType: 'track',
    eventPayload: {
      event: 'Click CTA Button',
    },
  },
});

// page (recommended: pass `name` in `eventPayload`)
// screen (similar with `page`)
store.dispatch({
  type: 'VIEW_PAGE',
  analytics: {
    eventType: 'page', // or 'screen'
    eventPayload: {
      name: 'LANDING_PAGE',
    },
  },
});

// group (required: pass `groupId` in `eventPayload`)
store.dispatch({
  type: 'GROUP',
  analytics: {
    eventType: 'group',
    eventPayload: {
      groupId: 'UUID',
    },
  },
});

// alias (required: pass `userId` in `eventPayload`)
store.dispatch({
  type: 'ALIAS_USER',
  analytics: {
    eventType: 'alias',
    eventPayload: {
      userId: 'NEW_UUID',
    },
  },
});

Configuration

createSegmentTracker arguments

property	type	remark
key	string(required)
platform	string(optional)	one of [`android`, `ios`] or `undefined`
host	string(optional)	Host where reports will be sent. Useful for debug.
flushAt	number(optional)	The number of messages to enqueue before flushing.
flushAfter	number(optional)	The number of milliseconds to wait before flushing the queue automatically.

Event Types (Segment API Specification)

identify: Can tie an user to their action and record traits about them.
track: Can track any actions that users perform.
page: Can record the page that users are stay in.
screen: Can record the screen that users are stay in. (for the mobile application)
group: Can associate the individual users with a group.
alias: Can merge two user identities.

Documentation for Segment

https://segment.com/libraries/node

I created a gatsby starter for blog with powerful features.

김재원 — Thu, 05 Apr 2018 15:25:45 +0000

Many JavaScript developers are using hexo or jekyll for blog.
But, I'd like to recommend you to use gatsby if you're interested in React JS.

https://github.com/wonism/gatsby-advanced-blog
This starter has been implemented with redux, redux-saga, styled-components and etc.

Also, You can see the demo page on this link.
https://kind-cori-836fe1.netlify.com

Any PRs are welcome.