Blog
Promise.race로 실행 시간 제한 걸기
동시에 여러개의 비동기 처리를 할 때 Promise.all을 사용해서 처리 속도를 올리곤 한다. const results = await Promise.all([fetchData1(), fetchData2()]); 이렇게 하면 데이터 패칭을 동시에 요청하고 병렬로 둘 다 끝난 후에 results에 [data1, data2]와 같이 데이터가 들어간다. 반면에 Promise.race를 사용하면 모든 처리가 끝날 때 까지 기다리지 않고 먼저 끝나는 것이 반환되어서 일종의 타임아웃을 걸 수 있다. await Promis ……
dev |2024-09-22 | Comments (0)
천재의 식단
객관적인 사실과 작가의 주장이 섞여 있어서 어디까지가 증명된 과학인지 애매한 부분들이 있다. 저자의 주장을 함축하자면 인간이 산업화되면서 바뀐 식습관에 비해 아직 충분히 진화하지 않았기 때문에 이전 생활의 식습관이 건강에 좋다는 것이다. 이런 이해를 바탕으로 본인이 연구하고 조합한 사실과 주장을 아주 설득력 있게 설명해 주고 있고 이를 바탕으로 한 좋은 식습관과 음식을 권유하고 있다. 이 책을 읽고 아주 비슷한 내용을 주장하는 EBS 다큐 프라임의 현대식단과 구석기 식단의 영양학적 비교 영상을 접했다. 현대 사회의 문제인 여 ……
book |2024-09-14 | Comments (0)
WebP의 품질과 파일 크기
웹피(WebP)를 저장 할 때 품질을 얼마로 정해야 품질과 파일 크기 사이에서 적당한 지점을 찾을 수 있을지 실험을 좀 해봤다. 먼저 웹피에 대해서 알아보려면 반디소프트나 구글, 타이니파이의 글을 참고하면 좋다. 간단히 말하면 구글에서 만든 무손실과 손실, 알파채널, 애니메이션까지 지원하면서 기존 포맷 보다 작은 파일 크기를 유지하는 최근에 가장 각광 받고 있는 이미지 포맷이다. 대부분의 브라우저에서 지원한다. 무손실로 저장을 해도 PNG에 비해 26%가 작다니 사용하지 않을 이유가 없다. 다만 손실의 경우에는 파일 크기는 획 ……
dev |2024-09-07 | Comments (0)
맥북 USB-C 충전 전력 확인하기
사용하고 있는 맥북 프로는 맥세이프(MagSafe)로 충전을 하고 있는데 USB 젠더로 충전을 하고 싶어서 USB-C to C 케이블을 이용해서 충전해 봤다. 어떤 케이블은 충전이 되지 않았고 USB-C 케이블마다 충전 용량이 다르다는 것을 알았다. 문제는 가지고 있는 케이블 중에 충전 전력이 표시된 케이블은 하나도 없어서 각 케이블들의 충전 용량을 확인하고 싶었다. USB-C 케이블의 충전 전력을 확인하려고 찾아보니 별도의 하드웨어를 이용해서 확인하는 방법은 있지만 장비를 구매하면서 까지 하고 싶지는 않았다. 다행히 맥 오 ……
life |2024-08-31 | Comments (0)
Puppeteer로 웹페이지 열고 조작하기
화면 없이 웹 브라우징을 할 수 있는 제품으로 기억나는 최초는 팬텀(PhantomJS)이다. 화면도 없이 브라우저를 열고 스크린 샷도 찍고 탐색하는 것이 엄청 신기했다. 지금은 개발이 중단되었다. 팬텀의 불편함을 극복해보고자 캐스퍼(CasperJS)도 나왔었는데 이것 역시 지금은 개발이 중단되었다. 아마도 퍼피티어(Puppeteer)와 플레이라이트(Playwright)같은 대안 프로젝트들이 구글과 마이크로소프트 같은 큰 회사에서 나와서 그렇게 된 것 같다. 플레이라이트가 퍼피티어를 포크해서 나왔다고 하는데 두 프로젝트는 지향하 ……
dev |2024-08-25 | Comments (0)
Node의 SQLite 지원
노드(Node)가 22.5.0 버전 부터 node:sqlite 모듈을 지원하기 시작했다. 번(Bun)이 SQLite를 지원해서 쓰고 있었는데 메모리 릭때문에 하루에 한번씩 재시작하고 있었다. 이 기회에 다시 노드로 바꿨다. node:sqlite는 아직 실험기능이어서 그냥 실행해서는 사용할 수 없고 --experimental-sqlite 플래그를 추가해줘야 한다. node --experimental-sqlite myapp.js 아스트로(Astro) 개발 서버에 이 옵션을 활성화하려고 여기저기 추가해봤는데 쉽게 되지 않 ……
dev |2024-07-27 | Comments (0)
Astro와 Bun 적용
스벨트킷에서 아스트로(Astro)로 넘어왔다. 스벨트킷은 매우 만족하고 있고 회사에서도 많이 사용하는 툴이지만 단일 페이지 어플리케이션(single page application)의 한계를 그대로 가지고 있다. :target 셀렉터를 지원하지 못하거나 .svelte가 아닌 {@html}로 랜더한 스크립트 구문이 하이드레이션 과정을 거치면 의도대로 동작을 안한다. 블로그 특성상 컨텐츠에 스크립트가 포함된 것들이 많은데 이들이 원하는대로 동작하지 않아서 결국 클라이언트 측 랜더링(client side rendering)을 끌 수 밖에 ……
dev |2024-06-06 | Comments (0)
로보락 S8 프로 울트라 사용 후기
사용하고 있던 로보락 S6가 고장났다. 레이저 센서가 돌지 않아서 청소를 시작할 수 없었다. 검색을 해보니 2만원정도에 교체용 모터를 사서 갈면 고칠 수 있을 것 같은데 배터리도 상태가 안 좋아서 그동안 계속 점찍어뒀던 S8 프로 울트라로 교체했다. S6도 물걸레 청소를 할 수는 있지만 물통도 작고 급수 필터도 계속 막혔다. 청소중에 계속 물통을 채워줘야 하고 청소가 끝나면 걸레도 따로 빨아줘야 했다. 번거롭고 성능도 별로여서 물걸레질만 하는 에브리봇 엣지도 사용해 봤는데 이것도 걸레 처리나 물 급수에는 비슷한 문제가 있어서 ……
life |2024-05-15 | Comments (0)
노드 간의 포함관계를 확인하는 contains
노드가 다른 노드를 포함하고 있는지 확인하고 싶을 때 Node.contains를 사용한다. 클릭 위치에 따라서 레이어가 열리고 닫히는 동작을 제어하고 싶을 때 유용하게 사용할 수 있다. 버튼 클릭으로 레이어를 열고 레이어가 아닌 다른 곳을 클릭 했을 때 레이어를 닫게 하는 기능은 웹에서 많이 볼 수 있다. 여는 동작은 쉬운데 닫는 동작을 구현 할 때 사용자가 클릭하는 곳을 판단하는 부분이 까다로운 부분이다. const css = document.createElement('style'); css.innerHTML = ……
dev |2024-04-21 | Comments (0)
HTTP 리다이렉션과 메서드 변경
POST 액션으로 항목을 생성을 하고 생성된 항목의 상세페이지로 리다이렉션을 시켰는데 작동하지 않았다. 맨날 쓰던 기능이 왜 작동하지 않는지 봤더니 아무 생각없이 복사해온 HTTP 코드 307(Temporary Redirect)이 문제였다. 리다이렉션을 할 때 메서드가 변경되는 경우도 있고 유지되는 경우도 있는데 307은 메서드와 바디가 유지되면서 이동되기 떄문에 원하는대로 작동하지 않은 것이었다. POST나 PUT 다음에 GET으로 페이지 이동을 할 때에는 303(See Other)이 적절하다고 한다. GET이 아닌 다른 메 ……
dev |2024-03-02 | Comments (0)