개발자의 지식2) 재귀함수/ flatten과 unflatten/Observable/- reduce/ React-router vs Next-router/ This 와 Binding

- Recursive functions

재귀함수란?

재귀란 원래의 자리로 되돌아가거나 되돌아온다는 뜻!
재귀함수란 어떠한 함수가 있을 때 그 안에서 자기자신을 호출하는 함수를 의미한다 !

function example(count) {
    let sum = 0;
    // 여기에 코드를 작성하세요
    if(count === 0) return sum
    return example(count-1) +2
}

위 example 함수는 return 값으로 자기 자신을 불러오며
불러올 때 매개변수인 count를 -1해주고 결과값을 +2 해준다

- for문 map, while 대신 사용하시 용이할 듯 하다.

function WhatIsRecursion_02(count) {
    let sum = 0;

    function recursion(count) {
     if (count===0) {return 0}
      else{
       return recursion(count-1)+2
      }		
    }

    return recursion(count)
}

- flatten과 unflatten

• 자바스크립트에서 Flatten은 array 구조 안에 또 다른 array를 인덱스로 가질 때, array를 평평하게 만드는 작업을 뜻한다 !

• Array의 메서드인 flat() 함수를 사용한다.

• flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

• unflatten이란, flatten된 객체나 배열을 다시 깊이 있게 바꿔주는 것!

const { flatten, unflatten } = require("arr-flatten-unflatten");

let flat = flatten([2, 4, [8, [2, [32, 64]], 7], 5]);
/**
 * => {
 * "[0]": 2,
 * "[1]": 4,
 * "[2][0]": 8,
 * "[2][1][0]": 2,
 * "[2][1][1][0]": 32,
 * "[2][1][1][1]": 64,
 * "[2][2]": 7,
 * "[3]": 5
 * }
 * */

unflatten(flat);
// => [2, 4, [8, [2, [32, 64]], 7], 5]

- Observable

• Observable의 뜻이란? : 식별(관찰)할 수 있는
• 공식 홈페이지 설명대로라면, 이벤트 발생 직후 어떤 처리로 결과를 리턴하기 위해 데이터를 조작하는 메커니즘을 정의하는 곳이 Observable!
• 여러값의 지연푸시 모음이다 !
  -> 공식 홈페이지 설명
  • Rxjava에서 옵저버는 Observable을 구독한다. 옵저버는 Observable이 배출하는 하나 또는 연속된 항목에 반응한다. 이런 패턴은 동시성 연산을 가능하게 한다. 왜냐면 Observable이 객체를 배출할 때까지 기다릴 필요 없이 어떤 객체가 배출되면 그 시점을 감시하는 관찰자를 옵저버 안에 두고, 그 관찰자를 통해 배출 알림을 받으면 되기 때문이다...(중략)...ReactiveX에선 옵저버에 의해 임의의 순서에 따라 병렬로 실행되고 결과는 나중에 연산된다. 즉 메서드 호출보다는 Observable 안에 데이터를 조회, 변환하는 메커니즘을 정의한 후, Observable이 이벤트를 발생시키면 옵저버의 관찰자가 그 순간을 감지하고 준비된 연산을 실행시켜 결과를 리턴하는 메커니즘 때문에 Observable을 구독한다고 표현하는 것이 올바를 것이다...(중략)
• ㅇㅖ시

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

예제. 위 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable다.

Observable을 호출하고 값들을 보기위해서는 구독(subscribe) 해야한다.

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');

위의 실행결과!

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

출처 : https://steadev.tistory.com/57

- reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환한다!

누산기 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)
요렇게 네개의 인자를 받을 수 있음.

또, 초기값이 있는경우와 없는경우를 잘 비교해서 연습해놓자!
reduce를 잘 이해하기 위해선 Runjs로 콘솔에 찍어가며 하는게 짱인듯!

초기값이 없는경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}); //최종 반환 값 10

초기값이 있는경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10); //최종 반환 값 20

- React-router vs Next-router

React의 Router 와 Next의 Router는 차이가 있다!
Next.js 는 리액트 프레임워크이다.
리액트에서 하기 어려운 서버사이드렌더링,라우터 기능을
Next.js 에서는 좀더 편하게 개발 할 수 있도록 도와준다!

React의 Router와 Next의 Router 의 차이

//react routing
import {BrowseRouter as Router, Switch, Route} from 'react-router-dom'

export default function App(){
<Router> //일단 라우팅 되는 부분을 감싸준다
      <Switch> //Switch는 안에있는 여러가지 Router중에서 조건에 만족하는 첫번째 Router를 불러온다.
      	<Route exact path = "/MinFront"/ >
      	<Route exact path = "/" /> // 이렇게 / 하나만 쓰면 index.js 메인페이지를 불러온다.
        <Route exact path = "/gogo" />
      	<Route exact path = "" />
          
      </Switch>
</Router>

-> 리액트의 라우터 방식. 기본적으로 react-router-dom에서Router,Switch,Route등 여러가지를 임포트 해서 사용 해야 한다.
여러가지 조건에 만족해야 CSR 처럼 자연스러운 페이지 라우팅이 가능하다.

import { useRouter } from "next/router";

export default function movePage(){
  const router = useRouter();
  const onClickMove=()=>{
    router.push("/이동할 폴더 위치")
  }
  return <p onClick={onClickMove}>페이지 이동</p>
}

-> next router! 컴포넌트의 제일 최상단에 useRouter를 선언한 후 router.push()를 통해 편하게 페이지 이동을 할 수 있다!

- This 와 Binding

This

• this는 상위 객체를 가르키는 변수이다.
• 브라우저 콘솔에서 this를 치게되면 가장 최상위 객체인 window를 의미하는것이다.
• 우리가 정의한 객체 안에서 this를 쓴다면 , 정의한 객체를 가르키는것이 this가 되는것이다!
• 쉽게 말해 현재 함수를 실행하고 있는 그 객체를 참조한다 !

Binding

• 바인딩은 element(속성)에 기능을 하나하나 넣어주는 과정을 의미한다
• 바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다.
• 데이터 바인딩 이라는 뜻도 그런 의미와 같다. API를 통해서 받아온 데이터를 바인딩 즉 하나하나 넣어준다는 의미이다.