// Alias Type
type Info = {
    name: string,
    age?: number,
}

const me : Info = {
    name: 'donghyun',
}

// Argument & Return Type
const info = (name: string, age?: number) : Info => ({name, age});

console.log(info('dong'));

readonly

원시타입이 아닌 객체에 불변성을 부여할 수 있다?

type Color = {
    readonly color: string,
    code: number,
}
// fruits에 조작을 가할 수 없고, colors의 color 역시 조작할 수 없다.
const fruits : readonly string[] = ['apple', 'banana', 'lemon'];
const colors : Color = {
    color: 'red',
    code: 123
}

Tuple

const fruits_2 : [string, number, boolean] = ['apple', 20000, true];
const fruits_1 : readonly [string, number, boolean] = ['apple', 20000, true];

any

타입스크립트로부터 벗어나고 싶다?! 그럼 any 타입을 명시하라!

unknown / void / never

// unknown
let count: unknown;
let name: unknown;

if(typeof count === 'number') {
  let total = count + 1;
}
if(typeof count === 'string') {
  let upperCase = name.toUpperCase();
}

// void: 아무것도 return하지 않는 함수, 따로 지정하지는 않음
function apple(): void {
  console.log('yummy');
}

// never
function error():never{
  throw new Error('no!!');
}

function error(name: string|number){
  if(typeof name === 'string'){
    // string type
  } else if (typeof name === 'number') {
    // number type
  } else {
    // never type
  }

function solution(participants, completions) {
    const map = new Map();

    for(const participant of participants) {
      map.set(participant, (map.get(participant) || 0) + 1);
    }

    for(const completion of completions) {
      map.set(completion, map.get(completion) - 1);
    }

    for(const [key, value] of map.entries()){
      if(value === 1) return key;
    }
}

폰켓몬

function solution(nums) {
    const map = new Map();

    for(const num of nums) {
      map.set(num, (map.get(num) || 0) + 1);
    }

    return map.size >= nums.length / 2 ? nums.length / 2 : map.size;
}

위장

function solution(clothes) {
    const map = new Map();
    let answer = 1;

    clothes.forEach(v => {
        map.set(v[1], (map.get(v[1]) || 0) + 1);
    })

    for(const value of map.values()){
        answer *= (value + 1);
    }

    return answer - 1;
}

베스트앨범

function solution(genres, plays) {
    const answer = [];
    const map = new Map();

    genres.forEach((genre, index) => {
        map.set(genre, (map.get(genre) || 0) + plays[index]);
    })

    const list = [...map.entries()].sort((a, b) => b[1] - a[1]);

    list.forEach((value, index) => {
        const play = plays.map((v, i) => [v, i])
                          .filter((v, i) => genres[i] === value[0])
                          .sort((a, b) => b[0] - a[0])
                          .slice(0, 2);

        answer.push(...play.map(v => v[1]));
    })

    return answer;
}

Set 객체는 중복되지 않는 값들의 집합으로, 배열과 유사하지만 인덱스와 순서가 없다. 또한 이터러블을 인수로 받아 Set 객체를 생성하며, 이터러블 내 중복된 값은 저장되지 않는다.

Set 객체가 없었을 때!

const set = arr => arr.filter((v, i, self) => self.indexOf(v) === i);

Set 용법

const set = new Set();

1. 개수 확인
set.size();

2. 추가
set.add(1);

3. 여부 확인
set.has(1); 

4. 삭제
set.delete(1);

5. 일괄 삭제
set.clear();

Set 객체는 이터러블이다. 즉, 순환이 가능하다. 순환가능한 배열에 사용가능한 for, forEach 사용이 가능하고, 스프레드 문법, 구조분해할당 역시 가능하다. 추가로 Set 객체가 요소의 순서를 보장하지 않지만 추가된 순서를 따른다. 이는 다른 이터러블과의 호환성을 유지하기 위함이다.

Set의 집합 연산

Set을 통해 교집합, 합집합, 차집합을 구현할 수 있다.

const set_a = new Set([1, 2, 3, 4]);
const set_b = new Set([2, 4]);

1. 교집합
console.log(set_a.intersection(set_b)); >> Set(2) {2, 4}
or
console.log(new Set([...set_a].filter(v => set_b.has(v)))

2. 합집합
console.log(set_a.union(set_b)); >> Set(4) {1, 2, 3, 4}
console.log(new Set([...set_a, ...set_b]))

3. 차집합
console.log(set_a.difference(set_b)); >> Set(2) {1, 3}
console.log(new Set([...set_a].filter(v => !set_b.has(v)))

4. 상위집합(set_a가 set_b의 상위 집합인가)
console.log(set_a.isSuperset(set_b)); >> true

Map 객체

Map 객체는 키와 값으로 이뤄졌다는 면에서 객체와 유사하지만, 객체와 달리 Map 객체는 js의 모든 값을 키로 삼을 수 있고, 이터러블하다는 면에서 객체와 차이를 지닌다.

Map 용법

const map = new Map();

1. 개수 확인
map.size();

2. 추가
map.set(1);

3. 여부 확인
map.has(1); 

4. 삭제
map.delete(1);

5. 일괄 삭제
map.clear();

6. 순회
map.forEach((value, key) => {
  console.log(key, value);
}
console.log(map.keys());
console.log(map.values());
console.log(map.entries());     

모던 자바스크립트 Deep Dive를 읽고 작성한 글입니다.

아래 코드는 어려운 계산과 쉬운 계산이 공존하는 코드이다. 어마무시한 for loop를 적용해 계산의 속도를 늦췄다.

문제는 쉬운 계산을 할 때 easyNumer라는 state가 업데이트되어 app 컴포넌트가 재랜더링되는데, 이는 함수가 재실행되는 것과 같아서 변수의 값들이 초기화됨을 의미한다. 결국 바뀌지 않은 hardSum이 다시 할당되면서 무시무시한 hardCalculate가 재실행된다.

import React, { useState } from 'react';

const hardCalculate = (number) => {
  console.log("어려운 계산");
  for (let i = 0; i < 999999999; i++) {} // thicking time!!
  return number + 10000;
}

const easyCalculate = (number) => {
  console.log("쉬운 계산");
  return number + 10000;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = hardCalculate(hardNumber);
  const easySum = easyCalculate(easyNumber);

  return (
    <>
      <h3>어려운 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => {setHardNumber(parseInt(e.target.value))}}
      />
      <span> + 10000 = {hardSum}</span>
      <h3>쉬운 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => {setEasyNumber(parseInt(e.target.value))}}
      />
      <span> + 10000 = {easySum}</span>
    </>
  );
}

export default App;

그렇다면 바뀌지 않은 값은 재실행되지 않도록 할 수 있는 방법이 없을까? 즉, 바뀌기 전의 값을 메모리에 저장되어 꺼내쓰도록 구성할 수는 없을까? 이것이 useMemo이다!!

import React, { useMemo, useState } from 'react';

const hardCalculate = (number) => {
  console.log("어려운 계산");
  for (let i = 0; i < 999999999; i++) {} // thicking time!!
  return number + 10000;
}

const easyCalculate = (number) => {
  console.log("쉬운 계산");
  return number + 10000;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = useMemo(() => {
    return hardCalculate(hardNumber);
  }, [hardNumber]);

  const easySum = easyCalculate(easyNumber);

  return (
    <>
      <h3>어려운 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => {setHardNumber(parseInt(e.target.value))}}
      />
      <span> + 10000 = {hardSum}</span>
      <h3>쉬운 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => {setEasyNumber(parseInt(e.target.value))}}
      />
      <span> + 10000 = {easySum}</span>
    </>
  );
}

export default App;

hardSum 변수에 useMemo를 할당해 hardNumber의 값이 변했을 때에만 연산이 되도록하고, 이외에는 캐싱된 값이 쓰일 수 있도록 설계하면 컴포넌트가 랜더링될 때 무의미한 연산을 막을 수 있어 최적화를 이뤄낼 수 있다!

그런데 사실 javascript 즉, 프론트에서 저렇게 1초씩이나 걸리는 연산을 할 일은 그리 많지는 않다. 다행히 useMemo는 연산보다 더 빛을 발하는 곳이 있는데, 객체타입을 변수에 할당할 때이다.

import React, { useEffect, useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [isKorea, setIsKorea] = useState(true);

  const location = {
    country: isKorea ? "한국" : "외국"
  }

  useEffect(() => {
    console.log("useEffect 호출!!");
  }, [location]);

  return (
    <>
      <h2>하루에 몇끼 드세요?</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <hr />
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>비행기 타자</button>
    </>
  );
}

export default App;

변수에 원시타입이 아닌 객체타입을 할당하면 객체는 너무 크기 때문에 바로 변수에 할당되는 것이 아니라 메모리에 담기게 되고, 변수에는 그 메모리의 주소를 할당하게 된다. 그래서 같은 모습을 한 객체라도 비교연산자를 사용해 비교했을 때 false가 나오는 이유이다. 그렇다면 위의 상황도 number가 바뀔 때마다 app 컴포넌트는 리랜더링되는데, 그때 location이라는 변수에 객체가 재할당(주소가 바뀜)되기 때문에, useEffect의 의존성 배열에 위치한 location이 바뀐 것으로 인지해 겉으로는 location이 바뀌지 않았을 지라도 useEffect가 실행되게 된다.

import React, { useEffect, useMemo, useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [isKorea, setIsKorea] = useState(true);

  const location = useMemo(() => {
    return {
      country: isKorea ? "한국" : "외국"
    }
  }, [isKorea]);

  useEffect(() => {
    console.log("useEffect 호출!!");
  }, [location]);

  return (
    <>
      <h2>하루에 몇끼 드세요?</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <hr />
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>비행기 타자</button>
    </>
  );
}

export default App;

그래서 useMemo를 이용해 memoization하면 location이 바뀌지 않으면 기억된 객체가 사용되기 때문에 컴포넌트 최적화가 이뤄진다!!

3자가 약속을 정하려는 데에 소통의 어려움이 따르듯, 인증과정에 참여하고 있는 3자가 한자리에 모일 수 없는 상황에서 어떻게 하면 서로를 신뢰할 수 있을까를 고민하며 등장한 기술입니다.

OAuth의 주체

• Resource Owner(User): Resource Server와 Client의 사용자
• Client(Mine): 내가 운영하는 어플리케이션
• Resource Server(Their): Resource Owner 대신 Client가 접촉해야하는 대상, 데이터를 가지고 있는 서버
• Authorization Server: 인증을 전담하는 서버(이후 Resource Server로 통칭)

OAuth 등록 절차

우선 Client가 Resource Server에 접근하기 위해서는 사전 준비가 필요합니다.

• Client ID: 나의 어플리케이션 식별자 ID, 외부에 노출
• Client Secret: ID에 대한 비밀번호, 노출 X
• Authorized redirect URL: Resource Server가 권한을 부여하는 과정에서 전달돼야하는 Authorized Code의 안착점

Resource Owner의 승인

이제 준비가 완료됐으니 사용자의 허락을 구해야겠습니다.

우선 위의 등록 과정을 통해 Client와 Resource Server 둘 다 Client ID, Client Secret, Authorized redirect URL을 알게 됩니다.

Resource Server가 제공하는 기능 A, B, C, D 중 우리는 B, D를 사용하길 원합니다. 그렇다면 모든 기능에 대해 승인을 얻기보단, 필요한 기능만 승인을 받는 것이 좋겠습니다.

그 후 우리는 Resource Owner에게 B, D의 기능을 사용해야함을 알리고, 유저가 소셜로그인 버튼을 클릭했을 시에 https://resource.server/?clint_id=1&scope=B,D&redirect_uri=https://client/callback로 연결되게 하면 되겠습니다.

그러면 Resource Server가 Resource Owner의 로그인 여부를 체크하고난 후, Client ID와 Redirect URL이 일치하는 지를 확인합니다. 이 모든 것이 같다면 Resource Owner에게 Client가 사용하길 원하는 Scope에 대한 동의를 할 것인지 알리고, 허용을 한다면 Resource Server에 user_id와 동의된 scope가 기록됩니다.

Resource Server의 승인

Resource Owner의 동의를 확인하자마자 Client에 Access 토큰을 부여하지 않습니다. 3자 간의 일이니 신중해야하는 것이지요. authorization code(임시 비밀번호)를 담은 location(https://,,,/code=3)을 owner에게 전달하여 이동을 권고합니다. 그렇게 타고들어온 유저를 통해 Client는 authorization code를 취득하게 됩니다. 이후 Client는 Server에 authorization code와 client_secret 두개의 비밀정보를 담은 주소로 server에 직접 접속합니다. server는 전달 받은 정보를 확인하고, 모두 일치한다면 Access 토큰을 발급하게 됩니다.

Access Token 발급

임시비밀번호인 authorization code를 삭제하고, accessToken을 발급하여 Client에 응답해줍니다. Client는 전달 받은 토큰을 저장하고, 이후 Client가 token을 가지고 server에 접근할 때 해당하는 유저가 허용한 scope에 대한 권한을 부여합니다.

✍ 나의 풀이

function solution(brown, yellow) {
    var answer = [];
    let sum = brown + yellow;

    for(let height=3; height <= brown; height++){
        if(sum % height === 0){
            let width = sum / height;
            if((width-2) * (height-2)  === yellow){
                return [width, height]
            }
        }
    }
    return answer;
}

• for문 조건: 높이값은 최소 3이상이라는 점과 주어진 brown개수를 넘어설 수 없다는 점을 고려! (높이의 최대값이 brown이 될 수는 없지만,,)
• 임의의 높이값으로 sum을 나눴을 때 나머지가 0. 즉, 사각형을 구성할 수 있는지 판별!
• yellow의 너비는 항상 테두리 2를 뺀 값이고, yellow의 높이 역시 테두리 2를 뺀 값임을 고려해 yellow의 개수를 유추해내고, 주어진 yellow의 값과 비교해 정답을 찾아낸다.

GET

// pages/Prac.js
import React from "react";
import { useDispatch } from "react-redux";
import { getApi } from "../redux/modules/prac";

const Prac = () => {
    const dispatch = useDispatch();

    return(
        <button onClick={() => {
            dispatch(getApi())
        }}>테스트</button>
    )
};

export default Prac;


// redux/modules/prac.js
export const getApi = () => {
    return async function (dispatch, getState, {history}){
        try {
            const response = await axios.get('https://reqres.in/api/users?page=2');
            console.log(response.data);
        } catch(err){
            console.log(err);
        }
    }
}

이렇게 잘 받아왔다. 그 후에는 redux에 데이터를 전달하기 위해 원하는 형식으로 조정해 dispatch하면 될 것 같다.

Post

회원가입한 회원의 이메일과 패스워드를 post해 토큰을 받아오는 과정이다.

// redux/modules/prac.js
export const postApi = () => {
    return async function (dispatch, getState, {history}){
        try {
            const response = await axios.post('https://reqres.in/api/login',{
                email: "eve.holt@reqres.in",
                password: "cityslicka",
            });
            console.log(response);
        } catch(err){
            console.log("에러", err);
        }
    }
}

이번에는 틀린 정보를 전달해보겠다. 없는 회원의 정보라 에러메세지를 전달해준다.

✍ 나의 풀이

function solution(bridge_length, weight, truck_weights) {
    // 다리배열을 다리 길이보다 하나 작게 0으로 채워서 만들고
    // 마지막 요소에 첫 트럭을 넣는다
    let bridge = Array.from({length: bridge_length - 1}, v => 0);

    // 트럭 하나가 이미 투입되었고, 1초가 지났다 가정하고 시작!
    bridge.push(truck_weights.shift());
    let time = 1;

    // 다리에 트럭이 없을때 까지 무한루프
    while (bridge.reduce((a, b) => a + b) > 0) {
        // 다리 제일 앞에 있는 요소를 보내고
        // 버틸 수 있는 다리 무게가 다음 트럭보다 높은지 비교한다.
        // 버틸 수 있으면 다리 마지막 요소에 트럭을 넣고 시간을 경과 시키고
        // 버틸 수 없으면 0을 넣고 시간을 경과 시킨다.
        bridge.shift();
        if (weight - bridge.reduce((a, b) => a + b) >= truck_weights[0]) {
            bridge.push(truck_weights.shift());
        } else {
            bridge.push(0);
        }
        time++;
    }
    return time;
}

✍ 나의 풀이

function solution(priorities, location) {
    const dimen_arr = priorities.map((v, i) => [i, v])

    const stack = []

    while(true){
        let first = dimen_arr.shift()

        if(dimen_arr.some(v => first[1] < v[1])){
            dimen_arr.push(first)       
        } else {
            stack.push(first[0])
        } 
        if(dimen_arr.length === 0) break;
    }

    return stack.indexOf(location) + 1
}

• priorities 배열 값에 index를 넣은 이차원 배열을 dimen_arr에 할당
• 조건에 맞는 요소를 위치할 stack 빈배열 선언
• true while문을 통해 dimen_arr가 빈배열이 될 때까지 루프 수행

✍ 나의 풀이 1

function solution(s){
    const newArr = s.split('')

     for(let i = 0; i < newArr.length; i++){
        if(newArr[i] === newArr[i+1]){
             newArr.splice(i, 2)
             i = -1
         }
     }
     return newArr.length ? 0 : 1
 }

• 문자열 s를 배열로 변환해 newArr 상수에 할당
• newArr의 앞, 뒤 요소가 같다면 splice함수를 통해 제거하고, 다시 i = 0 부터 시작

풀이의 문제점 테스트케이스의 문자열이 짧다면 무리없이 실행되겠지만, 길이가 1,000,000이라면 같은 요소를 만나면 다시 처음으로 돌아가는 방식은 상당히 무리가 된다.

 function solution(s){
     const newArr = s.split('')

     function recur(arr){
         for(let i = 0; i < arr.length; i++){
             if(arr[i] === arr[i+1]){
                 arr.splice(i, 2)
             }
         }
     }

     recur(newArr)

     return newArr.length ? 0 : 1
 }

그래서 재귀함수를 사용해봤다. 몇몇 런타임에러나는 경우는 뭐가 잘못된건지 파악못했지만, 확실히 통과하는 케이스는 빠르게 통과한다. 하지만 효율성에서는 꽝이었다. 여전히 반복문을 처음부터 시작하는 건 똑같아서 그런듯하다.

그래서 스택으로 풀이하는 여러 답안을 봤다.

 const solution = (s) => {
  if (s.length % 2 != 0) return 0;

  const stack = [];

  for (let i = 0; i < s.length; i++) {
    const b = s.charAt(i);

    if (stack[stack.length - 1] === b) {
      stack.pop();
    } else {
      stack.push(b);
    }
  }
  return stack.length > 0 ? 0 : 1;
};

• 우선 문자열 길이가 홀수라면 최종 반환값 또한 홀수이기 때문에 미리 리턴한다.
• stack 이라는 빈배열을 선언과 동시에 할당한다.
• 조건의 결과에 따라 push, pop을 해서 반복문을 처음부터 돌리는 비효율을 범하지 않는다.

    // 동기적인 경우
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);

    // 1
    // 2
    // 3
    // 4

    // 비동기적인 3번째 경우
    console.log(1);
    console.log(2);
    setTimeout(() => console.log(3), 5000);
    console.log(4);

    // 1
    // 2
    // 4
    // 3

'synchronous하다.' 즉, 동기적이라는 말은 순차적으로 실행됨을 의미하고, 'asynchronous하다.' 즉, 비동기적이라는 말은 병렬적으로 자신의 시간표대로 실행됨을 의미한다.

Fetch API

Fetch API의 반환값은 'A Promise that resolves to a Response object.'이다.

    let fetched = fetch('https://jsonplaceholder.typicode.com/posts')

    // fetch를 통해서 실행한 결과가 성공적일때, then함수가 시행되고 Response 객체를 반환!
    fetched.then(function(reponse){console.log('result', response)}
    // result Response {type: 'cors', url:     'https://jsonplaceholder.typicode.com/posts', redirected: false, status: 200, ok: true, …}

Promise를 사용하는 이유는 비동기적인 작업을 처리할 때 그 작업의 성공 유무를 표준화된 방식을 이용해 처리할 수 있게 한다. 성공했을 때는 then으로 전달된 함수를 실행. 실패했을 때는 catch로 전달된 함수를 실행.

일반적으로 아래와 같이 사용한다.

    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(function(response){
              return response.json()
      // reponse가 json 데이터 타입이라는 것을 js에 알려주는 것
      // 또 Promise를 반환
        })
        .catch(function(reason){
              console.log('reason', reason)
        })
        .then(function(data){
              console.log('data', data)
        })

순수함수란 동일한 인자가 주어졌을 때 항상 동일한 결과를 반환해야 하며 외부의 상태를 변경하지 않는 함수이다. 즉 함수 내 변수 외에 외부의 값을 참조, 의존하거나 변경하지 않아야한다.

let obj = {val: 20}

const notPureFn = (object, num) => {
  object.val += num;
}
// 외부 obj 배열의 값을 수정함

const notPureFn = (num) => {
  object.val += num;
}
// 함수 외부의 변수를 참조함

const notPureFn = (object, num) => {
  num = 10
  object.val += num;
}
// 함수의 인자를 수정함

그래서 왜 순수함수여야 하는가??

Redux의 변경감지 정책

Redux Reducer를 통해 우리는 state를 업데이트해왔다. 즉 불변해야한다는 것이 state를 변경하면 안된다는 뜻이 아니라, 수정해서는 안된다는 것이다.

function counter(state = initialState, action) {
  switch(action.type) {
    case types.INCREMENT:
      return { ...state, number: state.number + 1 };
    case types.DECREMENT:
      return { ...state, number: state.number - 1 };
    default:
      return state;
  }
}

위의 카운터 Reducer를 보면 원본 state를 수정하는 것이 아닌, spread 연산자를 사용해 복사한 후 수정하고 있다. 복사에는 얕은 복사와 깊은 복사가 있다.

얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

얕은 복사(Shallow Copy)

얕은 복사는 참조(주소)값의 복사를 의미한다.

const obj = { value: 10 }
const newObj = obj

newObj.value = 5;

console.log(obj.value); // 2
console.log(newObj.value); // 2

obj 객체를 새로운 newObj 객체에 할당하였으며 이를 참조 할당이라 부른다. 복사 후 newObj 객체의 value값을 변경하였더니 기존의 obj.value값도 같이 변경된 것을 알 수 있다. 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유하는 것이다.

깊은 복사(Deep Copy)

깊은 복사는 값 자체의 복사를 나타내 다른 주소값을 지닌다.

const obj = { value: 10 }
const newObj = { ...obj }

newObj.value = 5

console.log(obj.value); // 10
console.log(newObj.value); // 5

자바스크립트의 원시 타입(string, number, boolean, undefined, ES6 부터 추가된 symbol)은 깊은 복사가 되며, 이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라 볼 수 있다. 깊은 복사를 할 때 주로 사용되는 Object.assign()메소드와 위의 spread 연산자가 있다.

이렇게 원본 state를 수정하는 것이 아니라, 주소값이 다른 state 복사해 수정을 하는 이유는 Redux의 변경감지 알고리즘에 있다. redux는 reducer를 거친 state가 변경됐는지를 검사하기 위해 state 객체의 주소를 비교한다. state의 복제본을 만들어 반환하면 이전의 state와 다른 주소값을 가르키기 때문에 state가 변경되었다고 판단한다. 반대로 state를 복제하는것이 아닌 속성만 수정하여 반환하면 기존의 state 객체와 가리키는 주소값이 같기 때문에 변경감지가 되지 않는다.

Redux는 왜 주소값을 비교하는가?

변경을 알아차리기위해 바뀐 속성을 찾아나서려면 성능과 복잡성의 문제를 일으킨다. 객체의 속성을 비교하는 것은 깊은 비교라하는데, 이는 복잡하고 무거운 알고리즘을 필요로 한다. 아래는 단순 주소를 비교하는 알고리즘과 속성을 비교하는 알고리즘이다.

// 객체의 주소 비교
const compareReference = (object1, object2) => object1 === object2; 

// 객체의 속성 비교 
const compareProps = (object1, object2) => {
  const object1Keys = Object.keys(object1);
  const object2Keys = Object.keys(object2);
  if (object1Keys.length !== object2Keys.length) {
    return false;
  }
  for (const key of object1Keys) {
    if (typeof object1[key] === 'object' && typeof object2[key] === 'object'){
      return compareProps(object1[key], object2[key]);
    } else if (object1[key] !== object2[key]) {
      return false; 
    } 
  } 
  return true; 
}

속성비교는 먼저 키값만을 배열로 만들고, 이들의 키값의 개수가 동일한지 체크하고, 만약 개수가 동일하다면 키에 해당하는 값의 타입을 비교해서 같다면... 아무튼 복잡하다.

마무리

Redux Reducer는 순수함수(외부의 값을 참조하거나 변경x, 함수 인수를 변경x)여야하고, 순수함수여야하는 이유는 이전 state의 주소값과 리턴된 state의 주소값을 비교해서 변경을 감지하지하기 때문이다.

참조 사이트: https://velog.io/@recordboy/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%ACShallow-Copy%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%ACDeep-Copy https://velog.io/@kimu2370/redux%EC%9D%98-reducer%EA%B0%80-%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98%EC%9D%B8-%EC%9D%B4%EC%9C%A0 https://boxfoxs.tistory.com/406

✍ 나의 풀이

function solution(numbers, target) {
    let answer = 0;

      dfs(0,0)

    function dfs(depth, sum){
        if(depth === numbers.length){
          if(sum === target){
              answer++
          }
          return
        }
        // 동시 다발적으로 수행
        dfs(depth + 1, sum + numbers[depth])
        dfs(depth + 1, sum - numbers[depth])
    }
    return answer;
}

처음 접하는 재귀함수였는데, 두개나 들어가서 이해하는데 어려움이 있었다. 이제껏 단방향 코드만 짜다가 동시다발적으로 터지는 코드를 접하니 컴퓨터의 위대함을 깨닫는다..

dfs(0,0)을 신호탄으로 삼아, 깊이가 5에 다달았을 때 target과 값이 같다면 answer++해주고, 다르다면 그자리에서 함수를 끝내버린다.

✍ 나의 풀이

function solution(progresses, speeds) {
    let rest = progresses.map(v => 100 - v)
    let day = rest.map((v, i) => Math.ceil(v / speeds[i]))
    // 아래처럼 축소가능,,
    // day = progresses.map((v, i) => Math.ceil((100 - v) / speeds[i]))

    let answer = []
    let count = 1
    let prev = day[0]

    for(let i = 1; i < day.length; i++){
        if(day[i] <= prev){
            count++
        } else {
            answer.push(count)
            prev = day[i]
            count = 1
        }  
    }
    answer.push(count)

    return answer
}

• 100과 profresses의 각 요소의 차를 rest라는 배열에 할당
• rest의 각 요소에 대응되는 speeds의 요소를 나눠준 후, 절대올림을 통해 도출된 소요기간을 day라는 배열에 할당
• 배열 day의 첫요소를 prev 변수에 할당하여, 순차적으로 비교
• 마지막 인덱스 요소의 count는 for문이 끝난 시점에 push

✍ 나의 풀이

function solution(n) {
   const arr = [4, 1, 2]
   let answer = ''

   while(n){
       answer = arr[n%3] + answer
       n = n % 3 === 0 ? (n/3)-1 : Math.floor(n/3)
   }

   return answer 
}

answer에 n을 3으로 나눈 나머지의 인덱스 값을 할당하고, 나머지가 0이라면 몫에서 -1한 값을 n에 재할당하고, 아니라면 절대내림한 값을 재할당해 n이 0이될 때까지 반복문을 실행했다.

✍ 나의 풀이

function solution(w, h) {
    // 최대공약수 구하기
    let gcd = 1
    for(let i = 2; i <= Math.min(w, h); i++){
        if(w % i === 0 && h % i === 0){
            gcd = i
        }
    }

    return w * h - (w + h - gcd)
}

✍ 최대공배수

function getLCM(w, h){
    let lcm = 1
    while(true){
        if(lcm % w === 0 && lcm % h === 0) break;
          lcm++
    }
      return lcm
}

😝 오늘의 토픽 DOM

먼저 JavaScript의 입장에서 HTML은 어떻게 보일까? 단순히 의미없는 문자열로 보이지 않을까?? 그럼 무슨 작업을 할 수 있지??? 기껏해야 문자열에 사용할 수 있는 메소드 slice, substr, length...

그래서! HTML을 JavaScript가 이해할 수 있는 자료형으로 바꿔줘야할 필요성이 대두! DOM(Document Object Model)!! 쉽게 말해 HTML같은 문자열만 그득한 문서를 JavaScript가 이해할 수 있는 객체로 바꿔주는 것! 이러한 과정을 PARSE라고 한다.

그럼 어떤 객체로 바꿔주는데?? 객체에도 종류가 많잖어.. Node객체!! 요소 하나하나를 Node로 생각하면 쉬울듯?

Node객체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="node">
        <div>안녕 나는 요소야</div>
        <button>클릭</button>
        <div>
            <div>하하하</div>
            호호호
        </div>
    </div>
</body>
</html>

JavaScript가 저 HTML을 조작하려면 어떻게 해?? class나 id 그리고 요소이름을 통해 대표적으로 document.querySelector를 통해 해당 요소를 특정한다. 저 메소드는 누가 제공해? DOM이! const node = document.querySelector('.node')이렇게 특정화를 하고, node.nodeType // 1 node.nodeName // div 즉 우리가 선택한 노드는 타입이 1이고, 이름은 div라는 것이지! node.parentNode는 body node.parentNode.childNodes는 NodeList(7) [text, div.node, text, comment, text, script, text]

이밖에도 많지만 Node객체로 변환해주면서, DOM은 이들의 관계나 속성에 조작을 가할 수 있는 메소드나 프로퍼티를 제공한다. JavaScript가 이해할 수 있도록 책임져야지!!

Node객체도 종류가 많아! 많대..

-Document Nodes -Element Nodes 등등 이건 추후에 다뤄봅세

어쨋든 다시 DOM은 JavaScript가 이해할 수 있게 HTML을 Node객체로 변환해주는 것!

DOM은 브라우저에서 보이는 것이냐? 아니! 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합인거야. CSSOM은 대충 감이 온다. CSS도 한낱 문자열이니 얘도 바꿔줘야지. 그래서 왜 보이는 것이 아니냐? HTML에 p Element를 display: none한다고 사라지냐? 화면에서는 사라지겠지 그런데 남아있잖아. 그래서 보여지는 게 아니라는 것! p Element에 이름붙여서 호출하면 나올걸?

요약정리 DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다. DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

항상 유효한 HTML 형식입니다. 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다. 가상 요소를 포함하지 않습니다. (Ex. ::after) 보이지 않는 요소를 포함합니다. (Ex. display: none)

참조: https://wit.nts-corp.com/2019/02/14/5522 https://www.youtube.com/watch?v=CFgXIJ3RZ50

✍🏻🙆🏻‍♂️

✍🏻 오늘의 정리 목록

• Button

😝 미해결 목록

🙆🏻‍♂️ 왜 클릭이 잘 안먹지?

저 체크 svg를 클릭했을 때 배경색과 글자의 style을 변경하도록 구성했는데, 어쩔 때는 적용이되고, 어쩔 때는 안되는 이상한 현상을 발견했다.. 그래서 계속 클릭하다가 알게됐다! svg에 직접 onClick 속성을 적용한지라, path를 눌렀을 때는 적용이 안되는 것이었다. 그래서 버튼 요소를 둘렀다. 그랬더니 구욷!ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

✍ 나의 풀이

function solution(record) {
    const users = {}
    const orders = []
    for(let rec of record){
        const [action, username, nickname = '' ] = rec.split(' ')
        if(action === 'Enter'){
            users[username] = nickname;
            orders.push([action, username]);
        } else if(action === 'Leave'){
            orders.push([action, username]);
        } else {
            users[username] = nickname;
        }
    }

    const result = []
    for(let rec of orders){
        const [action, username] = rec
        if(action === "Enter"){
            result.push(`${users[username]}님이 들어왔습니다.` )
        } else {
            result.push(`${users[username]}님이 나갔습니다.` )
        }
    }

    return result
}

✍ 풀이과정

1. user의 최종 닉네임을 저장하기 위한 users 객체 선언
2. user의 행동을 기록할 orders 배열 선언
3. const [action, username, nickname = '' ] = rec.split(' ') 'Leave' 행동에 대해서는 nickname 요소가 없어 디폴트값 할당
4. users[username] = nickname; 해당 username이라는 key가 없을 때는 추가해주고, key가 있을 때는 업데이트해주는 방식

✍ 중복 제거

function solution(record) {
    const users = {}
    const orders = []
    const text = {
        Enter: '님이 들어왔습니다.',
        Leave: '님이 나갔습니다.',
    }

    for(let rec of record){
        const [action, username, nickname = '' ] = rec.split(' ')
        if(action !== 'Change') orders.push([action, username]);
        if(nickname) users[username] = nickname;
    }

    return orders.map(v => users[v[1]] + text[v[0]])
}

✍ 학습요망

https://kis6473.tistory.com/167

✍ 나의 풀이

function solution(s) {
    const answer = [];
    if(s.length === 1) return 1;
    for(let i = 1; i <= s.length/2; i++){
        let prev = s.substr(0,i);
        let count = 1;
        let str = '';

        for(let j = i; j < s.length; j += i){
            let cur = s.substr(j,i);
            if(prev === cur) count++;  
            else {
                str += (count > 1 ? count : '') + prev;
                count = 1;
                prev = cur;
            };
        };

          str += (count > 1 ? count : '') + prev; 
        answer.push(str.length);
        str = '';
    };
    return Math.min(...answer);
};

✍ 풀이과정

• 일단 매개변수 s의 길이가 1이라면 for문이 작동하지 않는다. 그래서 for문을 시작하기 전 길이가 1인 문자열에 대해서는 바로 return했다.
• prev(이전값)라는 변수를 설정해 cur(현재값)변수와 비교해나가는 코드를 구성했다.
• prev === cur이라면 카운트만 해주고, 지속되는 중복을 잡아내기위해 prev를 재할당하지 않았다.
• prev !== cur이면 앞뒤 문자가 다르다는 것이고, 지속되는 중복이 끝났다는 의미이기도 해서 prev 앞에 count를 붙여 str변수에 할당해주었다.
• 제일 마지막 cur은 for문 내에서 처리될 수 없기에, for문이 끝난 바로 다시 str += (count > 1 ? count : '') + prev 작성해 마지막 cur을 str에 반영했다.