jineecode

프리온보딩 프론트엔드 챌린지 3차

지니코딩 — Fri, 16 Sep 2022 10:53:00 +0900

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

자바스크립트를 이용하여 브라우저에서 직접 페이지를 렌더링하는 것을 의미한다.

장점:
일단 로드되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아진다.
서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다.

단점:
애플리케이션 규모가 커질수록 JS양이 증가하여 페이지가 다른 면에서 무거워질 수 있다.
초기 페이지 로드에 더 많은 시간이 걸린다.
SEO에 친화적이지 않다.

SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

CSR의 단점을 극복하며 SPA의 장점도 가져갈 수 있다.

SSR을 하므로 SEO에 친화적이지 않은 CSR의 단점을 극복할 수 있다.
초기 페이지 로드가 빨라진다.
SPA로 구성되어 있으므로 html을 새로고침하지 않아도 된다.

Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

yarn start

SSR은 서버에서 사용자에게 보여줄 html을 모두 구성하여 사용자에게 페이지를 보여주는 방식이라는 것을 인지하고 천천히 확인해 보았다.
Next.js를 create 하면 '_app.jsx'을 확인할 수 있다.

import "../styles/globals.css"
import type { AppProps } from "next/app"

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

MyApp은 Component와 pageProps를 props로 받는다.

Component: 요청한 페이지. /pages/index.jsx 파일이 props로 들어온다. index.jsx를 삭제하면 404 Error 페이지가 뜬다.
pageProps: getInitialProps를 통해 내려 받은 props 이다.

Nextjs repo

이제 레포지토리를 확인해보자

cli

yarn start를 하므로 cli를 가장 먼저 확인해보았다.

packages/next/cli/next-start.ts

import { startServer } from "../server/lib/start-server"
import arg from "next/dist/compiled/arg/index.js"

// next Start
const nextStart: cliCommand = argv => {
  const validArgs: arg.Spec = {
    // Types
    "--help": Boolean,
    // ...
  }

  let args: arg.Result<arg.Spec>

  try {
    args = arg(validArgs, { argv })
    // 옵션 재할당
  } catch (error) {
    if (isError(error) && error.code === "ARG_UNKNOWN_OPTION") {
      return printAndExit(error.message, 1)
    }
    throw error
  }

  // 서버에서 쓰이는 변수들
  const dir = getProjectDir(args._[0])
  const host = args["--hostname"] || "0.0.0.0"
  const port = getPort(args)
  const keepAliveTimeoutArg: number | undefined = args["--keepAliveTimeout"]

  // ...

  // 서버 실행
  startServer({
    // startServer:  https://github.com/vercel/next.js/blob/canary/packages/next/server/lib/start-server.ts
    dir,
    hostname: host,
    port,
    keepAliveTimeout,
  })
    .then(async app => {
      const appUrl = `http://${app.hostname}:${app.port}`
      Log.ready(`started server on ${host}:${app.port}, url: ${appUrl}`)
      await app.prepare() // app 구축 준비!
    })
    .catch(err => {
      console.error(err)
      process.exit(1)
    })
}

서버에 필요한 변수를 준비하고 서버를 스타트하는 것 같다.
startServer가 어떻게 서버구축을 해주고 있는지 찾아보았다.

server

packages/next/server/lib/start-server.ts

import type { NextServerOptions, NextServer, RequestHandler } from "../next"
import next from "../next"

export function startServer(opts: StartServerOptions) {
  let requestHandler: RequestHandler

  const server = http.createServer((req, res) => {
    return requestHandler(req, res)
  })

  return new Promise<NextServer>((resolve, reject) => {
    let port = opts.port
    let retryCount = 0
    let upgradeHandler: any

    server.on("listening", () => {
      const addr = server.address()
      const hostname =
        !opts.hostname || opts.hostname === "0.0.0.0"
          ? "localhost"
          : opts.hostname

      const app = next({
        // next가 뭔가 해주고 있는 것을 발견
        ...opts,
        hostname,
        customServer: false,
        httpServer: server,
        port: addr && typeof addr === "object" ? addr.port : port,
      })

      requestHandler = app.getRequestHandler()
      upgradeHandler = app.getUpgradeHandler()
      resolve(app)
    })

    server.listen(port, opts.hostname)
  })
}

next가 어디에 있는지 찾아보있다.

packages/next/server/next.ts

export class NextServer {
  constructor(options) {
    this.options = options
  }

  get hostname() {
    return this.options.hostname
  }
  get port() {
    return this.options.port
  }

  getRequestHandler(): RequestHandler {
    return async (
      req: IncomingMessage,
      res: ServerResponse,
      parsedUrl?: UrlWithParsedQuery
    ) => {
      const requestHandler = await this.getServerRequestHandler()
      return requestHandler(req, res, parsedUrl)
    }
  }

  getUpgradeHandler() {
    return async (req: IncomingMessage, socket: any, head: any) => {
      const server = await this.getServer()
      // @ts-expect-error we mark this as protected so it
      // causes an error here
      return server.handleUpgrade.apply(server, [req, socket, head])
    }
  }

  // ...

  async prepare() {
    const server = await this.getServer()
    return server.prepare()
  }

  // ...

  async createServer(options) {
    if (options.dev) {
      const DevServer = require("./dev/next-dev-server").default
      return new DevServer(options)
    }
    const ServerImplementation = await getServerImpl()
    return new ServerImplementation(options)
  }

  async getServer() {
    if (!this.serverPromise) {
      setTimeout(getServerImpl, 10)
      this.serverPromise = this.loadConfig().then(async conf => {
        this.server = await this.createServer({
          ...this.options,
          conf,
        })
        if (this.preparedAssetPrefix) {
          this.server.setAssetPrefix(this.preparedAssetPrefix)
        }
        return this.server
      })
    }
    return this.serverPromise
  }
}

여기서부터 너무 아득해졌는데 NextServer라고 Class명을 지은 거 보니 next에서 뭔가 nextServer를 만드는 것(create) 같았다.

packages/next/server/next-server.ts

import { RenderOpts, renderToHTML } from "./render"

export default class NextNodeServer extends BaseServer {
  // ...

  protected async renderHTML(
    req: NodeNextRequest,
    res: NodeNextResponse,
    pathname: string,
    query: NextParsedUrlQuery,
    renderOpts: RenderOpts
  ): Promise<RenderResult | null> {
    renderOpts.serverComponentManifest = this.serverComponentManifest
    renderOpts.serverCSSManifest = this.serverCSSManifest
    renderOpts.fontLoaderManifest = this.fontLoaderManifest

    return renderToHTML(
      req.originalRequest,
      res.originalResponse,
      pathname,
      query,
      renderOpts
    )
  }
}

점점 아득해져가는데 눈에 들어오는 class를 데려와봤다. NextNodeServer class 안에 renderHTML을 발견했다.
뭔가 여기서 SSR의 느낌이 나서 render 해주는 파일을 찾아 들어가봤다.

packages/next/server/render.tsx
renderToHTML을 찾아서 까봤다...

export async function renderToHTML() {
  // ...
  const AppContainer = ({ children }: { children: JSX.Element }) => (...)

  const AppContainerWithIsomorphicFiberStructure: React.FC<{...}> = ({children}) => {return(...)}

  const Body = ({ children }: { children: JSX.Element }) => {
    // 개발자 도구에서 본 듯한 DOM 발견!
    return inAmpMode ? children : <div id="__next">{children}</div>;
  };

  const renderDocument = async () => {
      // Document를 render해주는 함수를 발견

    async function loadDocumentInitialProps(
      renderShell?: (
        _App: AppType,
        _Component: NextComponentType
      ) => Promise<ReactReadableStream>
    ) {
      const renderPage: RenderPage = (
        options: ComponentsEnhancer = {}
      ): RenderPageResult | Promise<RenderPageResult> => {
    // ...

        const html = ReactDOMServer.renderToString(
          <Body>
            <AppContainerWithIsomorphicFiberStructure>
              {renderPageTree(EnhancedApp, EnhancedComponent, {
                ...props,
                router,
              })}
            </AppContainerWithIsomorphicFiberStructure>
          </Body>
        );

    // ...
  }

  const documentResult = await renderDocument();

  const htmlProps: HtmlProps = {...};

  const document = (
    <AmpStateContext.Provider value={ampState}>
      <HtmlContext.Provider value={htmlProps}>
        {documentResult.documentElement(htmlProps)}
      </HtmlContext.Provider>
    </AmpStateContext.Provider>
  );

  const documentHTML = ReactDOMServer.renderToStaticMarkup(document);

  const [renderTargetPrefix, renderTargetSuffix] = documentHTML.split(
    "<next-js-internal-body-render-target></next-js-internal-body-render-target>"
  );
}

코드를 모두 이해할 수는 없었지만, 서버에서 HTML를 만들어가는 과정이 여기서 일어나고 있다는 것이 느껴졌다.
특히 const html = ReactDOMServer.renderToString 이 부분이 핵심이었다.

이제 클라이언트 파일을 확인해보기로 했다.

client

packages/next/client/next.js

import { initialize, hydrate, version, router, emitter } from "./"

initialize({})
  .then(() => hydrate())
  .catch(console.error)

initialize()이후 hydrate()를 실행하고 있다.
./ 경로를 찾아보았다.

packages/next/client/index.tsx

export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{...}> {}

function renderApp(App: AppComponent, appProps: AppProps){...}

function renderReactElement(){}

function doRender(input: RenderRouteInfo): Promise<any> {...}

async function render(renderingProps: RenderRouteInfo): Promise<void> {...}

export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {...}

next.js 파일 에서 보았던 initialize 함수와 hydrate 함수와 더불어 무언가를 render하는 것 같은 함수를 가져와봤다.

  // next/client/index.jsx
  export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
  assetPrefix: string
  }> {
  initialData = JSON.parse(
  document.getElementById("**NEXT_DATA**")!.textContent!
  )
  window.**NEXT_DATA** = initialData
  }

__NEXT_DATA__ id를 가지고 있는 엘리먼트를 parse해서 initialData에 할당하고 있다.

  // next/client/index.jsx
  export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
  assetPrefix: string
  }> {
  initialData = JSON.parse(
  document.getElementById("**NEXT_DATA**")!.textContent!
  )
  window.**NEXT_DATA** = initialData

  // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
  // So, this is how we do it in the client side at runtime
  **webpack_public_path** = `${prefix}/_next/` //eslint-disable-line
  }

주석이 달려있다.

동적 assetPrefix를 사용하면 더 이상 빌드 시 assetPrefix를 설정할 수 없습니다. 이것이 런타임에 클라이언트 측에서 수행하는 방법입니다.

친절하게 주석이 적혀있었으나... 당장에 무슨 말인지 이해할 수 없었다.

appElement = document.getElementById("__next")
return { assetPrefix: prefix }

__next id를 가지고 있는 엘리먼트를 appElement에 할당한 이후, assetPrefix를 반환한다.

function renderApp(App: AppComponent, appProps: AppProps) {
  return <App {...appProps} />
}

renderApp 함수는 App과 appProps 매개변수를 받아서 AppComponent를 리턴한다.

function renderReactElement(
  domEl: HTMLElement,
  fn: (cb: () => void) => JSX.Element
): void {
  // mark start of hydrate/render
  if (ST) {
    performance.mark("beforeRender")
  }

  const reactEl = fn(shouldHydrate ? markHydrateComplete : markRenderComplete)

  if (process.env.__NEXT_REACT_ROOT) {
    if (!reactRoot) {
      // Unlike with createRoot, you don't need a separate root.render() call here
      reactRoot = ReactDOM.hydrateRoot(domEl, reactEl)
      // TODO: Remove shouldHydrate variable when React 18 is stable as it can depend on `reactRoot` existing
      shouldHydrate = false
    } else {
      const startTransition = (React as any).startTransition
      startTransition(() => {
        reactRoot.render(reactEl)
      })
    }
  } else {
    // The check for `.hydrate` is there to support React alternatives like preact
    if (shouldHydrate) {
      ReactDOM.hydrate(reactEl, domEl)
      shouldHydrate = false
    } else {
      ReactDOM.render(reactEl, domEl)
    }
  }
}

React18이 안정화 될 때까지 ReactElement render 방식을 if문으로 나누고 있다.
상황에 따라서 ReactDOM.hydrateRoot하거나 ReactDOM.hydrate하거나 ReactDOM.render으로 렌더하고 있다.
ReactDOM.hydrateRoot문을 탔다면, 별도로 root.render()하지 않아도 된다.
shouldHydrate의 boolean 상태에 따라 reactEl의 fn가 달라진다 (markHydrateComplete || markRenderComplete)

ReactDOM.render()는 렌더링하기 원하는 컴포넌트, 렌더링 되길 원하는 컴포넌트들이 포함된 DOM 요소를 인수로 받는다. (https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started#interrogating_the_index)

function doRender(input: RenderRouteInfo): Promise<any> {
  let { App, Component, props, err }: RenderRouteInfo = input

  const appProps: AppProps = {
    ...props,
    Component,
    err,
    router,
  }

  // ...뭔가 <style> 을 붙이고 있는 것 같음...

  const elem: JSX.Element = (
    <>
      <Head callback={onHeadCommit} />
      <AppContainer>
        {renderApp(App, appProps)}
        <Portal type="next-route-announcer">
          <RouteAnnouncer />
        </Portal>
      </AppContainer>
    </>
  )

  // We catch runtime errors using componentDidCatch which will trigger renderError
  renderReactElement(appElement!, callback => (
    <Root callbacks={[callback, onRootCommit]}>
      {process.env.__NEXT_STRICT_MODE ? (
        <React.StrictMode>{elem}</React.StrictMode>
      ) : (
        elem
      )}
    </Root>
  ))

  return renderPromise
}

위에서 잘 만든 것들을 doRender 함수로 렌더한다고 이해했다.
이때 renderReactElement가 재등장하는데, renderReactElement 함수의 첫 번째 매개변수는 domEl: HTMLElement였고 두 번째 매개변수는fn: (cb: () => void) => JSX.Element였다.

appElement는 initialize함수에서 appElement = document.getElementById('__next')로 할당하었다.
callback 함수는 <Root> 밑으로 elem을 넣어주고 있다.

후기

내가 과제를 잘 이해한 건지 모르겠다. 너무 어렵게 생각한 것 같기도 하고... 제대로 이해한 것인지 확신도 들지 않았다.
챌린지 이후 보다 더 NextJs를 이해할 수 있기를 바라며...

참조

https://web.dev/rendering-on-the-web/
https://iancoding.tistory.com/173

다크모드 토글 시, 폰트가 깜빡이는 현상 (Feat. Styled-Component)

지니코딩 — Tue, 6 Sep 2022 13:55:35 +0900

1. 사건의 발단

전엔 못 본 거 같은데 다크모드 버튼을 토글할 때, 폰트가 깜빡이는 현상을 목격.

가장 먼저 든 생각은 이게 말로만 듣던 FOUC ('style이 적용되지 않은 내용'이 '깜빡'이는 현상) 인가? 라는 생각에 도달함

그러나 엄밀히 말해, 폰트만 이런 모습을 보이고 있는 것 같아서 FOUT(텍스트가 깜빡여보이는 현상. 즉, 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상)으로 추측했음

말로만 듣던 FOUT를 목격하는 건 처음이라 당황스러우면서도 신나게 버그를 해결하기로 결심

2. 그럼 해결 방법을 찾아보자!

https://web.dev/avoid-invisible-text/

글꼴 로드 중 보이지 않는 텍스트 방지

글꼴은 로드하는 데 시간이 걸리는 대용량 파일인 경우가 많습니다. 이를 처리하기 위해 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨깁니다("보이지 않는 텍스트의 깜박임(FOIT)". 성능을

web.dev

해당 글은 font-display를 소개하고 있다.

이 css를 사용하면 글꼴이 준비되지 않았을 경우, 각 브라우저가 어떻게 대응하는지 알려주고 있다.

차근차근 따라하며 FontFaceObserver도 설치해서 테스트 해보았으나...

해결되지 않았다....

라이브러리로 테스트를 했을 때, 아주 잘 렌더링되고 있었고 여전히 폰트 깜빡임 현상은 남아있었다.

3. 폰트 렌더링에 문제가 있을 것이므로, 어떻게 사용자 지정 폰트를 지정해주었는지 확인해본 결과, Styled-Component에서 globalstyle로 font-family를 준 것을 확인할 수 있었다.

4. 그럼 styled-component를 잘못 쓰고 있을 지도 모른다는 생각에 구글링을 해보았다. 아니나 다를까!

https://github.com/styled-components/styled-components/issues/1593

Dynamic style change causes custom fonts to be re-requested from the server · Issue #1593 · styled-components/styled-component

I couldn't tell if this has anything to do with #1576, but it seems like potentially its own issue. I don't have @media rules, but I do have @font-face rules. System: OS: macOS High Sierra ...

github.com

Styled-Components는 스타일이 Render 될 때 마다 head 태그의 style 태그를 변경한다. 새로운 스타일이 등장할 때마다 폰트를 재요청하는 현상이 나타난 것

아래는 다크모드를 토글할 때마다 style에 변화가 일어나는 것을 확인한 태그이다.

head 아래 style에 담겨있었다.

network/font 탭에서도 토글할 때마다 폰트가 계속 담기는 것을 확인할 수 있었다.

5. 빛이 보인다. 그래서 해결 방법은?

@font-face를 globalStyle에 넣지 말고 쏙 빼내서 css로 다루면 된다.

6. 참고로 이 프로젝트는 NextJS로 만들어져서, 글로벌 css에 대한 규칙도 정해져 있다.

마음대로 css를 import 할 경우 Global CSS Must Be in Your Custom \<App> 에러를 직면하게 될 것이다...

7. 전체 코드

// pages/_app.tsx

import '../src/styles/font.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
          <GlobalStyle />
          <Component {...pageProps} />
    </>
  );
}

export default MyApp;

// src/styles/font.css

@font-face {
  font-family: 'Pretendard-Regular';
  font-display: swap;
  src: url('/fonts/PretendardVariable.ttf') format('woff');
  font-weight: 400;
  font-style: normal;
}

// src/styles/globalStyle.ts 

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  html,
  body {
    font-family: Pretendard-Regular, -apple-system, sans-serif;
  }
 `

오랜만에 통신 에러가 아닌 성능 에러를 마주하니 재미있었다 ㅠㅠ...

프리온보딩 프론트엔드 챌린지 2차

지니코딩 — Tue, 6 Sep 2022 10:15:09 +0900

프리온보딩 프론트엔드 챌린지 2차 수강 도중 애매하게 알고 있었거나 새로이 알게된 정보 정리

1. new.target

new.target 속성(property)은 함수 또는 생성자가 new 연산자를 사용하여 호출됐는지를 감지할 수 있습니다.

우리는 사용자를 위해 일부러 에러를 낼 수 있지만, 동료 개발자를 위해 에러를 낼 줄도 알아야 한다.

예를 들어, 생성자를 사용하여 init 코드를 써야만 한다고 해보자. 동료 개발자가 이를 쓰지 않았을 때, 에러를 내주어야 한다.

이럴 때 쓸 수 있는 것이 new.target 이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new.target

new.target - JavaScript | MDN

new.target 속성(property)은 함수 또는 생성자가 new 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. new 연산자로 인스턴스화된 생성자 및 함수에서, new.target은 생성자 또는 함수 참조를 반환합

developer.mozilla.org

function Foo() {
  if (!new.target) { throw 'Foo() must be called with new'; }
}

try {
  Foo();
} catch (e) {
  console.log(e);
  // expected output: "Foo() must be called with new"
}

2. tdz?

풀어쓰면 일시적인 사각지대라는 뜻

new Car('red'); // Uncaught ReferenceError: Car is not defined

class Car {
  constructor(color) {
    this.color = color;
  }
}

greet('World'); // 'Hello, World!'

function greet(who) {
  return `Hello, ${who}!`;
}

TDZ은 let, const, class 구문의 유효성을 관리한다.

위 코드에서 'new Car('red)'는 사각지대에 있는 셈이다.

https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/

앞서 말했듯, tdz는 let, const, class 구문의 유효성을 관리한다. 반면, var, function 선언은 tdz에 영향을 받지 않는다. 이것들은 현재 스코프에서 호이스팅 된다.

tdz는 선언 전에 변수를 사용하는 것을 허용하지 않는다.

반대로 var 변수는 선언 전에도 사용할 수 있기 때문에 var 사용은 피하는 것이 좋다.

참조:https://ui.toast.com/weekly-pick/ko_20191014

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다.

ui.toast.com

3. 매개변수가 3개 이상이 되면 객체로 넘겨주자

4. 풀사이클?

개발팀이 우수한 생산성 도구를 활용하여 소프트웨어 개발 수명주기(디자인, 개발, 테스트, 배포, 운영, 지원) 전체를 처리하는 모델

1. 조건부 요소로 배열을 초기화하기

https://codeburst.io/3-ways-to-initialize-an-array-with-conditional-elements-in-javascript-c95397615a7e

3 Ways to Initialize an Array with Conditional Elements in JavaScript

This blog will run you through 3 ways to initialize a JavaScript Array with conditional elements.

codeburst.io

1) 삼항 연산자를 사용하여 배열 내부에 새로운 배열을 spread 합니다.

const myArray = [
    'a', 'b', 'c', 'd',
    ... condition ? ['e'] : [],
];

condition이 true면 e가 추가되고, false면 배열에 아무것도 추가되지 않음

2) 거짓값 필터링

const myArray = [
    'a', 'b', 'c', 'd',
    condition ? 'e' : null,
].filter(Boolean);

const myArray = [
    'a', 'b', 'c', 'd',
    condition ? 'e' : null,
].filter(x => x !== null);

1. TS 컨벤션 참조 사이트

1) google typescript style guide

https://google.github.io/styleguide/tsguide.html

Google TypeScript Style Guide

Google TypeScript Style Guide TypeScript style guide This is the external guide that's based on the internal Google version but has been adjusted for the broader audience. There is no automatic deployment process for this version as it's pushed on-demand b

google.github.io

2) typescript 코딩 지침 (기여자용)

https://github.com/microsoft/TypeScript/wiki/Coding-guidelines

GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

github.com

2. soundness : 건전성. 형식 체계 내에서 증명 가능한 명제가 의미론 상으로도 참이 되는 성질

타입스크립트에는 soundness가 있는데 대표적으로 type assertion 이 있다.

const usersAge = ("23" as any) as number;

3. shorthand properties (프로퍼티 축약)

프로퍼티의 key 와 value 에 할당할 변수명이 동일한 경우 value 를 생략 가능합니다.

4. concise methods (간결한 메소드)

콜론과 함수 키워드를 생략한 간결한 문법

5. 어떤 객체의 value가 false값만 들어온다면, 타입스크립트로도 최대한 좁혀서 사용한다.

어떤 todo가 만들어질 때, isCompleted는 무조건 false로 들어온다.

interface CreateTodo {
  id: string;
  content: string;
  isCompleted: boolean; // <- 여기
  category?: string;
  tags?: string[];
}

const createTodo = ({content, category, tags}:CreateTodo):CreateTodo => {
  return {
    id: String(new Date()),
    isCompleted: false,
    content,
    category,
    tags
  }
}

위 코드의 isCompleted는 boolean으로 타입지정이 되어있지만 이는 좋은 코드가 아니다.

interface CreateTodo {
  id: string;
  content: string;
  isCompleted: false;
  category?: string;
  tags?: string[];
}

const createTodo = ({content, category, tags}:CreateTodo):CreateTodo => {
  return {
    id: String(new Date()),
    isCompleted: false,
    content,
    category,
    tags
  }
}

Good!

확장을 사용하여 위 코드보다 더 좋게 만들어보자.

interface Todo {
  id: string;
  content: string;
  isCompleted: boolean,
  category: string;
  tags: string[]
}

interface CreateTodo extends Todo{
  isCompleted: false;
}

const createTodo = ({content, category, tags}:CreateTodo):CreateTodo => {
  return {
    id: String(new Date()),
    isCompleted: false,
    content,
    category,
    tags
  }
}

6. 자주 사용하는 type은 최대한 재활용해서 쓰는 게 좋다.

interface Todo {
  id: string;
  content: string;
  isCompleted: boolean;
  category?: string;
  tags: string[];
}

interface DeleteTagParamsType {
  id: string;
  tagIdx?: number;
}

위 코드의 문제는, id가 string이 아닌 다른 타입으로 바뀔 때 일어난다.

아래처럼 바꾼다면 좀 더 안정적으로 타입을 지정할 수 있다.

interface Todo {
  id: string;
  content: string;
  isCompleted: boolean;
  category?: string;
  tags: string[];
}

interface DeleteTagParamsType {
  id: Todo['id'];
  tagIdx?: number;
}

확장을 사용하는 방법도 있다.

interface Todo {
  id: string;
  content: string;
  isCompleted: boolean;
  category?: string;
  tags: string[];
}

interface DeleteTagParamsType extends Todo {
  tagIdx?: number;
}

typescript 유틸리티를 사용할 수도 있다. (Omit, Pick...)

interface Todo {
  id: string;
  content: string;
  isCompleted: boolean;
  category?: string;
  tags: string[];
  tagIdx?: number;
}

type shoppingItem = Pick<Todo, "tagIdx">;

7. 스위치문엔 default를 사용해 엣지케이스(방어코드)를 꼭 넣어주자.

엣지 케이스란? : 알고리즘이 처리하는 데이터의 값이 알고리즘의 특성에 따른 일정한 범위를 넘을 경우에 발생하는 문제

default: {
  throw new Error ('what Id?')
}

8. if문을 너무 깊게 쓰기보다, 한 번 빼서 분리하는 게 좋다

9. 함수형 type을 지정할때 void가 return 되는 type이 많다면, 한 번 의심해보는 게 좋다.

함수가 너무 많은 일을 하고 있을 수 있으므로...

10. if문으로 숫자의 boolean을 판별할 때 유의한다.

if(!id) { // dangerous!!!
	...
}

!!(0) //false
!!(-1) //true

11. 매개변수에 id 등을 넣을 때, 그냥 id를 쓰기보다 가능한 어떤 id인지 매개변수명으로 명시하면 좋다.

deleteTodo(selectedId) {
  this.todoList = this.todoList.filter(({id})=> id !== selectedId)
}

12. any와 다를 바 없는 타입 지정을 피하자

const $app: HTMLElement = document.createElement('div'); // 좋지 않음

const $app: HTMLDivElement = document.createElement('div'); // 이렇게 하자

13. 타입스크립트를 쓴다고 해서 코드가 완전히 안전하다고 할 수 없다.

타입스크립트는 런타임에 개입하지 않기 때문에 (이는 soundness 특성 때문) 개발자는 Narrowing으로 타입을 좁혀주어야 한다.

14. unknown ?

나도 이 타입이 뭔지 모르겠어~

any와 비슷하지만 unknown의 가장 큰 특징은 에러를 발생시킨다는 것에 있다.

let num: unknown = 99;

if(typeof num === 'string') {
  num.trim();
}

(num as string).trim()

해결법은 타입가드를 적용한다.

15. 타입을 좁힐 때 리터럴 타입을 적절히 이용한다.

아래와 같이 Route를 상수로 정의한 객체가 있다고 하자.

newPath를 string으로 받으면, changeRoute에 존재하지 않는 route를 넣어도 typescript는 잡아주지 못한다.

const Route = {
  ABOUT: '/about',
  TOPICS: '/topics'
}

function changeRoute(newPath: string) {
  const state = {'page_id': 1, 'user_id': 5}
  const title = ''

  history.pushState(state, title, newPath)
}

window.addEventListener('popstate', ()=> changeRoute('/auth'))

리터럴 타입을 이용해본다.

const Route = {
  ABOUT: '/about',
  TOPICS: '/topics'
}

type RoutePaths = 'about' | 'topics'

function changeRoute(newPath: RoutePaths) {
  const state = {'page_id': 1, 'user_id': 5}
  const title = ''

  history.pushState(state, title, newPath)
}

window.addEventListener('popstate', ()=> changeRoute('/auth'))
// Argument of type '"/auth"' is not assignable to parameter of type 'RoutePaths'.(2345)

하나하나 리터럴 타입을 적어주기보다 다음과 같이 응용해보는 건 어떨까?

const Route = {
  ABOUT: '/about',
  TOPICS: '/topics'
} as const

type RoutePaths = typeof Route [keyof typeof Route]

function changeRoute(newPath: RoutePaths) {
  const state = {'page_id': 1, 'user_id': 5}
  const title = ''

  history.pushState(state, title, newPath)
}

window.addEventListener('popstate', ()=> changeRoute('/about'))

CI/CD ! Github Actions

지니코딩 — Mon, 5 Sep 2022 16:33:46 +0900

1. CI?

Continous Integration은 코드를 지속적으로 통합해나가는 것.

코드의 통합은 단순히 코드와 코드를 합치는 것뿐만이 아니라 코드를 테스트하고 유효한지 검사하는 확인.

2. CD?

Continuous Deployment는 CI 과정을 통해서 성공적으로 통합된 코드들을 실제 사용자가 사용하고 있는 Production 환경에 배포하는 것

3. 설치형 / 클라우드형

설치형: Jenkins

클라우드형: Github Actions

4. Github Actions 구성요소

name: CI/CD
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs

name
- Workflow의 이름
on (event)
- 여기에 기술된 이벤트에 의해 workflow가 작동한다. 특정 동작일 수 있고, schedule이 될 수도 있다. 위 코드로 예를 들자면, master 브랜치에서 push가 발생할 때 이 workflow가 실행된다.
- 다른 이벤트 참조
jobs
- workflow에서 실행할 작업의 단위. jobs 아래로 build, deploy 등이 들어올 수 있다.
- name: job의 이름. 생략 가능하다.
- runs-on: 해당 job을 실행할 가상 환경으로 ubuntu, linux, macOs 로 설정할 수 있다.
- steps: Job이 실행되는 하나의 가상 환경에서 이루어질 일련의 작업. job이 추상적이라면, step은 조금 더 실질적이다. command나 action을 실행할 수 있다.
  - name, run
    - name: 생략 가능하며 name은 알아서 정해진다.
    - run: command 를 실행한다. command는 여러줄로 생성 가능하다.
  - env
  - uses
    - Action을 사용한다는 뜻. action을 다른 저장소에서 가져와 사용하거나 workflow 파일이 존재하는 동일한 저장소에 만들어서 사용할 수 있다. GitHub Marketplace에서 Action들을 검색하고 활용한다.
    - actions/checkout@v2 : workflow를 실행하는 저장소의 최신 내역을 받아온다.
    - with: Action에게 넘겨주는 파라미터.

5. 실전! Github Actions 써보기 (ex. gh-pages)

파일 생성
- .github/workflows/'파일이름'.yml
깃허브 마켓플레이스를 참조하여 yml을 꾸며보자

name: Build and Deploy
on: [push]
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout  ️
        uses: actions/checkout@v3

      - name: Install and Build   # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy  
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build # The folder the action should deploy.

참조

https://ohseunghyeon.github.io/blogging/deploying-github-pages-with-github-actions/

Github pages를 github actions로 자동 배포하기

Github blog를 Github에서 제공하는 github actions로 배포하기

ohseunghyeon.github.io

https://velog.io/@adam2/Github-Action-%EC%A3%BC%EC%9A%94-%EB%AC%B8%EB%B2%95

▶ Github Action 주요 문법 배우기

이번 글에서는 본격적으로 workflow를 작성하기 위한 기본적인 문법들을 학습하는 시간을 가져보도록 하겠습니다. github 사용이 익숙하다면(PR, Push, review, issue 등등..) 이해가 더 쉬울 거라고 생각

velog.io

브랜치 정리하기

지니코딩 — Tue, 30 Aug 2022 13:59:13 +0900

원격 저장소 브랜치 삭제하기

git branch -d <branchname>

이 명령어는 local repositorie에서만 삭제가 되고 원격에서는 삭제되지 않는다.

원격 저장소의 브랜치까지 삭제하기 위해서는 명령어가 한가지 더 필요하다.

git push origin --delete <branchname>

로컬 브랜치 정리 (--prune 옵션 사용)

원격 저장소에 브랜치가 삭제되었으나, 로컬 저장소에는 그 브랜치가 유효한 경우, 로컬 브랜치도 같이 정리해주어야 한다.

아래 명령어로 정리할 브랜치가 어떤 것인지 체크해본다.

git branch -r // 원격 저장소의 브랜치 목록
git branch -a // 모든 브랜치 목록

특정 원격 저장소의 삭제된 로컬 브랜치를 정리하려면

git fetch <remotename> --prune

모든 원격 저장소에 대한 삭제된 브랜치 정보를 정리하려면

git fetch --all --prune

프리온보딩 프론트엔드 챌린지 1차

지니코딩 — Mon, 29 Aug 2022 18:19:58 +0900

프리온보딩 프론트엔드 챌린지 1차 수강 도중 애매하게 알고 있었거나 새로이 알게된 정보 정리

1. map 등 메서드를 사용할 때, number[]를 썼다면 number 관련 method가 추론된다. num 위에 커서를 올리면 타입추론이 되고 있는 것을 확인할 수 있다.

https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gRgDQwBMBAzALoDcAUIsigHQC2cADgBQCWUApoxgHwwuvejAD0YmIAGFwKHjgFNnABh2AXcZiAcFsAnTfQCUQA

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

www.typescriptlang.org

2. 타입단언 (as 사용)

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%ED%83%80%EC%9E%85-%EB%8B%A8%EC%96%B8

Documentation - Everyday Types

언어의 원시 타입들.

www.typescriptlang.org

3. Non-null assertion operator (Null이 아닌 어선셜 연산자. !를 사용)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

Documentation - TypeScript 2.0

TypeScript 2.0 Release Notes

www.typescriptlang.org

4. Definite Assignment Assertions (확정할당 연산자. !를 사용)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions

Documentation - TypeScript 2.7

TypeScript 2.7 Release Notes

www.typescriptlang.org

5. React TypeScript cheat sheet

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/

Setup TypeScript with React | React TypeScript Cheatsheets

Prerequisites

react-typescript-cheatsheet.netlify.app

라이브러리나 프레임워크를 사용할 때, 어떻게 추론해야 할 지 알 수 없다면?

`<button onClick={e=>{}}/>` 등을 작성하고 e에 마우스를 가져다대서 타입을 알아냅니다.
구글 검색
치트시트 참조
React / index.d.ts 참조

Q. textarea와 input에서 onChange 이벤트를 사용할 때 | 를 사용하여 두 타입을 모두 명시하는 것이 좋을까, 두 타입의 부모 타입을 주는 게 좋을까?

A. 이럴 때 제네릭을 사용하자

7. 에러가 발생한다고 해서 그것이 꼭 에러객체라는 건 아니다.

throw 'h1' // Uncaught h1
throw new Error('h1') // Uncaught Error: h1

function readUser(json) {
  let user;

  try {
    user = JSON.parse(json);
  } catch (err) {
    if (err instanceof Error) {
    // instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있습니다.
      console.log(err)
    } else {
      throw err;
    }
  }
}

1. 모듈 시스템이란?

> 모듈: 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부른다.

> 모듈로 분리된 JS파일을 불러오는 방식을 정의한 것.

https://doitnow-man.tistory.com/entry/javascript-module-%EC%8B%9C%EC%8A%A4%ED%85%9C

[javascript] module 시스템

목표 - javascript의 모듈 시스템에 대해서 알아 봅니다. 모듈이란? - 하나의 큰 기능을 문해 해결을 쉽게하기 위하여 여러 작은 기능으로 분리하는데 이 작은 기능을 모듈이라고 합니다. - 아래 예

doitnow-man.tistory.com

<script src="./a.js"></script>
<script src="./b.js"></script>

// 글로벌 스코퍼를 공유하게 됨

2. IIFE: 정의와 동시에 즉시 실행되는 함수

Immediately Invoked Function Expression (즉시 실행되는 함수 표현식)

https://velog.io/@doondoony/javascript-iife

자바스크립트의 IIFE

즉시 실행 함수에 대해 알아보자

velog.io

(function () { console.log('Hello World') })(); // Hello World

보편적으로 전역 스코프를 오염시키지 않기 위해 사용함.

3. 웹팩이란?

자바스크립트 모듈 번들러.

어플리케이션에 필요한 모든 모듈을 병합하고 압축해서 하나의 결과물(번들)을 생성해주는 도구.

웹팩에서의 모듈은 javascript 파일뿐만 아니라 애플리케이션을 구성하는 HTML, CSS, Javascript, Images, Font 등 많은 파일들을 모듈이라고 한다.

4. 순수함수란?

외부의 상태를 변경하지 않으면서 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수

const App = () => {
 return <div>App</div>
}

함수인가?: 함수 컴포넌트는 어떻게 보면 그냥 '함수'이다.

그 목적은?: view를 리턴하고 있다.

리덕스는 순수함수를 기반으로 한다.

5. 사이드이펙트란?

자바스크립트 관점에서 보면 사이드 이펙트는 (자바스크립트) 코드가 외부 세계에 영향을 주거나 받는 것이다. 조금 모호하지만 함수 관점으로 생각하면 조금 더 명확하다. 함수가 일관된 결과를 보장하지 못하거나, 함수 외부 어디든지 조금이라도 영향을 주는 경우 모두 사이드 이펙트를 갖는 것이라 할 수 있다.

(출처: https://ui.toast.com/weekly-pick/ko_20171124)

const App = () => {

    useEffect(()=>{
     // fetch('') - 외부세계에 영향을 미치는 부수효과. 사이드 이펙트.
    },[])

 return <div>App</div>
}

만약 위 코드를 동기적으로 실행한다면 useEffect가 끝날 때까지 렌더링이 멈출 것이다.

이 함수의 목적은 'App'을 리턴하는 것이다.

fetch는 사이드 이펙트다.

그러므로 렌더링이 다 된 뒤 useEffect가 실행된다.

'Effect'만 없다면 순수함수가 될 수 있었을 텐데...

(state, props) => UI

state, props에 의해서만 UI가 영향을 받는다.

state, props 외, 다른 것이 들어와서 UI가 바뀌면 순수함수가 아니다.

Q. 음... 잘 와닿지 않는데요?

A. fetch로 들어온 데이터 때문에 UI가 바뀐다면 순수함수가 아니다.

5. useState의 첫 번째 인자에 함수를 넣는 이유?

-> 처음 한 번만 실행하기 위함이다.

6. 캐시란?

자주쓰는 데이터를 가까운 저장소에 두는 것.

서버야. 캐시가 있니?

응: 그럼 캐시 쓰자.

아니: 캐시에 데이터 저장할게

cache[request.url] ? cache[request.url] : cache[request.url] = request.url

6-1. react-query에서 캐시키의 활용.

a, b 컴포넌트에서 같은 캐시키를 갖고 있다면?

b에서 바뀌면 a도 바뀐다.

7. 직렬화란?

plain object

-객체 리터럴 {}을 이용해서 만들 수 있다.

-{key:value, key2:value, ...}와 같은 형식으로 만든다.

-키 값으로 관리되는 순서가 중요치 않는 데이터를 저장한다.

대표적으로 json 직렬화가 있다.

JSON.stringfy(JSON형식의 객체)

: 객체 => 문자열로 변환하며, 이를 직렬화(serialize)라고 한다.

: 통신할 때는 문자열로 직렬화하여 주고 받는 것이 안전하다.

8. 불변성이란?

객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴

9. 엔드포인트란?

서비스를 이용할 때 사용하는 커뮤니케이션 채널의 한쪽 끝에 해당하는 URL

get. post 등의 메서드로 엔드포인트가 끝나야 이상적이다.

10. 로컬 스토리지는 동기적인 동작이다. 메인스레드가 정지된다.

타입단언

지니코딩 — Mon, 22 Aug 2022 13:34:00 +0900

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#type-assertions

Documentation - Everyday Types

언어의 원시 타입들.

www.typescriptlang.org

때로는 TypeScript보다 당신이 어떤 값의 타입에 대한 정보를 더 잘 아는 경우도 존재합니다.

예를 들어 코드상에서 document.getElementById가 사용되는 경우, TypeScript는 이때 HTMLElement 중에 _무언가_가 반환된다는 것만을 알 수 있는 반면에, 당신은 페이지 상에서 사용되는 ID로는 언제나 HTMLCanvasElement가 반환된다는 사실을 이미 알고 있을 수도 있습니다.

이런 경우, _타입 단언_을 사용하면 타입을 좀 더 구체적으로 명시할 수 있습니다.

- 타입 단언이 없을 시

const myCanvas = document.getElementById("main_canvas")

// const myCanvas: HTMLElement | null

- 타입 단언 사용

/**
* ts에서
* 
*/
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
// const myCanvas: HTMLCanvasElement

/**
* tsx에서
* 
*/
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
// const myCanvas: JSX.Element

'ParsedUrlQuery | undefined' 형식에 'userSeq' 속성이 없습니다.

지니코딩 — Mon, 8 Aug 2022 10:11:24 +0900

getServerSideProps에서 context를 가져올 때 타입에러가 발생할 경우, 확장시켜서 사용한다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { userSeq } = context.params; 
  //'ParsedUrlQuery | undefined' 형식에 'userSeq' 속성이 없습니다.ts(2339)


	...
};

이때 query는 string으로 받기 때문에, userSeq가 number로 와야할 경우, 형 변환을 따로 해주는 게 좋다.

import { ParsedUrlQuery } from 'querystring';

export const getServerSideProps: GetServerSideProps = async (context) => {
  interface IParams extends ParsedUrlQuery {
    userSeq: string;
  }

  const { userSeq } = context.params as IParams;

 ...
};

참조:

https://wallis.dev/blog/nextjs-getstaticprops-and-getstaticpaths-with-typescript

Container/Presentational Pattern

지니코딩 — Wed, 3 Aug 2022 16:06:30 +0900

- 애플리케이션 로직과 뷰(UI)를 분리한 패턴

- UI 구분이 쉬워지며 모킹, 스토리북을 더 쉽게 사용할 수 있습니다.

Presentational Components : 데이터가 사용자에게 어떻게 보여지는지 신경쓰는 컴포넌트. 즉, UI.
Container Components : 어떤 데이터가 사용자에게 보여 지는지 신경쓰는 컴포넌트 . 즉, API 통신 등을 담당.

Container Components

import { useState, useEffect } from "react";

export default function useDogImages() {
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    async function fetchDogs() {
      const res = await fetch(
        "https://dog.ceo/api/breed/labrador/images/random/6"
      );
      const { message } = await res.json();
      setDogs(message);
    }

    fetchDogs();
  }, []);

  return dogs;
}

Presentational Components

import React from "react";
import useDogImages from "./useDogImages";

export default function DogImages() {
  const dogs = useDogImages();

  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

다른 예시


const FaceLoader = () => { // Container with Suspense
  return (
    <Suspense fallback={<Loading />}>
      <FaceFetcher />
    </Suspense>
  );
}
const FaceFetcher = () => {  // Container
  const [face] = useFetch('face');
  return <Face face={face} />;
};

const Face = ({ face }) => { // Presentational
  return (
    <>
      {'...'}
      {face}
      {'...'}
    </>
  );
};

react-query, suspense, errorboundary 여러 라이브러리의 조합

function Main() {
  return (
    <ErrorBoundary fallback={<div>에러 발생!</div>}>
      <Suspense fallback={<div>로딩 중...</div>}>
        <UserInfo />
      </Suspense>
    </ErrorBoundary>
  )
}

function useUser() { // useQuery 분리
  return useQuery(
    `getUser`,
    () => {
      return apiClient.get<User>(`URL`)
    },
    { suspense: true }
  )
}

function UserInfo() {
  const { data: user } = useUser() // UI만 신경쓰게 하자 
  return <div>{user.name}</div>
}

출처:

https://www.patterns.dev/posts/presentational-container-pattern/

Container/Presentational Pattern

Enforce separation of concerns by separating the view from the application logic

www.patterns.dev

https://fe-developers.kakaoent.com/2022/220609-storybookwise-component-refactoring/

스토리북 작성을 통해 얻게 되는 리팩토링 효과

카카오엔터테인먼트 FE 기술블로그

fe-developers.kakaoent.com

React-query의 에러 핸들링

지니코딩 — Wed, 3 Aug 2022 15:12:17 +0900

네트워크 요청이 실패하면 이상적으로는 쿼리가 오류 상태가 되기를 원할 것입니다. 그렇게 하지 않고 대신 성공한 쿼리가 표시 된다면 이는 queryFn 이 실패한 Promise를 반환하지 않았음을 의미합니다.

React Query는 상태 코드나 네트워크 요청에 대해 전혀 알지 못합니다(또는 신경 쓰지 않습니다). queryFn 이 제공 해야 하는 해결되거나 거부된 Promise가 필요합니다.

React Query가 거부된 Promise를 발견하면 잠재적으로 재시도를 시작하고 오프라인인 경우 쿼리를 일시 중지하고 결국 쿼리를 오류 상태로 만들 수 있으므로 올바르게 수행하는 것이 매우 중요합니다.

오류를 올바르게 처리하려면 React Query에서 거부(rejected)된 Promise가 필요합니다. 운 좋게도, 이것은 여러분이 axios와 같은 라이브러리를 다룰 때 얻을 수 있죠.

만약 당신이 fetch API 또는 4xx나 5xx와 같은 잘못된 상태 코드에 대해 거부된 Promise를 제공하지 않는 다른 라이브러리를 사용하고 있다면, 당신은 직접 queryFn을 통해 변환해야 합니다.

1. fetch API 를 쓸 경우

https://tanstack.com/query/v4/docs/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default

Query Functions | TanStack Query Docs

A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. All of the following are valid query function configurations:

tanstack.com

- 잘못된 코드

useQuery(['todos', todoId], async () => {
  const response = await fetch('/todos/' + todoId)
  //   4xx or 5xx are not treated as errors
  return response.json()
})

- 아래처럼 예외처리를 반드시 해주세요!!!

useQuery(['todos', todoId], async () => {
  const response = await fetch('/todos/' + todoId)
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
  return response.json()
})

2. 로깅

두 번째로, 로깅 목적으로 queryFn 내부에서 오류가 포착된다는 것입니다.

catch에서 오류를 다시 발생시키지 않으면 암시적으로 성공한 Promise를 다시 반환합니다.

- 잘못된 코드

useQuery(['todos', todoId], async () => {
  try {
    const { data } = await axios.get('/todos/' + todoId)
    return data
  } catch (error) {
    console.error(error)
    //   here, an "empty" Promise<void> is returned
  }
})

- 아래처럼 failed Promise를 반환해주세요!

useQuery(['todos', todoId], async () => {
  try {
    const { data } = await axios.get('/todos/' + todoId)
    return data
  } catch (error) {
    console.error(error)
    // ✅ here, a failed Promise is returned
    throw error
  }
})

- 물론 useQuery의 onError 콜백을 사용해도 됩니다.

useQuery(
  ['todos', todoId],
  async () => {
    const { data } = await axios.get('/todos/' + todoId)
    return data
  },
  { onError: (error) => console.error(error) }
)

3. ErrorBoundary

오류 경계(Error Boundaries)는 렌더링 중에 발생하는 런타임 오류를 포착하기 위한 리액트의 개념으로, 이를 통해 적절하게 반응하여 폴백 UI로 표시할 수 있습니다.

컴포넌트를 원하는 세분화로 ErrorBoundary를 래핑할 수 있으므로 나머지 UI는 해당 오류의 영향을 받지 않습니다.

ErrorBoundary는 렌더링 중에 발생하지 않기 때문에 비동기 오류를 포착할 수 없습니다.

ErrorBoundary가 React Query에서 동작하기 위해

1. 내부적으로 오류를 잡아

2. 다음 렌더링 주기에 다시 던져(throw)

3. 오류 경계가 오류를 선택할 수 있도록 합니다.

이것은 매우 천재적이면서도 간단한 오류 처리 방식이며, 이 작업을 수행하기 위해 필요한 것은 useErrorBoundary 플래그를 쿼리에 전달(또는 기본 구성을 통해 제공)하는 것입니다.

useErrorBoundary라는 함수는 오류 경계로 이동할 오류와 지역적으로 처리할 오류를 지정할 수도 있습니다.

useQuery(['todos'], fetchTodos, {
  //   only server errors will go to the Error Boundary
  useErrorBoundary: (error) => error.response?.status >= 500,
})

이것은 mutations에도 효과가 있으며, form을 제출 할 때 매우 유용합니다. 4xx 범위의 오류는 지역적으로 처리할 수 있는 반면(예: 백엔드 유효성 검사에 실패한 경우), 모든 5xx 서버 오류는 오류 경계로 전파될 수 있습니다.

4. 토스트 에러

전역에 등록하면, 각 쿼리에 대해 한 번만 오류 토스트가 표시됩니다.

import toast from 'react-hot-toast'

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error) =>
      toast.error(`Something went wrong: ${error.message}`),
  }),
})

5. 적절하게 섞어 쓰기

React Query에서 오류를 처리하는 세 가지 주요 방법은 다음과 같습니다.

useQuery에서 반환된 오류 속성
onError 콜백(쿼리 자체 또는 글로벌 QueryCache/MutionCache)
ErrorBoundary 사용

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      //   only show error toasts if we already have data in the cache
      // which indicates a failed background update
      if (query.state.data !== undefined) {
        toast.error(`Something went wrong: ${error.message}`)
      }
    },
  }),
})