Hi, I'm who's behind Fedify, Hollo, BotKit, and this website, Hackers' Pub!

Fedify, Hollo, BotKit, 그리고 보고 계신 이 사이트 Hackers' Pub을 만들고 있습니다.

FedifyHolloBotKit、そしてこのサイト、Hackers' Pubを作っています。

嗨,我是 FedifyHolloBotKit 以及這個網站 Hackers' Pub 的開發者!

Website
hongminhee.org
GitHub
@dahlia
Hollo
@hongminhee@hollo.social
DEV
@hongminhee
velog
@hongminhee
Qiita
@hongminhee
Zenn
@hongminhee
Matrix
@hongminhee:matrix.org
X
@hongminhee
0

문법 강조가 바뀔 때가 한참 지난 것 같은데, AI가 별의별 걸 다하는 세상에 아직도 눈에 보이는 소식들이 없네요. 예를 들면, 식별자(변수), 함수, 등 문법 요소에 따라 색을 입힌다거나 하는 게 아닌,
전역이냐, 로컬이냐로 색을 달리 한다든지,
오른쪽 우선 결합 연산자면 빨간색, 왼쪽 우선 결합이면 파란색 한다든지,
시맨틱 문법 강조가 일반화 될 때가 된 것 같은데, 혹시 저만 모르고 있는 건가요?

2

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 →
11
1
0

洪 民憙 (Hong Minhee) shared the below article:

tanstack query의 initialPageParam에 대하여 오늘 배운 것

자손킴 @jasonkim@hackers.pub

TanStack Query의 `useInfiniteQuery` 훅을 사용할 때 `initialPageParam`이 어떻게 동작하는지에 대한 중요한 통찰을 공유합니다. 이 훅은 초기 렌더링 시 `initialPageParam`을 `pageParams[0]`으로 설정하고, 동일한 `queryKey`를 가진 캐시가 유지되는 동안 이 값을 계속 사용합니다. 따라서 여러 컴포넌트에서 동일한 `queryKey`로 `useInfiniteQuery`를 호출하면서 다른 `initialPageParam` 값을 제공하더라도, 처음 호출된 `initialPageParam` 값으로 고정됩니다. 이는 시작 커서가 다를 경우 `queryKey`를 다르게 지정해야 함을 의미합니다. 이러한 동작은 이해하고 나면 당연하지만, 익숙하지 않은 개발자에게는 혼란스러울 수 있습니다. `initialPageParam`이 `queryKey`와 강하게 연결되어 있다는 점이 InfiniteQueryOptions에서 타입 제약으로 더 명확하게 표현된다면 개발 경험이 향상될 것입니다.

Read more →
6
0
0
2
1
9
3

洪 民憙 (Hong Minhee) shared the below article:

VitePress localSearchPlugin 버그 디버깅하기

Lee Dogeon @moreal@hackers.pub

이 글은 Zenn 트렌드 봇 제작 중 VitePress 로컬 검색 기능의 버그를 발견하고 수정하는 과정을 담고 있습니다. Fedify 문서에서 검색 기능이 제대로 작동하지 않는 것을 확인한 후, 코드 블록 내의 특정 마크다운 문법(`markdown-it-jsr-ref` 플러그인)이 문제임을 밝혀냈습니다. VitePress의 `localSearchPlugin.ts` 파일을 분석하여, 헤딩 내의 `<a>` 태그를 처리하는 정규식의 non-greedy한 특성이 버그의 원인임을 알아내고, 정규식에서 `?` 기호를 제거하여 문제를 해결했습니다. PR을 통해 수정 사항을 제안하고 빠르게 머지된 경험을 공유하며, 디버깅 과정과 PR 준비에 대한 회고와 함께 개선점을 제시합니다. 이 글은 문제 해결 과정과 디버깅 경험을 통해 독자들에게 인사이트를 제공합니다.

Read more →
3
4
3
6

뭔가를 잘 설명하는 방법에 대해 생각해봤는데. 일단 내가 어떤 내용을 말하고 싶은 욕구를 참아내야다. 어떤 재치있는 비유를 꼭 써야겠다거나, 아니면 '통찰'을 전달하고 싶다거나.

대신 상대방의 무지에 공감해야한다. 그 무지란게, 많은 경우 진짜 멍청해서 그런게 아니라, 대충 얼개는 파악하고 있음에도 뜬금없는 부분에서 뜬금없는 오해를 하고 있어서 완전한 이해를 막는다거나 하는 경우가 많다. 그래서 그 귀여운 멍청을 함께 디버깅해야한다. 요게 지식뿐만 아니라 공감능력이 필요한 부분.

12

안녕하세요 이번에 신입 개발자 취업에 성공하게 되었는데 두 회사중에서 고민중입니다.

두 곳 모두 프론트엔드 직무고, 최종 합격은 했는데 방향이 너무 달라서 글 올려봅니다!

1. 웹페이지 제작 전문 회사 (정규직)

  • 고용 형태: 정규직 (풀타임)
  • 기술 스택: PHP 기반의 오픈소스 콘텐츠 관리 시스템(CMS) + JS/TS
  • 업무 내용: 홈페이지 리뉴얼 및 내부 시스템 개발 등
  • 장점
    • 제가 기술 도입을 주도할 수 있는 환경인듯 합니다
    • 프론트엔드 개발의 모든 범위를 직접 경험 가능
  • 단점
    • 레거시 기반 스택 중심
    • 최신 기술 도입은 가능하나, 대부분 혼자 해결해야 할 수도 있음 (사수 없습니다!)

2. 어느 정도 규모 있는 보안쪽 IT 자회사 (인턴)

  • 고용 형태: 인턴 (하루 5시간, 약 4개월)
  • 기술 스택: React
  • 업무 내용: 보안 관련 웹 페이지 개발 일부 참여
  • 장점
    • React 기반의 실무 경험
    • 체계적이고 안정적인 조직 문화 기대
  • 단점
    • 실무 범위가 제한적일 수 있음
    • 인턴 기간 이후엔 다시 취업 준비를 해야 함 (정규직 전환 없습니다!)

많은 의견 주시면 감사드리겠습니다!

1

안녕하세요 이번에 신입 개발자 취업에 성공하게 되었는데 두 회사중에서 고민중입니다.

두 곳 모두 프론트엔드 직무고, 최종 합격은 했는데 방향이 너무 달라서 글 올려봅니다!

1. 웹페이지 제작 전문 회사 (정규직)

  • 고용 형태: 정규직 (풀타임)
  • 기술 스택: PHP 기반의 오픈소스 콘텐츠 관리 시스템(CMS) + JS/TS
  • 업무 내용: 홈페이지 리뉴얼 및 내부 시스템 개발 등
  • 장점
    • 제가 기술 도입을 주도할 수 있는 환경인듯 합니다
    • 프론트엔드 개발의 모든 범위를 직접 경험 가능
  • 단점
    • 레거시 기반 스택 중심
    • 최신 기술 도입은 가능하나, 대부분 혼자 해결해야 할 수도 있음 (사수 없습니다!)

2. 어느 정도 규모 있는 보안쪽 IT 자회사 (인턴)

  • 고용 형태: 인턴 (하루 5시간, 약 4개월)
  • 기술 스택: React
  • 업무 내용: 보안 관련 웹 페이지 개발 일부 참여
  • 장점
    • React 기반의 실무 경험
    • 체계적이고 안정적인 조직 문화 기대
  • 단점
    • 실무 범위가 제한적일 수 있음
    • 인턴 기간 이후엔 다시 취업 준비를 해야 함 (정규직 전환 없습니다!)

많은 의견 주시면 감사드리겠습니다!

4

Windows Active Directory 관리자는 자사 PC들에 설치된 Microsoft Office 의 정품 인증 방식을 지정할 수 있습니다. 전혀 몰랐습니다.

예를 들어, 자사 PC에는 오직 자사에서 사용중인 볼륨 라이센스키만 설치되도록 하고, 그 이외의 키를 사용하는 건 아예 AD 레벨에서 막아버리는 겁니다.

회사에 따라서는 AD관리 부서에서 이런 디테일을 모르는 경우도 있고, Microsoft Teams 관리 부서에서만 이런 디테일을 알고 있는 경우도 있네요.

사실, 문제가 Windows On Arm 때문에 생기는 것인지를 걱정하고 있었는데. 의외로 Windows On Arm 은 별 탈 없이 잘 돌아가네요.

이렇게 계속 독특한 경험을 늘려가고 있습니다.

조만간 eBay 에서 주문한 Windows Dev Kit 2023이 도착하면 좀더 폭넓은 배움을 가질 수 있겠지요. 아마. 아마도.

홍콩의 Minisforum 이라는 브랜드의 기기도 슬슬 올 때가 되었습니다. 언제쯤 오려나.

집에서 쓰던 4포트 4K KVM을 일터로 옮겨두었는데, 조만간 8포트 8K KVM을 진지하게 알아봐야 하겠습니다. (좋아하던 4포트 4K KVM은 어째 재고가 다 사라진 거같습니다.)

아, 최근에 신기한 현상이 있었는데요. 어떤 KVM 제조사가 4K라고 소개해놓고, 매뉴얼에만 1080p 라고 적어둔 걸 보고 환불소동을 겪었습니다.

제조사가 상품소개로 거짓말을 하는 것 같은데... 평지풍파를 일으키지 않으려면...

0

Windows Active Directory 관리자는 자사 PC들에 설치된 Microsoft Office 의 정품 인증 방식을 지정할 수 있습니다. 전혀 몰랐습니다.

예를 들어, 자사 PC에는 오직 자사에서 사용중인 볼륨 라이센스키만 설치되도록 하고, 그 이외의 키를 사용하는 건 아예 AD 레벨에서 막아버리는 겁니다.

회사에 따라서는 AD관리 부서에서 이런 디테일을 모르는 경우도 있고, Microsoft Teams 관리 부서에서만 이런 디테일을 알고 있는 경우도 있네요.

사실, 문제가 Windows On Arm 때문에 생기는 것인지를 걱정하고 있었는데. 의외로 Windows On Arm 은 별 탈 없이 잘 돌아가네요.

이렇게 계속 독특한 경험을 늘려가고 있습니다.

조만간 eBay 에서 주문한 Windows Dev Kit 2023이 도착하면 좀더 폭넓은 배움을 가질 수 있겠지요. 아마. 아마도.

홍콩의 Minisforum 이라는 브랜드의 기기도 슬슬 올 때가 되었습니다. 언제쯤 오려나.

집에서 쓰던 4포트 4K KVM을 일터로 옮겨두었는데, 조만간 8포트 8K KVM을 진지하게 알아봐야 하겠습니다. (좋아하던 4포트 4K KVM은 어째 재고가 다 사라진 거같습니다.)

아, 최근에 신기한 현상이 있었는데요. 어떤 KVM 제조사가 4K라고 소개해놓고, 매뉴얼에만 1080p 라고 적어둔 걸 보고 환불소동을 겪었습니다.

제조사가 상품소개로 거짓말을 하는 것 같은데... 평지풍파를 일으키지 않으려면...

5
1
1

@xiniha.devXiNiHa 흠… 이거, export default { fetch() { … } }하는 모듈을 바로 실행해 주는 커맨드가 있으면 매뉴얼 쓰기 아주 용이할 것 같은데, 그런 건 안 보이네요… 현재는 이런 식으로 설명하고 있거든요.

1
1
1

안 그래도 마침 BotKit에 Node.js 호환성을 추가하고 매뉴얼을 쓰고 있는데, Node.js에는 deno serve 같은 게 없어서 설명할 게 너무 많아진다… node --serve --transform-types bot.ts 이렇게 할 수만 있다면 딱 좋은데!

1

If you're building a JavaScript library and need logging, you would love LogTape
hackers.pub/@hongminhee/2025/l

0

If you're building a JavaScript library and need logging, you would love LogTape

hackers.pub/@hongminhee/2025/l

1

Arstechnica 에서 이런 글을 보았습니다.

A history of the Internet, part 2: The high-tech gold rush begins

제가 이것저것의 역사에 대하여 흥미가 많다는 말을 여기에 쓴 적이 있던가요? 게임이라거나 컴퓨팅이라거나 ...

사실 대강의 사연을 알고있던 저 2편보다는, 제가 모르던 사연이 더 많은 1편 An Ars Technica history of the Internet, part 1이 더욱 흥미로웠습니다.

그 와중에 글을 쓰는 방식과 디테일들이 마음에 들어서 글쓴사람을 클릭해보니 와우' -' 보물창고가 쨘 하고 나타나는 것이었습니다.

일단 처음에 눈에 띄여서 이 시리즈를 읽었습니다. 재미있었어요.

그래서 ARM의 원래 이름은 Acorn RISC Machine. 도토리 RISC 머신이었던 것입니다 ' -' ...

다음에는 Amiga 의 역사를 읽어볼 생각이에요. 두근두근.

3
0
1
2
9
4
2
3
4

Windows NT라는 이름은 David Cutler의 말장난에서 비롯되었다고 한다. 그가 DEC에서 일할 적에 만든 운영체제가 VMS인데, Microsoft로 옮긴 뒤에 VMS를 계승한다는 의미에서 VMS의 각 알파벳을 한 글자씩 뒤로 미룬[1] WNT를 코드네임으로 썼던 것.


  1. V → W, M → N, S → T. ↩︎

6
1
2

레거시 서비스의 HTML 구조를 정리하는 김에 부분을 점검하려고 Claude/ChatGPT/Gemini에게 물어봤다. header>h1(서비스 이름), main>h2(포스트), main>article>h?(포스트 제목) 구조에서 h1/h2/h3 중 무엇을 사용하는게 좋겠는지?

- Claude - 예상하던 답 중에 가장 안 좋은 답(h3)을 내놓고 쓸만한 부연 없이 종료. 보다 나은 답을 바라면 프롬프트를 더 던져봐라 느낌쓰?
- ChatGPT - h1/h2/h3 각각 타당한 이유를 설명하고 h2~h1>h3 순서로 추천. 당신이 끌리는 쪽이 답이다라는 느낌. 왜 ChatGPT에 홀리는 사람이 많은지 알겠더라. 은근히 요망해
- Gemini - ChatGPT와 비슷하지만 보다 간결하게 정리. h1>h2로 추천.

Gemini의 답변이 흥미로워서 몇 가지 더 물어봤더니 "<h1> 사용에 대한 오해와 진실" "왜 h3가 적절하지 않나?" "article 내 h1 사용과 검색 엔진" 등을 설명. 특히 마무리가 인상 깊었는데,

> 구글의 공식 입장:
> 구글의 검색 담당자인 존 뮬러(John Mueller)는 여러 차례 "한 페이지에 여러 개의 h1이 있어도 문제가 되지 않는다"고 언급했습니다. 그는 h1 태그가 페이지 구조를 이해하는 데 도움이 되지만, 필수적인 것은 아니며 여러 개를 사용해도 SEO에 불이익을 주지 않는다고 분명히 밝혔습니다. 구글은 태그 자체보다 콘텐츠의 질과 논리적인 구조에 더 중점을 둡니다.

와우

1

보통 신분증같이 어떤 대상이 무엇이다를 확인해 줄 수 있는 것들을 Identity라 합니다. 왜 항등이 Identity일까 쓸데 없이 궁금함이 있었는데요. 다음과 같이 상상하면 얼추 그럴 수 있겠다 싶습니다.

더하기 연산자를 <+0> <+1> <+2> 로 정의해서
1 <+0> 2 = 3
1 <+1> 2 = 4
1 <+2> 2 = 5
라고 할 때, 지금 내가 쓰고 있는 더하기 연산자가 어떤 연산을 하는지 알려면 0과 연산을 해보면 알 수 있다. 1 <+2> 0 = 3
결과를 보고, <__> 안의 성질, 즉 연산의 고유 성질을 알아낼 수 있다.

1 <__> 0 = 1 이 나와야 항등원이니, 위의 말이 말그대로 항등원이란 건 아니고,

항등원Identity Element으로 연산의 고유 성질이 뭔지 볼 수 있는 도구가 될 수 있다는 걸 보이는 설명입니다.

이래서 항등원을 Identity Element라고 하는 것 아닌가... 하는 상상입니다.

@lionhairdino 연산은 정의하려면 아무렇게나 정의할수있고, 같은 항등원을 가지는 다른 연산도 여러개 만들수 있잖아요. 그래서 항등원 자체로 연산에 대해 뭔가 많은걸 알려준다고 보긴 힘들다고 생각합니다. a + b, max(a, b), a + b + ab 모두 0을 항등원으로 갖죠. 그냥 연산을 수행하기 전과 후가 identical해서 identity아닌가 싶네요.

2

아마 반대일거에요. 라틴어 identitas 등으로 거슬러 올라가보면 같다, sameness라는 뜻이 먼저 있었고, uniquness나 selfhood의 의미는 나중에 생긴 것으로 보여요
출처: wiktionary


RE: https://hackers.pub/ap/notes/01979a79-f06b-76c1-9cc5-ed3ab7a2f5df

3

If you're building a JavaScript library and need logging, you'll probably love LogTape

洪 民憙 (Hong Minhee) @hongminhee@hackers.pub

LogTape offers a novel approach to logging in JavaScript libraries, designed to provide diagnostic capabilities without imposing choices on users. Unlike traditional methods such as using debug packages or custom logging systems, LogTape operates on a "library-first design" where logging is transparent and only activated when configured. This eliminates the fragmentation problem of managing multiple logging systems across different libraries. With zero dependencies and support for both ESM and CommonJS, LogTape ensures minimal impact on users' projects, avoiding dependency conflicts and enabling tree shaking. Its universal runtime support and efficient performance make it suitable for various environments. By using a hierarchical category system, LogTape prevents namespace collisions, offering a seamless developer experience with TypeScript support and structured logging patterns. LogTape provides adapters for popular logging libraries like Winston and Pino, bridging the transition for users invested in other systems. Ultimately, LogTape offers a way to enhance library capabilities while respecting users' preferences and existing choices, making it a valuable consideration for library authors.

Read more →
9

보통 신분증같이 어떤 대상이 무엇이다를 확인해 줄 수 있는 것들을 Identity라 합니다. 왜 항등이 Identity일까 쓸데 없이 궁금함이 있었는데요. 다음과 같이 상상하면 얼추 그럴 수 있겠다 싶습니다.

더하기 연산자를 <+0> <+1> <+2> 로 정의해서
1 <+0> 2 = 3
1 <+1> 2 = 4
1 <+2> 2 = 5
라고 할 때, 지금 내가 쓰고 있는 더하기 연산자가 어떤 연산을 하는지 알려면 0과 연산을 해보면 알 수 있다. 1 <+2> 0 = 3
결과를 보고, <__> 안의 성질, 즉 연산의 고유 성질을 알아낼 수 있다.

1 <__> 0 = 1 이 나와야 항등원이니, 위의 말이 말그대로 항등원이란 건 아니고,

항등원Identity Element으로 연산의 고유 성질이 뭔지 볼 수 있는 도구가 될 수 있다는 걸 보이는 설명입니다.

이래서 항등원을 Identity Element라고 하는 것 아닌가... 하는 상상입니다.

2
0