• 데이터베이스 공짜 점심 or 인증서버 구축 Supabase
• 프론트엔드 배포는 Cloudflare Pages
• 백엔드 서버는 fly.io
• 오브젝트 스토리지가 필요할땐 Cloudflare R2

너무 편하다.......

[네이버] FE News 25년 5월 소식을 전해드립니다!

사실 후자는 좀 프로토콜이랑 그 응용에 좀 더 포커스를 둔 느낌이긴 하다. 이걸 엮어서 글로 써낼지.. 아니면 강박을 내려놓고, 생각이 나는 소재로 글을 쓸지... 근데 면접 준비는 하긴 해야겠는데, 고민이다.... 스터디라도 해야하나....

웹 브라우저 엔지니어링 https://browser.engineering 고성능 브라우저 엔지니어링 https://hpbn.co

요렇게 두개 번갈아서 공부하면서 기록으로 남기면 CS 향이 첨가된 프론트엔드 면접 준비하긴 괜찮을 것 같음. 전자는 웹브라우저 구현 그 자체에 대해 다루고 있다면, 후자는 웹브라우저로 서비스를 이용하는 전반적인 사이클 + 각 단계에서 성능을 최적화하는 방법을 설명하고 있음.

Next.js 서버 액션은 서버 데이터를 가져오는 용도로 사용하기에 적합하지 않다. React 공식문서에서는 다음과 같이 말하고 있다.

Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.

서버 액션이 여러 호출되면 바로 실행되는 대신 큐에 쌓이고 순차적으로 처리된다. 이미 실행된 서버 액션은 이후 취소할 수 없다.

이에 서버 액션을 데이터 가져오기로 활용하면 끔찍해지는 UX가 생길 수 있는데, 예를 들어 페이지의 목록 검색 화면에서 검색 후 데이터를 가져오는 상황에 않았다고 다른 화면으로 네비게이션이 불가능한 것은 일반적인 경험이 아니다.

이러면 RSC를 통해 무한 스크롤을 구현하지 못하는가? 에 대해서 의문이 생길 수 있는데 여기에 대해서 대안을 발견했다.

function ServerComponent({ searchParams }) {
  const page = parseInt((await searchParams).page ?? "1", 10)
  const items = await getItems(page)
  return (
    <Collection id={page}>
      {items.map(item => <InfiniteListItem key={item.id} {...items} />)}
    </Collection>
  )
}

"use client"

function Collection({ id, children }) {
  const [collection, setCollection] = useState(new Map([[id, children]]))
  const [lastId, setLastId] = useState(id)
  if (id !== lastId) {
    setCollection(oldCollection => {
      const newCollection = new Map(oldCollection)
      newCollection.set(id, children)
      return newCollection
    })
    setLastId(id)
  }
  return Array
    .from(collection.entries())
    .map(
      ([id, children]) => <Fragment key={id}>{children}</Fragment>
    )
}

대충 이런 꼴이다. 이러고 page를 증가시키거나 감소시키는건 intesection observer나 특정 엘리먼트의 onClick 이벤트 따위를 의존하면 된다. 이러면 데이터 가져오기 패턴을 RSC 형태로 의존할 수 있다. InfiniteListItem는 서버컴포넌트, 클라이언트컴포넌트 무엇으로 구현하더라도 상관없다. 가령 아래와 같은 식:

function ServerComponent({ searchParams }) {
  const page = parseInt((await searchParams).page ?? "1", 10)
  const { items, hasNext } = await getItems(page)
  return (
    <div>
      <Collection id={page}>
        {items.map(item => <InfiniteListItem key={item.id} {...items} />)}
      </Collection>
      {hasNext && (
        <IntersectionObserver nextUrl={`/?page=${page + 1}`} />
      )}
    </div>
  )
}

검색 조건이나 검색어에 따라 상태를 초기화시키려면 다음과 같이 표현하면 된다.

function ServerComponent({ searchParams }) {
  const page = parseInt((await searchParams).page ?? "1", 10)
  const query = parseInt((await searchParams).query ?? "")
  const { items, hasNext } = await getItems(page, query)
  return (
    <div>
      <Form action="/">
        <input name="query" />
        <button />
      </Form>
      <Collection id={page} key={query}>
        {items.map(item => <InfiniteListItem key={item.id} {...items} />)}
      </Collection>
      {hasNext && (
        <IntersectionObserver nextUrl={`/?page=${page + 1}&query=${query}`} />
      )}
    </div>
  )
}

매우 PHP스럽고, 암묵적이기도 하다. 다만 RSC의 데이터 가져오기 패턴을 활용하면서 기존 컴포넌트를 최대한 재사용할 수 있게 된다는 점이 좋다.

@dogdriip 여기서 반가워욥~~!!

@z9mb1Jiwon 그에 준하는 Fluent Python 이라는 책은 있어요

@joonnotnotJoon 감사하십시오

@joonnotnotJoon 가볍게 읽을거면 Atomic Habits 요거 많은 엔지니어 블로그에서 샤라웃 받는 책이에요

바이브코딩 : 인터넷이 잘터지는 환경에서나 성립이 가능함

@hongminhee洪 民憙 (Hong Minhee) @ysh염산하 https://product.kyobobook.co.kr/detail/S000001033020 있었는데요 없었습니다

@ysh염산하 넹. 원서는 아예 오픈이에욥

진심 나 이 책 가지고 프론트엔드, SRE, 백엔드 요렇게 모아놓고 스터디 한번 해보고 싶어. 책 자체가 좀 근본이기도 하고, 각자 다른 관점의 실무를 하는데 맥락이 어떻게 이어지는지도 좀 궁금해

커서를 제대로 사용하는 12가지 방법
------------------------------
* 커서 디자이너가 말하는 커서 사용법인데, 잘 몰랐던 내용들이 있어 공유드립니다.
1. Cursor는 프로젝트 별로 규칙(Rules)을 세울 수 있음. Cursor > Setting > Cursor Settings로 접근하면 됨
2. Cursor는 .cursurignore 기능이 있어서, 테스트 케이스 파일을 편집할 수 없게 할 수 있음
3. .cursor 폴더 안에…
------------------------------
https://news.hada.io/topic?id=20595&utm_source=googlechat&utm_medium=bot&utm_campaign=1834

@parksbSimon Park 옛날에 중고등학생때 사회과목 과제로 대본 만들어서 토론 수업하는걸 재연하듯이 프롬프트 짜면 어떻게 될 것 같은 느낌적인 느낌이 듭니다...

@parksbSimon Park 이거 약간 가상의 사회자가 있고, PDF에 있는 내용을 중심으로 괜찮은 팟캐스트 포맷대로 대본만들어서 TTS 해주면 될 것 같은데요.

@bglbgl gwyng 하스켈 툴링에 많이 익숙해져야겠군요 이런,,,

@bglbgl gwyng 흠... 고민이 되네요. https://peerdh.com/blogs/programming-insights/using-ghcjs-for-haskell-to-javascript-compilation-in-web-applications-3 이런건 있는 것 같은데, Purescript By Example 같은 리소스는 어디 없나요?

@bglbgl gwyng 하스켈에 JS 컴파일도 있었어요????

프론트엔드하면서 하스켈 공부한다하면 역시 PureScript로 공부하는게 낫겠군.

@curry박준규 @joonnotnotJoon 제가 그 얘기 나올 것 같았습니다

이이이얏호우우우!

가자! 댓글 없는 청정 사회로!

フトスト!

더 이상 미룰수없다.... 5월 말이든 6월 초든 모임을 열어야겠다...

오픈 엑세스에 올라와 있는 논문들 중 소프트웨어 공학과 관련된 내용들을 편집하여 책으로 낸 것이다. 원문이 논문이라 그런지 몰라도 주장이 그렇게 혁신적이거나 새로운 것은 없다 다만 연구를 통해서 본인들의 주장에 대한 근거를 확보했다는 것이 유의미하다. 바꿔 말해 이 책에서 말하는 것들은 믿고 따라도 되는 어느 정도의 과학적 근거가 있는 이야기들. #독서

소프트웨어 엔지니어링 생산성 돌아보기
http://aladin.kr/p/7zTVn

백엔드는 모르겠고, 프론트엔드 대상으로는 많이들 권장하는 책이던데 네트워크 교과목이 실제로 어떻게 도움되는지 얘기하려면 '이거 읽는데 드는 시간이 몇배는 줄어든다' 정도로는 확 체감되게 설명은 가능할 것 같다

High Performance Browser Networking 혼자 공부하는 중인데, 학교 수업을 너무 게으르게 들은 업보를 청산하는 중........

여태까지 내가 팔로한 사람이 내가 팔로하지 않은 사람에게 단 댓글까지 타임라인에 떠서 불편하셨죠? @xiniha 님의 패치를 통해 이제 내가 팔로한 사람의 글이라도 내가 팔로하지 않은 사람에게 단 댓글인 경우에는 타임라인에 표시되지 않도록 수정되었습니다. 아, 그래도 여전히 내가 팔로한 사람의 프로필에 들어가면 그 사람의 모든 댓글을 다 볼 수 있긴 합니다.

기여해 주신 @xiniha 님께 감사드립니다.

시스템 설계 면접 완벽 가이드 - 노련한 소프트웨어 엔지니어가 되기 위한 시스템 설계의 모든 것 (지용 탄 (지은이), 나정호 (옮긴이) / 위키북스 / 2025-05-15 / 35,000원) https://feed.kodingwarrior.dev/r/MgKsYb

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=363273501&partner=openAPI&start=api

Rust로 작성한 JPEG XL 디코더, jxl-oxide의 버전 0.12.0을 릴리스했습니다. https://github.com/tirr-c/jxl-oxide/releases/tag/0.12.0

CMYK 프로파일 등 복잡한 ICC 프로파일을 지원하기 위해 기존에 사용하던 Little CMS 2 (lcms2) 에 더해, Rust로 작성된 색 관리 시스템인 moxcms 지원을 추가한 것이 주요 변경사항입니다. CLI 툴의 기본 CMS는 아직 lcms2이지만 --cms moxcms 옵션으로 moxcms를 사용할 수 있습니다.

@bglbgl gwyng rebase는 CLI에서 하는게 훨씬 편하더라구요......

@ysh염산하 레이텍과는 완전 다른 신택스입니다. 비슷하긴 하지만요. 확실히 조판용 랭귀지로 찍어내니까 포매팅이 너무 깔끔하네요...

Typst로 이력서 쓰고 있는데 너무 재밌다...... 예전에는 Typst가 학습곡선이 있긴 했어서 에라 모르겠다하고 던졌는데, LLM이 알아서 잘 뽑아줌 + Typst 웹 에디터가 자동완성 기능을 잘 지원해주기도 하고 미리보기 기능도 제법 괜찮아서 도파민이 뿜뿜하고 뿜어져나옴

Excited to share that we just released ESMeta v0.6.0! Here's two new features that we're really excited about in this release. Since this is my personal account, I won't be introducing the entire toolchain, but if you're curious, check out on https://github.com/es-meta/esmeta/ (1/n)

1. VimConf 제안서 작성
2. PyCon KR CFP 자료 85퍼센트 정도 채워넣기 (바이브 코딩 관련)
3. Fediverse 앱 개발
4. 이력서 작성
5. High Performance Browser Networking Part1 완주
6. React 공식 문서 완주

???????????? 해커뉴스 100????

RE: https://social.lansky.name/@hn100/114393868459027597

Creating your own federated microblog

Link: https://fedify.dev/tutorial/microblog
Discussion: https://news.ycombinator.com/item?id=43780785

Creating your own federated microblog
L: https://fedify.dev/tutorial/microblog
C: https://news.ycombinator.com/item?id=43780785
posted on 2025.04.24 at 05:37:57 (c=0, p=8)

간만에 필받아서 aider 커꾸(commit 꾸미기) 함.
gum 이라는 훌륭한 쉘꾸 도구 + git pretty format + delta 썼어요

# Define the git log format string with color formatting for better readability
local GIT_FORMAT="%C(bold yellow)Hash:%C(reset) %C(bold cyan)%h%C(reset) %C(dim white)(%cd)%C(reset)%n"
GIT_FORMAT+="%C(bold yellow)Author:%C(reset) %C(bold white)%an%C(reset) %C(dim white)<%ae>%C(reset)%n"
GIT_FORMAT+="%C(bold yellow)Message:%C(reset) %C(bold white)%s%C(reset)"

# Define the date format
local DATE_FORMAT="%Y-%m-%d %H:%M:%S"

# Perform the commit with aider and show a styled commit summary
aider --commit && \
gum style \
  --border rounded \
  --padding "0 2" \
  --border-foreground 39 \
  "$(git log -1 \
      --pretty=format:"$GIT_FORMAT" \
      --date=format:"$DATE_FORMAT" \
      --color=always)" && \

# Show detailed changes using delta for side-by-side diff with line numbers
git show -1 --color=always --stat --patch | delta --side-by-side --line-numbers

스프레드시트도 FRP다-

🤔

Protocols such as ActivityPub are widely used and useful, but unfortunately are not the best option when efficiency is important. Messages are in plain JSON format, which is wasteful, and extensions by various implementations complicate the implementation.

XQ's focus on replacing JSON with Protocol Buffers seems misguided. While serialization efficiency matters, ActivityPub's fundamental bottlenecks are in its multi-hop network architecture and request patterns. Optimizing message format without addressing these core architectural inefficiencies is like polishing doorknobs on a house with structural issues. True performance gains would require rethinking the communication model itself.

https://github.com/misskey-dev/xq

DuckDB 인 액션 - SQL만 알면 되는 로컬 데이터 분석, DuckDB로 가볍게 시작한다 (마크 니드햄, 마이클 헝거, 마이클 시몬스 (지은이), 김의윤 (옮긴이) / 인사이트 / 2025-05-07 / 28,000원) https://feed.kodingwarrior.dev/r/qmINu5

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=362832219&partner=openAPI&start=api

내가 제일 좋아하는 프로그래밍 문법, "파이프라이닝"
------------------------------
- *파이프라이닝* 은 프로그래밍 언어에서 코드의 가독성과 유지보수성을 높이는 중요한 기능임
- *데이터 흐름을 왼쪽에서 오른쪽, 위에서 아래로 자연스럽게* 표현할 수 있게 해주는 방식
- Rust 와 같은 언어에서 파이프라이닝은 코드의 흐름을 명확하게 하고, IDE 의 자동 완성 기능을 통해 개발 생산성…
------------------------------
https://news.hada.io/topic?id=20473&utm_source=googlechat&utm_medium=bot&utm_campaign=1834

랭체인으로 RAG 개발하기 : VectorRAG & GraphRAG - 현직 AI Specialist에게 배우는 RAG! 파이썬, 오픈AI, Neo4j로 실습하며 개념과 원리를 이해하고, 오픈AI와 딥시크 비교 분석까지! (서지영 (지은이) / 길벗 / 2025-04-25 / 29,000원) https://feed.kodingwarrior.dev/r/9pIEy7

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=362807100&partner=openAPI&start=api

미래의 기술은 'AI'가 아니라 '집중력'임
------------------------------
- LLM은 반복 작업 자동화와 브레인스토밍 등에 유용하지만, *맹목적인 의존은 문제 해결 능력 저하를 초래할 수 있음*
- 특히 *새로운 문제에 대한 LLM의 신뢰도는 낮아* , 인간 엔지니어의 판단력이 중요함
- 구글 같은 검색엔진은 탐색과 활용의 균형을 제공하지만, LLM은 즉시 ‘활용’(exploitation)만 유…
------------------------------
https://news.hada.io/topic?id=20458&utm_source=googlechat&utm_medium=bot&utm_campaign=1834

@rangho_220우주스타 아이도루 랭호 🌠 않이 이게 대체 뭔 상황인데여 ㅋㅋㅋㅋㅋㅋ

Inside ArXiv

Link: https://www.wired.com/story/inside-arxiv-most-transformative-code-science/
Discussion: https://news.ycombinator.com/item?id=43738478

Vibe 코딩은 저품질 작업에 대한 변명이 될 수 없어요
------------------------------
- *AI 기반 바이브 코딩* 은 혁신적이지만, *품질 없는 속도는 위험* 하다는 경고의 글

"더 빨리 움직이고, 더 많이 망가뜨려라"
"vibe coding, 두 명의 엔지니어가 50명의 기술 부채를 만들어낼 수 있는 방식"

와, 이거 진짜 짱이다 cc @joonnotnotJoon

RE: https://sns.lemondouble.com/notes/a6u5i9ytto