CDC를 Iceberg에 어떻게 안전하게 적재할 수 있는지에 초점을 맞춰, 우리가 마주했던 문제와 원칙들을 공유합니다.

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}.css-14on8x8{font-size:17px;letter-spacing:0em;line-height:1.6;font-weight:normal;color:var(

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}
.css-14on8x8{font-size:17px;letter-spacing:0em;line-height:1.6;font-weight:normal;color:var

토스증권 Iceberg 적용기 #1: CDC 환경은 왜 제대로 동작하지 않을까?



주요소식



다음과 같은 유용한 정보들을 만나보실 수 있습니다.


Augmented vs Vibe Coding:
Kent Beck은 BPlusTree3 라이브러리를 통해, Vibe Coding보다 코드 품질과 복잡성을 중시하는 Augmented Coding의 중요성을 설명했습니다. Rust, Python, C 등 다양한 언어로도 구현했습니다.
Code w/ Claude Developer Conference:
Anthropic의 첫 개발자 컨퍼런스에서는 Claude 4 모델, API 및 CLI 활용 사례,

주요소식





다음과 같은 유용한 정보들을 만나보실 수 있습니다.



Augmented vs Vibe Coding:

Kent Beck은 BPlusTree3 라이브러리를 통해, Vibe Coding보다 코드 품질과 복잡성을 중시하는 Augmented Coding의 중요성을 설명했습니다. Rust, Python, C 등 다양한 언어로도 구현했습니다.


Code w/ Claude Developer Conference:

Anthropic의 첫 개발자 컨퍼런스에서는 Claude 4 모델, API 및 CLI 활용 

FE News 25년 9월 소식을 전해드립니다!

'미완성'을 완성하고 싶어 하는 욕망을 파고들다

1,000만 명이 들어와도 999만 명이 나가는 문제, 어떻게 해결했을까 | 언더커버 사일로 비하인드 5화: 계좌 사일로

B2B부터 광고, 이제는 돈을 들이지 않고 유저를 모으는 전략까지. 전혀 다른 듯 보이지만, 이 모든 길에는 공통점이 있어요. 바로, 없던 길을 스스로 만들어왔다는 것. Product Designer 현정님의 이야기를 들려드려요.

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}.css-1feg9au{font-size:24px;letter-spacing:0em;line-height:1.6;font-weight:bold;color:var(--

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}
.css-1feg9au{font-size:24px;letter-spacing:0em;line-height:1.6;font-weight:bold;color:var(-

토스 피플 : 새로운 길을 만들 땐 내 선택을 믿는다

90년대 게임 개발자로 시작해, 글로벌 회사와 창업을 거쳐 Toss USA에 합류하신 Diko님의 이야기를 들려드려요.

토스 피플: 50살, 엔지니어로 살아남는 법

대출 연동 테스트의 안정성과 효율성을 극대화하는 mock 서버 개발기의 후속 내용을 공유합니다.

신용대출 찾기 서비스 제휴사 Mock 서버 개발기 #2

원문: I’m more proud of these 128 kilobytes than anything I’ve built since 저는 예전에 웹 콘텐츠 접근성 지침(WCAG…


원문: I’m more proud of these 128 kilobytes than anything I’ve built since

저는 예전에 웹 콘텐츠 접근성 지침(WCAG)을 준수하면서도 미학적으로 만족스러운 제품을 만드는 것이 불가능하다고 주장하는 UI 디자이너와 함께 일한 적이 있습니다. ‘예쁘거나, 접근성이 좋거나 둘 중 하나만 할 수 있다’고 그는 말했습니다. ‘둘 다 가질 수는 없다’고요.
좋은 디자인과 접근성이 상충된다는 믿음은 놀랍도록 흔하지만, 저는 그런 대립이 실제로 존재한다고 생각하지 않습니다. 이 경우, 

원문: I’m more proud of these 128 kilobytes than anything I’ve built since
저는 예전에 웹 콘텐츠 접근성 지침(WCAG)을 준수하면서도 미학적으로 만족스러운 제품을 만드는 것이 불가능하다고 주장하는 UI 디자이너와 함께 일한 적이 있습니다. ‘예쁘거나, 접근성이 좋거나 둘 중 하나만 할 수 있다’고 그는 말했습니다. ‘둘 다 가질 수는 없다’고요.
좋은 디자인과 접근성이 상충된다는 믿음은 놀랍도록 흔하지만, 저는 그런 대립이 실제로 존재한다고 생각하지 않습니다. 이 경우, 제 

(번역) 내 생애 가장 자랑스러운 128킬로바이트

토스에선 18번 실패가 평균입니다

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}.css-of5acw{margin:24px 0 8px;text-align:center;}.css-oni540{position:relative;width:100%;he

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}
.css-of5acw{margin:24px 0 8px;text-align:center;}.css-oni540{position:relative;width:100%;h

성공이 가장 큰 위기일 때, 문제 없는 서비스 성장시키기 | 언더커버 사일로 비하인드 4화: 고양이 사일로

가장 편리하지만 가장 낯선 기술, 사용자의 마음을 얻기 위한 여정 

“왜 아무도 에러 메시지를 읽지 않을까?” | 언더커버 사일로 비하인드 3화: 페이스페이 사일로

토스의 사내 Feature Store와 학습 파이프라인 자동화를 위한 도구 Trainkit을 소개합니다.

토스가 다양한 ML 모델을 만드는 법: Feature Store & Trainkit

안녕하세요! 네이버 프런트엔드 개발자 모임 H26y입니다.

매달 FE News를 통해 찾아뵈었는데요, 
8월 29일(금), “[FE Ground] AI × Front-End: 코딩의 미래를 묻다.”라는 주제로 첫 공개 개발자 밋업을 진행하게 되어 안내드립니다.



진행일시


일시: 8월 29(금), 19시 ~ 21시
건물 보안 지침 상 사전 입장이 불가하며, 19시 부터 입장이 가능합니다.
장소: NAVER D2SF 강남 (삼성화재 서초타워 18층)
[참고] 간단히 저녁 식사 할 수 있는 샌드위치와 음료

안녕하세요! 네이버 프런트엔드 개발자 모임 H26y입니다.


매달 FE News를 통해 찾아뵈었는데요, 
8월 29일(금), “[FE Ground] AI × Front-End: 코딩의 미래를 묻다.”라는 주제로 첫 공개 개발자 밋업을 진행하게 되어 안내드립니다.





진행일시



일시: 8월 29(금), 19시 ~ 21시

건물 보안 지침 상 사전 입장이 불가하며, 19시 부터 입장이 가능합니다.


장소: NAVER D2SF 강남 (삼성화재 서초타워 18층)

[참고] 간단히 저녁 식사 할 수 있는 

[FE Ground] 'AI x Front-End: 코딩의 미래를 묻다' 밋업이 열립니다.

스크린리더 사용자에게도 챗봇 흐름이 자연스럽게 느껴지게 하기 위해 고민한 4가지 포인트를 알려드려요.

귀로 듣는 챗봇의 탄생 | 접근성 업무일지 #3

'접근성은 어려운 것' 이라고 느끼는 분들을 위해 실무에서 바로 적용할 수 있는 접근성의 핵심 개념과 실수하기 쉬운 패턴을 알려주는 문서, A11y Fundamentals 을 소개합니다.

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}.css-1c1qox8{font-size:30px;letter-spacing:0em;line-height:1.55;font-weight:bold;color:var(-

.css-1vn47db{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:none;-ms-flex:none;flex:none;}
.css-1c1qox8{font-size:30px;letter-spacing:0em;line-height:1.55;font-weight:bold;color:var(

토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)

토스증권의 실시간 데이터 파이프라인을 대규모로 구성하고 운영해 온 경험을 소개합니다.

토스증권의 수천 개 실시간 데이터 파이프라인 운영방법 #1: Visualize Lineage



주요소식



25년 8월 소식에서는 다음과 같은 유용한 정보들을 만나보실 수 있습니다.

링크 &amp; 읽을거리


JSNation 2025: GitNation이 주최하는 JavaScript 컨퍼런스로, JavaScript관련된 다양한 주제의 세션들을 볼 수 있다.
Tech-Verse 2025: 라인야후애서 주최한 최신 기술 트렌드와 개발 방법론을 공유하는 개발자 중심의 컨퍼런스다.
AI Design Guide: AI와 디자인의 결합으로 가능한 새로운 워크플로와 방법론을 소개하는 리소스 컬렉션으로, 프

주요소식





25년 8월 소식에서는 다음과 같은 유용한 정보들을 만나보실 수 있습니다.


링크 & 읽을거리



JSNation 2025: GitNation이 주최하는 JavaScript 컨퍼런스로, JavaScript관련된 다양한 주제의 세션들을 볼 수 있다.

Tech-Verse 2025: 라인야후애서 주최한 최신 기술 트렌드와 개발 방법론을 공유하는 개발자 중심의 컨퍼런스다.

AI Design Guide: AI와 디자인의 결합으로 가능한 새로운 워크플로와 방법론을 소개하는 리소스 컬렉션으로, 프롬프

FE News 25년 8월

저희 팀에서는 Apache Spark를 기반으로 배치 및 실시간 처리를 수행하는 AI 데이터 파이프라인을 구축하고 있습니다. 그 과정에서 Spark의 마이크로 배치 아키텍처보다 더 효율적이고 생산적으로 실시간 데이터를 수집하고 집계하는 방법을 고민해왔습니다.

이 글에서는 Apache Flink와 Apache Paimon을 도입하여 빠르고 안정적인 데이터 처리 파이프라인을 개발한 경험을 공유하고, 그 과정에 사용한 기술과 유용한 팁을 소개합니다.

ADVoost Shopping에서 실시간으로 유효 광고를 선정하는 방법



저희 팀에서는 Apache Spark를 기반으로 배치 및 실시간 처리를 수행하는 AI 데이터 파이프라인을 구축하고 있습니다. 그 과정에서 Spark의 마이크로 배치 아키텍처보다 더 효율적이고 생산적으로 실시간 데이터를 수집하고 집계하는 방법을 고민해왔습니다.


이 글에서는 Apache Flink와 Apache Paimon을 도입하여 빠르고 안정적인 데이터 처리 파이프라인을 개발한 경험을 공유하고, 그 과정에 사용한 기술과 유용한 팁을 소개합니다.


ADVoost Shopping에서 실시간으로 유효 광고를 선정하는 방법


실시간 유효 광고 선정을 위한 Flink에서 Apache Paimon 도입기

이 글은 '윈도잉(windowing) 기법'을 적용한 고성능 표 컴포넌트를 개발하여 네이버 사내 로그 시스템의 로그 뷰 성능을 개선한 사례를 공유합니다. 

다음과 같은 순서로 구성되었습니다.


윈도잉 기법이란  
윈도잉 기법을 기반으로 만들어진 React 오픈소스 라이브러리  
자체 개발 고성능 표 컴포넌트 Big Table


1. 윈도잉 기법이란

윈도잉 기법은 데이터 처리나 그래픽스, 운영체제 등에서 데이터를 일정한 '창(window)' 단위로 나눠 처리하는 기술입니다.

주요 활용 예는 다음과 같

이 글은 '윈도잉(windowing) 기법'을 적용한 고성능 표 컴포넌트를 개발하여 네이버 사내 로그 시스템의 로그 뷰 성능을 개선한 사례를 공유합니다. 


다음과 같은 순서로 구성되었습니다.



윈도잉 기법이란  

윈도잉 기법을 기반으로 만들어진 React 오픈소스 라이브러리  

자체 개발 고성능 표 컴포넌트 Big Table



1. 윈도잉 기법이란


윈도잉 기법은 데이터 처리나 그래픽스, 운영체제 등에서 데이터를 일정한 '창(window)' 단위로 나눠 처리하는 기술입니다.


주요 활용 예

윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용

이 세션에서는 BERT기반 모델인 SPLADE모델의 대규모 실시간 서비스를 위한 최적화 방법에 대해서 이야기 합니다.
세상에서 가장 빠른 BertTokenizer 구현체인 FlashTokenizer 의 개발 배경과 성능에 대해 소개합니다.

강의 대상

실시간 서빙을 위한 모델 추론 최적화가 필요하신 분들

목차


Introduction


네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용


이 세션에서는 BERT기반 모델인 SPLADE모델의 대규모 실시간 서비스를 위한 최적화 방법에 대해서 이야기 합니다.
세상에서 가장 빠른 BertTokenizer 구현체인 FlashTokenizer 의 개발 배경과 성능에 대해 소개합니다.


강의 대상


실시간 서빙을 위한 모델 추론 최적화가 필요하신 분들


목차



Introdu

레거시 GPU에 날개 달기: 극한의 서빙 최적화 가이드

어떻게 실패한 실험은 최고의 교과서가 되었나

“토스 참 쪼잔하다”는 유저 말에 1억을 태운 이유 | 언더커버 사일로 비하인드 2화: 만보기 사일로

프로그레스 바 같은 시각적인 정보를 어떻게 소리로 잘 전달할 수 있을까요? 시각장애인을 위한 사용 경험을 설계할 때 고려해야할 지점을 알려드릴게요.

시각 정보를 소리로 번역하는 법 - 시각장애인을 위한 얼굴 인증 개선기 | 접근성 업무일지 #2

서바이벌 게임으로 재구성한 토스의 실제 비즈니스 문제들

“AI가 문제 냈어요?” 출제자 PO가 직접 답해드립니다 | 언더커버 사일로 비하인드 1화: 인플로우 사일로

‘누구나 토스처럼 일할 수 있는가?’ 이 질문을 증명할 단 하나의 도전, 〈언더커버 사일로〉.

‘러닝 쉐어’의 새로운 실험, 토스가 두뇌 서바이벌을 만든 이유

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용

AI/ML 분산 처리 프레임워크인 Ray를 활용하여 GPU Util 100%를 달성한 배치처리 기법과 확장 가능한 모델 서빙 아키텍처를 소개합니다.

발표 대상


배치 파이프라인 설계와 모델 서빙 자동화를 담당하는 분
Ray 기반 인프라 운영 및 GPU 클러스터 관리 업무를 수행하는 분
Ray Serve를 활용해 고성능 모델 서빙 API를 설계·

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용


AI/ML 분산 처리 프레임워크인 Ray를 활용하여 GPU Util 100%를 달성한 배치처리 기법과 확장 가능한 모델 서빙 아키텍처를 소개합니다.


발표 대상



배치 파이프라인 설계와 모델 서빙 자동화를 담당하는 분

Ray 기반 인프라 운영 및 GPU 클러스터 관리 업무를 수행하는 분

Ray Serve를 활용해 고성능 모델 서빙 A

Ray를 활용한 GPU Util 100% MLOps: 배치처리부터 모델 서빙까지

토스뱅크에서 3개월 동안 개발 인턴으로 근무하며 기획·개발·발표까지 진행해본 경험을 공유할게요.

슬기로운 토스뱅크 개발 인턴 생활 

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용

대규모 쿠버네티스 GPU 클러스터에서 자체 HPA 시스템 구축을 통해 글로벌 유저 트래픽에 동적으로 대응하는 AI 서비스 오토스케일링을 적용한 사례를 소개합니다.

발표 대상


AI 서비스 운영을 위해 GPU 서버 기반의 Kubernetes 클러스터 도입을 고려하는 엔지니어
AI 서비스 오토스케일링을 Kubernetes 에서 도입하고자 하는 엔지니

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용


대규모 쿠버네티스 GPU 클러스터에서 자체 HPA 시스템 구축을 통해 글로벌 유저 트래픽에 동적으로 대응하는 AI 서비스 오토스케일링을 적용한 사례를 소개합니다.


발표 대상



AI 서비스 운영을 위해 GPU 서버 기반의 Kubernetes 클러스터 도입을 고려하는 엔지니어

AI 서비스 오토스케일링을 Kubernetes 에서 도입하고자 

Kubernetes GPU 클러스터에서 AI 서비스 오토스케일링하기

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용


Spring Cloud Config을 도입 및 커스텀하여 서비스 안정성을 높힌 방법을 소개합니다.


발표 대상


배포없이 프로퍼티 동적 변경에 관심있으신 분들
spring cloud config으로 프로퍼티 동적 변경을 적용하고 싶으나, SPOF 이슈로 꺼려했던 분들


목차


Spring Cloud Config 소개 
Spr

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용



Spring Cloud Config을 도입 및 커스텀하여 서비스 안정성을 높힌 방법을 소개합니다.



발표 대상



배포없이 프로퍼티 동적 변경에 관심있으신 분들

spring cloud config으로 프로퍼티 동적 변경을 적용하고 싶으나, SPOF 이슈로 꺼려했던 분들



목차



Spring Cloud Config 

Spring Cloud Config HA 적용을 위한 커스터마이징

자원 낭비 없이 H100을 제대로 활용하기 위한 MIG 도입부터 운영까지의 기록을 공유합니다.

GPU를 밀도 있게 쓰는 방법 - 토스증권의 GPU 가상화(MIG) 도입기

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용


Docusaurus와 Typesense를 통해 기존 Redoc 기반 커머스API 문서 사이트를  변경하면서 정리한 Docusaurus 채택 배경과 특징, Typesense 특징 및 인프라 구성, 그리고 배포프로세스 등을 설명합니다. 마지막으로 이러한 변경을 통해 정성적 정량적인 유의미한 결과를 소개하며  개발하면서 겪은 긍정적인 경험 및 남은 과제 등을 공

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용



Docusaurus와 Typesense를 통해 기존 Redoc 기반 커머스API 문서 사이트를  변경하면서 정리한 Docusaurus 채택 배경과 특징, Typesense 특징 및 인프라 구성, 그리고 배포프로세스 등을 설명합니다. 마지막으로 이러한 변경을 통해 정성적 정량적인 유의미한 결과를 소개하며  개발하면서 겪은 긍정적인 경험 및 남은 과제 등

Docusaurus를 이용한 API 문서 플랫폼의 진화

원문: Ecma International approves ECMAScript 2025: What’s new? 2025년 6월 25일, 제129회 Ecma 총회는 ECMAScript 202…


원문: Ecma International approves ECMAScript 2025: What’s new?

2025년 6월 25일, 제129회 Ecma 총회는 ECMAScript 2025 언어 사양을 승인했습니다 (보도 자료). 이는 이제 공식적으로 표준이 되었음을 의미합니다. 이 블로그 게시물은 새로운 기능에 대해 설명합니다.
1. ECMAScript 2025의 편집자들
이 릴리스의 편집자들은 다음과 같습니다.

Shu‑yu Guo
Michael Ficarra
Kevin Gibbons

2. ECMAScript 2025의 새

원문: Ecma International approves ECMAScript 2025: What’s new?
2025년 6월 25일, 제129회 Ecma 총회는 ECMAScript 2025 언어 사양을 승인했습니다 (보도 자료). 이는 이제 공식적으로 표준이 되었음을 의미합니다. 이 블로그 게시물은 새로운 기능에 대해 설명합니다.

1. ECMAScript 2025의 편집자들
이 릴리스의 편집자들은 다음과 같습니다.
Shu‑yu Guo
Michael Ficarra
Kevin Gibbons

2. ECMAScript 2025의 새로운

(번역) Ecma International, ECMAScript 2025 승인 - 새로운 기능은?



주요소식



25년 7월 소식에서는 다음과 같은 유용한 정보들을 만나보실 수 있습니다.

링크 &amp; 읽을거리


Goodbye UseState: XState의 창시자 David Khourshid가 useState 사용을 피하는것이 좋은 케이스를 소개합니다. 3년전의 Goodbye UseEffect를 잇는 시리즈 발표입니다.
Search Params Are State, Beware The URL Type-Safety Iceberg: search params를 state로 활용하는것에서 오는 문제들에 대

주요소식





25년 7월 소식에서는 다음과 같은 유용한 정보들을 만나보실 수 있습니다.


링크 & 읽을거리




Goodbye UseState: XState의 창시자 David Khourshid가 useState 사용을 피하는것이 좋은 케이스를 소개합니다. 3년전의 Goodbye UseEffect를 잇는 시리즈 발표입니다.


Search Params Are State, Beware The URL Type-Safety Iceberg: search params를 state로 활용하는것에서 오는 문제들에 대한

FE News 25년 7월 소식을 전해드립니다!

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용


웹브라우저에서 대용량 데이터를 높은 성능으로 표현할 수 있는 Windowing 기법에 관해 소개하고 적용 사례를 공유합니다.


발표 대상


Windowing 기법에 관심이 있는 개발자


목차


Windowing 기법이란
데이터 스트리밍 / 시계열 처리에서의 Windowing
머신러닝에서의 Windowing
컴퓨터 그래픽스에

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용



웹브라우저에서 대용량 데이터를 높은 성능으로 표현할 수 있는 Windowing 기법에 관해 소개하고 적용 사례를 공유합니다.



발표 대상



Windowing 기법에 관심이 있는 개발자



목차



Windowing 기법이란

데이터 스트리밍 / 시계열 처리에서의 Windowing

머신러닝에서의 Windowing


Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기

사용자가 원하는 기능을 잘 찾는지, 정성적인 경험을 수치로 측정하는 툴 TNS. 전례없는 제품을 어떻게 제작했는지, TNS 길드원들의 이야기를 들려드릴게요.

토스가 특허 낸 리서치툴, TNS (Toss Navigation Score) 제작기 

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 



  
  



발표 내용

이 세션에서는 서비스를 운영하는 운영 담당자들이 AI를 활용하여, 운영 피로도를 낮추면서 운영 품질을 향상시키기 위한 방법을 소개합니다.
너무 많은 알림을 받고 있으나, 실제로 장애로 연결되지 않는 Noise 알림때문에 운영 리소스가 낭비되고 있는 상황을 개선하는 방법을 소개합니다. 항상 똑같은 대응을 반복하는 (로그 분석, 원인파악, 장애공유, 대응책 수립

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 



  
  




발표 내용


이 세션에서는 서비스를 운영하는 운영 담당자들이 AI를 활용하여, 운영 피로도를 낮추면서 운영 품질을 향상시키기 위한 방법을 소개합니다.
너무 많은 알림을 받고 있으나, 실제로 장애로 연결되지 않는 Noise 알림때문에 운영 리소스가 낭비되고 있는 상황을 개선하는 방법을 소개합니다. 항상 똑같은 대응을 반복하는 (로그 분석, 원인파악, 장애공유, 대응책

AI가 지켜보는 데이터 파이프라인: 노이즈 제거부터 장애 대응까지

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 
서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (3)을 보고 오시면 좋습니다.
1,2편은 사내용으로 발표되어 아쉽지만 외부 공개는 어려운 점 양해 부탁드립니다.



  
  



발표 내용

Kafka 프로듀서 최적화하기 + 압축 기능 활용하기

목차


배경: Kafka 자료 구조
Kafka 자료 구조는 어떻게 생겼는가?
프로듀서 동작 방식 및 최적화 방법

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 
서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (3)을 보고 오시면 좋습니다.
1,2편은 사내용으로 발표되어 아쉽지만 외부 공개는 어려운 점 양해 부탁드립니다.




  
  




발표 내용


Kafka 프로듀서 최적화하기 + 압축 기능 활용하기


목차



배경: Kafka 자료 구조

Kafka 자료 구조는 어떻게 생겼는가?


프로듀서 동작 방식 

서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (4)

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 
서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (4)에서 이어집니다.
1,2편은 사내용으로 발표되어 아쉽지만 외부 공개는 어려운 점 양해 부탁드립니다.



  
  



발표 내용

Kafka Client는 어떻게 클러스터의 전체 상태를 알 수 있는가? 서비스를 개발하는 입장에서 관련 옵션을 어떻게 잡아 주면 좋은가? 에 대해 설명합니다.

목차


Kafka m

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 
서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (4)에서 이어집니다.
1,2편은 사내용으로 발표되어 아쉽지만 외부 공개는 어려운 점 양해 부탁드립니다.




  
  




발표 내용


Kafka Client는 어떻게 클러스터의 전체 상태를 알 수 있는가? 서비스를 개발하는 입장에서 관련 옵션을 어떻게 잡아 주면 좋은가? 에 대해 설명합니다.


목차



K

서비스 조직에서 Kafka를 사용할 때 알아 두어야 할 것들 (3)

C++ 개발자는 멀티 스레드 환경에서 mutex나 atomic 같은 동기화 도구를 익숙하게 사용합니다. 하지만 이런 도구를 잘 활용해도 동시성 문제가 발생할 수 있으며 이 경우 디버깅에 많은 시간과 노력이 필요합니다.

데이터 레이스(data race)의 개념을 정확히 이해하면 동기화 도구가 어떤 문제를 해결하는지 어떤 상황에서 계속 데이터 레이스가 발생하는지 알 수 있습니다. 이 글에서는 C++의 동시성(concurrency) 문제와 이를 방지하기 위한 스레드 안전성의 주요 개념을 관련 이론 및 사례와 함께 공유합니다. 안정적

C++ 개발자는 멀티 스레드 환경에서 mutex나 atomic 같은 동기화 도구를 익숙하게 사용합니다. 하지만 이런 도구를 잘 활용해도 동시성 문제가 발생할 수 있으며 이 경우 디버깅에 많은 시간과 노력이 필요합니다.


데이터 레이스(data race)의 개념을 정확히 이해하면 동기화 도구가 어떤 문제를 해결하는지 어떤 상황에서 계속 데이터 레이스가 발생하는지 알 수 있습니다. 이 글에서는 C++의 동시성(concurrency) 문제와 이를 방지하기 위한 스레드 안전성의 주요 개념을 관련 이론 및 사례와 함께 공유합니다. 안정

C++에서 안정적인 멀티 스레드 코드를 위한 스레드 안전성 개념 정리

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 
C++에서 안정적인 멀티 스레드 코드를 위한 스레드 안전성 개념 정리 에서도 살펴보실 수 있습니다.



  
  



발표 내용

C++ 에서 thread safe 한 프로그램을 만들기 위해 알아야 할 기본 개념인 data race 와 basic thread safety, 연산 간 순서 관계에 대해 설명합니다.

발표 대상

동시성 프로그래밍 업무를 수행하는 C++ 개발자

목

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 
C++에서 안정적인 멀티 스레드 코드를 위한 스레드 안전성 개념 정리 에서도 살펴보실 수 있습니다.




  
  




발표 내용


C++ 에서 thread safe 한 프로그램을 만들기 위해 알아야 할 기본 개념인 data race 와 basic thread safety, 연산 간 순서 관계에 대해 설명합니다.


발표 대상


동시성 프로그래밍 업무를 수행하는 C++ 개발

Thread-safety in C++

 토스 10주년 기념 공간 ‘스퀘어 오브 토스’ 비하인드를 소개할게요.

대팝업의 시대에서 살아남는 브랜드 경험 만들기

출시 2주만에 20만명이 쓴 토스증권 ‘어닝콜 서비스’ 제작기를 공개할게요.

출시 2주만에 20만명이 쓴 토스증권 어닝콜 서비스 제작기

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. 





  



발표 내용

점점 늘어가던 플레이스 조회트래픽을 메인DB로부터 Elasticsearch(Opensearch)로 분산한 경험을 공유합니다. 
(#Elasticsearch #Opensearch #트래픽 분산 #CQRS #slow query #feature toggle #feature flag #자동 fallback)

강의 대상


트래픽 분산 및 Elasticse

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다.
 





  




발표 내용


점점 늘어가던 플레이스 조회트래픽을 메인DB로부터 Elasticsearch(Opensearch)로 분산한 경험을 공유합니다. 

(#Elasticsearch #Opensearch #트래픽 분산 #CQRS #slow query #feature toggle #feature flag #자동 fallback)


강의 대상



트래픽 분산 및 Ela

늘어가는 조회트래픽 Elasticsearch로 분산시키기

네이버 홈피드는 검색 홈 하단에서 사용자에게 개인화된 콘텐츠를 추천하는 피드 서비스입니다. 이 글에서는 사용자에게 보다 나은 추천을 제공하기 위해 고민하고 구현한 핵심 기술을 다루고자 합니다. 주요 내용은 다음과 같습니다.


홈피드 서비스 톺아보기: 홈피드 전반의 구조와 구성 요소, 다양한 콘텐츠 재료, 그리고 대규모 언어 모델(LLM, large language model)을 활용한 개인화 추천 시스템  
홈피드 추천 랭킹 로직 구성: 다양한 특징의 콘텐츠를 효과적으로 조합하는 방법, 클릭 외에도 고려해야 할 만족도 지표

네이버 홈피드는 검색 홈 하단에서 사용자에게 개인화된 콘텐츠를 추천하는 피드 서비스입니다. 이 글에서는 사용자에게 보다 나은 추천을 제공하기 위해 고민하고 구현한 핵심 기술을 다루고자 합니다. 주요 내용은 다음과 같습니다.



홈피드 서비스 톺아보기: 홈피드 전반의 구조와 구성 요소, 다양한 콘텐츠 재료, 그리고 대규모 언어 모델(LLM, large language model)을 활용한 개인화 추천 시스템  

홈피드 추천 랭킹 로직 구성: 다양한 특징의 콘텐츠를 효과적으로 조합하는 방법, 클릭 외에도 고려해야 할 만족도 

홈피드: 네이버의 진입점에서 추천 피드를 외치다! 추천 피드 도입 고군분투기

Python은 높은 개발 생산성으로 많이 사랑받는 프로그래밍 언어 중 하나입니다. 하지만 높은 생산성의 대가로 성능에 대해 많은 비용을 지불해야 한다는 것이 정설로 여겨지고 있었습니다.

그러나 Python 3.11을 시작으로, 이제는 Python에서도 성능을 챙기려는 노력이 이어지고 있습니다. 그 연장선으로 이 글에서는 프로파일링 도구 중 하나인 Yappi를 활용해서 Python 서버의 성능 개선을 이루어낸 사례를 소개하고자 합니다. 이 글이 Python 애플리케이션의 성능을 더 쉽게 분석하고 최적화하는 데에 도움이 되었으면 

Python은 높은 개발 생산성으로 많이 사랑받는 프로그래밍 언어 중 하나입니다. 하지만 높은 생산성의 대가로 성능에 대해 많은 비용을 지불해야 한다는 것이 정설로 여겨지고 있었습니다.


그러나 Python 3.11을 시작으로, 이제는 Python에서도 성능을 챙기려는 노력이 이어지고 있습니다. 그 연장선으로 이 글에서는 프로파일링 도구 중 하나인 Yappi를 활용해서 Python 서버의 성능 개선을 이루어낸 사례를 소개하고자 합니다. 이 글이 Python 애플리케이션의 성능을 더 쉽게 분석하고 최적화하는 데에 도움이 되었으면

Yappi로 Python에서도 성능을 챙겨보자

원문: A JavaScript Developer’s Guide to Go 저는 5년간 자바스크립트 개발자로 프런트엔드와 백엔드 시스템을 구축한 후, 지난 1년 동안 서버 사이드 코드를 위해 Go…


원문: A JavaScript Developer’s Guide to Go

저는 5년간 자바스크립트 개발자로 프런트엔드와 백엔드 시스템을 구축한 후, 지난 1년 동안 서버 사이드 코드를 위해 Go로 전환하는 시간을 보냈습니다. 그 기간 동안 저는 두 언어 간의 문법, 기본 개념, 관행, 런타임 환경의 차이점과 이것이 실제 런타임 성능과 개발자 생산성에 미치는 영향을 자연스럽게 알게 되었습니다.
최근 마이크로소프트가 공식 타입스크립트 컴파일러를 Go로 포팅한다고 발표하며 기존 컴파일러보다 최대 10배 빠른 속도를 약속했을 때, Go

원문: A JavaScript Developer’s Guide to Go
저는 5년간 자바스크립트 개발자로 프런트엔드와 백엔드 시스템을 구축한 후, 지난 1년 동안 서버 사이드 코드를 위해 Go로 전환하는 시간을 보냈습니다. 그 기간 동안 저는 두 언어 간의 문법, 기본 개념, 관행, 런타임 환경의 차이점과 이것이 실제 런타임 성능과 개발자 생산성에 미치는 영향을 자연스럽게 알게 되었습니다.
최근 마이크로소프트가 공식 타입스크립트 컴파일러를 Go로 포팅한다고 발표하며 기존 컴파일러보다 최대 10배 빠른 속도를 약속했을 때, Go는 

(번역) 자바스크립트 개발자를 위한 Go 가이드

원문: You should know this before choosing Next.js…


원문: You should know this before choosing Next.js

프로젝트의 기술 스택을 선택하는 것은 중요하고 중대한 결정입니다. 특히 기업 환경에서는 프로젝트의 로드맵, 개발 속도, 결과물의 품질, 나아가 행복한 팀을 구성하고 유지하는 능력에까지 장기적인 영향을 미치는 다년간의 노력을 수반하곤 합니다.
오픈소스 소프트웨어 모델은 이에 대한 근본적인 해답입니다. 오픈소스로 개발된 소프트웨어를 사용함으로써 누구든지 자신의 사용 사례에 맞게 확장하거나 수정할 수 있습니다. 더 중요한 것은, 오픈소스 소프트웨어

원문: You should know this before choosing Next.js
프로젝트의 기술 스택을 선택하는 것은 중요하고 중대한 결정입니다. 특히 기업 환경에서는 프로젝트의 로드맵, 개발 속도, 결과물의 품질, 나아가 행복한 팀을 구성하고 유지하는 능력에까지 장기적인 영향을 미치는 다년간의 노력을 수반하곤 합니다.
오픈소스 소프트웨어 모델은 이에 대한 근본적인 해답입니다. 오픈소스로 개발된 소프트웨어를 사용함으로써 누구든지 자신의 사용 사례에 맞게 확장하거나 수정할 수 있습니다. 더 중요한 것은, 오픈소스 소프트웨어의 

(번역) Next.js를 선택하기 전에 반드시 알아야 할 것들

안녕하세요. 지그재그 서비스팀 로빈입니다.🙂
오늘은 저희 팀에서 관리하고 있는 상품상세페이지(Product Detail Page. 이하 PDP) 서비스의 프로젝트 아키텍처에 대해 간단히 소개해보려고 합니다.
PDP 서비스는 2024년부터 &ldquo;Domain-Driven 헥사고날 아키텍처&quot;의 프로젝트 구조를 띠고 있는데요, 이렇게 운영한지 어느덧 1년을 향해 가고 있습니다.
국내외 여러 테크 블로그들을 돌아다녀보면 헥사고날 아키텍처란 무엇인지, DDD와 애그리거트는 무엇인지, 이미 그 개념들에 대해 충분히 잘 설명된 

안녕하세요. 지그재그 서비스팀 로빈입니다.🙂
오늘은 저희 팀에서 관리하고 있는 상품상세페이지(Product Detail Page. 이하 PDP) 서비스의 프로젝트 아키텍처에 대해 간단히 소개해보려고 합니다.
PDP 서비스는 2024년부터 “Domain-Driven 헥사고날 아키텍처"의 프로젝트 구조를 띠고 있는데요, 이렇게 운영한지 어느덧 1년을 향해 가고 있습니다.
국내외 여러 테크 블로그들을 돌아다녀보면 헥사고날 아키텍처란 무엇인지, DDD와 애그리거트는 무엇인지, 이미 그 개념들에 대해 충분히 잘 설명된 자료들을 접할 수 있

코드 사례로 보는 Domain-Driven 헥사고날 아키텍처

안녕하세요! 앱개발팀의 레이몬드입니다. 2024년 한 해동안 모듈화를 경험하면서 느낀점들과 후회하는 것들을 글로 써보고자 합니다.
2023년 초부터 논의해 오던 모듈화를 2024년에 본격적으로 진행했고 지금도 모듈화 작업을 이어 나가고 있습니다. 1년동안 진행한 작업들을 되돌아 보니 생각보다는 많은 작업들을 진행했더라구요. 많은 모듈화 관련 포스트들이 모듈화의 필요성에 대해 다루고 있어서 비슷한 내용보다는 다른 관점인 모듈화를 진행하면서 느낀점들과 아쉬웠던 것들을 정리하고자 합니다.

1년동안의 iOS 모듈화 진행기

원문: Revealed: React’s experimental animations API 12년(!) 전 처음 출시된 이래로 리액트의 API…


원문: Revealed: React’s experimental animations API

12년(!) 전 처음 출시된 이래로 리액트의 API에는 눈에 띄는 애니메이션 공백이 존재했습니다.
그동안 뷰와 스벨트 같은 가장 가까운 경쟁사들은 광범위하진 않지만 애니메이션을 조금 더 쉽게 만들어주는 API를 도입했습니다. 반면에 리액트 개발자는 Motion for React, React Spring 등과 같은 써드파티 라이브러리에 의존해야 했습니다.
그러나 이제 상황이 달라졌습니다.
리액트가 드디어 첫 번째 애니메이션 API를 도입합니다

원문: Revealed: React’s experimental animations API
12년(!) 전 처음 출시된 이래로 리액트의 API에는 눈에 띄는 애니메이션 공백이 존재했습니다.
그동안 뷰와 스벨트 같은 가장 가까운 경쟁사들은 광범위하진 않지만 애니메이션을 조금 더 쉽게 만들어주는 API를 도입했습니다. 반면에 리액트 개발자는 Motion for React, React Spring 등과 같은 써드파티 라이브러리에 의존해야 했습니다.
그러나 이제 상황이 달라졌습니다.
리액트가 드디어 첫 번째 애니메이션 API를 도입합니다. 

(번역) 리액트의 실험적인 애니메이션 API 공개

원문: How React Compiler Performs on Real Code 리액트 컴파일러가 초기 로드 및 인터랙션 성능에 미치는 영향을 수치와 함께 살펴봅니다. 이 글에서 사용된 수치는 실제 앱에서 측정되었습니다. 유튜브: How React…


원문: How React Compiler Performs on Real Code

리액트 컴파일러가 초기 로드 및 인터랙션 성능에 미치는 영향을 수치와 함께 살펴봅니다. 이 글에서 사용된 수치는 실제 앱에서 측정되었습니다.
유튜브: How React Compiler Performs On Real Code

      
    
  
  
    
이 글은 제가 “React Advanced” 컨퍼런스에서 발표한 내용을 기반으로 구성되었습니다. 글보다 영상을 선호하신다면 How React Compiler Performs On Reac

원문: How React Compiler Performs on Real Code
리액트 컴파일러가 초기 로드 및 인터랙션 성능에 미치는 영향을 수치와 함께 살펴봅니다. 이 글에서 사용된 수치는 실제 앱에서 측정되었습니다.
유튜브: How React Compiler Performs On Real Code

      
    
  
  
    
이 글은 제가 “React Advanced” 컨퍼런스에서 발표한 내용을 기반으로 구성되었습니다. 글보다 영상을 선호하신다면 How React Compiler Performs On React 

(번역) 실제 코드에서 리액트 컴파일러의 성능

안녕하세요, 카카오스타일 지그재그 서비스 FE팀의 제이슨입니다.
2023년 초, 저희 팀은 비즈니스와 더불어 기술적인 개선이 필요하다는 것을 느꼈습니다. 그중에서도 특히 여러 지면에서 독립적으로 관리되고 있던 상품 카드 컴포넌트의 일원화 작업이 중요하게 여겨졌고. 이 문제를 해결하기 위해서는 단순 리팩토링을 넘어, 팀 전체의 UI/UX를 통합적으로 관리할 수 있는 디자인 시스템의 재구축이 필요하다고 판단했습니다.

프론트엔드팀의 디자인 시스템 재구축기

원문: How we shrunk our Javascript monorepo git size by 94% 이건 낚시가 아닙니다. 진짜로 해냈습니다! 우리는 마이크로소프트에서 1JS…


원문: How we shrunk our Javascript monorepo git size by 94%

이건 낚시가 아닙니다. 진짜로 해냈습니다! 우리는 마이크로소프트에서 1JS라고 부르는 대규모 자바스크립트 모노레포에서 작업하고 있습니다. 이는 단순한 GB 크기의 문제가 아니라, 코드의 양과 기여된 작업의 규모 면에서도 방대한 양을 자랑합니다. 최근에는 월간 활동 사용자가 1,000명을 넘었고, 약 2,500개의 패키지와 2천만 줄의 코드가 있습니다! 제가 최근에 저장소를 복제했을 때 크기가 무려 178GB였습니다.

이렇게 

원문: How we shrunk our Javascript monorepo git size by 94%
이건 낚시가 아닙니다. 진짜로 해냈습니다! 우리는 마이크로소프트에서 1JS라고 부르는 대규모 자바스크립트 모노레포에서 작업하고 있습니다. 이는 단순한 GB 크기의 문제가 아니라, 코드의 양과 기여된 작업의 규모 면에서도 방대한 양을 자랑합니다. 최근에는 월간 활동 사용자가 1,000명을 넘었고, 약 2,500개의 패키지와 2천만 줄의 코드가 있습니다! 제가 최근에 저장소를 복제했을 때 크기가 무려 178GB였습니다.

이렇게 큰 

(번역) 자바스크립트 모노레포의 깃 용량을 94% 줄인 방법

원문: Optimising for High Latency Environments 지난주에 CrUX에 새롭게 포함된 RTT…


원문: Optimising for High Latency Environments

지난주에 CrUX에 새롭게 포함된 RTT 데이터 항목에 대해 링크드인에 짧은 업데이트를 게시했습니다. 간단히 읽어보시면 도움이 될 것입니다.
크롬은 최근 크롬 사용자 경험 보고서(CrUX)에 왕복 시간(RTT) 데이터를 추가하기 시작했습니다. 이는 방문자들의 네트워크 토폴로지와 높은 지연 시간이 있는 지역에서 우리가 얼마나 영향을 받을 수 있는지에 대한 흥미로운 인사이트를 제공합니다.
RTT란 무엇인가요?
왕복 시간(RTT)은 기본적으로 지연 시간을

원문: Optimising for High Latency Environments
지난주에 CrUX에 새롭게 포함된 RTT 데이터 항목에 대해 링크드인에 짧은 업데이트를 게시했습니다. 간단히 읽어보시면 도움이 될 것입니다.
크롬은 최근 크롬 사용자 경험 보고서(CrUX)에 왕복 시간(RTT) 데이터를 추가하기 시작했습니다. 이는 방문자들의 네트워크 토폴로지와 높은 지연 시간이 있는 지역에서 우리가 얼마나 영향을 받을 수 있는지에 대한 흥미로운 인사이트를 제공합니다.

RTT란 무엇인가요?
왕복 시간(RTT)은 기본적으로 지연 시간을 

(번역) 지연 시간이 긴 환경 최적화하기

지그재그는 상품 판매를 촉진하기 위해 이벤트나 기획전을 주요 마케팅 수단으로 활용합니다. 기획전은 한정된 기간 동안 고객에게 특정 상품 정보와 추가적인 할인 혜택을 명확하게 제시하여 판매를 유도하는 역할을 합니다. 따라서 다양한 기획전을 지속적으로 발행해 고객의 관심을 유도하고, 브랜드 충성도를 높이며, 구매율을 증가시키고 있습니다. 또한, 다양한 테마와 카테고리별 기획전을 통해 고객의 소비 패턴과 선호도에 맞춘 맞춤형 쇼핑 경험을 제공합니다. 이러한 전략은 이커머스 사이트의 경쟁력을 강화하고 지속적인 성장을 도모하는 데 중요한 역

기획전 애니메이션 모듈 개발

원문 : An SSR Performance Showdown 💡 노트: 첫 번째 버전의 벤치마크에서 몇 가지 실수가 있었으며, 이는 Theo Browne의 이 트윗에 요약되어 있습니다. 먼저 이러한 오류에 대해 사과드리며, Rich Harris…


원문 : An SSR Performance Showdown


💡 노트: 첫 번째 버전의 벤치마크에서 몇 가지 실수가 있었으며, 이는 Theo Browne의 이 트윗에 요약되어 있습니다. 먼저 이러한 오류에 대해 사과드리며, Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh, Dominic Gannaway의 수정에 대해 진심으로 감사의 말씀을 전합니다. 또한 Preact 버전에 기여해주신 Jovi De Croock에게도 감사를 표합니다.

서버 사이드 렌더링(SSR)은 Node.j

원문 : An SSR Performance Showdown
💡 노트: 첫 번째 버전의 벤치마크에서 몇 가지 실수가 있었으며, 이는 Theo Browne의 이 트윗에 요약되어 있습니다. 먼저 이러한 오류에 대해 사과드리며, Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh, Dominic Gannaway의 수정에 대해 진심으로 감사의 말씀을 전합니다. 또한 Preact 버전에 기여해주신 Jovi De Croock에게도 감사를 표합니다.
서버 사이드 렌더링(SSR)은 Node.js로 고

(번역) SSR 성능 대결

원문 : Flexible network data preloading in large SPAs 주의: 이 글은 클라이언트 사이드에서 렌더링하는 SPA의 성능을 개선하기 위한 맞춤형 솔루션에 중점을 둡니다. Next.js, Remix…


원문 : Flexible network data preloading in large SPAs


주의: 이 글은 클라이언트 사이드에서 렌더링하는 SPA의 성능을 개선하기 위한 맞춤형 솔루션에 중점을 둡니다. Next.js, Remix와 같은 프레임워크를 사용 중이라면, 이러한 최적화는 자동으로 처리되는 경우가 많습니다 :)

제 경험상으로 클라이언트 사이드 렌더링을 구현할 때 중요한 최적화 중 하나는 페이지 로드 시 네트워크 데이터를 미리 로딩하는 것입니다. 제가 근무했던 세 회사에서 경험한 바로는, 대규모 SPA는 일반적으로 페

원문 : Flexible network data preloading in large SPAs
주의: 이 글은 클라이언트 사이드에서 렌더링하는 SPA의 성능을 개선하기 위한 맞춤형 솔루션에 중점을 둡니다. Next.js, Remix와 같은 프레임워크를 사용 중이라면, 이러한 최적화는 자동으로 처리되는 경우가 많습니다 :)
제 경험상으로 클라이언트 사이드 렌더링을 구현할 때 중요한 최적화 중 하나는 페이지 로드 시 네트워크 데이터를 미리 로딩하는 것입니다. 제가 근무했던 세 회사에서 경험한 바로는, 대규모 SPA는 일반적으로 페이지 로

(번역) 대규모 SPA에서 유연하게 네트워크 데이터 미리 로딩하기

테스트를 거치지 않은 소프트웨어는 없습니다. 하지만 많은 기능을 가져 복잡해진 현대의 소프트웨어를 온전히 테스트하는 것은 굉장히 어려운 일입니다.
이러한 테스트를 자동화하지 않은 채 소프트웨어를 지속적으로 배포하는 것은 불가능에 가깝다고 할 수 있습니다.
이번 글에서는 카카오스타일에서 진행하는 UI 테스트 자동화 시스템에 대해 설명해보겠습니다.

UI 테스트 자동화

카카오스타일에서는 서버 드리븐 UI(Server Driven UI, 이하 SDUI)를 통해 UI의 유연성을 가져가고 있습니다. 서버가 클라이언트 UI를 동적으로 제어하므로써 빌드 및 배포 없이도 UI 업데이트를 할 수 있고, A/B 테스트도 효율적으로 수행할 수 있었습니다. 다만 이렇게 구축된 시스템을 몇년간 운영하다보니 몇가지 문제점이 발생했습니다.
이 글에서는 초기 구조에서 어떤 문제가 발생했는지 살펴보고, 전시팀에서 어떤 방식으로 개선해 나갔는지에 대해 이야기 해보려고 합니다.

Server Driven UI 호출 구조 개선

원문: Sneaky React Memory Leaks: How the React compiler won’t save you…


원문: Sneaky React Memory Leaks: How the React compiler won’t save you


      
  
    
몇 주 전에 저는 리액트에서 useCallback이나 useEffect 같은 메모이제이션 훅을 사용할 때, 클로저가 어떻게 메모리 누수를 일으킬 수 있는 지에 대한 글을 썼습니다. 이 글은 TLDR WebDev, https://bytes.dev/, This Week In React와 같은 멋진 뉴스레터 및 X에서 주목을 받았습니다 (응원해 주셔서 감사합니다! 🙏).
당연히 많은

원문: Sneaky React Memory Leaks: How the React compiler won’t save you

      
  
    
몇 주 전에 저는 리액트에서 useCallback이나 useEffect 같은 메모이제이션 훅을 사용할 때, 클로저가 어떻게 메모리 누수를 일으킬 수 있는 지에 대한 글을 썼습니다. 이 글은 TLDR WebDev, https://bytes.dev/, This Week In React와 같은 멋진 뉴스레터 및 X에서 주목을 받았습니다 (응원해 주셔서 감사합니다! 🙏).
당연히 많은 사

(번역) 교묘한 리액트 메모리 누수 - 리액트 컴파일러가 당신을 구하지 못하는 이유


원문: Understanding React Compiler

리액트의 핵심 아키텍처는 사용자가 제공한 함수(즉, 컴포넌트)를 반복해서 호출합니다. 이 사실은 멘탈 모델을 단순화하여 인기를 얻었지만 성능 문제가 발생할 수 있는 지점을 만들기도 했습니다. 일반적으로 함수가 비용이 큰 작업을 수행하면 앱이 느려집니다.
따라서 개발자는 어떤 함수를 언제 다시 실행해야 하는지 수동으로 리액트에 알려줘야 했기 때문에 성능 튜닝은 골칫거리가 되었습니다. 리액트 팀은 이제 리액트 컴파일러라는 도구로 개발자들의 코드를 다시 작성하여 개발자가 수작

원문: Understanding React Compiler
리액트의 핵심 아키텍처는 사용자가 제공한 함수(즉, 컴포넌트)를 반복해서 호출합니다. 이 사실은 멘탈 모델을 단순화하여 인기를 얻었지만 성능 문제가 발생할 수 있는 지점을 만들기도 했습니다. 일반적으로 함수가 비용이 큰 작업을 수행하면 앱이 느려집니다.
따라서 개발자는 어떤 함수를 언제 다시 실행해야 하는지 수동으로 리액트에 알려줘야 했기 때문에 성능 튜닝은 골칫거리가 되었습니다. 리액트 팀은 이제 리액트 컴파일러라는 도구로 개발자들의 코드를 다시 작성하여 개발자가 수작업으

(번역) 리액트 컴파일러 이해하기

근래의 많은 기업과 마찬가지로 카카오스타일도 불필요한 비용 낭비가 발생하지 않도록 많은 노력을 기울이고 있습니다. 물론 이전이라고 사용하지 않는 리소스를 방치하며 비용을 낭비한 것은 아니고, 좀 더 세밀한 부분까지 주의를 기울이기 시작했다고 생각해주시면 됩니다. 이번 글은 그 중 하나를 소개해보려고 합니다.

웹폰트 최적화를 통한 CDN 비용절감

원문: HTML attributes vs DOM properties 속성(attribute)과 프로퍼티(property…


원문: HTML attributes vs DOM properties

속성(attribute)과 프로퍼티(property)는 근본적으로 다른 개념입니다. 같은 이름의 속성과 프로퍼티를 서로 다른 값으로 설정할 수 있습니다. 예를 들면 다음과 같습니다.
&lt;div foo="bar">…&lt;/div>
&lt;script>
  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // 'bar'
  console.log

원문: HTML attributes vs DOM properties
속성(attribute)과 프로퍼티(property)는 근본적으로 다른 개념입니다. 같은 이름의 속성과 프로퍼티를 서로 다른 값으로 설정할 수 있습니다. 예를 들면 다음과 같습니다.
…

  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // undefined

  div.foo = 'he

(번역) HTML 속성 vs DOM 프로퍼티

원문: Infer type predicates from function bodies using control flow analysis #16069 해결 #38390 해결 #10734 해결 #50734 해결 #12798 해결 이 PR…


원문: Infer type predicates from function bodies using control flow analysis

#16069 해결
#38390 해결
#10734 해결
#50734 해결
#12798 해결
이 PR은 타입스크립트의 기존 제어 흐름 분석을 사용하여 적절한 곳에서 불리언(boolean) 값을 반환하는 함수에 대한 타입 서술어(type predicates)를 추론합니다. 예를 들면 다음과 같습니다.
function isString(x: string | number) {
  return typeof x

원문: Infer type predicates from function bodies using control flow analysis
#16069 해결
#38390 해결
#10734 해결
#50734 해결
#12798 해결
이 PR은 타입스크립트의 기존 제어 흐름 분석을 사용하여 적절한 곳에서 불리언(boolean) 값을 반환하는 함수에 대한 타입 서술어(type predicates)를 추론합니다. 예를 들면 다음과 같습니다.
function isString(x: string | number) {
  return typeof x =

(번역) 제어 흐름 분석을 통해 함수 내부로부터 타입 서술어 추론하기


이 글은 원래 원문에 게시된 넷플릭스 기술 블로그 글을 번역한 것입니다. 넷플릭스가 아닌 emewjin이 번역했으며 원본 저작권은 Netflix, Inc에 있습니다.

by Moshe Kolodny
이번 글에서 웹 기반 사용자 인터페이스(UI) 애플리케이션의 엔드투엔드(E2E) 테스트에 대한 새로운 관점을 제공하는 혁신적인 라이브러리인 SafeTest를 소개하게 되어 기쁩니다.
기존 UI 테스트의 문제점
전통적으로 UI 테스트는 단위 테스트 또는 통합 테스트(엔드투엔드(E2E) 테스트라고도 합니다)를 통해 수행되었습니다. 그러나 

이 글은 원래 원문에 게시된 넷플릭스 기술 블로그 글을 번역한 것입니다. 넷플릭스가 아닌 emewjin이 번역했으며 원본 저작권은 Netflix, Inc에 있습니다.
by Moshe Kolodny
이번 글에서 웹 기반 사용자 인터페이스(UI) 애플리케이션의 엔드투엔드(E2E) 테스트에 대한 새로운 관점을 제공하는 혁신적인 라이브러리인 SafeTest를 소개하게 되어 기쁩니다.

기존 UI 테스트의 문제점
전통적으로 UI 테스트는 단위 테스트 또는 통합 테스트(엔드투엔드(E2E) 테스트라고도 합니다)를 통해 수행되었습니다. 그러나 이

(번역) 프런트엔드 테스트에 대한 새로운 접근 방식 SafeTest를 소개합니다

원문 : How To Improve INP With Chrome DevTools INP(Interaction to Next Paint)는 2024년 3월에 세 가지 Google 핵심 웹 바이탈 중 하나가 될 성능 지표입니다. INP…


원문 : How To Improve INP With Chrome DevTools

INP(Interaction to Next Paint)는 2024년 3월에 세 가지 Google 핵심 웹 바이탈 중 하나가 될 성능 지표입니다.
INP는 다른 페이지 속도 지표들보다 개선하기 어려운 경향이 있습니다. 왜냐하면 측정을 위해 페이지 인터랙션이 필요하고, 이를 최적화하기 위해서는 종종 복잡한 자바스크립트 로직을 디버깅해야 하기 때문입니다.
이 글은 크롬 개발자 도구를 사용하여 페이지 인터랙션을 분석하고 사이트의 반응 속도를 더 빠르게 만드

원문 : How To Improve INP With Chrome DevTools
INP(Interaction to Next Paint)는 2024년 3월에 세 가지 Google 핵심 웹 바이탈 중 하나가 될 성능 지표입니다.
INP는 다른 페이지 속도 지표들보다 개선하기 어려운 경향이 있습니다. 왜냐하면 측정을 위해 페이지 인터랙션이 필요하고, 이를 최적화하기 위해서는 종종 복잡한 자바스크립트 로직을 디버깅해야 하기 때문입니다.
이 글은 크롬 개발자 도구를 사용하여 페이지 인터랙션을 분석하고 사이트의 반응 속도를 더 빠르게 만드는 

(번역) 크롬 개발자 도구로 INP를 개선하는 방법

원문: Feature-Sliced Design: The Best Frontend Architecture…


원문: Feature-Sliced Design: The Best Frontend Architecture


      
    
  
  
    
들어가며
프런트엔드 개발자는 종종 애플리케이션 아키텍처와 관련된 문제에 직면합니다. 대부분 모듈 간의 느슨한 결합과 높은 응집력을 제공해야 하며 쉽게 확장할 수 있는 아키텍쳐를 필요로 합니다.
이 글은 기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처에 대해 설명합니다. 제 생각에는 이 아키텍처가 사용 가능한 옵션 중 최고라고 생각합니다. 차례대로 FSD의 개

원문: Feature-Sliced Design: The Best Frontend Architecture

      
    
  
  
    

들어가며
프런트엔드 개발자는 종종 애플리케이션 아키텍처와 관련된 문제에 직면합니다. 대부분 모듈 간의 느슨한 결합과 높은 응집력을 제공해야 하며 쉽게 확장할 수 있는 아키텍쳐를 필요로 합니다.
이 글은 기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처에 대해 설명합니다. 제 생각에는 이 아키텍처가 사용 가능한 옵션 중 최고라고 생각합니다. 차례대로 FSD의 개념

(번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처

지난 1부에서는 프론트엔드에서 어드민 페이지를 리액트 앱으로 마이그레이션 할 때 왜 Client Side GraphQL을 선택했고, 환경을 어떻게 구축했는지에 대해 소개했었다. 2부인 이번 글에서는 GraphQL…

지난 1부에서는 프론트엔드에서 어드민 페이지를 리액트 앱으로 마이그레이션 할 때 왜 Client Side GraphQL을 선택했고, 환경을 어떻게 구축했는지에 대해 소개했었다.
2부인 이번 글에서는 GraphQL을 이용해서 실제로 프론트엔드 개발을 어떻게 했는지에 대해 구체적으로 소개하려고 한다. 1부에서 자세하게 다루지 않은 이야기 위주로 작성했다.
들어가며
이 글의 재료는 &#x3C;유저의 정산 정보를 확인하고 수정할 수 있는 모달>을 개발하는 과정이다. 이 기능에 대해 간략하게 소개하면 다음과 같다.

페이지 진입 시 일부 유

지난 1부에서는 프론트엔드에서 어드민 페이지를 리액트 앱으로 마이그레이션 할 때 왜 Client Side GraphQL을 선택했고, 환경을 어떻게 구축했는지에 대해 소개했었다.
2부인 이번 글에서는 GraphQL을 이용해서 실제로 프론트엔드 개발을 어떻게 했는지에 대해 구체적으로 소개하려고 한다. 1부에서 자세하게 다루지 않은 이야기 위주로 작성했다.

들어가며
이 글의 재료는 을 개발하는 과정이다. 이 기능에 대해 간략하게 소개하면 다음과 같다.
페이지 진입 시 일부 유저 정보가 row로 제공되는 테이블이 보여짐
각 row별로 버

Client side GraphQL로 어드민 만들기 2부 - 어떻게 개발했는가

이 글에서는 회사에서 어드민 제품의 프론트엔드를 레거시 프로젝트에서 모던한 프로젝트로 마이그레이션 할 때, 백엔드 리소스를 최소화하기 위해 Client side GraphQL…

이 글에서는 회사에서 어드민 제품의 프론트엔드를 레거시 프로젝트에서 모던한 프로젝트로 마이그레이션 할 때, 백엔드 리소스를 최소화하기 위해 Client side GraphQL을 사용하기로 선택한 내용과 어떻게 그 환경을 구축했는지 적어보려 한다.
글이 너무 길어져서 (글 작성을 작년부터 시작했는데 배포를 미루고 미뤘던 이유가 있었다) GraphQL로 실질적인 개발 과정은 어떻게 이루어지고 있느냐에 대해 이야기는 2부에서 하려고 한다.
배경
레거시 어드민을 리액트 앱으로 마이그레이션 하기로 했다. 이때 백엔드 리소스가 없어서 프론트엔

이 글에서는 회사에서 어드민 제품의 프론트엔드를 레거시 프로젝트에서 모던한 프로젝트로 마이그레이션 할 때, 백엔드 리소스를 최소화하기 위해 Client side GraphQL을 사용하기로 선택한 내용과 어떻게 그 환경을 구축했는지 적어보려 한다.
글이 너무 길어져서 (글 작성을 작년부터 시작했는데 배포를 미루고 미뤘던 이유가 있었다) GraphQL로 실질적인 개발 과정은 어떻게 이루어지고 있느냐에 대해 이야기는 2부에서 하려고 한다.

배경
레거시 어드민을 리액트 앱으로 마이그레이션 하기로 했다. 이때 백엔드 리소스가 없어서 프론트

Client side GraphQL로 어드민 만들기 1부 - 환경 구축

2023년 겨울, 사내 에디터 라이브러리를 리팩토링한 경험에 대해 글로 기록하려고 한다. 리팩토링 계기 XP…

2023년 겨울, 사내 에디터 라이브러리를 리팩토링한 경험에 대해 글로 기록하려고 한다.
리팩토링 계기

XP 팀은 나누고 정복하지 않고, 정복하고 나누고 또 정복한다. 처음에는 소규모 팀이 소규모 시스템을 작성한다. 그런 다음 자연스러운 분할선을 찾아 시스템을 비교적 독립적인 부분으로 나누어 확장한다.” - 켄트 벡, 익스트림 프로그래밍

나누고 정복하지 않고, 정복하고 나누고 또 정복하는 이유는 우리가 만들 대상을 처음부터 잘 알지 못하기 때문이라고 한다. 일단 정복한다는 것은 일단 학습한다는 의미이며, 일하면서 정복하다 보면 

2023년 겨울, 사내 에디터 라이브러리를 리팩토링한 경험에 대해 글로 기록하려고 한다.

리팩토링 계기
XP 팀은 나누고 정복하지 않고, 정복하고 나누고 또 정복한다. 처음에는 소규모 팀이 소규모 시스템을 작성한다. 그런 다음 자연스러운 분할선을 찾아 시스템을 비교적 독립적인 부분으로 나누어 확장한다.” - 켄트 벡, 익스트림 프로그래밍
나누고 정복하지 않고, 정복하고 나누고 또 정복하는 이유는 우리가 만들 대상을 처음부터 잘 알지 못하기 때문이라고 한다. 일단 정복한다는 것은 일단 학습한다는 의미이며, 일하면서 정복하다 보면 학