문제

1
2
3
4
5

    7
   3 8
  8 1 0
 2 7 4 4
4 5 2 6 5

위 그림은 크기가 5인 정수 삼각형의 한 모습이다.

맨 위층 7부터 시작해서 아래에 있는 수 중 하나를 선택하여 아래층으로 내려올 때, 이제까지 선택된 수의 합이 최대가 되는 경로를 구하는 프로그램을 작성하라. 아래층에 있는 수는 현재 층에서 선택된 수의 대각선 왼쪽 또는 대각선 오른쪽에 있는 것 중에서만 선택할 수 있다.

삼각형의 크기는 1 이상 500 이하이다. 삼각형을 이루고 있는 각 수는 모두 정수이며, 범위는 0 이상 9999 이하이다.

입력

첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1번째 줄까지 정수 삼각형이 주어진다.

출력

첫째 줄에 합이 최대가 되는 경로에 있는 수의 합을 출력한다.

1
2
3
4
5
6
7
8
9
10

예제 입력 1
5
7
3 8
8 1 0
2 7 4 4
4 5 2 6 5

예제 출력 1
30

풀이

처음에는 탑 다운 방식으로 7을 선택하고 3과 8을 더한 수는 DP[2][0], DP[2][1]에 저장하는 방법으로 진행해보려고 하였다.

그런데 횟수가 많아지고 DP[3][1]에서 DP[2][0]과 DP[2][1] 중 큰 값을 구해서 더해야하는데 만약 3이 아니라 10이라면 1과 10을 제외한 2~9를 반복문을 돌면서 그 중에 최댓값인 것과 더해서 DP 값을 구해야 하기에 이는 너무 복잡하여 다르게 생각해보려고 노력했지만 한 문제에 너무 많은 시간을 쏟는 것 같아 다른 사람의 해설을 참고하였다.

위에서 부터 순서대로 7-3-8-7-5를 선택하여 총합 30이라는 숫자를 출력하였는데, 이는 반대로 생각해볼 수 있다.

맨 아래에서부터 시작하여 4, 5, 2, 6, 5의 바로 위의 숫자에는 4개의 숫자가 있다. 즉, 5번째 줄의 숫자를 2개씩 짝지어서 비교하여 큰 값을 바로 위에 숫자와 더하여 누적하면서 위로 올라가다보면 최종적으로 맨 위에는 최댓값이 남게되는 방식이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n");
const n = +input.shift();
const triangle = input.map((floor) => floor.split(" ").map(Number));

const solution = (n, triangle) => {
  if (n === 1) return triangle[0][0];
  if (n === 2) return triangle[0][0] + Math.max(...triangle[1]);
  for (let i = n - 2; i >= 0; i--) {
    triangle[i].forEach((v, idx, self) => {
      self[idx] = v + Math.max(triangle[i + 1][idx], triangle[i + 1][idx + 1]);
    });
  }
  return triangle[0][0];
};

console.log(solution(n, triangle));

• DP 배열을 만들지 않고 triangle 배열을 그대로 바꾸어 반환하였다.

참고

• 한걸음씩 블로그

댓글 공유

문제

효주는 포도주 시식회에 갔다. 그 곳에 갔더니, 테이블 위에 다양한 포도주가 들어있는 포도주 잔이 일렬로 놓여 있었다. 효주는 포도주 시식을 하려고 하는데, 여기에는 다음과 같은 두 가지 규칙이 있다.

포도주 잔을 선택하면 그 잔에 들어있는 포도주는 모두 마셔야 하고, 마신 후에는 원래 위치에 다시 놓아야 한다.
연속으로 놓여 있는 3잔을 모두 마실 수는 없다.
효주는 될 수 있는 대로 많은 양의 포도주를 맛보기 위해서 어떤 포도주 잔을 선택해야 할지 고민하고 있다. 1부터 n까지의 번호가 붙어 있는 n개의 포도주 잔이 순서대로 테이블 위에 놓여 있고, 각 포도주 잔에 들어있는 포도주의 양이 주어졌을 때, 효주를 도와 가장 많은 양의 포도주를 마실 수 있도록 하는 프로그램을 작성하시오.

예를 들어 6개의 포도주 잔이 있고, 각각의 잔에 순서대로 6, 10, 13, 9, 8, 1 만큼의 포도주가 들어 있을 때, 첫 번째, 두 번째, 네 번째, 다섯 번째 포도주 잔을 선택하면 총 포도주 양이 33으로 최대로 마실 수 있다.

입력

첫째 줄에 포도주 잔의 개수 n이 주어진다. (1 ≤ n ≤ 10,000) 둘째 줄부터 n+1번째 줄까지 포도주 잔에 들어있는 포도주의 양이 순서대로 주어진다. 포도주의 양은 1,000 이하의 음이 아닌 정수이다.

출력

첫째 줄에 최대로 마실 수 있는 포도주의 양을 출력한다.

1
2
3
4
5
6
7
8
9
10
11

예제 입력 1
6
6
10
13
9
8
1

예제 출력 1
33

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n")
  .map(Number);
const n = input.shift();

const DP = Array.from({ length: n + 1 }, () => 0);
DP[0] = 0;
DP[1] = input[0];
DP[2] = input[0] + input[1];

for (let i = 3; i <= n; i++) {
  DP[i] = Math.max(
    DP[i - 1],
    DP[i - 2] + input[i - 1],
    DP[i - 3] + input[i - 1] + input[i - 2]
  );
}

console.log(DP[n]);

• DP는 N이 0에서 부터 n까지로 마실 수 있는 최대 포도주 양을 담은 배열이다.
• 만약 포도주가 1개라고 하면 1잔으로 마실 수 있는 포도주 최대 양을 DP[1]이라고 할 수 있고 그 값은 가장 첫번째 배열의 요소이다. (왜냐하면? 해당 배열에는 한개의 요소밖에 없으니깐)
• 만약 포도주가 2개일 때, 2잔으로 마실 수 있는 포도주 최대 양은 DP[2]이고, 그 값은 가장 첫번째 배열과 두번째 배열의 요소의 합이다.

하지만 여기서 DP[3]부터는 고려해줘야하는 부분이 생겨난다.

1번잔, 2번잔, 3번잔이 있을 때, DP[3]으로 올 수 있는 경우의 수는 다음과 같다.

1. 1번과 2번을 마시는 경우 => DP[2]와 같은 의미이다.
2. 1번과 3번을 마시는 경우 => DP[1]+input[2]
3. 2번과 3번을 마시는 경우 => 1번을 제외 하는 것이니 DP[0]+input[1]+input[2]

위를 토대로 점화식을 세울 수 있다.

1
2
3
4
5

DP[i] = Math.max(
  DP[i - 1],
  DP[i - 2] + input[i - 1],
  DP[i - 3] + input[i - 1] + input[i - 2]
);

댓글 공유

useState란?

1

const [state, setState] = useState(initialState);

리액트에서 상태 변수를 컴포넌트에 추가할 때 사용하는 리액트 훅이다.

특징으로는 상태를 변경하기 위해서는 set 함수를 사용하여 변경해야만 하고, set 함수에 새로운 값을 인자로 전달하면 새로운 상태로 렌더링을 일으킨다.

useState로 컴포넌트 Reset 시키기

주로 어떤 상태를 reset 시키기 위해 아래와 같은 코드를 작성할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function App() {
  const [list, setList] = useState([]);

  const resetList = () => {
    setList([]);
  };
  const addList = () => {
    setList([...list, 10]);
  };

  return (
    <>
      <button onClick={resetList}>Reset Button</button>
      <button onClick={addList}>Add 10</button>
      <div>
        {list.map((num) => (
          <p>{num}</p>
        ))}
      </div>
    </>
  );
}

위와 같이 직접 상태를 초기화 하는 방법도 있지만 key props에게 변경된 상태를 전달함으로써 해당 컴포넌트는 물론 해당 컴포넌트의 하위 컴포넌트까지 reset할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { useState } from "react";

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState("Taylor");

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}.</p>
    </>
  );
}

댓글 공유

useEffect란?

1

useEffect(setup, dependencies?)

외부 시스템과 컴포넌트를 동기화 하는데 사용하는 React Hook이다. 즉, 외부 시스템과 동기화하는 작업이 아니라면 useEffect를 사용하지 않는 것이 좋다.

params

setup

Effect 로직 함수로, 선택적으로 cleanup 함수를 반환할 수 있다.

• 컴포넌트가 처음 DOM에 추가 되었을 때, setup 함수가 실행된다.
• 의존성이 변경되어 리렌더링이 발생한 이후, 리액트는 이전 값으로 cleanup 함수 먼저 실행하고 새로운 값으로 setup 함수를 실행한다.
• 컴포넌트가 DOM에서 제거된 후, 리액트는 클린업 함수를 한 번 실행한다.

dependencies?

setup 함수 코드 내부와 관련된 리액트 값들의 리스트이다. 리액트 값들은 컴포넌트 내부에서 선언된 props, state, 변수, 함수들을 의미한다.

• 리액트는 이전 값과 dependencies를 Object.is() 메서드로 비교한다.
• 만약 dependencies를 명확히 기재하지 않는다면, 컴포넌트 리렌더링이 발생할 때마다 Effect가 다시 실행된다.

이전 상태를 기반으로 useEffect로 상태 업데이트 하기

1
2
3
4
5
6
7

// slider.js - 의존성 있는 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex(index + 1);
  }, 3000);
  return () => clearInterval(interval);
}, [index]);

위 코드는 slider 프로젝트를 제작하다가 나온 코드이다. setInterval을 Effect 로직에 사용하였는데, 의존성으로 indexrk 있어 index가 변경될 때마다 해당 Effect 로직이 cleanup되고 setup되고를 반복하게 된다.

1
2
3
4
5
6
7

// slieder.js - 의존성 빈 배열인 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex((i) => i + 1);
  }, 3000);
  return () => clearInterval(interval);
}, []);

위와 같이 바꿀 경우 코드는 동일하게 동작하지만, 이전 상태를 기반으로 상태를 업데이트할 때에는 이전 값을 직접 넣어주기보단 updater 함수를 콜백함수로 전달해줌으로서 의존성 데이터를 줄일 수 있다.

그 결과, 처음 컴포넌트가 렌더링되고 한번만 실행되기 때문에 불필요한 setup과 cleanup 과정을 줄일 수 있다.

댓글 공유

컴포넌트란?

자식 요소가 로딩중이 완료될 때 까지 fallback에 제공된 컴포넌트를 보여준다.

1
2
3

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

주의사항

• 리액트는 처음 마운트 되기 전에 렌더링이 중단된다면, 어떤 상태도 보존하지 않는다. 컴포넌트가 로드되면 리액트는 중단된 트리를 처음부터 렌더링을 시도한다.
• 컴포넌트는 컴포넌트 내부에서 startTransition이나 useDeferredValue로 인한 업데이트가 아닌 경우라면 fallback이 표시된다.
• 컴포넌트가 다시 일시 중단되었기 때문에 이미 보여진 컨텐츠를 감출 필요가 있다면, layout effect를 비운다. 다시 컨텐츠를 보여줄 준비가 됐을 때, 리액트는 layout effect를 발생시킨다. 이는 컨텐츠가 숨겨진 동안 DOM layout을 측정하지 않도록 한다.

사용법

컨텐츠가 로딩되는 동안에 fallback을 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { Suspense } from "react";
import Albums from "./Albums.js";

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

컨텐츠를 한번에 공개

1
2
3
4
5
6

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

내부에 하나의 컴포넌트라도 일시중단 되더라도 모든 하위 컴포넌트가 대기했다가 한번에 공개된다.

가장 가까운 의 fallback을 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Suspense fallback={<Loading />}>
  <Details artistId={artist.id} />
</Suspense>;

function Details({ artistId }) {
  return (
    <>
      <Biography artistId={artistId} />
      <Panel>
        <Albums artistId={artistId} />
      </Panel>
    </>
  );
}

때문에 직접적인 자식이 아니더라도 Biography와 Albums와 가장 가까운 부모 경계를 공유하기 때문에 함께 표시된다.

로드 될 때, 중첩된 컨텐츠 표시한다.

1
2
3
4
5
6
7
8

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>

처음에 Biography가 로딩이 완료 되지 않았을 때, BigSpinner가 fallback으로 보여지고, 이후 Biography는 로딩이 완료되었기 때문에 보여지고, 아래 Albums이 로딩이 완료되지 않았다면 AlbumsGlimmer를 보여주고 있다가 로딩이 완료되어 Albums를 보여준다.

핵심은 Biography가 Albums 로딩이 완료될 때까지 기다리지 않는 다는 것이다.

이미 공개된 컨텐츠가 숨겨지는 것을 방지하기

Code Example Link

• 내부에 startTransition이 사용되었다면, fallback이 보여지지 않는다.
• 때문에 fallback의 BigSpinner에 의해 이전에 보여진 컨텐츠가 숨겨지는 것을 방지할 수 있다.

댓글 공유

Context API란?

앱의 규모가 커지고 복잡해짐에 따라 부모 컴포넌트에서 중첩된 자식 컴포넌트에게 데이터나 데이터 변경함수를 전달해줄 때, 몇단계를 걸쳐서 전달해줌으로서 애플리케이션이 더욱 복잡해지는 문제가 발생하였다.
이를 해결하기 위해 context API가 등장하였고, 이로써 props를 단계별로 넘겨주지 않아도 데이터를 제공할 수 있게 되었다. 그 결과 컴포넌트 트리로 묶인 컴포넌트 간 데이터 공유가 수월해졌다.

• 리액트에서 제공하는 내장 기능이다.

단, Context API를 사용하게 되면 컴포넌트의 재사용이 어려워지므로 꼭 필요한 경우에만 사용한다.

Redux란?

Redux는 action이라는 이벤트를 사용하여 데이터를 관리할 수 있는 상태관리 라이브러리이다.

리덕스의 3원칙

1. 단 하나의 store에서 모든 상태가 저장된다.
2. store의 상태를 변경하는 유일한 방법은 action 객체를 dispatch하는 방법 뿐이다.
3. action에 의한 상태 변경은 순수함수를 통해서만 가능하도록 작성해야 한다.

리덕스 특징

• thunk, saga와 같은 미들웨어를 추가적으로 설정할 수 있다. 비동기 처리를 Util로 처리 가능
• Redux Devtool Extension을 사용하여 디버깅이 용이하다.
• 전역 상태 관리 이외도 로컬스토리지에 상태 저장, 버그 리포트 등의 기능을 제공한다.

Context API와 Redux의 차이

댓글 공유

React에서 key를 사용하는 이유

리액트에서 배열 데이터와 map 메서드를 사용하여 다수의 컴포넌트를 렌더링할 수 있다.

1
2
3
4
5
6
7
8
9
10

function NumberList({ numbers }) {
  const listItems = numbers.map((number) => <li>{number}</li>);
  return <ul>{listItems}</ul>;
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById("root")
);

React 프레임워크는 state, props가 업데이트된 이후의 virtual DOM과 이전의 virtual DOM을 비교하고 변경 사항만 Real DOM에 반영하여 효율적으로 UI를 렌더링한다. 이를 재조정 과정이라고 한다.

재조정 과정에서 key가 없다면 이전 DOM과 이후 DOM의 요소를 비교하기 어려워지고 O(n^3) 복잡성을 가지는 알고리즘을 사용해야 하기 때문에 성능상 문제가 생길 수 있다.

댓글 공유

JavaScript 데이터 타입

자바스크립트는 크게 2가지의 데이터 타입으로 나뉜다.

1. 원시타입 (Primitive Data Type)

2. 객체타입(참조타입) (Object Type, Reference Type)

이 중에서도 원시타입에는 6가지의 타입이 존재하고 그 외의 것들은 모두 객체타입이다.

Primitive Data Type (원시타입)

원시타입의 종류는 6가지가 있다.

• number (숫자형)
• string (문자형)
• undefined
• null
• boolean (불리언형)
• symbol

원시 타입의 값은 변경 불가능한 값이며, pass-by-value(값에 의한 전달)이다.

number

Javascript에서는 숫자형을 모두 실수로 처리한다. 추가로 아래와 같은 자료도 숫자형이다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가(Not A Number)

NaN은 자기 자신과 일치하지 않는 유일한 값이다. 그러므로 어떤 값이 NaN인지 판단하기 위해서는 Number.isNaN() 빌트인 함수를 사용하거나 Object.is() 메서드를 사용하여야 한다.

1
2
3
4
5

NaN === NaN; // false

Number.isNaN(NaN); // true

Object.is(NaN, NaN); // true

string

C언어와 다르게 JavaScript의 문자열은 원시타입으로 변경 불가능하다.

1
2

var str = "Hello";
str = "World";

위 코드에서 str 변수에 ‘World’라는 문자열로 데이터를 수정하는 것이 아니다.
임의의 메모리 주소를 갖는 메모리 공간에 ‘World’라는 문자열을 저장하고 변수의 식별자인 str이 새로운 메모리 주소를 가리켜 변수를 재할당하는 것이다.

boolean

참, 거짓을 나타내는 자료형이다. 암묵적 불리언 형변환이 발생하면 해당 값들을 false로 바꿔주는 falsy 값들이 있다.

falsy

• “” (빈문자열)
• undefined
• null
• 0, -0
• NaN

undefined

변수의 선언 단계는 사실 선언단계와 초기화 단계 두 단계로 나눠서 볼 수 있는데, 초기화 단계에서 컴퓨터가 변수가 할당되기 이전에 undefined값으로 변수의 값을 초기화해준다.

때문에 이는 개발자의 의도가 담긴 것이 아니다.

null

변수의 값이 없다는 것에 개발자의 의도를 담고 싶다면 null을 사용한다. 자바스크립트는 대소문자를 구별하기 때문에 null, Null, NULL 모두 다른 값이다.

함수가 유효한 값을 반환할 수 없는 경우 명시적을 null을 반환하기도 한다.

null 값의 type을 확인하기 위해서는 typeof 연산자를 사용하는 것 대신 일치 연산자(===)를 사용한다.

1
2
3

var foo = null;
typeof null; // 'object'
foo === null; // true

symbol

심볼은 이름이 충돌한 위험이 없는 유일무이한 원시타입의 값이다. 주로 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

1
2
3
4
5
6

var key = Symbol("key");
typeof key; // 'symbol'

var obj = {};

obj[key] = "value"; // 이름이 충돌할 위험이 없는 유일무이한 값인 심볼을 프로퍼티 키로 사용

Object Type, Reference Type (객체타입)

객체란, 데이터와 그 데이터에 관련된 동작(절차, 방법, 기능 등)을 모두 포함할 수 있는 개념적 존재이다.

다시말해 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체이다.

원시타입을 제외한 나머지 값(배열, 함수, 정규표현식 등)이 모두 객체이다. 객체는 pass-by-reference (참조에 의한 전달)이다.

얕은 복사와 깊은 복사

객체는 참조에 의한 전달을 하기 때문에 복사를 객체 데이터를 복사하였을 때, 서로의 참조값을 공유하고 있으므로 변경 사항도 공유되는 특징이 있다.

1
2
3
4
5
6
7
8

const obj = { name: "yiju", age: 29 };
const copy_obj = obj;

copy_obj.name = "loco";

console.log(copy_obj); // {name: 'loco', age: 29}
console.log(obj); // {name: 'loco', age: 29}
console.log(copy_obj === obj); // true

때문에 객체를 복사할 때에는 참조값을 다르게 복사해줘야한다. Object.assign 메서드를 사용하거나 ES6에 등장한 Spread 문법을 사용하여 객체를 복사할 수 있다.

1
2
3
4
5
6
7
8
9
10

const obj = { name: "yiju", age: 29 };
const copy_obj = Object.assign({}, obj);
const copy_obj2 = { ...obj };

copy_obj.name = "loco";
copy_obj2.name = "mac";

console.log(obj); // {name: 'yiju', age: 29}
console.log(copy_obj); // {name: 'loco', age: 29}
console.log(copy_obj2); // {name: 'mac', age: 29}

위와 같은 방식을 얕은 복사라고 부른다. 왜냐하면 depth가 1단계 밖에 복사하지 못하기 때문이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const obj = {
  name: "yiju",
  age: 29,
  school: { high: "donghwa", univ: "kangwon" },
};
const copy_obj = Object.assign({}, obj);

copy_obj.age = 40;
copy_obj.school.high = "Yebong";

// {name:'yiju', age:40, school: {high: 'Yebong', univ:'kangwon'}}
console.log(copy_obj);
// {name:'yiju', age:29, school: {high: 'Yebong', univ:'kangwon'}}
console.log(obj);

1단계 깊이인 age는 다른 참조값을 공유하지 않지만 2단계 깊이인 school의 객체값은 참조값을 공유하고 있다.

깊은 복사를 하기 위해서는 재귀적으로 객체 내부를 단계별로 복사를 해줘야 가능하다. 혹은 라이브러리를 사용하여 구현할 수 있다.

JSON.stringify()를 사용할 수 도 있지만 이 방법은 메서드까진 복사할 수 없기 때문에 추천되지 않는다.

댓글 공유