이 글은 별거 없습니다.

vercel에 storybook을 배포하는 방법은 놀랍게도 간단합니다. 사실 문제가 많고 플랫폼이 거부할 줄 알았는데 아니였습니다. 최초 배포 이후 다음 릴리즈하면 장애가 발생할 것이라고 생각했는데 그렇지 않습니다.

오늘은 발렌타인 데이입니다. 저는 여자에게 받는 초코렛은 못 받아도 스스로 IDE는 선물로 줄 수 있을 것같습니다.

neovim을 설정하는 여정입니다. 이제 일상적으로 c 언어를 사용해야 할 때 사용할만할 정도로 개발환경이 좋아졌습니다.

제목에 어그로가 엄청난데 진짜 별거 없습니다. 그리고 이 블러킹 현상은 브라우저에서 발생했고 보완하는 과정입니다. 정량적인 성능 개선은 전혀 아니고 오히려 성능은 떨어집니다. 하지만 사용자는 페이지 이동하는데 대기시간이 짧아질 뿐입니다.

요약하면 Promise.all()을 100개 그대로 보내지말고 현재 브라우저 에이전트의 최대 TCP 연결량 기준으로 분할합시다. Promise.all()에 그냥 반복문 한번 감싸주세요. 페이지 이동도 비동기 요청인데 Task Queue가 100개 뒤에 Enqueue될지 6개 뒤에 Enqueue할지는 시각적으로 보이는 성능 차이가 큽니다. 엄밀하게 자바스크립트에서 블러킹현상이 발생하는 것이 아닙니다. 그져 Task Queue에서 병목이 발생하고 모든 요청을 응답 받기 전까지 다른 페이지 이동에 대한 동작을 처리할 수 없게 됩니다. 반복문으로 분할 요청하면 블러킹 수준이 한참 낮아집니다.

개인적으로 주말에 다니는 스터디에서 배운 것도 약간 가미되었습니다.

테스트 코드를 작성하면서 자주 느낀 것이지만 mocking이 어렵습니다. 물론 개인적으로 jest보다 vitest를 더 많이 사용해봤습니다.

저는 오늘 제가 빼빼로를 받을지 테스트해보겠습니다.

go 언어로 CLI를 만드는 여정을 공유합니다.

여기 이슈에 모르는 것을 작성하고 모르는 것을 찾고 적용해보고 정리하고 커밋하는 방식으로 작업했습니다. 질문주도 개발방법론을 적용했습니다.

블리딩 엣지 Deno를 사용하다가 과다출혈을 그렇게 당하고도 아직도 정신 못차린 것 같습니다.

MARP VSCode 확장자를 사용하면 빠르고 간단하게 PPT를 만들 수 있습니다.

사실 진짜 중요한 것은 자바스크립트 생태계에서 라이브러리 코드를 작성하는 패러다임이 바뀌고 있다는 것입니다.

통신에 token이 관여할 때 취할 수 있는 전략이 있습니다. interceptor가 token 검증을 할 때 처리해볼 수 있는 문제 해결 방식입니다.

요약하면 node환경에서도 token을 저장합니다.

MSW 설정하면서 번들사이즈다 2배가 된 문제가 발생했습니다. 원래 보통 300kb 정도되는 번들 사이즈가 600정도로 커졌습니다.

원래 MSW는 개발하면서 백엔드를 mocking하는 것입니다. 그래서 개발하는 동안에만 있어야 하고 build에는 포함되면 안됩니다. 이 문제를 해결하는 글입니다.

참고로 일반적으로 권장하는 번들 사이즈는 500kb 미만입니다.

리액트에서 컴포넌트 차원에서 예외처리하는 방법입니다. 에러를 발생할 수 있고 우아하게 처리하는 방법을 소개합니다.

물론 저의 방법은 우아하지 않습니다.

참고로 저는 React-Query와 조합해서 사용하는 것도 다룹니다.

axios와 React-Query에 특히 Error에 타입지정하는 여정입니다.

기존 request waterfall 해결의 후속 편이라고 생각해도 괜찮습니다.

나중에 Error Boundaries까지 연결됩니다. 놀랍게도 사실 별로 놀랍지 않지만 대부분 tkdodo 블로그 자료를 활용했습니다.

백엔드를 배포하는데 deno deploy는 실망스러운 것이 너무 많아서 다른 배포 옵션을 고려하기 시작했습니다. 그래서 요금폭탄 안당할 안전한 배포 플랫폼을 찾기 시작했습니다.

Super Oak 테스트에 도입했습니다. 부분만 적용할 수 있었습니다. 하지만 이 라이브러리에 메인테이너가 없는 것 같습니다.

인정하겠습니다. deno는 fresh를 제외하면 시기상조입니다. Nest.js를 배우고 포팅하고 십네요.

빠르고 더럽게 fetch로 만들었던 API를 mongoose로 리팩토링하는 과정을 다룹니다.

한가지 함정이 있습니다. 또 deno deploy에서 사용할 수 없습니다. 앞으로 개발할 때는 docker image부터 찾겠습니다. ㅂㄷㅂㄷ

개인적으로 적용하고 있는 리액트 코딩 컨벤션입니다. 일부는 차용했습니다. 또 배운 것이 있으면 추가할 것입니다.

flash card 프로젝트 회고입니다. 프론트엔드 배포기준 1.0.0입니다. 백엔드 배포는 1.1.2입니다.

스크롤을 정지시키는 custom hook입니다. modal에서 많이 호출합니다.

지금 구현해야 하는 것은 삭제시 경고 modal(더 구체적으로 Dialog)입니다. 이 작업을 기록하는 이유는 react portal로 구현하는 것이 처음이기 때문에 기록합니다.

이메일 저장하는 방법입니다. 하지만 이 방법을 적용하기 전에 왜 저장해야 하는가? 이것은 ux 문제입니다.

Deno Deploy로 배포하고 있는데 서버가 재시작하면 Module 스코프로 1번만 실행해야 할 함수 모두 재실행하고 서버의 키가 바뀌는 문제가 발생했습니다. 이 문제를 해결하기 위해서 항상 동일한 key를 만들도록 해결했습니다.

React-Router-DOM에 대해서 저는 생각보다 모르는 지식이 상당히 많습니다. url path에 접근하는 방법을 이번에 찾게 되었습니다.

로그인하고 홈페이지로 이동하면 하면 로딩 스피너가 보입니다. 잘 몰랐지만 상당히 기초가 없는 짓이라고 합니다.

예전에 포트폴리오 프로젝트를 진행할 때 동료가 custom hook을 추가했었습니다. 하지만 아쉬운 점이 많아서 개선한 버전을 다시 만들었습니다.

원래는 있는 줄 몰랐던 hook입니다.

그냥 vite으로 만든 react에서 webp로 이미지를 처리하는 방법입니다.

2023 StackOverflow Survey 결과가 나왔습니다. 생각보다 문제가 많은 설문입니다. 하지만 몇가지 인사이트가 있습니다.

Jotai로 순회할 때 각각의 atom이 독립적인 context를 가져야 할 때 사용할 수 있는 전략입니다.

switch case를 사용할 수 있는 상황이면 map 혹은 object를 사용할 수 있습니다. 저는 신입 엔지니어라서 무조건 안티패턴이고 코드 스멜이라고 강하게 주장해야 하기는 하지만 별로 그렇게 하고 싶지는 않습니다. 저는 개인적으로 생각이 복잡할 때는 사용해도 괜찮다고 봅니다.

오늘은 사용자들에게 로그아웃 통신을 한다고 기만하는 기능을 만들었습니다. 이유는 사실 토큰을 비우는데 그냥 1 ~ 2초 기다리게 만들었습니다.

dropdown menu 만들는 방법입니다. 의외로 별거 없습니다.

switch case 보다 더 깔끔한 in 연산자로 타입에 따라 조건부 랜더링하는 방법입니다.

드럽고 끔찍한 코드로 돌아가는 date formatting 하는 방법입니다.

이메일과 비밀번호 유효성 검증하는 정규표현식을 테스트코드와 함께 구현한 예시입니다.

버튼에 로딩 스피너를 추가하는 방법입니다. button은 다양한 너비를 갖을 수 있고 또 입력한 텍스트 길이만큼 고정되어야 합니다. 로딩인 상황에 button의 너비가 줄어드는 일도 막아야 합니다.

토큰을 갱신하는 추가 요청을 보내는 interceptor를 활용하는 이야기입니다. 프론트엔드가 처리해야 하는 작업은 이부분이 대부분입니다. 백엔드는 다른 작업들 더 해줘야 합니다.

서버에서 body 유효성을 검증한 로직을 잘 못 짜는 일이 있었습니다. request body에 0을 검증할 때는 존재 여부로 검증합시다.

카드 뒤집기 구현은 생각보다 난이도 있었습니다. 하지만 재미있습니다.

이유가 있다면 더 간소하고 성능이 더 좋습니다. HMR 지원이 상당히 빠릅니다. 그리고 설치 마법사가 직관적이고 친절합니다. 시작하거나 실험 프로젝트에 활용하기 적합합니다.

물론 예외도 있습니다. 처음 테스트를 공부하는 입장에서는 CRA 활용하는 것이 좋습니다.

우회할 방법은 cookie를 사용 안 하는 것 말고 없습니다.

React.lazy는 현재 default exports만 지원합니다. 다른 방법이 없습니다. 페이지 컴포넌트 단위 Code-Splitting이 현재 지식에서 최선이었습니다.

tl;dr https 설정에서 중요한 것은 서버에서 설장되어 있는 것이 중요합니다. 클라이언트 개발환경의 http로 되어 있어도 상관 없습니다.

자주 활용할 것 같은데 의외로 관련 자료를 찾기 어려운 것이 있습니다. 바로 도메인 객체입니다.

미래에서 다시보는 입장에서 백엔드가 끝났던 것은 아니었습니다. 하지만 적어도 이당시는 백엔드 작업이 대부분 달성한 것 같아서 프론트엔드를 착수하면 될 것이라고 착각하고 있었습니다.

토큰을 생성, 검증하는 테스트 코드를 작성하는 방법입니다. token을 싱글튼으로 제어하는 것은 일반적이지 않은 패턴입니다. 이부분을 리팩토링하고 테스트합니다.

일요일은 개발자 블로그를 개발하는 날입니다. 이런저런 테크 트렌드를 보고 줍줍한 것들입니다.

Deno oak에 테스트 코드를 작성하면서 cookie 설정이 특이하다는 점을 발견했습니다.

deno oak의 testing에서 set과 get은 서로 무관합니다. createMockContext으로 만든 context(이하 ctx)는 ctx.cookies.set으로 넣었다고 ctx.cookies.get으로 꺼낼 수 있는 것은 아닙니다. 모두

refresh token과 access token을 이해하기 위해 했던 노력입니다.

플레시 카드 프로젝트 프론트엔드 착공시작하고 겪은 일과 생각들입니다.

Deno 백엔드를 활용하면서 발생한 CORS 에러를 해결한 이야기입니다.

프론트엔드 엔지니어링 코드의 관심사를 분리하는 방법들입니다. 모두 훔쳐배운 것들입니다.

vitest처럼 빠른 테스트러너에 RTL과 MSW를 같이 사용할 수 있게 설정하는 방법을 다룹니다.

이번주에 Deno를 활용해서 백엔드 미들웨어 서버를 만들었습니다. Axios, MongoDB, Worker, BCrypt을 사용하면서 겪은 에러들입니다.

tl;dr : deno deploy 런타임에서는 Worker를 사용할 수 없습니다. 하지만 Bcrypt은 Worker를 사용하고 있습니다. Bcrypt 라이브러리를 Deno deploy에서 사용하면서 발생한 에러입니다.

혹시나 했는데 역시나 겪은 문제입니다.

tl;dr : deno oak에서 delete의 response.body는 null로 고정되어 있습니다.

싱글튼 패턴이 적당해보여서 활용했습니다.

deno 런타임에서 axios로 mongoDB랑 통신하는데 에러가 계속됩니다. mongoDB API 문서를 잘 숙지하지 않고 있어서 발생하는 문제 같습니다.

이 블로그 잘 받았습니다.

이 블로그는 제 자신에게 주는 생일 선물입니다. 생일 축하합니다.

사실 어린이 날인 것은 별로 안 중요합니다.

golang 컨프런스를 다녀왔습니다. 하루 쉰다는 생각으로 다녀왔습니다.

켈라리우스(Christian Cellarius, 1634-1717)에 의하면 중세란 로마의 함락부터 콘스탄티노폴의 함락이라고 합니다.