하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive
DEVIEW 2023 네이버 · YouTube
AI 핵심 요약
NAVER Search의 UI·유틸리티 컴포넌트를 React, Vue, Svelte 등 여러 프레임워크에서 제공하면서 프레임워크별 래퍼와 기능 수정이 반복되는 문제가 있었다. 이를 줄이기 위해 공통 코드와 프레임워크 어댑터로 구성된 CFCs Reactive를 만들고, 상태·이벤트·메서드와 생성·마운트·제거 라이프사이클을 연결해 각 프레임워크에서 같은 컴포넌트를 사용할 수 있게 했다. 어댑터를 작성한 뒤 프레임워크별 모듈을 선택하면 짧은 코드로 리액티브 컴포넌트를 구성할 수 있으며, 타입 지원도 제공한다. 공통 코드의 버그 수정과 기능 추가를 여러 프레임워크에 반영하기 쉬워지는 대신, CFC 자체의 학습 비용이 들고 한 프레임워크만 지원할 때는 비효율적일 수 있다는 점을 짚었다.
- 프레임워크별 상태 선언과 라이프사이클을 공통 인터페이스로 추상화하면 어댑터 하나로 여러 프레임워크를 연결할 수 있다.
- 리액티브 컴포넌트는 상태 선언, 마운트 시 이벤트 등록, 언마운트 시 해제, 결과 반환의 흐름으로 구성한다.
- React 훅은 호출 순서와 개수가 렌더링마다 유지되어야 하므로 조건문이나 반복문 안에서 호출하지 않는다.
- CFC는 여러 프레임워크를 지원할 때 반복 구현과 버그 수정 부담을 줄이지만, 단일 프레임워크만 대상으로 하면 학습 비용과 모듈 용량이 부담이 될 수 있다.
소개
[DEVIEW 2023] * 발표자 :최연규(NAVER Search) * 발표제목 : 하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023
비슷한 학습 자료
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드
컨퍼런스 DEVIEW 2023
UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
컨퍼런스 DEVIEW 2023
그 여자 APP, 그 남자 SDK: Kotlin Multiplatform 적용기
컨퍼런스 DEVIEW 2023
GraphQL 잘 쓰고 계신가요? (Production-ready GraphQL)
컨퍼런스 DEVIEW 2023
네이버 스케일로 카프카 컨슈머 사용하기
컨퍼런스 엔지니어링데이 2025
Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] * 웹브라우저에서 대용량 데이터를 높은 성능으로 표현할 수 있는 Windowing 기법에 관해 소개하고 적용 사례를 공유합니다. [발표 대상] * Windowing 기법에 관심이 있는 개발자 [목차] * Windowing 기법이란 * 데이터 스트리밍 / 시계열 처리에서의 Windowing * 머신러닝에서의 Windowing * 컴퓨터 그래픽스에서의 Windowing * React에서의 Windowing / Virtualization 기술 * Windowing 기법을 활용한 오픈소스 라이브러리들 * Windowing기법을 사용하는 오픈소스 라이브러리 비교 * react-virtualized * react-window * @tanstack/react-virtual * 대용량 고성능 표 컴포넌트 Big Table 개발 배경...
웹 개발 프론트엔드