leedc0101

실제 비교 날짜: D-1 = 2026-04-15 vs D-2 = 2026-04-14

📊 포트폴리오 브리핑 | 2026-04-16 KST

---

1) 변동 요약 (계좌별)

💼 main 증가

• 평가금액: 42,446,950원 → 42,613,504원 (+166,554원)

leedc0101

원문 제목: Six bugs that only appeared after real users installed my React security library 원문 링크: https://dev.to/nedunuri_anurag/six-bugs-that-only-appeared-after-real-users-installed-my-react-security-library-29mk 번역일: 2026-04-16 KST

한국어 번역

작성자는 민감한 폼 입력값을 DOM 바깥으로 격리하기 위해 FieldShield라는 React 보안 입력 라이브러리를 만들었다. 핵심 아이디어는 단순하다. DOM에는 항상 xxxxx 같은 마스킹 문자만 남기고, 실제 값은 Web Worker 메모리 안에만 보관한다. 제출 시점에만 명시적으로 실제 값을 꺼낸다. 개발 환경에서는 완벽하게 보였지만, 실제 사용자가 npm으로 설치해 다양한 번들러와 CSS 환경에서 써보자 예상 못 한 버그가 터졌다.

첫 번째 치명적 문제는 워커 파일 경로였다. 작성자 로컬의 Vite 개발 환경에서는 절대 경로 기반 워커 로딩이 동작했지만, 소비자 프로젝트에서는 해당 파일이 node_modules 아래에 있어 dev server가 경로를 서빙하지 못했다. 결과적으로 입력이 비어 보였다. 해결책은 워커 소스를 번들에 인라인하고 blob URL로 생성하는 방식이었다. 글은 이 문제를 최근의 패키징 실수 사례와 연결하며, 배포 전 npm pack --dry-run을 반드시 확인하라고 강조한다.

leedc0101

📊 포트폴리오 브리핑 | 2026-04-17 KST

실제 비교 날짜: D-1 = 2026-04-16 vs D-2 = 2026-04-15

---

1) 변동 요약 (계좌별)

💼 main 하락

• 평가금액: 42,613,504원 → 42,796,605원 (+183,102원)

leedc0101

Router cache and request memoization

• 원문 제목: Router cache and request memoization
• 원문 링크: https://dev.to/peterlidee/router-cache-and-request-memoization-3gi1
• 정리일: 2026-04-17 KST
• 정리 방식: 원문 저작권을 존중해 전문 번역 대신 한국어 상세 요약 제공

핵심 요약

이 글은 Next.js App Router 캐싱을 이해할 때 가장 헷갈리는 두 층인 router cache와 request memoization을 분리해서 설명한다. 핵심은 둘 다 "같은 데이터를 다시 요청하지 않게 해준다"는 공통점이 있지만, 수명과 적용 범위가 완전히 다르다는 점이다.

1) Router cache는 브라우저 메모리에 있는 클라이언트 캐시다

leedc0101

Router cache and request memoization

• 원문 제목: Router cache and request memoization
• 원문 링크: https://dev.to/peterlidee/router-cache-and-request-memoization-3gi1
• 정리일: 2026-04-17 KST
• 정리 방식: 원문 저작권을 존중해 전문 번역 대신 한국어 상세 요약 제공

핵심 요약

이 글은 Next.js App Router 캐싱을 이해할 때 가장 헷갈리는 두 층인 router cache와 request memoization을 분리해서 설명한다. 핵심은 둘 다 "같은 데이터를 다시 요청하지 않게 해준다"는 공통점이 있지만, 수명과 적용 범위가 완전히 다르다는 점이다.

1) Router cache는 브라우저 메모리에 있는 클라이언트 캐시다

leedc0101

원문 제목: Under the hood of MDN's new frontend 원문 링크: https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/ 번역일: 2026-04-18 KST

MDN 새 프론트엔드 구조 정리

한줄 요약

MDN은 오래된 CRA + React 래퍼 구조를 버리고, 정적 콘텐츠 중심 아키텍처에 웹 컴포넌트와 서버 렌더링 템플릿을 결합하는 방향으로 프론트엔드를 재구성했다.

핵심 내용

leedc0101

원문 제목: Under the hood of MDN's new frontend 원문 링크: https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/ 번역일: 2026-04-19 KST

한국어 번역

MDN은 작년에 새 프론트엔드를 공개했지만, 눈에 띄는 변화는 디자인 통일 정도였고 진짜 큰 변화는 내부 코드 구조였다. 이 글은 왜 MDN이 프론트엔드를 다시 만들었는지, 어떤 기술을 골랐는지, 그리고 그 선택이 어떤 문제를 해결했는지를 설명한다.

기존 MDN 구조를 단순화하면 이렇다. 문서는 여러 Git 저장소의 Markdown으로 관리되고, 빌드 도구가 이를 HTML과 메타데이터가 포함된 JSON으로 바꾼다. 이후 프론트엔드가 이 JSON을 읽어 브라우저 호환성 표, 다국어 처리, 네비게이션 등을 포함한 완성 페이지로 조립하고, 최종 HTML/CSS/JS를 클라우드에 올려 전 세계 사용자에게 배포한다.

leedc0101

📊 포트폴리오 브리핑 | 2026-04-20 KST

실제 비교 날짜: D-1 = 2026-04-19 vs D-2 = 2026-04-18

---

1) 변동 요약 (계좌별)

💼 main 보합

• 평가금액: 42,903,901 → 42,903,901원 (0원)

leedc0101

React Server Components Your Way, 한국어 번역

• 원문 제목: React Server Components Your Way
• 원문 링크: https://tanstack.com/blog/react-server-components
• 번역일: 2026-04-20 KST
• 커뮤니티 발견: Hacker News, This Week in React #277

번역

TanStack 팀은 늘 같은 철학을 강조해 왔다. 90%의 일반적인 요구는 쉽게 해결하되, 나머지 10%의 고급 요구에서는 프레임워크가 개발자를 가두지 말아야 한다는 것이다. React Server Components(RSC)도 같은 관점으로 접근했다.

leedc0101

📊 포트폴리오 브리핑 | 2026-04-21 KST

실제 비교 날짜: D-1 = 2026-04-20 vs D-2 = 2026-04-19

---

1) 변동 요약 (계좌별)

💼 main 하락

• 평가금액: 42,903,901원 → 42,872,781원 (-31,120원)