오늘 한 것

Git Issue Render 컴포넌트 진행

git API를 가져와서 렌더하는 페이지를 만들고 있다. 처음에는 바닐라로 시작했지만 오늘 typeScript로 바꿨다.
template을 지정하지 않고 CRA를 생성했기 때문에 npm install --save typescript @types/node @types/react @types/react-dom @types/jest로 npm 설치 후 진행하였다.

typeScript Generic

tsconfig.json로 수정하고 기존 만든 바닐라 js를 타입 지정하며 ts로 변환 중에, 바닐라 때 만들었던 useFetchDate 커스텀 훅이 가장 말썽이었어서 기록한다.

import { useState, useEffect } from "react";

export const STATUS = {
  idle: "idle",
  pending: "pending",
  resolved: "resolved",
  rejected: "rejected",
};

const { idle, pending, resolved, rejected } = STATUS;

export function useFetchData(api) {
  const [status, setStatus] = useState(idle);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    setStatus(idle);
    setError(null);

    const fetchData = async () => {
      setStatus(pending);
      try {
        const response = await fetch(api);
        const json = await response.json();
        setStatus(resolved);
        setData(json);
        console.log(json);
      } catch (error) {
        setStatus(rejected);
        setError(error);
        console.log(error);
      }
    };

    fetchData(api);
  }, [api]);

  return [status, error, data];
}

본래 js에서 이 커스텀 훅은 api를 통해 결과를 반환하는 훅이다.
다양한 api 통신에서 사용하기 위해 만들었으며 당연히 반환값 인수로 주어지는 api에 따라 다르다.

typeScript로 변환하는 과정에서 제일 문제였던 부분은 반환값이 api에 따라 다르다는 것이다.
간만에 ts를 사용하다 보니까 우왕좌왕하며 커스텀 훅을 반환 결과에 따라 만들어야되나 고민 중 Generic이 생각나서 해결할 수 있었다.

import { error } from "constant/type";
import { useState, useEffect } from "react";

export const STATUS = {
  idle: "idle",
  pending: "pending",
  resolved: "resolved",
  rejected: "rejected",
};

const { idle, pending, resolved, rejected } = STATUS;

export function useFetchData<T>>(api: string) {
  const [status, setStatus] = useState<string>(idle);
  const [error, setError] = useState<error | null>(null);
  const [data, setData] = useState<T | null>(null);

  useEffect(() => {
    setStatus(idle);
    setError(null);

    const fetchData = async (api: string) => {
      setStatus(pending);
      try {
        const response = await fetch(api);
        const json = await response.json();
        setStatus(resolved);
        setData(json);
        console.log(json);
      } catch (error) {
        setStatus(rejected);
        setError(error);
        console.log(error);
      }
    };

    fetchData(api);
  }, [api]);

  return [status, error, data] as [string, error | null, T | null];
}

또한 FetchData()에서 js에서는 가변인자 함수로 사용했지만 typeScript는 가변인자 함수가 불가능한 것 같다.
간만에 typeScript를 사용하니까 다시 헷갈린다. 꾸준히 하자 꾸준히!

코딩 테스트 연습

예산

문제 설명

S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다.

물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다.

부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요.

제한사항

d는 부서별로 신청한 금액이 들어있는 배열이며, 길이(전체 부서의 개수)는 1 이상 100 이하입니다.
d의 각 원소는 부서별로 신청한 금액을 나타내며, 부서별 신청 금액은 1 이상 100,000 이하의 자연수입니다.
budget은 예산을 나타내며, 1 이상 10,000,000 이하의 자연수입니다.

나의 답

// for문 사용
function solutionFor(d, budget) {
  let sum = 0;
  let cnt = 0;

  d.sort((a, b) => a - b);

  for (cnt = 0; cnt < d.length; cnt++) {
    if (budget - sum >= d[cnt]) {
      sum += d[cnt];
    } else return cnt;
  }

  return cnt;
}

// Array.prototype.reduce 사용
function solutionReduce(d, budget) {
  let cnt = 0;
  d.sort((a, b) => a - b).reduce((acc, cur) => {
    if (budget - acc >= cur) {
      cnt++;
      return acc + cur;
    }
    return acc;
  }, 0);

  return cnt;
}

// Array.prototype.filter 사용
function solutionFilter(d, budget) {
  return d
    .sort((a, b) => a - b)
    .filter((v) => (budget - v >= 0 ? ((budget -= v), true) : false)).length;
}

console.log(solutionFor([1, 3, 2, 5, 4], 9)); // 3
console.log(solutionReduce([1, 3, 2, 5, 4], 9)); // 3
console.log(solutionFilter([1, 3, 2, 5, 4], 9)); // 3

가볍게 풀만한 문제

출처: programmers

Nyong’s GitHub

Nyong's Blog

210622_TIL(TypeScript(Generic), 심심풀이 코딩 문제)

오늘 한 것

Git Issue Render 컴포넌트 진행

typeScript Generic

코딩 테스트 연습

예산

나의 답