Nov 20, 2022Remixrun을 시작 하기 위한 가이드remixrun은 nextjs와 유사하게 react를 베이스로 한 풀스택 웹 프레임워크 입니다. react router를 만들었던 팀에서 제작하고 있고 제가 좋아하는 kentcdodds가 참여한 프로젝트이기도 합니다. remixrun는 표준 웹 API를 많이 사용하기 때문에 웹에서 자바스크립트 기능을 끄더라도 …React9 min readReact9 min read
Published in Cross-Platform Korea·Nov 6, 2022Recoil과 Firebase의 만남 — 비동기 상태 다루기최근 진행한 프로젝트에서 React와 Firebase를 사용할 일이 있었습니다. 프로젝트를 시작하기에 앞서 리액트에서 비동기로 데이터를 가져오기 위해 어떤 방식을 사용할지에 대한 고민이 들었습니다. 서버에 데이터 요청을 보내는 경우에는 react-query 나 SWR 등의 라이브러리를 사용해서 네트워크 상태를 …Firebase6 min readFirebase6 min read
Published in Prisma Korea·Feb 14, 2022Supabase 프로젝트를 Prisma로 관리 시 주의할 점현재 진행 중인 프로젝트는 supabase + prisma로 백엔드를 구성했습니다. supabase는firebase 에 비해 다른 도구들을 도입할 수 있는 자율성이 높고 prisma로 마이그레이션을 관리하면서 프로젝트를 진행할 수 있다는 점이 꽤 장점으로 다가왔습니다. 또한 오픈소스 데이터베이스인 postgre …Prisma6 min readPrisma6 min read
Jan 17, 2022Vite 가볍게 살펴보기Vite는 Unbundled Development 도구로써 기존 webpack이나 rollup과 같은 기존 번들러와는 개념이 약간 다릅니다. 이번 포스트에서는 기존에 인식되고 있는 Bundler의 단점을 간단하게 살펴보고, 이 문제에 대해 Vite 가 어떤 전략을 취하고 있는지 살펴보겠습니다. Bundler ESM이 브라우저에 …Vitejs3 min readVitejs3 min read
Jan 13, 2022Testing with svelte: svelte 모듈의 store함수 Mocking 하기최근 svelte에서 테스트를 진행하면서 svelte 라이브러리의 store를 모킹하는데 꽤 고생을 했습니다. 테스트 하려는 페이지에서 Routify 라는 라이브러리의 $url 스토어 함수와 $goto 스토어 함수를 사용하고 있었습니다. 해당 함수들은 테스트할 대상이 아니므로 jest.fn() 을 통해서 바로 …Svelte2 min readSvelte2 min read
Published in Svelte Seoul·Jan 11, 2022Svelte에서 테스트 환경 설정 및 유닛 테스트 작성해당 포스트에서는 테스트에 관한 복잡한 방법론과 철학보다는 코드를 통해 실질적으로 어떻게 테스트를 수행하고 코드 커버리지를 늘려 나갈 것인가에 대해 말하고자 합니다. 프론트엔드에서 테스트 순서 복잡한 방법론을 차치한다면, 프론트엔드에서 테스트는 다음 스텝으로 정의할 수 있을 것 같습니다. 테스트 환경을 설정한다. 테스트 대상에 필요한 테스트 케 …Jest11 min readJest11 min read
Published in Svelte Seoul·Jan 10, 2022Vite 환경에서 Svelte PWA 만들기최근 svelte와 vite 그리고 routify를 사용해서 간단한 admin 프로그램을 만들어본 경험을 바탕으로 svelte-admin-ui 제작에 참여하고 있습니다. 이번 포스트에서는 PWA에 대해 간단히 소개하고 vite 환경에서 손쉽게 PWA를 만드는 방법을 소개하겠습니다. PWA PWA(Progressive W …Vitejs5 min readVitejs5 min read
Published in Cross-Platform Korea·Jan 8, 2022Relay 버전 13 릴리즈 및 @requied directiveRelay 13 버전이 이틀 전에 릴리즈 되었다. Rust로 완전히 리뉴얼된 컴파일러를 적용한 버전이라 기대감을 가지고 hackatalk에 적용해보았다. 13버전은 컴파일러 내부 아키텍쳐가 달라졌을 뿐 API가 달라진 것은 딱히 없기 때문에 부담없이 버전업을 진행할 수 있었다. yarn add react-relay …Relayjs4 min readRelayjs4 min read
Jan 1, 2022개발자가 되고싶었던 비전공자의 2년 간의 회고오늘 아침 7시 50분쯤에 새 해가 떴다. 30대로 접어드는 첫해라 한 번쯤 구경 나갈까 싶다가도 아무래도 집에서 조용히 해를 맞이하는 게 좋겠다 싶었다. 알람이 울리지 않았는데도 이상하게 일찍 눈이 떠져서 자연스레 창가로 향했다. 창가를 멍하니 바라보고 있다 보니 어느새 날이 밝아온다. 해가 왜 안 보이지 싶 …Retrospectives11 min readRetrospectives11 min read
Published in Svelte Seoul·Dec 24, 2021@Urql/svelte 사용법 및 relay cursor pagination 구현 그리고 cache handling(feat. typescript)Intro Urql은 Apollo client, relay와 같이 GraphQL client 라이브러리입니다. 공식 문서에서 svelte 전용 패키지를 지원하고 있고 사용 방법이 쉽고 간단해서 svelte에서 graphql을 사용할 때 좋은 선택지가 될 것 같습니다. 이번 글에서는 Urql을 사용해서 relay style …Svelte10 min readSvelte10 min read
