snu-coin 거래소

과제 하기 싫어서 미루고 미루다가 마감 이틀 전에 후다닥해버림

 

 

딱히 새로운 기술을 사용한 것은 아니지만, 지금까지 써온 것들을 잘 가다듬고 한 곳에 몰아서 정리해보는 의의가 있었다.

 

 

1. 다크모드 지원

 

https://darrengwon.tistory.com/1384

나도 몰랐는데 toggle 메서드가 있더라. ㅋㅋㅋ 어휴

// toggle
document.body.classList.toggle("dark-mode");

// toggle 몰랐을 때...
func toggleDarkMode() {
  if ([...document.body.classList].includes("dark-mode")) {
    return document.body.classList.remove("dark-mode");
  }
  return document.body.classList.add("dark-mode");
}

 

여튼 다크모드 버튼 누르면 다음과 같이 됨. persistence하게 유지하려면 상태값을 localstorage에 담으면 됨.

 

2. multiple contexts 

 

왜 recoil, redux 와 같은 전역 상태 관리 툴을 사용하지 않았냐면, 강사님이 쓰지 말래서... 그러면 선택지가 context api말고 뭐가 있겠는가.

그런데 여기서 하나 가졌던 생각은, multiple context를 사용할 것인지, single context를 사용할 것인지였고, reddit의 react core team이 말한대로 그냥 여러개를 만들었다.

 

덕분에 Provier의 depth가 엄청 깊어졌는데 여튼...

ReactDOM.render(
  <>
    <LoginContextProvider>
      <AssetsContextProvider>
        <CryptoContextProvider>
          <OrderContextProvider>
            <ThemeProvider theme={theme}>
              <GlobalStyle />
              <App />
            </ThemeProvider>
          </OrderContextProvider>
        </CryptoContextProvider>
      </AssetsContextProvider>
    </LoginContextProvider>
  </>,
  document.getElementById("root")
);

 

 

3. 중앙 집중식 API 에러 핸들링 (탑레벨 fetching handler를 만들어라)

https://darrengwon.tistory.com/830

 

const getDefaultHeaders = () => {
  const defaultHeaders = {
    "Content-Type": "application/x-www-form-urlencoded",
  };
  if (localStorage.getItem(LOGIN_KEY))
    defaultHeaders["Authorization"] = `Key ${localStorage.getItem(LOGIN_KEY)}`;
  return defaultHeaders;
};

const post = async (url, body = {}, extraHeaders = {}) => {
  try {
    console.log(`post ${defaultUrl}/${url}...`);
    const res = await fetch(`${defaultUrl}/${url}`, {
      method: "POST",
      body: new URLSearchParams(body).toString(),
      headers: { ...getDefaultHeaders(), ...extraHeaders },
    });

    if (res.status >= 400 || !res.ok) {
      return `${res.status}, ${res.statusText}`;
    }

    return await res.json();
  } catch (error) {
    console.error(error.message);
    throw new Error(error);
  }
};

 

 

4. vanilla throttle & debounce

https://darrengwon.tistory.com/1312

 

유저가 실수로 매수, 매도 버튼을 따다다다다닥 누르면 자신이 원하지 않았는데도 체결이 잘못될 수도 있어서

0.25초 정도만 debounce를 걸어놨다.

 

export function debounce(callback, ms = 1000) {
  let timeoutId = null;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback.apply(null, args);
    }, ms);
  };
}

<S.ActionButton
  tradeOption={tradeOption === "buy"}
  onClick={debounce(handleActionButtonClick, 250)} // 0.25초
>
  {tradeOption === "buy" ? "매수" : "매도"}
</S.ActionButton>

 

그리고 URLSearchParams이란 녀석을 강사님이 쓰셨던데, url manipluation하는데 좋다고들 한다. 알아보니 실제로도 많이 유용한 듯.

iterable이라서 for...of문에서도 사용할 수 있었다. ㅅㅌㅊ.

강사님이 body를 만들려고 굳이 쓰신 것 같긴한데 이 프로젝트에선 굳이 쓸 필요는 없었음.

mdn과 관련 설명을 첨부한다.

 

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

https://developers.google.com/web/updates/2016/01/urlsearchparams

 

 

 

그냥 이 정도로하고 과제 제출했다. 다른 공부가 더 급하다.