JongHak Seo Jonghakseo

Canvas api란?

Canvas API는 javascript와 Html canvas 엘리먼트를 통해 그래픽을 그릴 수 있는 수단을 제공하는 api로, html5의 구성요소입니다. 애니메이션과 게임 그래픽, 데이터 시각화, 사진 조작 및 비디오 등의 다양한 분야에서 사용되고 있습니다.

주로 2D 그래픽을 다루는 데 사용되고 있으며, 비슷하게 그래픽을 다루는 API 중에선 3D를 주로 다루는 WebGL이 있습니다.

WebGL이란?

WebGL(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 canvas 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다. -MDN

Markdown Editor의 필요성

기존에 Markdown 편집을 위해 사용하고 있던 md Editor Typora가 12월부터 정식 출시가 되면서 유료화가 되었다. 정말 좋은 에디터이지만, 사용빈도도 적고 에디터의 기능 대부분을 사용하지 않는 나는 굳이 결제까지 해야하나... 하는 생각이 들었다.

겸사겸사 이번 기회에 온라인에 오픈소스로 풀린 MD editor 들을 활용해서 내가 쓰기 편한 에디터를 하나 만들어야겠다 생각했다.

Note-for.me

도메인 고민 및 결정에 제일 오랜 시간이 걸렸다. Md, note 키워드로 많은 도메인을 찾아봤고, 결국 마음에 드는 Note-for.me 라는 도메인을 찾아서 구매했다. 가격은 1년에 ₩7,700 으로 적당했다.

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

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

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

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

FireEvent -> UserEvent 변경시 FailCase

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

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

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

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

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

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

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

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

발단

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

다음과 같은 순서로 진행

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

어학당 챗봇 Proof of Concept

아이디어

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

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

onError를 넣어주지 않으면,

	🌞 Morning 81 commits ███▉░░░░░░░░░░░░░░░░░ 18.9%
	🌆 Daytime 128 commits ██████▎░░░░░░░░░░░░░░ 29.9%
	🌃 Evening 169 commits ████████▎░░░░░░░░░░░░ 39.5%
	🌙 Night 50 commits ██▍░░░░░░░░░░░░░░░░░░ 11.7%

	⭐ Total Stars: 16
	➕ Total Commits: 226
	🔀 Total PRs: 68
	🚩 Total Issues: 4
	📦 Contributed to: 5