DEV - WORLD IS WIDE

Moment.js, A Simple Tool For Calculating Date And Time(feat.Nodejs)

Easy way to calculate date and time way better

Sometimes we need to calculate date and time.

Actually more than sometimes.

And this library, moment.js, is so powerful for your purpose.

Getting date, setting a date format whatsoever you want, subtracting date from date, counting days, and others.

Below listed some functions for your quick use.

Let’s dig it.

Install moment.js

Install library with below command.

npm install moment

Import the library with ‘require’ function.

var moment = require('moment');
moment();

//ES6 syntax
import moment from 'moment';
moment();

Let’s get started from parsing date.

const date = moment(""); //2022-01-23T11:15:00+09:00

We can display date using format() method with below tokens.

token	mean	example
YY(YY)	year	ex) YYYY -> 2022, YY -> 22
MM(MM)	month	ex) MMMM -> January, MM -> 01
DD	date	ex) DD -> 25
dd(dd)	day	ex) dd -> Tu, dddd -> Tuesday
hh	hour(12)	ex) hh -> 01
HH	hour(24)	ex) HH -> 13
mm	minute	ex) mm -> 07
ss	second	ex) ss -> 03
a	am, pm	ex) a -> pm
Do	ordinal	ex) Do -> 25th

//January Tu 2022, 01:07:21 pm
moment.format('MMMM dd YYYY, hh:mm:ss a'); 

//January Tuesday 2022, pm 01:17
moment.format('MMMM dddd YYYY, a hh:mm') 

// 01/25/2022
moment.format('MM/DD/YYYY');

isValid() method works well on it.

moment('2022-01-25','YYYY-MM-DD').isValid(); //true

moment('2022-02-30','YYYY-MM-DD').isValid(); //false

moment('My birth is 2022-1-25','YYYY-MM-DD').isValid(); //true

Also parsing every detail date is available by intuitive methods.

hour()	get hour
minute()	get minute
second()	get second
millisecond()	get millisecond
date()	get date (1~31)
day()	get day of week (0~6)
week()	get week of year (1~53)
month()	get month (0~11)
year()	get year

moment(new Date).hour(); //13

moment().millisecond(); //331

moment().week(); //5

To get the difference in date, use diff() method.

const theDate = moment('2021-01-20', 'YYYY-MM-DD');
const myDate = moment('2022-01-25', 'YYYY-MM-DD');

myDate.diff(theDate, 'days');     // 5
myDate.diff(theDate, 'year');    // 1
myDate.diff(theDate, 'month');  // 12

We can use this method for counting expire date or calculate D-day.

And there is a bunch of methods this library thanks to the last long maintenance till today.

Please check official web for further infomation.

momentjs.com

피보나치 수열, 자바스크립트 재귀로 함수 만들기(feat.메모이제이션)

메모이제이션을 사용한 피보나치 수열의 재귀 함수

피보나치(Fibonacci) 수는 이탈리아 수학자인 레오나르도 보나치(Leonardo Bonacci)에 의해 연구되어 알려진 것으로, 토끼가 새끼를 낳아 매달 증가하는 토끼의 수에 관해 계산하는 것으로 유명합니다.

0부터 시작하는 수를 순서대로 나열하면,

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181…….와 같이 수가 증가하는데요.

바로 앞(n-1)의 수와 그 바로 앞(n-2)의 수를 더하면 현재의 수(n)가 됩니다.

다음 그림은 네모칸 채우기로 한 면의 길이가 피보나치 수와 같이 증가를 보이는 것을 알 수 있습니다.

출처:https://en.wikipedia.org/wiki/Fibonacci_number

사각형이 1/4씩 회전하며 그리는 나선형은 황금 비율(1.618)에 수렴하여 과학적이며 예술적인 비율을 만들어 낸다고 합니다.

https://en.wikipedia.org/wiki/Fibonacci_number

그럼 이 피보나치 수열을 재귀를 사용해 자바스크립트 함수로 만들어 보겠습니다.

const fibonacci = (n) => {

  if ( n <= 1 ) {
    return n;
  }
  
  return fibonacci(n-1) + fibonacci(n-2);
}

위 함수는 피보나치 수열을 재귀적으로 수행하지만 계산 양이 늘어날 때마다 시간 복잡도는 가파르게 증가합니다.

이는 계산의 중복 문제 때문인데요.

예를 들어 fibonacci(10)을 실행하면 fibonacci(9), fibonacci(8), fibonacci(7)……. 순서로 실행을 하게 되는데요.

fibonacci(9)는 다시 fibonacci(8), fibonacci(7), fibonacci(6)…. 을 실행하게 됩니다.

결국 이미 한 계산을 하고 또 하고 또 하고… 합니다.

하지만 이미 수행한 계산 결과를 배열로 저장해두고 거기서 값을 꺼내쓰면 계산의 중복은 발생하지 않으므로 효율적이고 아름다운 함수가 됩니다.

이를 메모이제이션(Memoization)이라고 하는데요.

메모이제이션을 사용하는 자바스크립트 코드는 다음과 같습니다.

const fibo = (num, memo) => {

      memo = memo || {}

      if(memo[num]){
          return memo[num]
      }

      if(num<=1){
          return num;
      }

      return fibo(num-1, memo) + fibo(num-2, memo);

}

간단하면서도 효율적으로 피보나치를 계산하는 자바스크립트 함수를 사용할 수 있습니다.

setState & useState, 왜 비동기일까?(탐구일기, 리액트React)

setState, useState를 동기로 사용하는 방법

리액트(React)의 state는 컴포넌트 내부의 변경 가능한 값입니다.

클래스형 컴포넌트는 state를 사용하고, 함수형 컴포넌트는 useState 훅(클래스 내부에서는 동작 X)을 사용합니다.

그렇다면 일반적으로 사용하는 변수를 두고 왜 state를 사용해서 값을 관리할까요?

이는 state가 갖는 특성 때문인데요. 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문입니다.

따라서 값이 변화함에 따라 실시간(!!!)으로 화면이 렌더링되고 변화된 값이 화면에 바로 반영됩니다.

값의 변화를 리액트도 알아차릴 수 있게 해주어야 하므로 값의 변경은 리액트가 제공하는 함수를 통해서만 이루어져야 합니다.

//클래스형 컴포넌트
class MyClass extends React.Component {
  constructor(props) {
    super(props);
    //state
    this.state = {
      cnt: 0  //초기화 0
    };
  }

updateState = () => {
  this.setState({ cnt: this.state.cnt + 1 });
}

render() {
    return (
      <div>
        <p>값:{this.state.cnt}</p> 
        <button onClick={this.updateState}>plus</button>
      </div>
    );
  }
}

//함수형 컴포넌트
import React, { useState } from 'react';

const MyFunc = () => {
  //useState 훅을 통해 state 사용
  const [cnt, setCnt] = useState(0); //초기화 0

const plusNum = () => {
   setCnt( cnt+1 );
}

return(
    <div>
       <p>값:{cnt}</p>
       {/* 훅이 반환하는 함수를 통해서만 값을 변경해야 함 */}
       <button onClick={plusNum}>plus</button>
    </div>
  )
}

클래스형 또는 함수형의 코드를 실행하면 다음과 같은 친구가 뜹니다.

plus를 누르면 값이 1씩 플러스 되는 것을 볼 수 있습니다.

하지만 다음과 같이 사용할 때는 결과가 어떨까요?

const plusNum = () => {
   setCnt(cnt+1);
   console.log('result:'+cnt);
}

의도한 것은 state에 cnt+1의 값을 설정하고 새로 설정된 값을 바로 콘솔창에 출력하고 싶은 것인데요. 결과는 다음과 같습니다.

콘솔창의 결과는 한 걸음 늦습니다.

왜 이런 결과가 발생하는 것일까요?

바로 비동기(Asynchronous)의 특성 때문인데요.

1. 동기와 비동기

동기(Synchronous) – 순서대로 하나씩 처리.

비동기(Asynchronous) – 순서가 아닌 이벤트에 따라 처리.

짱구의 일상을 통해 동기 작업을 확인해 보겠습니다.

엄마 : “짱구야! 액션분식 가서 떡볶이 3인분만 포장해 오겠니? 집에 가져와서 그릇에 옮겨 담고 엄마를 불러!”

짱구 프로세스는 1.떡볶이를 사러 나가서 2.주문을 하고 3.집에 들고 와서 4.다시 그릇에 담고 5.엄마를 부르는 과정이 모두 순서대로 동기로 진행됩니다.

호기심 많은 짱구는 엄마 말을 잘 들을리가 없겠지만요..

그렇다면 비동기 작업을 시키려면 어떻게 할까요?

비동기 엄마 : “짱구야! 액션분식 떡볶이 2인분이랑 쵸코비반점 짬뽕 두개를 배달 시켜서 도착하면 각자 그릇에 옮겨 담아줘! 배달이 오기 전까지는 방에 장난감 좀 치워주면 초코비를 줄지도 몰라~!”

작업을 각각 요청하고, 요청한 작업이 가게에서 진행되는 동안 짱구는 다른 작업을 할 수 있습니다.

짱구가 배달 주문(작업 요청)을 하고 도착하기 전까지(요청 처리중)는 장난감 치우기(다른 작업)를 진행하다가 배달이 완료(요청 작업 완료)되면 다시 그릇에 옮겨 담는(요청 관련 작업 진행) 식입니다.

2. 동기로 처리하기

그렇다면 위 샘플에서 콘솔 출력이 업데이트된 값으로 변경되지 않는 이유는 무엇일까요?

여러 글과 문답을 참고하여 내린 결론은 다음과 같습니다.

비동기 특성을 갖는 이벤트 루프에 의해 setCnt 작업은 뒤로 밀리고 console.log작업이 먼저 실행되기 때문입니다.

다음 코드와 같습니다.

const printSequence = () => {
    console.log('first Call');
    setTimeout(()=>{secondCall()},0)
    console.log('third Call');
}

const secondCall = () => {
    console.log('second Call');
}

콘솔창의 결과는요.

비동기 처리를 하는 함수들이 있지만 기본적으로 자바스크립트는 단일 프로세스이므로 동기로 작업을 합니다.

하지만 위와 같이 작업 순서가 뒤바뀌는 이유는 이벤트 루프라는 보이지 않는 손에 의해 비동기로 업무를 처리하기 때문입니다.

그렇다면 setTimeout을 통해 console.log 작업 시간을 뒤로 연기하면 작업이 끝난 뒤 로그를 찍을 테니 값이 제대로 표시되지 않을까요?

  const showAlert = () => {
    setCnt(cnt+1);
    setTimeout(()=>{
      console.log('result(3sec):'+cnt)}
    ,3000);
 }

plus를 다섯번 누른 각각의 결과는요.

값을 5까지 찍었으니 콘솔도 5까지 찍혀야 하지만 위와 같이 업데이트 되기 전의 값이 나옵니다.

이유가 무엇일까요?

바로 setTimeout 함수의 특성 때문인데요.

setTimeout 함수는 실행할 때마다 새로운 함수가 만들어지며 전달되는 함수 내부의 값은 변수가 아닌 전달하는 시점의 변수의 값(상수)이 전달되기 때문이라고 보면 됩니다.

따라서 3초가 아닌 1000초 뒤에 실행하더라도 실행되는 값은 전달하는 시점의 변수의 값입니다.

그렇다면 위 코드를 동기처럼 사용하는 방법은 무엇일까요?

state 설정 시 클래스형은 함수를 전달하고 함수형은 useEffect를 사용하면 됩니다.

 //클래스형
 updateState = () => {
    this.setState(
      { cnt: this.state.cnt + 1 },
      ()=>{ console.log(this.state.cnt) }
    )
 }


 //함수형
 const plusNum = () => {
    setCnt(cnt+1);
 }

 useEffect(()=>{
  console.log(cnt);
 },[cnt])

이제 의도한 대로 결과가 출력됩니다.

3. 비동기로 작동하는 이유

그렇다면 state 설정은 왜 비동기로 작동할까요?

위에서 설명한대로 state는 값이 변경되면 리렌더링이 발생하는데요.

변경이 하나라면 리렌더링이 한번만 발생하지만 수십 개, 수백 개의 값이 계속 변경된다면 리액트는 매번 렌더링만 하다가 생을 마감하고 말 것입니다. 속도는 말할 것도 없구요.

따라서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자 배치(Batch) 기능을 사용해 비동기로 작동한다고 볼 수 있습니다.

참고로 배치 업데이트는 16ms 주기라고 합니다!

18 버전에서 추가될 자동배치(Automatic Batching)는 기존에 이벤트 핸들러에서만 실행되던 배치가 이제는 setTimeout, Promise 등의 이벤트에서도 동작될 예정이며, flushSync() 등을 사용해 예외를 둘 수도 있다고 하여 많은 기대를 받고 있는 것 같아 미리 알아두면 좋을 것 같습니다.

자동배치 관련한 상세 설명(영어)

쉽고 빠르게 커링(Currying) 기법 이해하기(feat.자바스크립트)

커링(Currying) 기법의 이해와 사용, 그리고 장단점

커링(Currying)은 카레와 같은 스펠링을 갖고 있지만 그 유명한 하스켈(Haskell)이라는 이름의 출처인 수학&논리학자 하스켈 브룩스 커리(Haskell Brooks Curry)의 성(Family Name)입니다.

커링은 하나 이상의 매개변수(Parameter)를 갖는 함수를 부분적으로 나누어 각각 단일 매개변수를 갖는 함수로 설정하는 기법입니다.

식으로 설명하면 다음과 같습니다.

func(a, b, c) -> f(a)(b)(c)

위 식을 코드로 변경하면 함수를 리턴하면서 다음 매개변수를 받아 또 함수를 리턴합니다.

//non-curried
function plusFunc(a, b, c){
  console.log(a + b + c);
}

plusFunc(1, 2, 3);   // 6

//curried
function plusFunc(a){
    return function(b){
       return function(c){
          console.log(a + b + c);
       }
    }
}

plusFunc(1)(2)(4);  // 7

논커리와 커리의 차이를 확인해 보겠습니다.

non-curried : 함수 실행 시 파라미터가 모자라도 문제 없이 실행이 가능함
👉 함수 정의 : func(a, b, c)
👉 함수 실행 : func(a)
👉 실행 결과 : func(a, undefined, undefined)

curried : 함수가 인수를 전부 받을 때까지 실행을 보류함.
👉 함수 정의 : func(a, b, c)
👉 함수 실행 : func(a)
👉 실행 결과 : func(a)상태에서 b 함수 입력 대기

위 특징에 따라 다음과 같이 사용할 수 있습니다.

function setAppell(appell){
    return function(name) {
       console.log(appell + name);   
    }
}

const setName = setAppell('Mr.');
setName('Right');  // Mr.Right
setAppell('Mr.')('Baker'); //Mr.Baker

//ES6 화살표 함수
const setAppell = appell => name => console.log(appell + name);

const setName = setAppell('Miss.');
setName('Dior');  // Miss.Dior

또한 다음과 같이 이벤트와 파라미터를 동시에 전달할 때도 유용합니다.

const setNumber = (num) => (event) => {
     console.log(event.target.id+':'+num);
}

<div onClick="setNumber(2)(event)" id='myNum'>
  click
</div>

// myNum:2

그럼 커링의 장점을 요약하면 무엇이 있을까요?

장점👍
– 재사용 가능
– 생산성 향상(코드 양 감소)
– 가독성 향상

그렇다면 커링의 단점은 무엇일까요?

단점👎
– 함수가 깊이 깊이 중첩되면 메모리를 과다하게 점유할 가능성이 있는 것과 같은 맥락에서 커링을 과용하면
메모리와 속도에 문제점 발생 가능성이 있음

커링의 수학적인 설명이 필요하신 분을 위한 링크

커링을 사용하지 않아도 원하는 기능을 대부분 구현할 수 있지만 재사용성이나 가독성에 따른 생산성 향상을 위해 커링을 사용하면 좋은 효과를 기대할 수 있습니다. 커링을 직접 구현하지 않더라도 커링의 개념과 사용법에 대해 알아두면 다른 사람의 코드를 읽거나 로직을 이해하는데 큰 도움이 될 것이라 생각합니다.

target과 currentTarget, 차이가 뭘까?(feat.자바스크립트)

target과 currentTarget을 상황에 맞게 처리하기

자바스크립트에서 이벤트를 다룰 때 target과 currentTarget의 프로퍼티를 사용해 요소에 접근이 가능합니다.

그럼 target과 currentTarget의 차이는 무엇일까요?

1. target과 currentTarget

간단하게 설명하면 target은 이벤트가 발생한 바로 그 요소를 직접 가리키고 currentTarget은 이벤트 리스너(EventListener)를 가진 요소를 가리킵니다.

‘백문불여일코드(百聞不如一code)’이므로 코드를 통해 무엇을 의미하는지 확인해 보겠습니다.

<style>
  .upper{
    background:gold;
    width:80px;
    text-align:center;
  } 
  .lower{
    background:pink;
    width:50px;
  }
</style>

<script>
  function clicked(event){
    alert(event.target.id+" clicked");
  }
</script>

<div class="upper" onClick="clicked(event)" id="div">
  <span class="lower" id="span">                  
    span
  </span>
</div>

위의 코드를 통해 각각이 의미하는 바를 확인해 보겠습니다.

먼저 위 코드를 실행하면 다음 그림과 같은 결과가 나타납니다.

여기서 노랑은 div, 핑크는 span이며, 핑크가 노란색 위에 앉아있는 것이라고 볼 수 있습니다.

그런데 onClick 이벤트는 div에서 설정했지만 노랑을 눌러도, 핑크를 눌러도 모두 이벤트가 발생합니다.

div에만 이벤트를 설정했는데 왜 자식인 span도 이벤트를 상속 받는 것일까요?

이는 이벤트 버블링과 이벤트 캡쳐와 관련이 있으며, 관련 내용은 아래 포스트에서 확인해 보겠습니다.

이벤트 버블링과 이벤트 캡쳐 포스트

이벤트 발생에 따른 target은 다음과 같습니다.

– 핑크 부분을 클릭
target -> 핑크 (핑크를 눌렀으므로 핑크가 이벤트 발생 시점이 됨)
currentTarget -> 노랑 (onClick 이벤트는 노랑이 갖고 있음)

– 노란 부분을 클릭
target -> 노랑(노랑을 눌렀으므로 노랑이 이벤트 발생 시점이 됨)
currentTarget -> 노랑(onClick 이벤트는 노랑이 갖고 있음)

따라서 노랑을 누르면 ‘div clicked’, 핑크를 누르면 ‘span clicked’ 알림창을 띄웁니다.

만약 핑크를 눌러도 이벤트를 가진 노랑의 속성에 접근하고 싶다면 currentTarget과 getAttribute를 사용하면 됩니다.

<style>
  .upper{
    background:gold;
    width:80px;
    text-align:center;
  } 
  .lower{
    background:pink;
    width:50px;
  }
</style>

<script>
  function clicked(event){
    alert(event.currentTarget.getAttribute('id')+" clicked");
  }
</script>

<div class="upper" onClick="clicked(event)" id="div">
  <span class="lower" id="span">                  
    span
  </span>
</div>

위 코드는 핑크, 노랑 둘 다 이벤트를 가진 노랑 속성에만 접근합니다.

target은 누른 바로 그 것, currentTarget은 이벤트를 실행하는 바로 그 것으로 이해하면 될 것 같습니다.

target과 currentTarget는이벤트핸들링과 이벤트 캡쳐와 함께 이벤트 발생 관련하여 중요한 속성과 개념입니다.

백문불여일코드(code)이므로 코드를 통해 확인하고 연습하는 습관을 기르면 어제의 정보가 내일의 나의 무기가 될 수 있을 것이라고 생각합니다.

이벤트 버블링과 이벤트 캡쳐, 이제는 내 것으로 만들자(자바스크립트)

이벤트버블링과 이벤트캡쳐, 개념과 활용

1. 이벤트 버블링

(이벤트 버블링은 거품이 퐁퐁퐁퐁 일어나듯이 이벤트가 퐁퐁퐁퐁 일어나 ‘버블링(Bubbling)’이라는 이름을 갖게 되었다는 글을 어디선가 본 적이 있습니다..)

이벤트 버블링은 이벤트 발생 요소에서부터 순서대로 최상위 부모 요소까지 퐁퐁퐁퐁 이벤트가 연달아 발생합니다.

동작을 확인하기 위해 다음 코드의 결과를 보겠습니다.

<style>
  .upper{
    background:gold;
    width:70px;
    text-align:center;
  } 
  .middle{
    background:orange;
    width:50px;
    text-align:center;
  }
  .lower{
    background:pink;
    width:30px;
  }
</style>

<script>
  function clicked(event){
    alert(event.currentTarget.getAttribute('id'));
  }
</script>

<div class="upper" onClick="clicked(event)" id="쌉">a
  <div class="middle" onClick="clicked(event)" id="가">b
    <div class="lower" onClick="clicked(event)" id="능">c
    </div>
  </div>
  
</div>

위 코드를 실행하면 다음 그림과 같은 결과가 나옵니다.

여기서 가장 내부에 자리 잡고 있는 c를 클릭하면 어떤 순서대로 이벤트가 실행될까요?

이벤트 버블링이 default로 설정되어 있으므로 c, b, a의 순서대로 이벤트가 발생합니다.

그러므로 위 코드라면 ‘능’ -> ‘가’ -> ‘쌉’ 의 순서대로 알림창이 뜹니다.

b를 클릭하면 ‘가’ -> ‘쌉’ 의 순서로 알림창이 뜹니다.

그렇다면 순서를 ‘쌉’ -> ‘가’ -> ‘능’ 으로 만들려면 어떻게 해야 할까요? 바로 이벤트 캡쳐를 사용하면 됩니다.

2. 이벤트 캡쳐

이벤트 캡쳐를 사용하려면 addEventListener 내부에 capture 값을 명시적으로 true로 변경해줘야 합니다.

기본값은 false이며, false는 이벤트 버블링, true는 이벤트 캡쳐를 의미합니다.

function clicked(event){
    alert(event.currentTarget.getAttribute('id'));
}

const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', clicked,{
  	capture:true
  }
  );
});  

<div class="upper" id="쌉">a
  <div class="middle" id="가">b
    <div class="lower" id="능">c
    </div>
  </div>
</div>

위 코드에서 capture:true로 설정해주고 다시 c를 클릭하면 이번에는 반대 순서인 위에서 아래로 이벤트가 발생합니다.

이제는 ‘쌉’ -> ‘가’ -> ‘능’ 의 순서로 알림이 뜹니다.

그렇다면 ‘이벤트 버블링도 싫고, 이벤트 캡쳐도 싫으니 둘 다 하지마!’라고 명령할 때는 어떻게 해야 할까요?

간단하게 이벤트와 함께 실행될 함수 내부에 event.stopPropagation()을 넣어주면 됩니다.

프로파간다(propaganda)를 닮은 그 단어 ‘propagation’은 ‘번식, 증식, 전파’등의 의미를 갖고 있습니다.

따라서 ‘이벤트의 증식 또는 전파를 멈추겠다’는 의미로 event.stopPropagation() 메소드를 사용하면 됩니다.

<style>
  .upper{
    background:gold;
    width:70px;
    text-align:center;
  } 
  .middle{
    background:orange;
    width:50px;
    text-align:center;
  }
  .lower{
    background:pink;
    width:30px;
  }
</style>

<script>
  function clicked(event){
    event.stopPropagation();
    alert(event.currentTarget.getAttribute('id'));
  }
</script>

<div class="upper" onClick="clicked(event)" id="쌉">a
  <div class="middle" onClick="clicked(event)" id="가">b
    <div class="lower" onClick="clicked(event)" id="능">c
    </div>
  </div>
  
</div>

위 메서드는 더 이상 ‘쌉 가 능’ 또는 ‘능 가 쌉’ 따위의 단어를 완성하도록 내버려두지 않습니다.

c를 눌러도 ‘쌉’ 또는 ‘능’만 띄울 뿐입니다.

이벤트핸들링과 이벤트 캡쳐는 의도한 대로 이벤트를 발생시키기 위한 중요한 속성과 개념입니다.

위 개념은 다음 포스트와 관련이 있습니다.

target, currentTarget 차이가 뭘까?

백문불여일코드(code)이므로 코드를 통해 확인하고 연습하는 습관을 기르면 어제의 정보가 내일 나의 무기가 될 수 있을 것이라 생각합니다.

리액트(React) 컴포넌트, 라이프사이클의 과거와 현재(useEffect)

클래스형 컴포넌트와 함수형 컴포넌트의 라이프사이클과 이벤트

1. 클래스형 컴포넌트와 라이프사이클(Life-cycle)

라이프사이클 이벤트는 컴포넌트의 렌더링과 DOM 이벤트 등을 의도대로 관리할 수 있으며, 이를 통해 성능을 개선할 수 있습니다.

클래스형 컴포넌트의 라이프사이클은 다음과 같이 세 가지로 분류하며, 각 메소드는 자주 사용하거나 유의할 부분만 정리하겠습니다.

마운팅(Mounting) – 컴포넌트가 생성될 때 한 번만 실행(아래 순서대로 실행)

– constructor()

– ~~UNSAFE_componentWillMount()~~ -> version 17부터 공식적으로 권장X

– render()

– componentDidMount()

업데이트(Update) – props 또는 state가 변경될 때마다 실행

– ~~UNSAFE_componentWillReceiveProps()~~ -> 권장X

– ~~UNSAFE_componentWillUpdate()~~ -> 권장X

– render()

– componentDidUpdate(prevProps, prevState, snapshot)

언마운팅(Unmounting) – 컴포넌트가 제거될 때 한 번만 실행

– componentWillUnmount()

위와 같이 각각의 컴포넌트는 [ 마운팅 -> 업데이트(반복) -> 언마운팅 ]의 라이프사이클을 갖습니다.

이전에는 직관적인 이름을 갖는 다양한 메소드(componentWillMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate)를 통해 이벤트 발생 시점마다 세세한 조작이 가능했으나 현재는 버그나 안전성의 이유로 점점 더 단순해지고 있습니다.

위 기능을 모두 대체하는 훅(Hook)이 너무 편해서 클래스형 컴포넌트를 반드시 사용해야 하는 상황이 아니라면 함수형 컴포넌트와 함께 useEffect를 사용하는 방법이 권장되고 있습니다.

라이프사이클 별로 메소드를 사용하는 방법은 다음과 같습니다.

class TestList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter:0
    }
  }

  // 마운팅 직후 실행
  // 마운팅 전 실행은 constructor() 사용
  componentDidMount(){
     console.log('component Mounted');
  }

  // 업데이트 후 이전 데이터를 파라미터로 가져옴
  componentDidUpdate(prevProps) {
     if(prevProps !== this.props) {
            this.setState({counter:++this.state.counter})
     }
  }

  // 언마운팅 직전 실행
  componentWillUnmount(){
     console.log('component Unmounted');
  }

  render() {
    return (
      <div>{this.state.counter}</div>
    );
  }
}

마운팅 이벤트는 실제 DOM에 컴포넌트를 추가하는 이벤트입니다.

마운팅 이벤트는 다른 프레임워크나 라이브러리 또는 데이터와 연결하는 작업에 적절합니다.

업데이트 이벤트는 컴포넌트의 업데이트와 관련이 있으며, props, state 등의 변경이 있을 때 렌더링 관련한 작업을 설정합니다.

언마운팅은 DOM에서 요소를 분리하거나 제거하는 이벤트입니다.

언마운팅 이벤트는 타이머 제거, 요소 제거, 이벤트 제거 등 설정한 요소의 정리, 제거에 사용합니다.

2. 함수형 컴포넌트와 useEffect(Hook)

리액트 16.8부터 추가된 훅(Hook)은 클래스를 사용하지 않아도 state 또는 리액트의 여러 기능을 편하게 사용하도록 해주는 기능입니다.

이 중 useEffect 훅은 라이프사이클과 관련이 있는데요.

리액트 공식 문서에서 useEffect를 위와 같이 설명합니다.

즉 componentDidMount, componentDidUpdate, componentWillUnmount를 모두 합쳐 놓은 것과 같은 기능을 하는 것이 useEffect입니다.

모두 합쳐 놓았지만 작성 방법에 따라 각각의 기능을 구현할 수 있습니다.

먼저 함수의 시그니쳐는 다음과 같은 모습이며, 첫 번째는 실행할 함수, 두 번째는 조건을 배열로 전달하며 두 번째 매개변수는 생략이 가능합니다.

useEffect(함수, 배열);

  useEffect(() => {
      console.log('useEffect is working');
  });

– 마운팅만 설정(=componentDidMount)

마운팅 시에만 실행하고 싶은 경우에는 두 번째 매개변수로 빈 배열을 전달하면 됩니다.

function testStatus(props) {

  useEffect(() => {
      console.log('useEffect on mounting');
  },[]);

  return <div>test</div>;
}

– 언마운팅만 설정(=componentWillUnmount)

언마운팅 시에만 실행하고 싶은 경우에는 함수를 리턴하면서 두 번째 매개변수로 빈 배열을 전달하면 됩니다.

function testStatus(props) {

  useEffect(() => {
      
      console.log('useEffect on mounting');

      return () => {
        console.log('useEffect on unmounting');
      }

  },[]);

  return <div>test</div>;
}

– 데이터 업데이트마다 설정(=componentDidUpdate)

useEffect에서 두 번째 매개변수를 전달하지 않으면 렌더링마다 해당 훅이 실행됩니다.

하지만 관련 없는 데이터로 인한 리렌더링에도 훅이 실행되면 의도치 않은 결과를 낳거나 성능의 저하를 불러올 수 있으므로 실행의 기준이 되는 데이터를 지정하고 실행 시점을 설정할 수 있습니다.

이를 위해서는 두 번째 매개변수인 배열에 체크할 데이터를 넣으면 됩니다.

function testEffect(props) {

  useEffect(() => {
      console.log('re-rendering');
  });

  useEffect(() => {     
      console.log('props is changed');
  },[props.data]);

  return <div>test</div>;
}

useEffect를 사용하면서 몇 번의 시행착오만 거치면 원하는 기능을 어느 정도 구현할 수 있습니다.

하지만 라이프사이클에 대한 이해 없이 계속 사용한다면 어느 순간 ‘시간을 갈아 넣어 짠 코드’는 시간 앞에 무릎을 꿇게 될 수도 있을 것 같습니다.

ジャバスクリプトで配列を結合(マージ)する良い方法(javascript)

配列を結合する便利な三つのやり方(concat(), …spread, push())

ジャバスクリプトを使ってデータを扱うことが多くなり、配列を使用する仕組みも増えていきます。

その中、マージ（結合）についてちらっと調べてみますね。

配列(array)はインデックスを持つ要素を順に並べる構造です。

一つの配列ならインデックスまたはメソッド（unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf()など）を使って配列中のデータを便利に操作することができます。

配列間のマージ方法も同じくconcat(), push(), …spreadなどが存在します。

一つづつ確認してみます。

1. 配列結合の三つ方法

concat

concatenate(連結する意味)の略字であるconcat()は意味通り配列両方を繋ぎます。

次のように扱うので、サンプルから確認してみます。

[array1].concat([array2]…..)

[].concat([array1], [array2]……)

const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

concatは一つ以上の配列を結合し、一つの配列にします。

配列中のデータの形式（タイプ）にかかわらず結合できるし、ネストされている配列（配列中にまた配列がある構造）の結合もできます。

…spread スプレッド

ES6から追加された文法の一つであるスプレッド構文は配列或はオブジェクトを速くて安全にコピーすることができます。

深いコピー(deep copy)方法でコピーするので、既存のデータとは違うメモリーアドレスを使いますね。

なので配列の結合方法の中では一番いい方法だと言えます。

const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

また、スプレッド構文は次のように非構造化ではよくつかわれています。

const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']

push

push()は配列の最後に要素を追加するときよく使うメソッドです。

push()メソッドとスプレッド構文を一緒に使うと配列の結合ができます。

でもこの方法は既存データの上に新しいデータを上書きするので既存データの変更に注意する必要があります。

const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

2. 総合

配列を結合する方法の中concat(), …spread, push()について調べてみました。

状況により必要な方法が違うので、システムやロジックを考えた上で選んだら問題はないと思います。

あざーす！

자바스크립트, 편리한 배열 병합 방법(Merge Arrays in Javascript)

자바스크립트의 배열 병합 방법(concat(), …spread, push())

자바스크립트를 사용해 데이터를 다루는 일이 점점 더 많아지고, 배열을 사용하는 관련 작업을 많이 하게 됩니다.

그 중에서도 병합과 관련된 부분에 대해 알아보도록 하겠습니다.

배열은 인덱스(Index)를 갖는 요소를 순서대로 나타낸 데이터 구조입니다.

하나의 배열이라면 인덱스 또는 메소드(unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf() 등)를 사용해 배열 내부의 데이터를 쉽게 다룰 수 있죠.

배열의 병합(Merge) 또한 마찬가지입니다.

concat(), push(), 스프레드 연산자(…spread), 등 배열의 병합을 위한 여러 방법이 존재합니다.

하나씩 확인해 보겠습니다.

1. 배열 병합의 3가지 방법

concat

concatenate(연결시키다, 사슬같이 잇다)의 약자인 concat()은 말 그대로 두 배열을 연결하는 역할을 합니다.

크게 다음과 같은 방식으로 사용하며, 샘플 코드를 통해 조금 더 상세한 부분을 확인하겠습니다.

[array1].concat([array2]…..)
[].concat([array1], [array2]……)

const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

위와 같이 concat은 하나 이상의 배열을 합쳐 하나의 배열로 만듭니다.

배열 내부 데이터 타입에 상관없이 병합이 가능하며, 중첩된 배열의 병합도 가능합니다.

…spread 스프레드 연산자

ES6에서 추가된 문법인 스프레드 연산자는 배열이나 객체를 빠르고 안전하게 복사할 수 있습니다.

깊은 복사(Deep copy) 방식으로 복사를 진행해 기존의 배열 데이터와는 다른 메모리 주소를 사용하므로 배열 병합 방법 중에서는 가장 좋은 방식이라고 볼 수 있습니다.

const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

스프레드 연산자는 다음과 같이 비구조화 할당에서도 자주 사용됩니다.

const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']

push

push() 메소드는 배열 끝에 데이터를 추가할 때 자주 사용하는 메소드입니다.

push() 메소드와 스프레드 연산자를 같이 사용하면 배열 병합이 가능하지만 기존 배열에 데이터를 추가하는 방식이므로 기존 배열이 변경되는 부분을 주의해야 합니다.

const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

2. 마무리

배열을 병합하는 여러 가지 방법 중 concat(), …spread, push() 세 가지를 소개하였습니다.

각 상황에 따라 필요한 방법이 다르니 필요에 따라 맞는 것을 골라 사용하면 좋을 것 같습니다.

감사합니다!

やすくて速い正規表現(Easy Regular Expression)

正規表現の構成と意味、ジャバスクリプト(Javascript)でのお扱い

正規表現というのは検索パータンを指定し記号で表示したものです。

このアイデアはアメリカの数学者であるスティーブンコールクリーン(Stephen Cole Kleene)が1950年代に正義した正規言語(Regular Language)と関係がありまして、正規表現の文法は1980年代にパール(Perl)言語から使い始まりました。

主に、検索や置換の作業に使われ、皆が使うほとんどのプログラミング言語の中でサポートされている文法です。

例えば、次の文章の中で特定した条件を検索するとき正規表現の力を借りることができます。

The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.

‘too’ 文字列を検索する -> /too/
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
大、小文字を構わなく ‘t’ 文字を検索するとき -> /t/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘d’ から始まる単語及び文字のすべてを検索するとき -> /[d]\w+/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘ea’を含む単語を検索するとき -> /[a-z]*ea[a-z]*/-i
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it

正規表現の文法テストは次のページが助かります。

regexr.com

青いバーExpressionの下のインプットには表現を入れ書き、その下のボックスには検索対象になるテキストを入れればオッケーです。

まず、表現の意味について少し勉強してからJavascriptで楽に使う方法を確認してみます。

1. 正規表現の記号

/ . / → すべての文字

/ + / → 一つ以上の文字

/ ? / → ０または一つの文字

/ ^ / → 該当の文字を除く

/ – / → 範囲指定

/ * / → ０または一つ以上の文字

/ [ ] / → グループセット

/ { } / → 繰り返しの回数指定

/ \ / → エスケープ

/ \d / → すべての数字

/ \D / → 数字ではない文字

/ \w / → アルファベット、数字、アンダーバー

/ \W / → アルファベット、数字、アンダーバーではない文字

/ \s / → 空白文字

/ \S / → 空白ではない文字

/ \n / → 改行

基本的に正規表現を構成する記号は上記であり、この記号さえ覚えれば正規表現の基本的な仕組みは十分理解できると思います。

それではサンプルを参考しながら正規表現を分析していきましょう。

2. 記号の意味

\d \D \w \W \s \S \n

正規表現で一番基礎になる記号であるので覚えておくと役に立ち部分です。

dは数字、 wは英文字、 sは空白、 nは改行の意味であり、各文字の大文字は NOT(反対)を示します。

数字が一回以上繰り返す文字検索 👉 / [\d]+ /

数字ではない文字を検索（空白含む） 👉 / [\D] /

括弧(かっこ)が含まれている文字、数字検索 👉 / $[\w]+$ /

英文字、数字、アンダーバーではない文字検索 👉 / [\W]+ /

空白検索 👉 / \s /

上で紹介したregexr.comで検索対象になるテキストをいれてパータンを直接に作成してみるとすぐ正規表現になれると思います。

\ エスケープ Escape

大体エスケープというのは何ですかね。

キーボードの一番左一番上のキー(ESCと書かれているもの)がエスケープの略字です。エスケープの意味は逃れるのです。

こちらでは約束から逃れることだと認識すればいいと思いです。

例えば、正規表現で点(. dot)はすべての文字の意味にしようと約束した特別な文字ですね。

でもたまには’それ約束以外’に点をピリオド意味の点で使いたいときがありますね。

この時エスケープを使います。

エスケープを使わない限り、文字は約束した機能として動きます。

下の例で確認しましょう。

すべての文字を意味。 a, b, c, d, ?, !, @, , などすべての文字の中一つ 👉 / . /

エスケープを前につけるとただピリオド記号だけの意味 👉 / \. /

一つ以上の文字の意味 👉 / + /

エスケープを前につけるとただプラス記号だけの意味 👉 / \+ /

エスケープはよく使われる必須な機能であるので、そのままの文字にはならないのでエスケープが必要な特別な文字(. ? + *など）を覚えておく必要があります。

その文字の一部を下で紹介します。

. + ? ^ – *

上で紹介した特別な記号は特別な意味を持ちます。代表的な使い方は下の通りです。

小文字a~z或は大文字A~Z中一致する英文字検索 👉 / [a-zA-Z] /

color或はcolourを検索(‘u’があってもなくてもいい) 👉 / colou?r /

‘a’を含む単語検索 👉 / [\S]*a[a-zA-Z]* /

a-z或は空白(space)ではない文字検索 👉 / [^a-z ] /

英文字から始め必ず数字または特殊記号を含む文字列を検索 👉 / [a-zA-Z]+[\d!@#\$%\^*]+[\w]* /

{ } 中括弧(かっこ) curly brackets

中括弧は繰り返しの回数を指定し、これを使うと詳しい検索パータンの設定が可能です。

中括弧の中、一つの数字は全体の繰り返し回数の意味であり、二つの数字は頭と末の範囲を指定する意味です。

例え、{3}は３回繰り返しの意味であり、{1, 3}は範囲区間1から3の意味です。

{1, }のような表現も可能であり、これは+記号と同様な意味,　つまり一つ以上の意味であります。

Aが3回繰り返す文字を検索 👉 / [A]{3} /

3桁以上の数字を検索(3번以上繰り返し) 👉 / [\d]{3,} /

Aが二回から三回まで繰り返す文字を検索(繰り返す範囲指定) 👉 / [A]{2,3} /

繰り返し回数だけを指定すれば、意図しない結果が出ることがあるので、部分式(subexpression)と全後方一致検索を一緒に使うともっと効果的なパータンが可能です。

[ ] 角括弧(かっこ) Brackets

角かっこの中に記号を書き、検索パータンを指定します。直接に記号を書き込んだり、範囲指定記号の’-‘を使ってパータンを指定します。

指定する文字(a 或は A 或は b 或は B 或は c 文字)一つを検索 👉 [aAbBc]

aから eまで(a,b,c,d,e)の範囲内一つの文字を検索 👉 [a-e]

除外文字’^’があるので a-z 範囲に入らない文字(記号)を一つ検索 👉 [^a-z]

明記した記号の一つを検索 👉 [?!@#$%^&*()_]

c或はCから始め, a-zの中一つで終わる単語検索 👉 [cC][a-z]

[ ]を使うと一つだけの文字を検索するので一つ以上の文字を検索したいときには+記号（一つ以上の文字、０は不可）または＊（０または一つ以上の文字、０も可能）記号を付ける必要があります。

一つ以上のa-z文字を検索(必ず一つ以上の条件) 👉 [a-z]+

０個以上のA-Z文字を検索(なくてもいい) 👉 [A-Z]*

特定構成で成り立つ文字列の検索に効果的であり、例えばメールアドレスの文字列があります。

メールアドレス形式のabcd@xyz.comを検索するためには次のようなパータンを使うことができます。

/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]+/

では、パータンを分析してみます。

先、メールのIDになる部分は英文字と数字が入るので、[a-zA-Z0-9]で始め一つ以上を意味する+記号を付けます。

その次、@が続きますので@を入れ, ホストのアドレスも一つ以上の英文字と数字を指定します。

.com形のアドレスなのでピリオドをそのまま使うためエスケープを使いまた一つ以上の英文字を入れてパータンを生成します。

もしIDの中に点が入るかホストアドレスが.co.jpなどの形になるときにはそれに対する応用が必要です。

3. まとめ

正規表現の第一印象はまるで外界言語みたいな姿で広く使われる既存の言語とは違う様子をしてますね。

軽く近づけられなくいやな気持がするときもありますが、少しだけでも調べてみたら意外と簡単な規則でパワフル機能を持っていいやつだなと思われる時が来るかもですね。

上で紹介した部分は代表的な機能を紹介するため簡単なパータンたちなので、上のパータンは不完全なパータンであります。もの正しいパータンを作るためにはもっと深く勉強する必要がありますね。

ご質問がありましたら、自由にコメントください！

あざーす！