NHN

RSS

게시글: 350
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
Claude Code로 Figma 디자인 시스템을 C++ 코드로 변환하기
NHN Cloud의 Cloud Access Windows 클라이언트 개발팀에서 Figma 디자인 가이드 PDF를 Claude Code에 전달하여 C++ 디자인 시스템 코드를 자동 생성한 경험을 공유합니다. WTL/Win32 기반 C++ 네이티브 UI는 OS 수준의 성능과 낮은 리소스 사용량 등의 이점이 있지만, 웹 프론트엔드와 달리 디자인 시스템 적용을 위한 성숙한 생태계가 부족했습니다. 이 글에서는 이러한 문제를 해결하기 위해 디자인 시스템의 필요성을 설명하고, Figma 디자인 가이드라인을 Claude Code를 통해 C++ 코드로 자동 변환하는 구체적인 방법론을 제시합니다. 이를 통해 개발 과정에서의 디자인 불일치 및 오타 문제를 해결하고, 일관된 UI/UX를 효율적으로 구축하는 방안을 모색합니다.
Figma디자인 시스템C++
NHN·2026년 3월 16일
Frontend
2025 프론트엔드 뉴스 한 방에 몰아보기
NHN Cloud NCUI개발팀의 이진우님이 2025년 초 프론트엔드 기술 동향을 정리한 글입니다. 특히 Node.js의 TypeScript 네이티브 지원 전환에 주목하며, 개발자 경험 향상을 위해 타입 체크가 아닌 타입 제거(Type Stripping) 방식으로 구현될 예정임을 설명합니다. 이를 위해 SWC 기반의 Amaro가 핵심 도구로 사용될 것이며, TypeScript v24.12 버전에서 안정화 단계에 접어들었다고 언급합니다. 이 글은 Node.js의 Type Stripping 원리와 구현 배경을 다루며, 관련 아티클 링크들을 제공하여 독자들이 더 깊이 탐구할 수 있도록 돕습니다. 프론트엔드 생태계 전반을 다루기보다는 개인적인 관심사와 조직 내 영향력이 큰 기술 스택 중심으로 정리되었습니다.
Node.jsTypeScriptType Stripping
NHN·2026년 1월 30일
Frontend
수직 중앙 정렬한 텍스트가 치우쳐 보이는 이유
이 글은 텍스트의 수직 중앙 정렬이 예상과 다르게 치우쳐 보이는 현상의 원인을 탐구합니다. 폰트 메트릭, 브라우저 렌더링, 픽셀 밀도의 상호작용이 이러한 미묘한 차이를 발생시킨다고 설명합니다. 특히, 대문자 'M'을 예시로 들어 폰트가 내부적으로 정의된 좌표 공간(Em-square)과 EM 크기를 기반으로 렌더링되며, 이로 인해 CSS에서 지정한 `font-size`와 실제 화면에 표시되는 폰트의 크기 및 위치에 차이가 발생할 수 있음을 보여줍니다. 폰트의 디자인과 브라우저의 렌더링 방식이 결합되어 발생하는 현상이며, 이를 이해하는 것이 자연스러운 텍스트 정렬을 구현하는 데 중요함을 강조합니다.
수직 중앙 정렬폰트 메트릭브라우저 렌더링
NHN·2025년 11월 11일
Frontend
2024 프론트엔드 뉴스 한 방에 몰아 보기
이 글은 NHN Cloud NCUI개발팀의 이진우님이 2024년 한 해 동안 주목할 만한 프론트엔드 기술 및 도구들을 정리하여 공유하는 내용입니다. 저자는 매주 프론트엔드 관련 뉴스레터를 읽고 동료들에게 공유해왔으며, 연말을 맞아 개인적으로 인상 깊었던 주제와 도구들을 선별하여 소개합니다. 특히 shadcn/ui와 Zod를 중심으로, 이들 기술이 어떻게 UI 개발의 효율성과 데이터 검증을 향상시키는지 설명합니다. shadcn/ui는 TailwindCSS와 Headless UI의 철학을 결합하여 복사-붙여넣기 방식으로 UI를 빠르게 구현할 수 있게 하며, Zod는 TypeScript와 완벽하게 통합되어 스키마 선언 및 데이터 유효성 검증을 용이하게 합니다. 이 글은 프론트엔드 개발의 빠른 변화 속에서도 실용적인 도구들이 정착되고 있음을 시사하며, 독자들이 새로운 기술에 대한 인사이트를 얻도록 돕습니다.
Frontendshadcn/uiZod
NHN·2024년 12월 16일
Frontend
출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까?
본 글은 브라우저에서 출처가 다른 윈도우(창) 간의 데이터 통신 방법에 대해 다룹니다. 최근 `document.domain` setter 지원 중단 결정으로 인해, 부모 창과 팝업 창 간의 통신 방식에 대한 문의가 증가했습니다. 일반적으로 브라우저는 보안을 위해 출처(protocol, port, host)가 다른 창 간의 직접적인 접근을 제한합니다. 이를 해결하기 위해 CORS(Cross-Origin Resource Sharing)와 같은 메커니즘이 사용되지만, 윈도우 간 통신에서는 `window.opener` 객체를 통한 접근이 제한될 수 있습니다. 글에서는 동일 출처(Same Origin)와 교차 출처(Cross Origin)의 개념을 명확히 설명하고, 출처가 다른 윈도우 간 통신 시 발생할 수 있는 보안 이슈와 그 대안을 모색합니다. 특히 `window.opener.location.reload()`와 같은 직접적인 조작이 불가능할 때 `window.opener.top.location.href`를 사용하는 예시를 통해 문제 해결 방안을 제시하며, 브라우저 보안 정책 변화에 따른 기술적 대응의 중요성을 강조합니다.
window 통신document.domainCORS
NHN·2022년 9월 22일
Frontend
불변 객체와 immer
이 글은 불변 객체의 개념과 React에서의 불변성 활용에 대해 설명합니다. 불변 객체는 생성 후 상태 변경이 불가능한 객체로, 동시 사용 시 안전성, 코드 영향 고려 불필요, 메모리 및 성능 향상 등의 장점을 가집니다. React는 Props와 State의 변경을 감지하여 리렌더링을 수행하는데, 이때 불변성을 활용합니다. 객체의 참조가 변경되었음을 감지하기 위해 얕은 비교를 사용하므로, 객체의 내부 프로퍼티만 변경하면 React는 변경을 인지하지 못합니다. 따라서 리렌더링을 위해서는 이전 참조와 다른 새로운 참조를 만들어야 합니다. 글에서는 Object.assign() 메서드를 사용하여 불변성을 유지하면서 객체를 복사하는 방법을 소개합니다.
불변 객체ImmutabilityReact
NHN·2022년 5월 2일
Frontend
SolidJS와 함께 되짚어보는 반응형 프로그래밍
이 글은 웹 프런트엔드 개발에서 주목받는 반응형 프로그래밍 개념을 SolidJS를 중심으로 탐구합니다. Vue.js, Svelte, Angular(ngrx), React(MobX) 등 다양한 프레임워크와 라이브러리에서 반응형 프로그래밍이 어떻게 활용되는지 소개하며, 특히 SolidJS가 2021년 State of JS 설문에서 높은 만족도를 기록한 점을 조명합니다. 글의 주요 목표는 반응형 프로그래밍의 기본 개념을 짚어보고, '투명한 반응형 프로그래밍(TRP)'이라는 구현 방식을 설명하는 것입니다. 이를 통해 SolidJS의 독특한 반응형 모델과 렌더링 특징을 이해하고, 반응형 프로그래밍에 대한 깊이 있는 통찰을 제공하고자 합니다.
SolidJS반응형 프로그래밍Vue.js
NHN·2022년 4월 29일
Frontend
서비스 개발하다 오픈소스 기여한 썰 (완)
본 글은 서비스 개발 중 발생한 PDF 관련 문제들을 해결하며 오픈소스에 기여한 경험을 공유합니다. 학습지 미리 보기, 인쇄, 다운로드 기능을 구현하는 과정에서 발생한 네 가지 주요 문제, 즉 정확한 인쇄, HTML 기반 PDF 변환, 점선 표현, 그리고 둥근 테두리 점선 표현 문제를 다룹니다. 특히, paged.js 라이브러리, jsPDF의 html 모듈, html2canvas 라이브러리를 활용하여 문제를 해결했으며, html2canvas의 dotted/dashed 라인 지원 PR 적용 및 jsPDF의 line dash 지원 추가 등 오픈소스 라이브러리의 개선에 직접 기여한 경험을 상세히 설명합니다. 이를 통해 기술적 난관을 극복하고 오픈소스 생태계에 기여하는 과정을 보여줍니다.
CSSpaged.jsjsPDF
NHN·2022년 4월 28일
Frontend
서비스 개발하다 오픈소스 기여한 썰 (2)
이 글은 서비스 개발 중 발생한 PDF 생성 관련 기술적 문제를 해결한 경험을 공유합니다. 특히, 학습지 미리 보기 및 다운로드를 위해 HTML을 PDF로 변환하는 과정에서 발생한 점선(dotted) 표현 문제를 다룹니다. `html2canvas` 라이브러리가 점선 스타일을 지원하지 않는다는 것을 파악하고, 해당 라이브러리의 오픈소스 PR을 활용하여 문제를 해결했습니다. 이를 통해 개발 일정 내에 기능을 구현하고, 오픈소스 기여의 경험까지 얻게 된 과정을 보여줍니다.
CSSpaged.jsjsPDF
NHN·2022년 4월 25일
Frontend
서비스 개발하다 오픈소스 기여한 썰 (1)
본 글은 '바로학습AI' 서비스 개발 중 마주한 두 가지 기술적 문제, 즉 웹에서 A4 용지에 정확하게 인쇄되는 미리 보기 기능 구현과 학습지를 PDF로 다운로드하는 기능 구현에 대한 경험을 공유합니다. 첫 번째 문제 해결을 위해 웹 브라우저의 기본 인쇄 기능을 활용하되, 디자이너가 의도한 여백과 쪽 바꿈을 정확히 구현하는 방안을 모색했습니다. 두 번째 문제 해결을 위해서는 기존에 사용하던 pdfmake 라이브러리의 한계를 인지하고, 웹 페이지의 디자인을 그대로 유지하면서 PDF를 생성하는 새로운 접근 방식의 필요성을 제시합니다. 이 과정에서 웹 기술을 활용하여 사용자 경험을 개선하려는 개발자의 노력을 엿볼 수 있습니다.
인쇄PDF웹 접근성
NHN·2022년 4월 20일
Frontend
사용자 입력 텍스트를 바이트(byte) 길이로 제한하는 Vue 컴포넌트 만들기
NHN Cloud Console 웹 애플리케이션 개발 중 사용자가 입력한 텍스트를 100바이트 길이로 제한하는 Vue 컴포넌트 구현 경험을 공유합니다. 이 글에서는 글자를 바이트 길이로 계산하는 함수 작성 방법과 함께, 한글, 영문, 숫자, 특수문자 등 다양한 문자를 입력받아 100바이트 미만의 글자만 표시하고 초과하는 입력은 무시하는 재사용 가능한 컴포넌트 구현 과정을 상세히 설명합니다. 이를 위해 비트와 바이트의 개념, 텍스트 인코딩 방식에 대한 배경지식을 먼저 설명하며, Vue2 환경에서 yarn workspace, eslint, prettier, Webpack4, testing-library 등을 활용한 개발 과정을 다룹니다.
Vue컴포넌트바이트 길이
NHN·2022년 4월 18일
Frontend
리액트 커스텀 훅을 테스트하는 과정
이 글은 React 개발에서 커스텀 훅을 작성하고 테스트하는 방법에 대해 설명합니다. NHN의 Dooray! 프로젝트에서 타입스크립트와 리액트 전환 과정 중 사용된 커스텀 훅을 예시로 들어, 훅의 기본 개념과 규칙을 소개합니다. 특히, 여러 컴포넌트에서 중복되는 로직을 추상화하여 재사용성과 독립적인 테스트를 가능하게 하는 커스텀 훅의 장점을 강조합니다. 또한, `testing-library`를 활용하여 커스텀 훅을 효과적으로 테스트하는 구체적인 방법을 제시하며, 이를 통해 개발 생산성과 코드 품질을 향상시킬 수 있음을 보여줍니다.
ReactCustom HooksTesting
NHN·2022년 4월 15일
Frontend
디버깅을 위한 Xcode 활용 방법
이 글은 iOS 개발자가 Xcode를 활용하여 디버깅 효율을 높이는 방법을 다룹니다. 주로 `po` 명령어만 사용하던 개발자가 Xcode의 다양한 디버깅 기능을 탐구하며 얻은 지식을 공유합니다. LLDB의 `po` 명령어를 이용한 변수 출력 및 수정, 새로운 변수 생성 방법부터 시작하여, 코드 라인 클릭으로 생성하는 Line Breakpoint, 특정 조건에서만 실행되는 Edit Breakpoint, 특정 컬럼 값 변경 시 중단되는 Column Breakpoint, 그리고 변수 값 변경 시 중단되는 Watchpoint까지 다양한 Breakpoint 활용법을 소개합니다. 또한, Network Condition을 이용한 네트워크 환경 시뮬레이션과 Network Instrument를 통한 성능 분석, UIKit에서의 프리뷰 사용 및 Environment Overrides를 통한 UI 테스트, 그리고 Analyzer를 활용한 코드 분석 기능까지 Xcode의 강력한 디버깅 도구들을 상세히 설명하며, 개발 생산성 향상에 기여할 수 있는 실질적인 팁을 제공합니다.
Xcode디버깅iOS
NHN·2022년 3월 21일
Frontend
JavaScipt Symbol의 근황
이 글은 JavaScript의 ES2015에 도입된 새로운 원시형 타입인 Symbol에 대해 다룹니다. 저자는 `for...of` 구문 검색 중 `Symbol.iterator`를 접하고 Symbol에 대한 궁금증을 가지게 되었습니다. Symbol의 기본 문법은 `Symbol([description])`이며, `new` 연산자를 지원하지 않고 반환되는 값은 고유하여 객체 프로퍼티 키로 사용될 수 있습니다. 초기 도입 목적은 private 속성 지원이었으나, 현재는 `Object.getOwnPropertySymbols` 등으로 접근 가능하여 그 취지에 완전히 부합하지는 않습니다. 글은 Symbol의 도입 배경과 근황을 탐구하며, 개발자들이 Symbol을 더 잘 이해하고 활용할 수 있도록 돕는 것을 목표로 합니다.
JavaScriptSymbolES2015
NHN·2022년 3월 2일
Frontend
안드로이드 런처와 위젯 톺아보기 (4) - 페이코 앱 위젯/숏컷 이슈 일대기 (완)
본 글은 PAYCO 앱 기술개발팀에서 안드로이드 런처, 위젯, 숏컷 관련 실제 이슈를 공유하는 마지막 편입니다. 주로 런처 업데이트 시 발생하는 위젯과 숏컷 관련 이슈를 중심으로 다룹니다. 첫 번째 이슈는 '위젯이 초기화되는 현상'으로, 런처 업데이트 시 앱에서 위젯 대응을 잘못했을 때 발생합니다. 페이코 결제 위젯에서 카드 정보가 사라지거나 버튼이 동작하지 않는 문제가 휴대폰 재부팅, 앱/OS 업데이트, 런처 업데이트 등 다양한 상황에서 보고되었습니다. 위젯은 런처 업데이트 시 매번 새로 그려져야 하는 특성이 있으며, 이 과정에서 앱의 잘못된 대응이 문제를 야기합니다. 두 번째 이슈는 '숏컷이 초기화되는 현상'으로, 런처 업데이트 시 앱에서 대응할 방법이 없고 오로지 런처의 판단에 따라 숏컷 업데이트가 진행되기 때문에 발생합니다. 런처의 의도와 앱의 의도가 다를 경우 문제가 발생하며, 페이코 앱에서 겪었던 구체적인 사례와 대응 방안을 소개합니다.
안드로이드런처위젯
NHN·2022년 1월 10일
Frontend
안드로이드 런처와 위젯 톺아보기 (3) - 위젯과 숏컷, 런처와의 상관관계
이 글은 안드로이드 런처와 위젯, 숏컷의 상관관계를 탐구합니다. 특히 PAYCO 앱 기술개발팀에서 위젯 및 숏컷 관련 이슈를 해결하는 과정에서 런처의 역할에 대한 깊은 이해가 필요했음을 설명합니다. 위젯은 앱 아이콘을 통하지 않고 홈 화면에서 특정 기능을 바로 실행할 수 있는 UI 요소로 정의되며, 숏컷과의 차이점을 명확히 구분합니다. 이 글은 이전 편에서 다룬 런처의 기본적인 역할에 이어, 위젯과 숏컷이 런처와 어떻게 연관되어 있으며 실제 개발 과정에서 어떤 이슈가 발생할 수 있는지에 대한 심층적인 분석을 제공합니다. 이를 통해 안드로이드 앱 개발 시 홈 화면 UI 요소의 동작 원리와 상호작용에 대한 이해를 높이고자 합니다.
안드로이드런처위젯
NHN·2022년 1월 7일
Frontend
안드로이드 런처와 위젯 톺아보기 (1) - 홈 화면도 앱이었다?
본 글은 안드로이드 폰의 홈 화면을 담당하는 '런처' 앱과 '위젯'에 대해 심도 있게 다룹니다. 안드로이드 시스템의 부팅 과정에서 런처가 어떻게 실행되는지, 그리고 홈 화면이 하나의 앱으로서 어떤 역할을 수행하는지에 대한 설명을 시작으로, 특히 위젯 기능에 초점을 맞춰 페이코 앱에서 실제 발생했던 이슈 사례를 공유합니다. 런처의 실행 과정과 위젯의 동작 원리를 이해하는 것은 안드로이드 앱 개발자에게 필수적인 지식이며, 본 연재를 통해 독자들은 홈 화면과 위젯에 대한 깊이 있는 이해를 얻을 수 있을 것입니다.
안드로이드런처위젯
NHN·2021년 12월 22일
Frontend
삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅
본 글은 TOAST UI CHART 4.0에서 SVG 대신 Canvas를 사용하며 겪었던 트러블 슈팅 경험을 공유합니다. 특히 Canvas 렌더링 시 흔히 발생하는 '앨리어싱' 현상과 이를 해결하기 위한 '안티 앨리어싱' 기법에 대해 설명합니다. 앨리어싱은 화면 해상도 차이로 인해 그래픽이 깨져 보이는 현상이며, 이를 방지하기 위해 `devicePixelRatio` (DPR) 개념을 이해하고 Canvas의 `width`, `height` 속성을 DPR에 맞게 조정하는 것이 중요합니다. 또한, 디스플레이 크기와 실제 Canvas 크기 간의 비율을 맞추기 위해 `scale` 조정을 통해 텍스트 흐릿함과 같은 문제를 해결한 과정을 상세히 다룹니다. 이를 통해 개발자들이 Canvas 사용 시 겪을 수 있는 문제들을 미리 파악하고 효과적으로 해결하는 데 도움을 줄 수 있습니다.
CanvasTOAST UI CHARTAnti-Aliasing
NHN·2021년 12월 3일
Frontend
JavaScript Proxy. 근데 이제 Reflect를 곁들인
이 글은 JavaScript의 Proxy 객체와 Reflect API를 함께 사용하는 이유를 탐구합니다. 먼저 메타프로그래밍과 반영(Reflection)의 개념을 소개하며, 런타임 시점에 프로그램의 구조와 행위를 관리하고 수정하는 반사형 프로그래밍의 세 가지 종류(Type introspection, Self-modification)를 설명합니다. 특히 Vue 3의 Reactivity 시스템에서 Proxy의 트랩 내부에 Reflect가 사용된 배경을 이해하는 데 초점을 맞추고 있습니다. 이를 통해 JavaScript에서 객체의 동작을 동적으로 감지하고 제어하는 고급 기법을 다룹니다.
JavaScriptProxyReflect
NHN·2021년 11월 23일
Frontend
Vue.js 3 반응형 동작 원리 살펴보기
이 글은 Vue.js 3의 새로운 반응형 시스템의 동작 원리를 Vue.js 2의 반응형 구현 방식과 비교하며 자세히 설명합니다. Vue.js 2에서는 `Object.defineProperty`를 사용하여 객체의 모든 속성을 순회하며 반응성을 구현했지만, 이 방식은 배열의 인덱스를 통한 변경이나 새로운 속성 추가 시 반응성을 추적하기 어렵다는 단점이 있었습니다. Vue.js 3에서는 이러한 단점을 극복하기 위해 ES6의 `Proxy` 객체를 활용하여 반응형을 구현합니다. `Proxy`는 객체에 대한 모든 연산(속성 접근, 할당, 삭제 등)을 가로채서 처리할 수 있어, Vue.js 2에서 발생했던 제약 사항들을 해결하고 더 효율적이고 강력한 반응형 시스템을 제공합니다. 글에서는 `Proxy`를 이용한 Vue.js 3의 반응형 구현 방식을 코드 예시와 함께 설명하며, 이를 통해 개발자가 더욱 편리하게 상태 관리를 할 수 있음을 강조합니다.
Vue.js 3반응형Object.defineProperty
NHN·2021년 10월 20일