프로그래밍 메모장

전 글(https://lodado.tistory.com/83)에서 table 라이브러리를 구현해야 하는데

초기에는 headless library인 Tanstack Table을 사용하려 했으나, 대용량을 처리하지 못하는 문제로 내부 구조도 자체 구현하는 방향으로 방향을 바꿨다는 글을 썼다.

즉, 초기 렌더링 같은 tanstack table 자체의 성능에는 만족했지만 메모리 사용량이 너무  많아서(원본 데이터의 20배 수준) tanstack table을 사용하지 않는다는 결론을 내렸었는데

이 글에서는

1. tanstack Table의 데이터 구조

2. 메모리를 많이 사용하는 이유

두가지를 github를 들어가서 훑어 볼 것이다. 

깃허브 주소는 아래와 같다.

https://github.com/TanStack/table

사용 예시 

우선 tanstack table에서 제공하는 예시 코드(kitchen sink)를 보고, 내부 동작을 추론해보자.

위 예제 코드에서 src/App.tsx를 보면 tanstack table을 사용하는 코드 예시를 볼 수 있다.

export const App = () => {
  const rerender = React.useReducer(() => ({}), {})[1]

  const [data, setData] = React.useState(makeData(1000))
  const refreshData = () => setData(makeData(1000))

  const [columnVisibility, setColumnVisibility] = React.useState({})
  const [grouping, setGrouping] = React.useState<GroupingState>([])
  const [isSplit, setIsSplit] = React.useState(false)
  const [rowSelection, setRowSelection] = React.useState({})
  const [columnPinning, setColumnPinning] = React.useState({})
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const [globalFilter, setGlobalFilter] = React.useState('')

  const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()

  const table = useReactTable({
    data,
    columns,
    defaultColumn,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    getFacetedMinMaxValues: getFacetedMinMaxValues(),
... 생략

위 코드를 보면 useReactTable이 tanstack Table을 사용하는 방식(hook)이고, 

data와 column을 내부에 넣어서 table이란 object로 한번 감싸서 export하는것을 볼 수 있다.

그리고 getCoreRowModel, getFilterRowModel 등이 있는데 

해당 model들이 table에서 각 기능 (sort, filter)등에 사용하는 것이라고 추론할 수 있다.

그래서 일단 tanstack Table의 데이터 구조 를 github에 들어가서 어떻게 각 Model들이 어떻게 동작하고 연계되는지 찾아볼것이다.

힌트를 주자면 SQL에서 select문으로 데이터를 조회하는 방식과 비슷하다.

tanstack table 최상단 폴더로 가보자.

lerna, packages 등의 폴더가 보이는데 이 프로젝트가 모노레포로 되어 있다는 사실을 알 수 있다.

그럼 packages 안에 core란 폴더가 있을거 같은데 그 폴더에 우리가 찾고 싶은 내용이 있을것 같다.

core 폴더를 찾아서 들어가다보니 아까 본 getCoreRowModel.ts 이란 파일이 있다.

보통 라이브러리들은 리엑트, 스벨트 등 다른 라이브러리에 종속성을 없에기 위해서 내부 코어 로직을 js로 구현하고,

각 라이브러리에 포팅 과정을 거치는데 아래 예시 코드를 보니 이 라이브러리도 똑같은 과정을 거치는것을 확인할 수 있다.

import { createRow } from '../core/row'
import { Table, Row, RowModel, RowData } from '../types'
import { memo } from '../utils'

export function getCoreRowModel<TData extends RowData>(): (
  table: Table<TData>
) => () => RowModel<TData> {
  return table =>
    memo(
      () => [table.options.data],
      (
        data
      ): {
        rows: Row<TData>[]
        flatRows: Row<TData>[]
        rowsById: Record<string, Row<TData>>
      } => {
        const rowModel: RowModel<TData> = {
          rows: [],
          flatRows: [],
          rowsById: {},
        }
			.... (생략) 

          for (let i = 0; i < originalRows.length; i++) {
            // Make the row
            const row = createRow(
              table,
              table._getRowId(originalRows[i]!, i, parentRow),
              originalRows[i]!,
              i,
              depth,
              undefined,
              parentRow?.id
            )
			
            .... (생략) 

            rowModel.flatRows.push(row)
            rowModel.rowsById[row.id] = row
            rows.push(row)

          return rows
        }

        rowModel.rows = accessRows(data)
        return rowModel
      },
      {
        key: process.env.NODE_ENV === 'development' && 'getRowModel',
        debug: () => table.options.debugAll ?? table.options.debugTable,
        onChange: () => {
          table._autoResetPageIndex()
        },
      }
    )
}

https://github.com/TanStack/table/blob/main/packages/table-core/src/utils/getCoreRowModel.ts

해당 model는 테이블에서 모든 row를 꺼내는 로직을 구현한 함수로 보인다. 

해당 코드에서 중요하다고 생각한 점을 추려봤는데 

1. memo를 사용해서 메모라이징을 통해 최적화를 시도한점 (성능 향상 but 메모리 사용)
2. flawRow를 사용해서 차원 depth가 있는 배열을 1차원 배열로 처리해 저장한 점 (성능 향상 but 메모리 사용)

3. rowById로 row의 id를 key로 해서 BigO(1)에 찾는 함수를 JSON 형태로 구현한 점 (성능 향상 but 메모리 사용)

음.. 위 코드를 보면 일단 성능을 위해 메모리를 희생한 코드로 보이고 해당 부분이 대용량 데이터 처리에서 약점이 될 것으로 추측될것 같다.

그래도 위 코드에서 늘어나는 메모리가 고작 3~4배일꺼 같은데..? 일단 메모리 부분은 추후에 보기로 하고 넘어가자

4. 독립적인 기능 (모든 row만을 꺼내는 로직을 구현한 함수)을 담당하는 하나의 함수

/packages/table-core/src/utils 에서 다른 model들을 살펴보면 각 model 함수들이 filter, sorting, pagination등 

독립된 로직을 동작하는 함수임을 알 수 있다. 

그럼 어디서 해당 함수들을 연결해줄까?

타고 타고 들어가다보면... table( table-core/src/core/table.ts#L125 )이란 파일에서 model끼리 연결해주는 부분을 찾을수가 있다.

const features = [
  Headers,
  Visibility,
  Ordering,
  Pinning,
  Filters,
  Sorting,
  Grouping,
  Expanding,
  Pagination,
  RowSelection,
  ColumnSizing,
] as const  // 중요 !!! 아까 본 model들이 converting되어 내부에 들어 있는 object임

... 생략

export function createTable<TData extends RowData>(
  options: TableOptionsResolved<TData>
): Table<TData> {
  ... 생략
  const coreInitialState: CoreTableState = {}

  let initialState = {
    ...coreInitialState,
    ...(options.initialState ?? {}),
  } as TableState

  table._features.forEach(feature => {
    initialState = feature.getInitialState?.(initialState) ?? initialState
  })

  const queued: (() => void)[] = []
  let queuedTimeout = false

  const coreInstance: CoreInstance<TData> = {
    _features: features,
    options: {
      ...defaultOptions,
      ...options,
    },
    initialState,
    _queue: cb => {
      queued.push(cb)

      if (!queuedTimeout) {
        queuedTimeout = true

        // Schedule a microtask to run the queued callbacks after
        // the current call stack (render, etc) has finished.
        Promise.resolve()
          .then(() => {
            while (queued.length) {
              queued.shift()!()
            }
            queuedTimeout = false
          })
          .catch(error =>
            setTimeout(() => {
              throw error
            })
          )
      }
    },
 
   ... 생략 
   Object.assign(table, coreInstance)

  for (let index = 0; index < table._features.length; index++) {
    const feature = table._features[index]
    feature?.createTable?.(table)
  }

  return table
}

https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table.ts#L125

보고 싶은 부분만 추려봤다

  table._features.forEach(feature => {
    initialState = feature.getInitialState?.(initialState) ?? initialState
  })

위 코드가 model들이 연계되는 부분인데 함수형 프로그래밍의 pipe를 구현한 형태로 볼 수 있다

즉, input을 넣고 각 model들의 out을 바로 다음 model의 input으로 넣고... pipe 형태로 모델들을 연계한 것으로 볼 수 있다.

이 부분은 SQL의 select 문의 동작 방식과 유사하다.

tanstack table의 핵심 데이터 구조는 생각보다 간단한 형태로 되어있다.

실제로 사내에서 만든 테이블 라이브러리의 내부 데이터 구조는 SQL의 select문을 참고하여 1~2주만에 구현했고,

tanstack table 와 유사한 성능을 낼 수 있었다.

그럼 tanstack table이 메모리를 과다 사용하는 이유는 무엇일까?

복합적인 요인이라서 꼭 찝어 말할 수는 없지만, 아까 보았듯이 row에 getRowById같은 편의 기능을 넣어놓았는데 만약 50~100만 row가 되면 row에 있는 편의기능 함수가 row 갯수만큼 추가되서 메모리를 과다 사용되는것으로 추측된다.

실제로 fork해서 50만개 row에 있는 "편의기능 함수" 만을 지워보는 실험을 했더니  1.6GB 정도에서 몇백MB를 감소 시킬 수 있었던 기억이 난다. 

사내에서 라이브러리를 구현했을때는 row를 인자로 받아서 실행하는 함수를 독립적으로 빼서 구현해서

tanstack table에 비해 메모리 사용량을 획기적으로 줄였다.

사실 tanstack table은 대용량 데이터 처리는 server pagination으로 구현한다고 생각해서

메모리 부분은 생각 안했을꺼라 추론 되지만..?

SQL Editor같은 제품을 브라우저에 구현하는 경우에는 브라우저에 수십~수백만 데이터가 있는 경우가 있고, 

해당 케이스를 서버 페이지네이션으로만 구현하려면 오히려 번거로워 SQL select문을 벤치마킹해서

테이블에서 1000만 이하의 대용량 데이터를 문제 없이 핸들링 할 수 있도록 내부 데이터 구조를 구현했다.

끟. 

사내에서 react-datatable를 브라우저 테이블으로 사용하고 있는데

렌더링 성능 이슈로 40~50만 건의 row 데이터 처리가 불가능해서 아예 테이블을 자체 구현하라는 지시가 떨어졌다.

이 글은 고분군투하면서 그 과정을 기록한 눈물겨운 글이다..

요구 스펙

1. 최소 column 10개, 100만 row를 브라우저에 렌더링 가능할 것 

*맨 처음 렌더링 성능 이슈를 해결하기 위해서 서버 페이지네이션을 생각하고 있었는데

이 요구사항으로 인해 최소 100만개는 클라이언트에 렌더링 되도록 구현해야 했다.

+ 가상화 라이브러리 (react-virtualized등) 적용

2. 현존하는 테이블 라이브러리보다 성능이 좋거나 대등할것 (!?)

특히, 1번 케이스에서 다른 테이블 라이브러리처럼 초기 렌더링이 3~5초 이내여야 한다.

3. 기존 테이블 라이브러리의 기능을 모두 갖출 것 (sorting, searching, filtering, pagination, inifinity scroll 등)

처음엔 tanstack table headless 라이브러리를 사용하려고 했는데 

메모리 사용량이 1번 스펙을 충족하지 못해서 할 수 없이 데이터구조도 자체구현 하는쪽으로 하기로 결정했다.

(tanstack table은 메모라이징 및 각종 지표를 제공하면서 메모리를 과다 사용해서

13개 column, 50만 row가 주어질때 다른 테이블이 200MB를 쓴다면,

tanstack table은 1.6 GB를 사용해서 대용량 처리엔 알맞지 않다는 결론을 내림)

초기 데이터 구조

DB의 Select문에서 영감을 받아서 설계했는데 

원본 데이터 → ( execution ) → 현재 필요한 데이터만 UI에 전달하는 식으로 구현했다.

UI와 데이터의 관계를 분리했다.

원본 데이터 상태(originalData)가 있고,

sortingState, filteringState, paginationState 등등 여러 조건들을 상태로 observing하여

상태가 바뀔때마다 필터링해서 현재 UI에 필요한 데이터만 전달한다. 

즉, 각 sorting, filtering 상태는 Finite State Machine처럼 어떤 특정 상태를 가지고 있고, 그 상태에 맞추어서

originalData를 필터링해 최종적으로 UI에서 현재 원하는 데이터만 필터링해서 볼 수 있다.

코드 예시

위 설계 부분을 그대로 코드로 구현한 것이다.

*flow는 함수형 프로그래밍의 pipe 함수(관련 링크)이며, lodash에 구현되어 있다.

예시 코드에 있는 id를 +1 하는 의미없는 함수들은 성능을 측정하기 위해 집어넣은 sorting, filtering, pagination등의 mocking 구현체를 뜻한다. 

테이블 UI 예시

Body

필터링된 최종 결과물을 화면에 렌더링한다.

sorting 되었다면 visibleRowData는 오름차순으로 정렬되어 제공될 것이다.

특정 열이 숨김 처리되었다면 visibleRowData는 특정 행들이 제거되어 제공될 것이다.

UI 입장에서는 데이터를 가공하는 중간 과정을 알 필요가 없이 자신이 요청한 데이터를 그대로 쓸 수 있다.

코드 예시에는 가상화 라이브러리가 적용되어 있지 않는데, 

120만개의 row가 테이블에 제공된다면 row 모두를 dom에 그릴 필요는 없을 것이니

보이는 부분만 렌더링 시키는 가상화 라이브러리를 적용하면 된다. 

테이블 header 예시 

handleSort로 sortingState 상태를 변경한다. 

그럼 rowData들이 sorting되어 body에 보여지게 된다.

구현 결과

현존하는 tanstack table, tui-grid, mui datatable등과 비교해봤는데 직접적인 수치를 제공할 수는 없지만

초기 요구사항을 모두 만족했고 대등하거나 더 나은 성능을 보여줬다.

특히, 메모리 부분에 신경써서 10개의 column, 1000만 row까지는 무리없이 몇초내에 렌더링하는 성능을 보여줬다.

다만 1000만개정도 무지막지한 데이터양이라면 row를 브라우저에 가져오지 않고 서버 페이지네이션을 구현하는 절충안으로 나아갈 것이다..

개발을 진행하면서 가끔 Icon 추가나 변경이 이루어질때가 있는데

그럴때마다 아래 과정을 거쳤다.

1. 디자이너가 피그마에서 업데이트한 아이콘을 내려받은 후, 이를 압축합니다.
2. 사내 메신저에 업로드하고, 엔지니어에게 공유합니다.
3. 엔지니어는 이를 내려받아 압축을 풀고, 소스 코드에 적절히 추가합니다.
4. PR을 올려 코드 리뷰 후 머지합니다.
// (https://channel.io/ko/blog/figma-icon-plugin) 에서 발췌

그래서 피그마에서 아이콘 업데이트가 이뤄진다면 코드에서 바로 다운받을 수는 없을까? 생각했고,

찾아본 결과 피그마 plugin을 발견하여 직접 써본 후 사용 방식을 공유해본다.

사용방법

1. 피그마 access token 추가

figma setting > personal access token에서 토큰을 생성한다. 

피그마 web api를 사용하려면 access token을 같이 보내줘야 한다.

2. node-fetch 설치

pnpm add -D node-fetch //pnpm, yarn, npm 등 사용하는걸로 설치

https://www.npmjs.com/package/node-fetch

node-fetch 라이브러리를 devDependency에 추가한다.

프론트 환경이든 백엔드 환경이든 dev 환경에서만 돌릴꺼이므로(node를 사용하므로) 크게 상관은 없다.

설치 후 

   "icon": "node ./src/icons/generator.mjs"

packages.json에서 아래 3번의 파일을 실행하면 피그마 icon들이 자동생성되게 구현할 것이다.

3. Icon들을 다운받는 generator.mjs 파일 생성

여담으로  나는 import를 쓰고 싶은데 ESM 환경이 아니라서 mjs로 명시했는데

뭐 굳이 esm을 사용하고 싶지 않으면 .mjs 확장자를 쓰지 않아도 되긴 한다. 

코드는 https://medium.com/iadvize-engineering/using-figma-api-to-extract-illustrations-and-icons-34e0c7c230fa 에서

약간의 수정을 거친 코드이다.

전체 코드 보기

/*
 reference:
  https://medium.com/iadvize-engineering/using-figma-api-to-extract-illustrations-and-icons-34e0c7c230fa
*/


import dotenv from 'dotenv'
import { appendFileSync, writeFileSync } from 'fs'
import fetch from 'node-fetch'


dotenv.config()


const TOKEN = process.env.FIGMA_WEBHOOK
const FILE_KEY = 'v2LAIwRuECBSb24aIFDKwB'


const fetchFigmaFile = (key) => {
  return fetch(`https://api.figma.com/v1/files/${key}`, { headers: { 'X-Figma-Token': TOKEN } }).then((response) =>
    response.json(),
  )
}


const flatten = (acc, cur) => [...acc, ...cur]


const getComponentsFromNode = (node) => {
  if (node.type === 'COMPONENT') {
    return [node]
  }
  if ('children' in node) {
    return node.children.map(getComponentsFromNode).reduce(flatten, [])
  }
  return []
}


const formatIconsSVG = (svg) => svg.replace(/fill="(?:#[a-fA-F0-9]{6}|none)"/gm, 'fill="currentColor"')


const formatName = (name) => name?.toUpperCase().replace(/-/g, '_') // replaces '/' by '_'


const hash = (path) => path.replace(/^.*\/img\//g, '').replace(/\//g, '_')


const generateFiles = (ele) => {
  if (!ele) return ''


  const { name, fileName, svg } = ele
  const component = `
  import * as React from "react";


  const ${name} = (props: React.SVGProps<SVGSVGElement>) => {
    return (${svg.replace(/<svg /, '<svg {...props} ')});
  }


  export default ${name};
  `


  writeFileSync(`./src/icons/${name}.tsx`, component)
  return `${name}`
}


const getSVGsFromComponents = (components) => {
  const key = FILE_KEY
  const filteredComponent = components.filter(({ name }) => name?.toUpperCase().startsWith('ICON'))
  const ids = filteredComponent.map(({ id }) => id)


  return fetch(`https://api.figma.com/v1/images/${key}?ids=${ids.join()}&format=svg`, {
    headers: { 'X-Figma-Token': TOKEN },
  })
    .then((response) => response.json())
    .then(({ images }) =>
      Promise.all(
        filteredComponent.map(
          ({ id, name, type }) =>
            images[id] &&
            fetch(images[id])
              .then((response) => response.text())
              .then((svg) => ({
                name: formatName(name),
                fileName: hash(images[id]),
                svg: formatIconsSVG(svg),
              })),
        ),
      ),
    )
}


async function run() {
  if (!TOKEN) {
    console.error(
      'The Figma API token is not defined, you need to set an environment variable `FIGMA_API_TOKEN` to run the script',
    )
    return
  }
  fetchFigmaFile(FILE_KEY)
    .then((data) => getComponentsFromNode(data.document))
    .then(getSVGsFromComponents)
    .then((dataArray) => dataArray.map(generateFiles))
    .then((ele) => Array.from(new Set(ele)))
    .then((texts) => {
      writeFileSync(
        './src/icons/index.ts',
        texts.reduce((t, v) => `${t}\n import ${v} from './${v}'`, ''),
      )


      appendFileSync('./src/icons/index.ts', texts.reduce((t, v) => `${t} ${v},`, '\n\n export {').slice(0, -1))


      appendFileSync('./src/icons/index.ts', '}')
    })
}


run()

혹시 copy가 필요한 경우는 아래 gist에서 전체 코드를 볼 수 있다.

https://gist.github.com/lodado/24da180db5042ff1bb5b20b1527d5e33

전체 코드는 아래와 같은데

async function run() {
  if (!TOKEN) {
    console.error(
      'The Figma API token is not defined, you need to set an environment variable `FIGMA_API_TOKEN` to run the script',
    )
    return
  }
  fetchFigmaFile(FILE_KEY)
    .then((data) => getComponentsFromNode(data.document))
    .then(getSVGsFromComponents)
    .then((dataArray) => dataArray.map(generateFiles))
    .then((ele) => Array.from(new Set(ele)))
    .then((texts) => {
      writeFileSync(
        './src/icons/index.ts',
        texts.reduce((t, v) => `${t}\n import ${v} from './${v}'`, ''),
      )

      appendFileSync('./src/icons/index.ts', texts.reduce((t, v) => `${t} ${v},`, '\n\n export {').slice(0, -1))

      appendFileSync('./src/icons/index.ts', '}')
    })
}

run()

진행 과정을 한줄 한줄 차근차근 보자.

1. 피그마 api 접근

import dotenv from 'dotenv'
import { appendFileSync, writeFileSync } from 'fs'
import fetch from 'node-fetch'

dotenv.config()

const TOKEN = process.env.FIGMA_WEBHOOK
const FILE_KEY = 'v2LAIwRuECBSb24aIFDKwB'

const fetchFigmaFile = (key) => {
  return fetch(`https://api.figma.com/v1/files/${key}`, { headers: { 'X-Figma-Token': TOKEN } }).then((response) =>
    response.json(),
  )
}

나는 dotenv를 써서 아까 받은 피그마 access token을 .env에 저장하고, api 요청을 할때 token을 담아 보내게 작성했다.

FILE_KEY는 피그마 프로젝트에 들어가서 내가 받아오고 싶은 프로젝트의 file key를 쓰면 된다. 

2. 받아온 api 전처리

const flatten = (acc, cur) => [...acc, ...cur]

const getComponentsFromNode = (node) => {
  if (node.type === 'COMPONENT') {
    return [node]
  }
  if ('children' in node) {
    return node.children.map(getComponentsFromNode).reduce(flatten, [])
  }
  return []
}

피그마엔 Component와 frame?등 컴포넌트를 분류하는 기준이 있는데,

개발과는 크게 상관이 없는 부분이니 사용하기 쉽게 모두 전처리해서 다음 부분으로 넘긴다. 

3. SVG 파일(Icon들만) 받아오기

const formatIconsSVG = (svg) => svg.replace(/fill="(?:#[a-fA-F0-9]{6}|none)"/gm, 'fill="currentColor"')

const formatName = (name) => name?.toUpperCase().replace(/-/g, '_') // replaces '/' by '_'

const hash = (path) => path.replace(/^.*\/img\//g, '').replace(/\//g, '_')

const getSVGsFromComponents = (components) => {
  const key = FILE_KEY
  const filteredComponent = components.filter(({ name }) => name?.toUpperCase().startsWith('ICON'))
  const ids = filteredComponent.map(({ id }) => id)

  return fetch(`https://api.figma.com/v1/images/${key}?ids=${ids.join()}&format=svg`, {
    headers: { 'X-Figma-Token': TOKEN },
  })
    .then((response) => response.json())
    .then(({ images }) =>
      Promise.all(
        filteredComponent.map(
          ({ id, name, type }) =>
            images[id] &&
            fetch(images[id])
              .then((response) => response.text())
              .then((svg) => ({
                name: formatName(name),
                fileName: hash(images[id]),
                svg: formatIconsSVG(svg),
              })),
        ),
      ),
    )
}

피그마 프로젝트의 img 중에서 format이 svg인 이미지들만 전부 불러온다.

(당연히 필요한 icon이 다른 포멧이라면 해당 포멧도 추가해야한다.)

이때 모든 svg를 불러오게 되는데, Icon만 선별하기 위해서 디자이너 분에게 Icon은 모두 이름앞에 Icon prefix를 붙여달라고 요청했다.

아마 피그마에서 분류하는 다른 좋은방법이 있을거 같은데.. 

일정이 급해서 시간상 해당 방법으로 구현해달라고 요청했다.

여담으로 피그마에서 component 지정을 하지 않으면 위 api에서 나타나지 않는듯 싶다.

4. React Component로 변환

const generateFiles = (ele) => {
  if (!ele) return ''

  const { name, fileName, svg } = ele
  const component = `
  import * as React from "react";

  const ${name} = (props: React.SVGProps<SVGSVGElement>) => {
    return (${svg.replace(/<svg /, '<svg {...props} ')});
  }

  export default ${name};
  `

  writeFileSync(`./src/icons/${name}.tsx`, component)
  return `${name}`
}

그냥 ${name}.svg로 저장하는 방법도 있긴 한데 어차피 react component로 mapping 하는 과정이 필요해서 

아예 react component로 아이콘을 저장하게 생성한다. 

5. 자동 export 

// run function의 마지막 부분)

.then((texts) => {
      writeFileSync(
        './src/icons/index.ts',
        texts.reduce((t, v) => `${t}\n import ${v} from './${v}'`, ''),
      )

      appendFileSync('./src/icons/index.ts', texts.reduce((t, v) => `${t} ${v},`, '\n\n export {').slice(0, -1))

      appendFileSync('./src/icons/index.ts', '}')
 })

import & export 하기 쉽도록 index.tsx에 import 후 export하는 파일을 작성한다.

해당 과정을 거치면 위와 같은 파일이 생성된다.

6. 끝!

혹시 storybook에서 보고 싶다면 추가 icon도 자동으로 import하게 

import * as Icons from 'icon 폴더 주소' 로 구현한다.

import type { Meta, StoryObj } from '@storybook/react'
import { FooterNav } from 'myll-ui'
import Image from 'next/image'
import * as Icons from 'shared'

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta<typeof FooterNav> = {
  title: 'Example/Icon',
  argTypes: {},
}

export default meta

const ICONS = Object.entries(Icons)
  .filter(([key, value]) => key.startsWith('ICON'))
  .map(([key, value]) => {
    return { key, IconComponent: value }
  })

export const IconExamples = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
      색깔은 fill, color를 통해 맞추세요
      {ICONS.map(({ key, IconComponent }) => {
        return (
          <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
            <div style={{ width: '280px' }}>{key} :</div> <IconComponent />
          </div>
        )
      })}
    </div>
  )
}

위 icon들은 storybook이 연동된 사이드 프로젝트의 github-pages에서 볼 수 있다.

https://myll-github.github.io/myll-frontend/?path=/story/example-icon--icon-examples 

자동 업데이트를 통해서 끔찍한 파일 다운 & 저장 노가다에서 해방된 듯 싶다..?

webhook을 통하여 아이콘 업데이트마다 자동 PR을 날리거나 다른 설정도 더 해줄 수 있는것 같지만

토의 결과 아이콘이 한번 업데이트 된 이후에는 수정이 없을것으로 생각되어 시도하진 않았다. 

reference 

https://channel.io/ko/blog/figma-icon-plugin

위글에 영감을 받아서 제작했는데 webhook을 통한 자동 PR까진 만들지는 않았다.

https://medium.com/iadvize-engineering/using-figma-api-to-extract-illustrations-and-icons-34e0c7c230fa

사내 배포용으로 라이브러리를 개발 중인데 처음 보는 이상한 오류가 떴다.

모노레포 storybook-docs 레포에서

빌드된 tttable(임시 작명이라 가명임;;) 레포의 index.js를 required 하면 오류가 나는것 

평소에 commonjs와 esm, amd 등이 뭔지 헷갈려서 이참에 정리겸 간단하게 요약해본다.

CommonJS(CJS)란?

// 모듈 정의
const circle = require('./circle.js');

const radius = 5;
console.log(`반지름 ${radius}인 원의 넓이: ${circle.area(radius)}`);
console.log(`반지름 ${radius}인 원의 둘레: ${circle.circumference(radius)}`);

JavaScript를 위한 모듈 로딩 시스템 표준 중 하나이다.

Node.js와 같은 서버 측 JavaScript 환경에서 사용되며, 모듈을 정의하고 로드하기 위한 표준화된 방법을 제공한다. 

node.js나 프론트엔드의 config 파일에서 많이 본 require를 사용한 방식이 commonJS 방식이다.

초기 Javascript는 모듈 시스템이 없었기 때문에 모듈화를 위해 commonJS,  AMD 등이 개발되어 사용되었다.

commonJS는 동기적으로 모듈을 로드하기 위해 사용되고,

비동기를 따로 다루기 위해 AMD(Asynchoronous Module Definition)이 비동기적으로 모듈을 다루는 것에 대한 표준안으로 제시되었다고 한다.

ECMAScript Module(ESM)이란? 

// 모듈 불러오기
import circle from './circle.mjs';

// 모듈 사용
const radius = 5;
console.log(`반지름 ${radius}인 원의 넓이: ${circle.area(radius)}`);
console.log(`반지름 ${radius}인 원의 둘레: ${circle.circumference(radius)}`);

 ES6부터 표준화 된 모듈 시스템으로, 클라이언트에서 흔히 사용하는 import, export를 사용하는 방식이다.

브라우저에서 사용하기 위해서는 type="module"을 script 혹은 package.json에 명시해주면 된다.

토스 블로그의 CommonJS와 ESM 에 대한 글에 따르면, CJS 모듈은 동기적으로 작동하고 ESM Module은

비동기적으로 작동한다.

그래서 ESM에서 CJS를 import 가능하지만 그 역은 안되는데 그 이유는 CJS는 top-level await를 지원하지 않기 때문이며

그 외에도 여러가지 다른 이유가 있어서 서로 호환하기가 쉽지 않다고 한다. (자세한건 링크 참고)

즉, 라이브러리를 배포하려면 CJS와 ESM 버젼을 둘다 지원해야 하는것!

지원하는 방법은 위 코드처럼 package.json에 exports를 두가지 버젼으로 명시해주면 된다.

주의할 점은 package.json에 type:"module"가 명시되어 있으면 ESM으로 인정되며 main이 index.js(ESM)로 인식되고, module이 index.cjs(CJS)로 인식될 수 있다.

반대로 type:"module"가  없으면 main이 index.js(CJS)이고 module이 index.mjs로 인식될 수 있기 때문에

exports를 통해 버젼별로 선언해줘야 한다.

캡처 찍고 보니 types 설정을 빼먹은거 같은데 내일 넣어야겠다.

(type도 index.d.mts, index.d.cts로 명명된다 함) 

옛날에 types: module이 정확히 왜 필요한건지 몰랐는데 이번에 알게되어 

의미 깊은 하루였다.

reference 

https://devblog.kakaostyle.com/ko/2022-04-09-1-esm-problem/

https://toss.tech/article/commonjs-esm-exports-field

https://velog.io/@yesbb/%EB%AA%A8%EB%93%88-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%98-%EC%97%AD%EC%82%AC-%EA%B7%B8%EB%A6%AC%EA%B3%A0-ESM

요즘 모노레포를 사용하기 위해서 turbo repo를 사용하면서 궁합이 좋은 패키지 매니저인 pnpm을 사용해보고 있다.

몇주간 사용하며 느낀 점들을 간단히 공유한다.

pnpm을 선택한 이유 

npm과 Yarn은 복잡하게 얽힌 dependency들을 단일 루트 하에 위치시키며(Hoisting) 

라이브러리의 packages.json에 명시된 dependencies들을 몰래 최상위로 호이스팅 시킨다.

그 과정에서 packages.json에 명시되지 않은 라이브러리를 사용 가능한데 이를 유령 의존성(phantom dependency)이라 부른다.

실제로 turborepo에서 yarn을 사용해본 결과 jest를 모노레포 A에서만 깔았는데 모노레포 B에서도 사용할 수 있었다.

사실 jest는 별 문제가 되지 않지만 만약 실제 사용하는 공통 라이브러리들이 유령 의존성으로 꼬이는 위험한 문제가 있을 수 있다고 판단했다. (실제 일하는곳도 yarn을 쓰는데 비슷한 경우로 가끔 고통받았다..; )

이를 해결하기 위한 yarn berry와 pnpm을 조사해보았는데, yarn berry는 git에 지속적인 과부하를 주고, pnpm 대비 사용하기 까다롭겠다는 생각에 결국은 pnpm을 선택했다.

pnpm의 장점

모노레포는 모든 라이브러리를 전역에 직접 설치하고 호이스팅하는 대신 

전역 저장소(Virtual Store)에 패키지를 공유하고 symlink로 패키징을 참조하는 방식을 사용한다.

모노레포를 사용하면서 비슷한 라이브러리를 많이 다운받을텐데  중복된 패키지를 설치하지 않아 저장 공간과 네트워크를 절약할 수 있으며, 파일 복사를 최소화하여 더 빠르게 패키지를 설치할 수 있게 되었다.

이 기능을 온전히 사용하기 위해서는 루트 디렉토리의 .npmrc에 

node-linker=isolated

node-linker=isolated라는 옵션을 사용해줘야한다. (기본 default가 isolated이다.)

가끔 turbo repo의 quickstart repo에 'node-linker: hoisted'라고 명시되어 있는데 조심해야한다.

hoisted라면 npm, yarn처럼 모든 패키지가 호이스팅되게 동작한다.

만약 특정 라이브러리만 호이스팅하고 싶다면? 

아까 예시로 든 jest를 생각해보자. 모든 모노레포에 jest를 깔고 버전을 맞춰준다고 생각해보면 정말 고통일 것 같다.

Jest 관련 레포를 만들고 해당 레포를 이용하여 jest 라이브러리 버전을 공유하고 싶지 않을까?

또한 eslint, prettier도 매번 깔아야할까..?

이를 방지하기 위해서 pnpm은 public-hoist-pattern라는 옵션을 .npmrc에 제공한다.

public-hoist-pattern​

• Default: ['*eslint*', '*prettier*']
• Type: string[]

public-hoist-pattern[]=*plugin*

(https://pnpm.io/npmrc 에서 발췌)

기본적으로 eslint, prettier는 pnpm에서 호이스팅되게 설정되어 있다. 

만약 jest 관련 설정도 호이스팅하고 싶으면 

public-hoist-pattern[]=*jest*

.npmrc에 사용하면 된다.

reference 

 https://toss.tech/article/node-modules-and-yarn-berry

소프트웨어는 탄생과 동시에 생명 주기를 갖는다.

소프트웨어 개발자는 소프트웨어가 변경될 가능성에 더 신경써야 한다.

소프트웨어는 시간의 흐름에 따라 언젠가 죽음을 맞이하게 될텐데 초기 설계 단계에서부터 변경과 폐기에 유연한 소프트웨어를 개발해야한다. 

특히 프론트엔드 개발은 개발 패러다임이 자주 바뀌거나

사용하던 라이브러리의 버전업 & 유지보수가 끝나는 일이 잦은 편이라

코드 폐기 & 수정에 유연한 프로그램을 만들어야한다. 

그럼 프론트엔드에서 어떻게 유연한 구조를 가질 수 있을까?

개발자로 일하면서 기존 코드의 수정이 너무 힘들어서 좀 더 좋은 아키텍처를 만들수는 없을지, 

어떻게 변경에 유연한 소프트웨어를 만들지 궁금해서 몇주간 찾아봤고,

해답을 모듈화와 추상화에서 찾았다.

모듈화

모듈화란 큰 시스템을 작은 부분으로 나누는 프로그래밍 설계 기법이다.

작은 부분들을 모듈이라고 부르며, 각 모듈은 독립적으로 기능을 수행하고 다른 모듈과는 추상화된 인터페이스를 통해 상호작용한다. 

사실 리엑트에서 컴포넌트를 사용하고 컴포넌트들을 조합해서 개발하고 있다면 모듈화를 잘 활용하다고 볼 수 있지만

인터페이스로 상호작용하라는 말이 잘 안와닿을수도 있다.

예를 들어 아래 그림 같이 MUI 라이브러리의 버튼을 사용한다고 해보자.

import React from 'react';
import Button from '@mui/material/Button';

const ExampleList = () => {
  ... // 생략

  return (
  ....
    <Button variant={'primary'} color={'blue'}>
      confirm
    </Button>
    <Button variant={'primary'} color={'red'}>
      exit
    </Button>
   ....
  );
};

그런데 MUI의 라이브러리의 지원이 끝났고 Ant.d 라이브러리나 다른 라이브러리 버튼으로 교체한다고 생각해보자.

 모든 페이지의 MUI button을 찾아서 수정해야할텐데 상상만 해도 끔찍하다...

해당 방식을 피하기 위해선 아래처럼 "Button" 을 모듈화 하고 Prop으로 필요한 값, 함수들을 내려보내는 식으로 해결하면 된다.

// MyButton.js
import React from 'react';
import Button from '@mui/material/Button';

const MyButton = ({ variant, color, children, ...props }) => {
  return (
    <Button variant={variant} color={color} {...props}>
      {children}
    </Button>
  );
};

export default MyButton;

상당히 간단한 일이지 않을까? 아니, 사실 개발하면서 우리가 계속 해오고 있던 일이다.

버튼의 상세 구현은 Mybutton 컴포넌트 내부 로직에 격리되어 있고, 외부에서 prop을 통해 필요한 값을 주입하면서 서로 통신하고 있다. 

prop을 사용하는 컴포넌트와 실제 구현된 컴포넌트를 연결하는 인터페이스로 쓰고, List는 모듈화 된 Button을 내부 구현을 몰라도 가져다 쓸 수 있는 셈이다.

모듈화는 레고 조립과 같다. 자동차에서 타이어를 교체하기 위해서는 타이어만 바꿔 끼우면 되지 자동차 엔진 내부 구조까지  알아야할 필요가 없을 것이다. 

이를 컴포넌트 주도 개발 - CDD (컴포넌트를 모듈 단위로 개발하는 및 설계 방법론)라 부른다. 

모듈화를 잘 만들기 위해선 객체 지향 방법론의 SOLID를 참고하면 좋을 듯 싶다.

특히, 의존 역전 원칙(DIP) - "고수준(추상화된 인터페이스)은 저수준(상세 구현)에 의존하지 말아야 한다."

을 지키면 좋은 설계 구조를 가질 수 있다.

테스트

각 로직을 모듈화했다면 테스트 코드도 작성하면 좋을것 같다.

테스트는 변경에 유연한 컴포넌트 구조를 만들기 위한 핵심이다.

각 모듈은 유닛 테스트로 안정성을 보장하고,

통합 테스트로 연결된 모듈끼리 안정적인지 보장하면 소프트웨어가 견고해질 것 같다. 

테스트는 항상 동일한 input에서는 동일한 output이 보장되어야한다.

만약 특정 요일에만 세일하는 함수을 테스트한다고 해보자.

const isSale = () => {
    const date = new Date();
    const day = date.getDay(); // 0이 일요일, 1이 월요일
	
    return day === 1;
};

해당 함수를 테스트하면 월요일에만 성공할 것이다. 또한, 이 함수를 사용하는 모든 모듈들은 월요일에만 성공할 것이다.

그렇다고 이 함수만을 mocking하면 통합 테스트를 하는 의미가 없을것이다.

이 함수가 통합 테스트에서 정상 작동하는 보장이 없으므로 mocking은 최후의 대안이다.

왜 이 함수는 테스트가 힘들까?

왜냐하면 함수가 순수하지 않은 부분(Date 객체 - side Effect가 있는 부분)이 있기 때문이다.

순수하지 않은 함수는 오염된다. 오염된 함수는 다른 모듈도 오염시킨다. 

비순수함수는 최대한 회피하거나 격리시켜야 한다.

회피

회피의 예시로는 parameter를 사용하는 방식이 있다.

const isSale = ({ date: new Date() }) => {
    const day = date.getDay(); // 0이 일요일, 1이 월요일
	
    return day === 1;
};

순수하지 않은 부분을 외부(parameter)로 밀어내고 default Parameter로 변경시키면 

순수함수인척 눈속임이 가능하다.

격리

격리의 예시로는 네트워크 콜이 있을 것이다. API call은 서버 상태에 따라 결과가 달라지므로 어쩔 수 없이 격리 시키고 mocking시켜야 한다.

결론

모듈끼리 통신하는 부분은 순수함수로 작성하는것이 최선이다만 sideEffect가 발생하는 부분은 외부로 밀어내서 격리 시키거나 회피하는것이 좋다.

로직의 모듈화 

그렇다면 "컴포넌트 내부"는 어떨까?

컴포넌트를 개발하면서 api나 여러 함수, 조건문들이 엮여서 유지보수에서 어려움을 겪은적이 있을것이다.

컴포넌트 내부 로직들도 모듈화를 시키고 마치 레고처럼 조합해서

필요한 부분만 교체하고 폐기시키면 더 좋지 않을까?

그럼 무엇을 나눌 수 있을까?

나누기 전에 무엇이 있는지 정의부터 해야할 것 같다.

예시 그림들은 https://martinfowler.com/articles/modularizing-react-apps.html 에서 가져왔다.

해당 글은 코드 예시를 들어서 상세히 설명해주고 있으니 읽어보는것이 좋을것 같다.

컴포넌트 내부 

1. 모든게 섞여있는 컴포넌트

리엑트 컴포넌트 내부에는 크게 아래의 4가지로 묶을 수 있을것 같다.

1. 네트워크 (API 콜)

네트워크를 통해 가져오는 데이터들이다. 

순수하지 않은 특성(side Effect)를 가지고 있다. 

2. 상태

지역 상태 - useState나

전역 상태 - redux, justand, context 등 view를 제어하는 로직들을 말한다.

state를 변경하는 action과 observing되서 변경되는 state들로 이루어져 있다.

3. 도메인 로직 

여기서 3번 도메인 로직이 좀 생소한 개념일수도 있는데

예를 들어서 쇼핑 결제 파트를 만들때 원으로 결제할지 혹은 달러나 엔으로 결제할지등의 오프라인의 문제를 프로그래밍으로 해결하기 위한 방법을 말한다. 

도메인 로직은 프로그래밍이 아닌, 외부 이벤트에 따라 변경될 가능성이 높고 따라서

모듈화를 통하여 저수준 (상세 구현)을 격리하고 인터페이스를 통해 통신하는 방식이 유지보수에 도움이 된다.

4. UI 로직 (render)

최종적으로 브라우저에 보여지는 부분을 말한다.

리엑트의 JSX는 babel를 통해 React.CreateElement로 변환되고 이는 최종적으로 브라우저의 HTML로 반영된다

여기서 4번 UI 부분은 디자인에 의해 자주 변경되고 1,2,3 번(logic)들에 의해 최종적으로 브라우저에 반영되는 결과물이다.

따라서 view와 logic을 일단 분리시켜야 유지보수가 편해질것 같다.

2. view와 logic이 분리된 컴포넌트 

logic은 hook으로 분리시키고, view 부분은 logic에 따라서 반영되는 순수한 UI 컴포넌트가 되었다.

또한 logic을 분리시켰으니 다양한 UI에 hook를 재사용 가능할 것 같다.

그런데 아까 보았던 1,2,3번 logic이 아직 모듈로 분리가 되지는 않았다. (예시 사진에 state가 분리되있긴 하지만 전역 상태는 hook에 있다고 치자.)

도메인 로직을 처리할때 엔화로 결제할지, 아님 원으로 결제할지가 중요하지

실제 프론트엔드가 redux를 쓰는지 context를 쓰는지 뭘 쓰는지는 중요하지 않고 알 필요도 없는게 이상적이다.

따라서, state logic과 도메인 로직은 분리되어야 나중 라이브러리 교체(redux->justand 등등)도 수월해진다.

마찬가지로 네트워크 API를 사용할때 상세 구현인

웹소캣을 사용하는지, api 콜을 기억해두었다 localStorage에서 꺼내와서 쓰는지가

다른 로직 입장에선 주 관심사가 아니다. 그냥 내가 필요한 데이터만 요청해서 꺼내와서 쓰면 된다.

또한, 테스트 측면에서도 네트워크 부분은 비순수함수이므로 격리되어야 한다.

따라서 각각 logic은 분리되고 인터페이스로 통신하는것이 이상적이다.

3. logic이 모듈화된 컴포넌트 

이제 각 로직이 모듈화되었고 서로 인터페이스로 따라 통신하면서 레고처럼

로직을 교체하기 쉬운 구조가 된 것 같다.

분리를 통해 유연해진 컴포넌트를 작성한 것 같다.

logic을 교체할때 좋은 방식은 무엇이 있을까?

예를 들어서, useHook에서 도메인 변경 - "결제 방식을 엔화에서 원화로 바꾸는 예시"를 들어보자.

의존성 주입에서 영감을 받아서 prop으로 도메인 "전략"을 바꾸면 좋을 것 같다.

객체 지향을 사용해도 되고 아니면 함수를 고차함수로 사용해도 되고 취향에 따라 사용하면 된다.

아래 예시는 객체 지향의 전략 패턴이다.

코드로 보면 다음과 같다.

export interface PaymentStrategy {
  getRoundUpAmount(amount: number): number;

  getTip(amount: number): number;
}

export class PaymentStrategyAU implements PaymentStrategy {
  get currencySign(): string {
    return "원";
  }

  getRoundUpAmount(amount: number): number {
    return Math.floor(amount + 1);
  }

  getTip(amount: number): number {
    return parseFloat((this.getRoundUpAmount(amount) - amount).toPrecision(10));
  }
}

interface를 사용해서  고수준에서 클래스의 "동작"를 정의했다.

그리고 interface를 상속한 클래스에서 실제 클래스의 "작업"을 구현했다.

  export const useRoundUp = (amount: number, strategy: PaymentStrategy) => {
    const [agreeToDonate, setAgreeToDonate] = useState<boolean>(false);
    ....
  
    const { total, tip } = useMemo(
      () => ({
        total: strategy.getRoundUpAmount(amount),
        tip: strategy.getTip(amount),
      }),
      [agreeToDonate, amount, strategy]
    );
    
    ...
  
    return {
      .....
    };
  };

위 코드는 hook에서 domain을 위에서 주입받은 예시이다.

strategy는 상황에 따라 바꿔끼면 다양한 domain을 상황에 따라 갈아끼울 수 있다.

여담으로

특별 할인 이벤트할때마다 react를 다시 빌드하고 싶지 않으면

프론트엔드에서 도메인 로직을 관리하기 보다는 백엔드에서 주 정책을 관리하는편이 좋다. (api call을 통해 주입받는게 좋음)

백엔드에서 data로 what을, 프론트에서 UI/UX로 how를 풀어나가는 편이 좋은것이라 생각한다.

reference

구글 엔지니어는 이렇게 일한다 - 일부 부분에서 영감을 받음 

https://product.kyobobook.co.kr/detail/S000061352347?utm_source=google&utm_medium=cpc&utm_campaign=googleSearch&gclid=CjwKCAjwm4ukBhAuEiwA0zQxkwPDg9tDbJxxFQn99zEAQXUJzUseeGWdT7iUhjtNc5yC5GNZl10M8BoCvCgQAvD_BwE 

https://martinfowler.com/articles/modularizing-react-apps.html

주의: 이 글은 삽질기입니다...

HOC(Higher-Order Component)란?

컴포넌트를 구현하면서 공통된 로직을 재사용해야할 때가 있다. 

보통 공통 로직은 hook으로 처리하면 되지만, error boundary같은 wrapper component나 로깅을 구현해야할때가 있는데

js의 고차함수 개념을 활용한 HOC 개념을 사용하면 wrapper component를 쉽게 구현할 수 있다.

(보통 HOC는 class component에서 많이 사용하는데 함수 컴포넌트에서도 사용 가능하다.)

import { Component } from "react";

function withLogging(WrappedComponent) {
  return class extends Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} is mounted.`);
    }

    componentDidUpdate() {
      console.log(`Component ${WrappedComponent.name} is updated.`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} is unmounted.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const App = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

export default withLogging(App);

(위 코드는 hoc component 예시)

고차함수는 React.memo나 mobx의 observer등 여러 라이브러리에서 유용하게 사용되고 있다.

HOC의 개념을 몰라도 리엑트를 사용하다보면 몇번은 사용해봤을 것이다.

decorator?

그런데 어디서 유사한걸 많이 봤지 않았나?

java의 spring이나 nest, typeORM 등에도 리엑트의 HOC와 비슷한 역할을 하는 함수가 있다. 

@Get('users')
@Auth('admin')
findAllUsers() {}

바로 decorator이다. 즉, HOC는 디자인패턴의 데코레이터 패턴과 유사한 기능을 한다고 생각하면 될듯하다.

나는 HOC를 js(혹은 ts)의 decorator로 대체할 수 있는 방법을 찾고 싶었고, 

@withLogging
const app = () => {
  ...
}

이 글의 주제를 HOC를 함수 컴포넌트의 decorator로 변환하는 법으로 쓰고 싶었는데

현재 2023년 05월 기준으론 js(ts)에서는 decorator는 클래스형 컴포넌트(object)에만 사용이 가능한것으로 판명났다.

즉, 내가 원했던것의 반대로 decorator가 HOC로 대체 된듯하다.. 원하는걸 하고 싶으면 고차함수를 쓰라는 것 같다.

비록 함수 컴포넌트에는 쓰지 못하지만 만약 일급 컬렉션 객체나 repository pattern for api를 class형으로 사용할 경우 decorator는 사용해볼만 한것 같다..! 

ref 

https://ko.legacy.reactjs.org/docs/higher-order-components.html

https://www.typescriptlang.org/ko/docs/handbook/decorators.html

요즘 키보드만으로 브라우저를 조작할 수 있도록 공부를 해보고 있다.

이 글은 키보드 유저를 위한 tabtrap이라는 기술에 대해 다룬다. 

Tab Trap

모달은 사라질 때까지 사용자는 그 영역에서만 집중할 수 있어야하고, 모달을 닫기 전까지는 벗어나서는 안된다. 

해당 기법을 위한 tab trap을 구현하는 방식은 간단한데

모달의 첫 엘레먼트와 마지막 엘레먼트를 체크한 이후, 

마지막 엘레멘트에서 tab keyboard 이벤트가 들어올 경우 처음 엘레먼트로 이동시키고

반대로 첫번째 엘레먼트에서 shift + tab keyboard 이벤트가 들어올 경우 마지막 엘레멘트로 이동시킨다. 

dialog 코드 예시로 보자.

// getPortal 함수, Portal 컴포넌트 등은 react의 createPortal를 사용하기 위한 추가적인 함수 
function getPortal() {
  if(typeof window !== 'object') return null;
  let portalRoot = document.getElementById("portal");

  if (!portalRoot) {
    portalRoot = document.createElement("div");
    portalRoot.setAttribute("id", "portal");
    document.body.appendChild(portalRoot);
  }

  return portalRoot;
}

const Portal = ({ children }) => {
  const element =
    typeof window !== "undefined" && getPortal();
  return element && children ? createPortal(children, element) : null;
};


const DIALOG_HEAD = ':dialog-head:'
const DIALOG_PARAGRAPH = ':dialog_paragraph:'

const Dialog = ({
}) => {
  return <Portal>
      <DialogWrapper ref={ref} tabIndex={-1} role="dialog" aria-modal="true" aria-labelledby={DIALOG_HEAD} aria-describedby={DIALOG_PARAGRAPH}>
        <DialogHead>
          <h2 id={DIALOG_HEAD}>dialog head</h2> 
          <IconButton aria-label="close button">X</IconButton> {/* tag를 icon or svg로 해야하는데 귀차니즘으로 생략 */}
        </DialogHead>
         
        <DialogBody>
        <p id={DIALOG_PARAGRAPH}>this is dialog body description
        </p>

        </DialogBody>

        <ButtonWrapper>
        <button type="button">OK</button>
        <button type="button">Cancel</button>
        </ButtonWrapper>
      </DialogWrapper>
  </Portal>
};

copound pattern까지 넣어서 설명할까 하다가 배보다 배꼽이 커지는거 같아서

직관적인 마크업으로 작성했다.

위 구현 예시는 아직 tab Trap이 구현되지 않은 예시이다.

여기서 tab으로 화면을 순회한다면?

마지막 엘레먼트(Cancel)에서 tab을 누르는 순간 포커스가 화면 밖으로 나가게된다.

만약 dialog가 열린 경우 다른 엘레먼트의 작동을 비활성화 해놓았다면

tab을 사용하는 저시력 사용자의 경우 브라우저를 이용하는데 애로사항이 생길 수 있다.

그래서 tab trap을 적용하여 dialog를 다시 만들어보자.

const DIALOG_HEAD = ':dialog-head:'
const DIALOG_PARAGRAPH = ':dialog_paragraph:'

const Dialog = ({
}) => {

  const ref = useRef(null);

  useEffect(() => {
    let focusableElements = ref.current.querySelectorAll(
      'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex="0"]'
    );

    let firstFocusableElement = focusableElements[0];
    let lastFocusableElement = focusableElements[focusableElements.length - 1];

    const handleKeyDown = (event) => {
      if (event.key === 'Tab') {
        focusableElements = ref.current.querySelectorAll(
          'a[href], button, textarea, input[type="text"], input[type="radio"], 
          input[type="checkbox"], select, [tabindex="0"]'
        );

        firstFocusableElement = focusableElements[0];
        lastFocusableElement = focusableElements[focusableElements.length - 1];

        if (event.shiftKey && document.activeElement === firstFocusableElement) {
          lastFocusableElement.focus();
          event.preventDefault();
        } else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
          firstFocusableElement.focus();
          event.preventDefault();
        }
      }
    };

    firstFocusableElement.focus();
    ref.current.addEventListener('keydown', handleKeyDown);
    return () => {
      ref.current.removeEventListener('keydown', handleKeyDown);
    };
  }, []);


  return <Portal>
      <DialogWrapper ref={ref} tabIndex={-1} role="dialog" aria-modal="true" aria-labelledby={DIALOG_HEAD} aria-describedby={DIALOG_PARAGRAPH}>
        <DialogHead>
          <h2 id={DIALOG_HEAD}>dialog head</h2> 
          <IconButton aria-label="close button">X</IconButton> {/* tag를 icon or svg로 해야하는데 귀차니즘으로 생략 */}
        </DialogHead>
         
        <DialogBody>
        <p id={DIALOG_PARAGRAPH}>this is dialog body description
        </p>

        </DialogBody>

        <ButtonWrapper>
        <button type="button">OK</button>
        <button type="button">Cancel</button>
        </ButtonWrapper>
      </DialogWrapper>
  </Portal>
};

해당 코드의 경우 dialog이 열릴 경우 맨 처음 focus 가능한 element에 focus가 잡히고, 그 후 tab을 이용해 이동시

밖으로 못 빠져나가게 자바스크립트로 구현되었다.

tab trap은 react 라이브러리인 MUI 라이브러리에도 구현되어 있다.

여담으로 찾아본 결과 웹 접근성 === 텝 접근은 아닌거 같다.

웹 접근성을 도와주는 항목중 하나가 탭 인터렉션인듯 싶은데 (교집합이 있는 집합 관계 느낌?)

이 부분은 좀 더 공부를 해봐야할듯..? 

혹은 HTML tag인 inert를 외부 tag들에 넣어주면 되는데 inert는 아직 브라우징 지원이 완벽하진 않을듯하다..? 

https://ui.toast.com/posts/ko_20220603

최근 취직한 직장에서 실시간 모니터링 툴을 만들고 있다. 

결론부터 말하자면 월부터 3월까지 일하면서

(실시간 데이터 업데이트시) 렌더링 시간을 700~600ms에서 390~290ms로 대략 100% 개선하였다.

이때 사용한 기법을 간단하게 적어보고자 한다.

실제 제품과 코드를 보여줄순 없고 비슷한 제품으로는 그라파나(https://grafana.com/) 라는 제품이 있는데 거의 80%쯤 비슷해서..? 이 제품을 보여주고 예시로 설명하고자 한다.

react-grid-layout(https://github.com/react-grid-layout/react-grid-layout)이라고 레이아웃 배치때 사용한 라이브러리도 똑같다.

배경 지식

어떻게 개선했나 리펙토링을 설명하기에 앞서

어떤 구조로 되어있나를 간략하게 설명하고자 한다.

화면에는 두가지 api 정보가 있다.

1. layout 정보 (빨간색) : 전체 레이아웃 정보와 레이아웃과 관련된 차트 정보를 담고 있다.

레이아웃 좌표(x, y축), 차트 종류(area, grid, bar 등) 차트를 각각 '어디'에 배치할지 정보를 담고 있다.

2. chart 정보(파란색) : 차트 내부의 실제 차트 정보를 api를 통해 불러온다.

프로젝트는 CRA로 구현되었는데 해당 화면을 들어가게 되면 1차적으로 layout정보를 api를 통해 불러오고,

레이아웃을 불러오면 2차적으로 각각 차트 데이터를 api를 통해 불러오게 되는 구조다.

문제 원인

react profiler를 돌려본결과 느린 이유를 크게 아래의 3가지로 압축가능한듯하다.

설명하고 추후 해결방안을 제시할 예정

1. presentational and container pattern 이용

전체 페이지가 presentational and container pattern으로 구현되어 있고 로직이 최상위에 몰려있었다.

최상층에서 layout 정보를 받아 상태로 가지고 있고 (mobx + useState 혼합) 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 자동적으로 전부 리렌더링되는데 하나만 바뀌어도 화면 전체 리렌더링을 유발했다. 

전임자가 Memo등을 사용해서 최적화를 시도한듯한데 신통치는 않았던듯..

끔찍한 가독성은 덤이고 이 구조는 재앙(?)을 불러오게 된다. 2번에서 후술

2. derived State 사용

class EmailInput extends Component {
  state = { email: this.props.email };

  render() {
    return <input onChange={this.handleChange} value={this.state.email} />;
  }

  handleChange = event => {
    this.setState({ email: event.target.value });
  };

  componentWillReceiveProps(nextProps) {
    // This will erase any local state updates!
    // Do not do this.
    this.setState({ email: nextProps.email });
  }
}

코드 예시 - 리엑트 공식 링크 참고 (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)

derivedState란 말 그대로 상태로부터 파생되는 State이다.

위 코드 예시처럼 prop으로 어떤 상태를 내려받아 전처리나 필요한 데이터만 따로 빼내어 상태로 관리하는 형태이다.

기존 코드에서는 presentational-container 패턴으로 layout api 정보를 최상층에서 prop으로 주입하고,

차트 내부에서 derived state를 사용해서 chart api 데이터와 혼합해 관리했다.

아까 캡처 사진을 보면서 다시 이해해보자.

layout api state(빨간색)에는 모든 레이아웃의 정보가 담겨 있다.

chart 레이아웃 정보는 array 형식으로 담겨 있는 형태였는데

chart 내부에서 layout의 정보를 사용하려고 chart api state(파란색)과 혼합해 전처리하고

derivedState를 만들게 된다.

위 렌더링 profiler를 보면 Run MicroTask란 작업이 엄청 많은것을 볼 수 있는데

어떤 상태가 바뀌면 derivedState도 재생생하면서 rerendering을 무수히 많이 발생시켜 렌더링 속도가 매우 느려지게 된다.

예를 들어, 파란색 chart를 오른쪽으로 약간 이동시키기만 해도 최상층부터 맨 아래까지 수많은 렌더링이 발생하는것...

처음엔 Run MicroTasks라길래 네트워크 중복 호출인줄 알았는데 아니였고

수많은 useEffect와 derivedState 문제인것으로 추측된다.

3. api 호출때 Batching 처리 X 

각 레이아웃에서 chartData를 api로 호출할때 한번에 묶어 호출하는게 아니라

차트 하나하나가 api콜을 해서 렌더링시키게 된다.

30개의 차트면 30개의 api 콜을 하는 방식인데

한두개가 네트워크 지연으로 느리게 오게 되면 다시 리렌더링을 발생시키게 된다.

해결 방안

리펙토링에서는 위 3가지 문제점을 제거하는 방안으로 일단 리펙토링을 진행했다.

그래서 이후 점진적인 리펙토링이 필요함에도 일단 상당히 빨라진것을 볼 수 있다.

1. presentational and container pattern 이용 -> Hook + 전역 State 방식으로 변경 

전역 state를 사용하면 변경된 상태들과 관련된 react component들만 리렌더링 시킬 수 있다.

1번은 사실 pattern 문제라기보다는 가독성 + 2번 문제 해결을 위해 리펙토링했다.

2. derived State 제거

정확히는 불필요한 rerendering을 줄이기 위해서 UseEffect를 제거했고,

UseEffect가 필요한 derived state를 제거했다. 

derived State를 사용한 이유를 보니

복잡한 3~4 depth의 api를 전처리해 chart 내부에서 사용하려는 이유도 크길래 

'전처리'해야하는 상태를 normalizr로 따로 분리하여 1 depth로 전처리후 전역 state로 관리하고

chart에 각각 unique한 id를 발급하여 전역 state를 id로 접근할 수 있게 리펙토링했다.

setState({
    locateX : props.layoutData.properties.x;
    locateY : props.layoutData.properties.y;
    threshold: props.layoutData.properties.y;
    chartData : chartData.data.chartData;
    chartAxisX : chartData.data.axisX,
    chartAxisY : chartData.data.axisY,
	....
})

이렇게 사용하던 코드를 (실제 코드와는 다른 예시 코드임)

const {locateX, locateY, threshold, chartData, chartAxis, chartAxisY } = useLayoutData(props.chartId);

normalizr를 사용해 위와 같이 리펙토링했다.

3. Batching처리 로직 추가 

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// Expected output:
// "fulfilled"
// "rejected"

promise.allSettled()를 사용하면 위와 같이 여러개의 api콜이 다 올때까지 await를 걸 수 있고, 에러처리도 해준다.

각 차트에서 api 콜을 하는게 아니라, 배칭처리를 통해 모든 api콜이 올때까지 기다린후

한번에 chart들을 업데이트해주는 방식으로 변경했다.

해당 방식만을 사용하면 chart가 하나 추가되었을때 다시 모든 api 콜을 하는 단점이 있었는데

이것은 requestTime을 기록해서

현재시간-refreshTime >= refresh로 

필요한 데이터만 불러오도록 예외처리시켰다. 

다음 분기에는 모든 api를 하나로 통합하고 마치 GraphQL처럼(혹은 graphQL로)

프론트에서 질의문을 보내 필요한 데이터만 받아오는 형식으로 변경하지 싶은데 일단은 배칭처리로 묶는거까지 마무리했다.

여담으로 이 페이지를 만든 전임자가 내가 입사하기 전에 나간 상태여서 

걍 맨땅에 헤딩하는식으로 했기 때문에 코드 이해에 애좀 먹었다;;

지금 생각해도 이걸 신입이 어떻게 했지? 싶은데

못했으면 짤렸으려나? 

지난 2022년 12월 ~ 2023년 2월 1일간 했던 일을 간단하게 메모해두려고 한다

아는사람?의 추천을 받고 작년 10월에 새로운 회사에 입사했다.
입사하고 기존 레거시 프로젝트의 react 개발자로 일하게 되었는데,
코드를 받아보고 정말 충격을 받았었다.

정말 개판으로 짜였다고 느껴진 스파게티 코드와
!important와 inline으로 갈겨놓은 css들을 보고 경악을 했어서 처음엔 나갈려다가
채용 한파에 1년만 버티자 하고 울며 겨자먹기로 ㅠㅠ 일하게 되었는데

하다보니 애증?이 생겨서 열심히 하고 있는 중이다.

1. ground rule 다시 만들기

(아래 링크는 입사 이후 회의한 내용)
https://www.notion.so/10-13-e2521a2a8b5944ddb4e873da3f00cd26

프론트 개발은 중간에 한분이 나가시고 사실상 사수분 한명이 다 하고 있던 상태였는데 (어떻게 하셨는지 지금도 의문..)
협업을 위해 간단한 ground rule을 다시 세우고 작업하기로 했다.

프로젝트가 몇년간 여러 사람을 거쳐가면서 누구는 presentational-container pattern을 사용하고 누구는 그걸 따라하겠다고 굳이 mobx에서 전역 데이터를 꺼내서 최상단에서 최하단 7층까지 내려보내고 있고;; 통일성이 필요했다.

2. 디자인 시스템 - 공통 컴포넌트 분리하기

기존에는 같은 컴포넌트를 ctrl c + ctrl v 해 사용하거나, material UI를 그대로 박아넣어서
수정 사항이 생겼으면 모든 컴포넌트를 바꾸는 노가다를 해야했다.
(공통 컴포넌트가 있긴 했지만 사람이 계속 바뀌면서 쓰이지 않았다.. 이유는 3번 storybook 문단에서 후술함)

실제로 입사 초기에 dialog에 어떤 기능을 추가하기 위해서 46개의 dialog가 포함된 파일을 수정했었다. ....

그래서 디자인팀에 요청해서 재사용성을 높이기 위해서 같은 컴포넌트를 묶어주고
컴포넌트화 시키는 작업을 하자고 제안했는데, 마침 디자인팀도 일관된 사용자 경험을 위해서 비슷한 고민을 하고 있던 참이라서 공통 컴포넌트 작업을 시작하게 되었다.

디자인 템플릿은 구글의 Material UI를 참고했고, 코드 형식은 Headless UI의 compound Pattern를 참고했다.

1. 우선 많이 쓰이는 컴포넌트 (Dropdown, button 등)등을 분리했고,
2. (button 같이 여러 style 바리에이션이 있는 경우) 디자인에 따라서 primary, secondary 등 여러 css 템플릿을 만들었다. props로 전달해서 css 형식을 정하게 된다.
3. 그리고 공통 컴포넌트 내부에서 상태를 Depth에 상관없이 공유하기 위해서 Compound pattern과 Context API를 사용해
작성했다.

기능과 스타일의 분리

구현시 재사용성을 위해서 기능(logic) 부분과 style이 분리되게 설계했다.

한 기능(ex- dropdown)에 여러 style을 갈아끼울 수 있으며,

기능과 style이 서로 독립적이니 객체지향의 OCP처럼 점점 필요한 기능을 확장해나갈수 있게 설계했다.

위 예시 사진인 accordion도 dropdown의 logic 부분 코드을 재활용하고 style을 따로 입힌 예시이다.

참고) compound pattern + context api - https://leon-dunamu.github.io/2021/07/21/react-compound-component/

2-1) 라이브러리 모듈화

이때 라이브러리를 사용했다면(ex - table 이나 Map API) 반드시 공통 컴포넌트로 한번 감싸고
외부에 인터페이스를 공유하는 식으로 작성했다.

왜냐하면 이 공통 컴포넌트를 사용하는 입장에서는 내부 구현을 알 필요가 없다.

지도로 비유하자면

컴포넌트를 사용하는 입장에서 Kakao Map인지 Naver Map인지는 관심이 없고 '지도 자체'만 필요하기 떄문이다.

또한, 모듈화가 이뤄져야 만약 라이브러리에 문제가 생겼거나 교체가 필요하다면 인터페이스는 놔두고 공통 컴포넌트 내부만 바꾸는 식으로 빠르게 교체할 수 있다.

+ 모듈화를 통해 '경계'를 만들고 라이브러리 전용 테스트를 작성해서 만약 라이브러리 버전업시 문제가 발생하면 빠르게 캐치할수 있도록 jest로 test code를 작성했다.

추가적으로 기본적인 dropdown 컴포넌트 등을 만들때엔 기존에는 mui4를 사용했는데 점차 deprecated 시킬 예정이라서 외부 라이브러리를 사용하지 않고 직접 작성했다.
(지금 생각해보니 아이콘은 mui자너..?)

3. Storybook 도입

사람이 자주 바뀌는데 문서화가 안되있으니
전임자들 코드를 분석해보니 비슷한 코드를 2~3번씩 작성하거나
1회용이라 생각해서 그냥 작성해 때려박는 문제점이 있길래 인수인계 + 공통 컴포넌트 테스트 용으로 storybook을 도입했다.

1. 공통 컴포넌트를 작업한 뒤

2. storybook을 작성하고

3. 그 storybook을 jest에서 import해서 테스트를 돌린다 (mocking - MSW)
이러면 테스트 대상이 어떻게 렌더링되나 실제로 브라우저에서 볼 수 있는 장점이 있다.

테스트 방식은 전에 글을 한번 썼었다.
https://lodado.tistory.com/73

4. visual regression test 용으로 chromatic 에 연동해 확인한다.

(그런데 모든 snapshot을 체크해보기에는 사람이 부족하기도 하고 chromatic은 단순 참고 용도로 사용하고 있다..
확인하는 부분은 나중 QA팀에 요청할 생각이다)

4. 데이터 정규화 - normalizr 도입

(normalizr 소개는 quick start 참고 - https://github.com/paularmstrong/normalizr/blob/master/docs/quickstart.md)

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

normalizr를 간단하게 설명하자면 위와 같이 깊은 depth를 가진 JSON 파일에서 data.comments.commenter.id 만 3으로 수정한다고 생각해보자. 매우매우매우 끔찍하다.
그래서 정규화 과정을 통해 데이터를 id를 통해 참조하는 쓰기 좋은 포맷으로 바꿔준다.

{
  result: "123",
  entities: {
    "articles": {
      "123": {
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

위와 같이 id를 통해 참조 가능한 1 depth로 줄여주는 좋은 라이브러리다.

내가 맡은 파트는 비유하자면
"레이아웃에 drag and drop으로 자유롭게 배치 가능한 실시간 주식 차트"인데, API 구조가 상당히 복잡하다.

주식 차트들을 보기 위해서 다음과 같은 과정을 거친다.

1. 유저의 LayoutList 목록을 API 콜 A로 가져온다.
2. 유저가 LayoutList 중 하나의 Layout을 선택한다.
3. 해당 선택된 Layout에는 Chart들의 정보를 담는 ChartList가 있다. ChartList 에 있는 chart 들의 key들을 API 콜 B로 보내서 chart를 그릴 데이터를 API로 받아온다.

기존 코드는 해당 API를 사용하기 위해서 매우 복잡하고 파악이 힘든 전처리 과정을 거치고 있었는데

normalizr를 사용해 id 값만 있다면 어느 데이터나 (전역 state를 통해) 접속하고 , 수정 가능하게 리펙토링하니
가독성이 높아지고 유지보수성도 확실히 향상되었다.

나도 써보기 전까진 긴가민가 했는데 이젠 안쓰고는 못살꺼 같다.
API 구조가 복잡하면 꼭 써보자.

2023-02-18 추가 //

비슷한 내용 찾아서 추가..

https://www.youtube.com/watch?v=HYgKBvLr49c 

5. Repository 패턴 도입

프론트에서 필요한 데이터의 접근과 비즈니스 로직을 분리하기 위해서 API 접근에서 레포지토리 패턴을 추가했다.
추가적으로 필요한 데이터 전처리, 데이터 정규화(normalizr), 데이터 캐싱 처리를 레포지토리에서 관리하도록 layer를 분리했다.

기존에는

component <-> (state library(mobx, redux 등등..)) <->  API Call

위와 같은 구조로 되어 있었는데 필요한 데이터를 뽑아내는 전처리 로직과 비즈니스 로직이 뭉쳐있어서
API 수정이나 프론트 코드 수정에 유연하지 못했다.

repository를 추가한다면

component <-> (state library(mobx, redux 등등..)) <-> repository  <->  API Call

위와 같은 레이어를 거치는셈이다.
repository가 데이터 관리를 수행하고 사용하는 입장에서는 그냥 데이터 요청만 해서 써도 된다.

여담으로 repository가 데이터 전처리까지 해도 좋은가(=프론트에서 전처리해도 좋은가) 조사해본 결과 데이터 전처리는 가능하면 백엔드에서 하는게 좋은 편인거 같다. 프론트엔드는 싱글 쓰레드로 상태관리와 렌더링하는거만 해도 바쁘다.
그래서 일부 기업은 프론트가 백엔드인 API gateway server까지 전담하는 경우도 많다고 한다.

우리팀도 점진적으로 리펙토링 해가며 전처리 로직을 백엔드로 넘길 예정이다. graphql을 도입하여 프론트에서는 질의문만 백엔드에 날릴까 검토중인데 큰 작업이라 진짜 할지는 모르겠다.

추가적으로 백엔드 API가 기존에는 페이지 별로 있었는데 컴포넌트 단위로 통합시킬 예정이다. 그래서 1차로 동일한 인터페이스를 가진 레포지토리로 api를 통합하고 2차로 레포지토리를 바꾸는 식으로 점진적으로 api를 통합해나갈 계획이다.


하다보니 느낀점이
내가 아직 신입인데 올바른 방향으로 가고 있나 걱정되기도 하고 이상한 코드는 이상하게 짜인 이유가 있었고 다시 만들어도 비슷한 레일을 따라가는거 같긴 하다..?
혹시 예상치 못한 버그가 생길까봐 조심스레 개선하고 있는 중이다.

그래도 컨택스트 파악 안된 코드를 다음 사람에게 물려주고 싶진 않아서 노력하고 있다..🔥