Javascript/Typescript 생태계에는 소스코드 간 의존관계를 유향그래프(Direct Graph)로 시각화하는 CLI 도구가 있다는 사실... 알고 계신가요? madge, 적극적으로 추천합니다.
그냥 JS/TS 프로젝트 뿐만이 아니라, jsx 파일이 들어간 경우도 의존관계를 아름답게 시각화해줍니다. fedify 소스코드 통독하면서 이걸 적극적으로 써볼까 합니다. 마치.... 탐정이 사건 추적하면서 지도에 X 표시하는 감성으로...
Jaeho Lee
@jaeholee@hackers.pub · 45 following · 32 followers
ui dev
(트위터에 버릇처럼 글을 썼다가 여기 계정이 있다는 것을 생각하고.. 다음부턴 개발 관련 끄적임은 좀 의식적으로 여기에 써보기로..)
https://gpui.rs 는 zed 의 UI framework 인데, 이거 기반으로 desktop ui 프로젝트 시도도 있는듯. https://github.com/longbridge/gpui-component https://longbridge.com/desktop/ zed 가 지금은 한글 입출력이 좋은 것 처럼, iced, egui 에 비해 한글 입출력도 좋을거라 생각. 그나저나 longbridge 는 홍콩 회사인 것 같은데 gpui 를 굳이 저정도로(?) 썼다. 물론 이런 작업 굳이 한 쪽으로는 iced 개발자가 있는 cryptowatch 도 있긴 하다 (kraken 에 인수인데 desktop app 이 rust + iced)
egui 의 경우 사실 https://github.com/topki0325/egui-chinese-font/blob/ce80cb38b4d12e2542a6be2ddbaf5ca213e88a31/src/lib.rs#L126 폰트 문제에 가까운 것 같긴 함 (저 경로에 대해 걍 산돌고딕 폰트 경로 잡아주면 한글 출력도 되고 입력도 됨)
아쉽게도 아직 커스텀 커맨드 기능이 없는 듯…
Gemini CLI가 미쳐 날뛰기 시작했다…
tanstack query의 initialPageParam에 대하여 오늘 배운 것
자손킴 @jasonkim@hackers.pub
TanStack Query의 `useInfiniteQuery` 훅을 사용할 때 `initialPageParam`이 어떻게 동작하는지에 대한 중요한 통찰을 공유합니다. 이 훅은 초기 렌더링 시 `initialPageParam`을 `pageParams[0]`으로 설정하고, 동일한 `queryKey`를 가진 캐시가 유지되는 동안 이 값을 계속 사용합니다. 따라서 여러 컴포넌트에서 동일한 `queryKey`로 `useInfiniteQuery`를 호출하면서 다른 `initialPageParam` 값을 제공하더라도, 처음 호출된 `initialPageParam` 값으로 고정됩니다. 이는 시작 커서가 다를 경우 `queryKey`를 다르게 지정해야 함을 의미합니다. 이러한 동작은 이해하고 나면 당연하지만, 익숙하지 않은 개발자에게는 혼란스러울 수 있습니다. `initialPageParam`이 `queryKey`와 강하게 연결되어 있다는 점이 InfiniteQueryOptions에서 타입 제약으로 더 명확하게 표현된다면 개발 경험이 향상될 것입니다.
Read more →
How to pass the invisible
洪 民憙 (Hong Minhee) @hongminhee@hackers.pub
This post explores the enduring challenge in software programming of how to pass invisible contextual information, such as loggers or request contexts, through applications without cumbersome explicit parameter passing. It examines various approaches throughout history, including dynamic scoping, aspect-oriented programming (AOP), context variables, monads, and effect systems. Each method offers a unique solution, from the simplicity of dynamic scoping in early Lisp to the modularity of AOP and the type-safe encoding of effects in modern functional programming. The post highlights the trade-offs of each approach, such as the unpredictability of dynamic scoping or the complexity of monad transformers. It also touches on how context variables are used in modern asynchronous and parallel programming, as well as in UI frameworks like React. The author concludes by noting that the art of passing the invisible is an eternal theme in software programming, and this post provides valuable insights into the evolution and future directions of this critical aspect of software architecture.
Read more →
오늘 발견한 흥미로운 링크들: Matt 타입스크립트 선생님은 종종 Effect 에 대해 트윗하는데 주로 이펙트를 찍먹해보시고 이걸 강의로 만들까말까 만들까말까 하신다. Michael EffectTS 의 BDFL 은 종종 맷 선생의 트윗에 답글을 달아 이펙트 얘기를 풍부하게 가꿔주신다.
오늘은 이펙트의 굿파츠에 대한 얘기로 스레드가 열렸다. https://x.com/mattpocockuk/status/1936083553483157714
나도 EffectTS 도입을 하고 싶지만 여러모로 기존 바닐라JS 스펙과 다른 모양의 코드가 나와서 여러모로 망설이고 있다. (내 기준 이펙트는 실행 코드를 작성하기 보다 실행 계획을 작성하는 개념으로 접근하고 있다) 프로덕션 코드를 새로 만든다면 EffectTS 도입을 고려하고 있지만 학습 난의도가 있어 이를 위해 함께 스터디하고 코드 마이그레이션 계획도 세워야하는데, 그럴 여유는 보통 없는게 현실.
아직은 neverthrow 부터 사용해보는 정도가 지금의 최선이라고 생각한다. 나는 throw 기반의 조건 제어 코드가 불편하다. try catch 안에서 if 절로 throw 하는 코드를 볼 때마다 불만이다. 복구할 수 있는 에러는 throw 하지 않는게 옳다고 생각한다. 물론 언어의 문제도 있지만... 그렇게 스레드를 읽던 중 effectively 라는 애매한 이름의 Alegbraic effects 를 구현한 라이브러리가 공개되어 있다는 것을 발견했다. 작성자 본인도 뻔뻔하게 홍보한다고 어필하고 있다. ;) effectively
EffectTS 라는 이름도 애매하지만 Effectively 는 더 애매하다. 인기가 많아지기 전에 그럴듯 한 이름으로 브랜딩되면 좋겠다. 아, 그렇게 생각하는 이유는 TS 씬에 이런 라이브러리/프레임워크가 자주 거론되면 좋겠다는 생각 때문이다.
얘기하고 싶은 것은, 아이러니하게 이 effectively 의 readme 가 매우 간결하고 읽기 쉽게 EffectTS 에 대해 소개하고 있기 때문이다. effect.website 의 문서는 뭔가 개선이 필요하다. 없는게 없이 다 있지만 실제 읽다보면 어려운 부분이 많고 더 많은 설명이나 예제가 필요한 경우가 생긴다. 미카엘 본인도 문서 개선 필요는 공감하는 것 같다. (해당 스레드 발언 추정) 그리고 또 다른 유저가 포스트를 안내해주셨는데, Effect-like code without Effect 짧게 읽기 좋다. 게다가 이 포스트가 담긴 사이트의 프로덕트도 유용해 보인다.
시작부터 Result 나 Optional 을 제공하는 언어가 많은 소프트웨어 엔지니어들에게 높은 선호도를 가지는 이유가 있다고 본다.
Existential Lens란걸 알게되었는데 정의는 다음과 같다
data Lens s a = forall c. Lens (s -> (c, a)) ((c, a) -> s)돌무식 렌즈(get, set 레코드)보다는 좀더 어렵지만 Van Laarhoven Lens보다는 훨씬 더 직관적이라서 렌즈의 이해에 도움이 많이 되었다.
전체 설명은 요깄다.
오늘 
- SolidStart 기본적인 사용법
- SolidStart 위에서 GraphQL 질의해서 결과 갖다 쓰는 법
- GraphQL + Relay에서 커넥션에 추가 필드 끼워넣는 법
- SolidStart에서 shadcn/ui…가 아니라 solid-ui 쓰는 법
그리고 배운 건 아니고 그냥
- Lingui를 이용한 국제화 세팅
- Deno를 쓰기 때문에 생기는 온갖 트러블들 해결
이제 이 새로운 스택으로 Hackers' Pub을 재구현하기만 하면 된다…! 다행히 도메인 모델은 분리되어 있어서, UI 위주로 재작성하면 될 것 같다.
The abbreviation #a11y itself is not very accessible. #accessibility