Jonghakseo

# 서종학 (JongHak Seo) — Comprehensive Profile

> 이 문서는 서종학에 대한 포괄적인 프로필 문서입니다.
> LLM이 이 문서를 읽고 서종학에 대한 질의응답을 수행할 수 있도록 구조화되어 있습니다.

---

## 1. 기본 정보 (Basic Information)

| 항목 | 내용 |

Jonghakseo

name	description	argument-hint	disable-model-invocation
to-html	주어진 주제를 "활자본(Book)" 스타일의 단일 HTML 파일로 만든다. 따뜻한 세리프 타이포, 크림색 종이 배경, 장(Chapter) 구조의 격조 있는 문서를 생성한다.	결제 구조 | 버그 원인 | 에이전틱 코딩 치트시트	true

to-html

"$ARGUMENTS"를 활자본(Book) 스타일의 싱글 페이지 HTML 문서로 만든다.

Jonghakseo

import type { StoreApi } from 'zustand/vanilla';

type RemoveFunctionFromObject<T> = {
  [key in keyof T as T[key] extends Function ? never : key]: T[key];
};

type CustomSerializeDeserialize<Value> = {
  serialize?: (value: Value) => string;
  deserialize?: (value: string) => Value;
};

Jonghakseo

https://excalidraw.com/#json=MerJRiKt49ryTnFFYJIR-,ZZzylocjGjAPkzuJ3_lO3Q

Jonghakseo

에러 정책을 ignore로 했을 때에도 에러가 발생. onError가 실행됨을 확인

onError를 넣어주지 않으면,

Jonghakseo

어학당 챗봇 Proof of Concept

아이디어

1. openai에서 공개한 chatgpt api는 최대 요청 가능 텍스트의 길이가 정해져 있음 (max_token: 4096토큰: 약 3000 단어)
2. 그런데 chatpdf.com 등의 서비스를 보면, 대용량의 pdf문서를 입력한 상태에서 내용을 요약해주는 모습을 볼 수 있음
3. max_token 제한을 어떻게 우회한 것인지 찾아보기 시작
4. text embedding 을 통해 ChatGPT에게 질문 할 때, 관련 컨텍스트를 같이 보내준다는 것을 알게 됨
5. chatgpt에 제공할 수 있는 컨텍스트가 사실상 무제한으로 늘어난다는 사실을 알게 되었음
6. 사내 풍부한 컨텐츠를 바탕으로 chatbot 서비스를 만들 수 있을 것 같다는 생각을 함

Jonghakseo

발단

creatrip-web 레포 최상위 폴더에 있는 stay를 packages/stay/app 하위로 정리하기로 함

다음과 같은 순서로 진행

1. packages/stay/app 폴더 생성
2. stay 폴더 내용 통째로 packages/stay/app 내부로 이동
3. npm init -w ./packages/stay/app 으로 npm workspace 생성
4. 패키지 이름 @creatrip-stay/app 으로 생성
5. npm install => node_modules에 @creatrip-stay/app symlink 생성
6. npm run re-codegen

Jonghakseo

getByRole('listitem', { name: "" }) 사용이 불가능한 이유

저희가 사용하는 react-testing-library의 경우 접근성 트리를 활용한 테스트를 지원하고 있습니다. 특히 옵션에 name을 넣어주면 접근 가능한 이름을 계산하여 정확한 요소를 찾는데 도움을 줍니다.

참고로 접근 가능한 이름을 찾기 위해서 사용되는 로직은 다음과 같습니다. Accessible Name and Description Computation

getByRole('listitem', { name: "~" } )

Jonghakseo

FireEvent -> UserEvent 변경시 FailCase

기존 fireEvent 메소드로 호출하던 부분을 userEvent로 변경하면서 실패가 되는 케이스 원인 분석

• 국가 코드 선택(select)와 input이 같은 label 태그 안에 존재하는 경우 (ex. ProxyShopOrderRecipientInfoField.test.tsx) userEvent.type(phoneNumberInput, value) -> 동작하지 않는 문제 발생

userEvent의 type메소드는 다음과 같은 흐름으로 처리

1. element(타이핑을 하려는 element)가 disable인지 확인
2. element 클릭

Jonghakseo

RTL 메소드 중 ByRole 작동방식에 대해서...

• RTL에서 제공하는 ByRole 메소드(getByRole, queryByRole, findByRole...)는 기본적으로 접근성 트리를 활용한 요소 접근 방식을 사용하고 있습니다.
• 저희가 사용하는 getByRole 메소드의 경우, 첫 번째 인자로 role. 즉, 역할을 넘기고 두 번째 인자의 옵션에서name 으로 버튼 내부에 있는 실제 노출되는 텍스트를 넘기게 되는데요, 여기서 name이 바로 접근 가능한 name인 accessible name이 됩니다.
• byRole이 요소 쿼리를 위해 사용하는 접근성 트리는, 당연하게도 사용자가 실제로 접근할 수 없는 요소들에 대해서 제외하고 있습니다.

접근성 트리에서 제외되는 조건들은 다음과 같습니다.

1. 상위 Element 혹은 Element 자체에 다음과 같은 css가 있을 때
   display:none, visibility:hidden
2. Element에 role="presentation" or role="none" 을 명시적으로 선언하여 Element의 암시적인 시멘틱을 제거할 때