Vite는 Unbundled Development 도구로써 기존 webpack이나 rollup과 같은 기존 번들러와는 개념이 약간 다릅니다. 이번 포스트에서는 기존에 인식되고 있는 Bundler의 단점을 간단하게 살펴보고, 이 문제에 대해 Vite 가 어떤 전략을 취하고 있는지 살펴보겠습니다. Bundler ESM이 브라우저에 …

최근 svelte에서 테스트를 진행하면서 svelte 라이브러리의 store를 모킹하는데 꽤 고생을 했습니다. 테스트 하려는 페이지에서 Routify 라는 라이브러리의 $url 스토어 함수와 $goto 스토어 함수를 사용하고 있었습니다. 해당 함수들은 테스트할 대상이 아니므로 jest.fn() 을 통해서 바로 …

해당 포스트에서는 테스트에 관한 복잡한 방법론과 철학보다는 코드를 통해 실질적으로 어떻게 테스트를 수행하고 코드 커버리지를 늘려 나갈 것인가에 대해 말하고자 합니다. 프론트엔드에서 테스트 순서 복잡한 방법론을 차치한다면, 프론트엔드에서 테스트는 다음 스텝으로 정의할 수 있을 것 같습니다. 테스트 환경을 설정한다. 테스트 대상에 필요한 테스트 케 …

최근 svelte와 vite 그리고 routify를 사용해서 간단한 admin 프로그램을 만들어본 경험을 바탕으로 svelte-admin-ui 제작에 참여하고 있습니다. 이번 포스트에서는 PWA에 대해 간단히 소개하고 vite 환경에서 손쉽게 PWA를 만드는 방법을 소개하겠습니다. PWA PWA(Progressive W …

Relay 13 버전이 이틀 전에 릴리즈 되었다. Rust로 완전히 리뉴얼된 컴파일러를 적용한 버전이라 기대감을 가지고 hackatalk에 적용해보았다. 13버전은 컴파일러 내부 아키텍쳐가 달라졌을 뿐 API가 달라진 것은 딱히 없기 때문에 부담없이 버전업을 진행할 수 있었다. yarn add react-relay …

오늘 아침 7시 50분쯤에 새 해가 떴다. 30대로 접어드는 첫해라 한 번쯤 구경 나갈까 싶다가도 아무래도 집에서 조용히 해를 맞이하는 게 좋겠다 싶었다. 알람이 울리지 않았는데도 이상하게 일찍 눈이 떠져서 자연스레 창가로 향했다. 창가를 멍하니 바라보고 있다 보니 어느새 날이 밝아온다. 해가 왜 안 보이지 싶 …

Intro Urql은 Apollo client, relay와 같이 GraphQL client 라이브러리입니다. 공식 문서에서 svelte 전용 패키지를 지원하고 있고 사용 방법이 쉽고 간단해서 svelte에서 graphql을 사용할 때 좋은 선택지가 될 것 같습니다. 이번 글에서는 Urql을 사용해서 relay style …

이번 포스트에서는 Relay에서 뮤테이션을 통한 파일 업로드 작업을 진행하며 알게된 부분을 공유하고자 합니다. GraphQL의 요청 헤더는 기본적으로 application/json입니다. 따라서 뮤테이션에 file을 넣어주기 위해서는 multipart/form을 처리할 수 있는 별도의 작업이 필요합니다. 이것과 관련 …

최근 dooboo-ui의 NetworkImage 를 리팩토링할 일이 있었습니다. 진행하고 있는 프로젝트의 메인 화면에서 많은 수의 이미지를 한번에 랜더링하다보니 로딩 속도가 많이 느려지는 문제가 있었습니다. 로딩 속도를 개선하는 일이다보니 랜더링 시간을 비교할 필요가 있었습니다. 어떤 방법을 찾아볼까 고민하다가 …