

카테노이드 VOD 콘솔 V2 로 이전하기
VOD 콘솔 V1과 V2 병행 운영 문제를 해결하기 위해 V2 단일 운영으로 이전하고 여러 기능을 개선했습니다. 낙관적 업데이트, 상태 동기화, CI/CD, 분석 도입으로 사용자 경험과 운영 효율을 높였습니다.
새로운 기술 블로그가 추가되었어요


VOD 콘솔 V1과 V2 병행 운영 문제를 해결하기 위해 V2 단일 운영으로 이전하고 여러 기능을 개선했습니다. 낙관적 업데이트, 상태 동기화, CI/CD, 분석 도입으로 사용자 경험과 운영 효율을 높였습니다.


버즈빌은 AngularJS에서 Vue·React·Next.js로 전환하며 통합 어드민과 웹뷰 기반 배포 유연성을 확보했습니다. BFF, 모노레포, Server-Driven UI, Hybrid SDK로 개발·운영 복잡도를 개선했습니다.


버즈빌이 AngularJS부터 Next.js까지 프론트엔드 아키텍처를 어떻게 바꿔왔는지 정리한 글입니다. 각 전환의 선택 이유와 운영상의 효과, 남은 과제까지 함께 공유했습니다.

Figma MCP를 Cursor와 연동해 디자인 시안을 React/Vue 컴포넌트로 옮긴 경험을 공유했습니다. 실제 업무에서 개발 시간을 줄이고 세부 튜닝에 집중한 사례를 소개했습니다.


Figma MCP를 Cursor와 연동해 디자인을 코드로 변환하는 방법을 소개했습니다. 실제 업무 적용으로 컴포넌트 작업 시간을 줄이고 스토리북 관리에도 도움을 얻었습니다.

LY Corporation 프런트엔드 조직의 2024년 기술 설문 결과를 정리했습니다. React, Next.js, Jest, Tailwind CSS와 함께 Vite, Vitest 전환 흐름도 확인했습니다.
![[Vue] motion 라이브러리로 더 나은 UX 제공하기](https://devocean.sk.com/thumnail/2025/3/26/161965bcf2c0b07df46454d50714fad4eb4e06189069272bebd9fabacb97b9b4.png)

Vue에서 motion-v를 사용해 다양한 UI 애니메이션을 선언적으로 구현하는 방법을 소개했습니다. Transition, IntersectionObserver, GSAP보다 간결하게 작성할 수 있는 사례를 함께 살펴보았습니다.
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

25년 2월 프런트엔드 기술 소식을 큐레이션해 소개했습니다. CSS 지문 채취, AI 개발 워크플로우, 토스 가이드, 포털 대체 방법을 다뤘습니다.


Vite는 React뿐 아니라 여러 프레임워크를 지원하며 빠른 프로젝트 생성과 실행을 강점으로 소개했습니다. CRA보다 가볍고 구조가 익숙해 프런트엔드 개발에 효율적으로 활용할 수 있다고 설명했습니다.


Vue.js SPA에서 가입 중 입력 정보 유실 문제를 막기 위해 이탈 방지 팝업을 구현했습니다. beforeunload와 onBeforeRouteLeave를 조합해 라우터 이동과 외부 이동을 함께 대응했습니다.


웹앱 UX 개선을 위해 스켈레톤 UI, Vue Transition, Tanstack-Query를 적용한 사례를 소개했습니다. 상황에 따라 스피너와 페이드 효과를 병행하며 전환과 상태 관리를 단순화했습니다.

스피너 대신 스켈레톤, Transition, Tanstack-Query를 활용해 웹앱 UX를 개선한 사례를 소개했습니다. 상황에 따라 로딩 UI를 다르게 적용해 체감 속도와 개발 생산성을 함께 높였습니다.

웹앱의 로딩 경험을 개선하기 위해 스피너, 스켈레톤, 전환 애니메이션, Tanstack-Query를 도입한 사례를 소개했습니다. 화면 특성과 지연 시간에 따라 로딩 방식을 나누고 공통 컴포넌트로 구현 비용을 줄인 점이 핵심입니다.


오래된 Laravel, PHP, Vue, Node.js, CentOS7 스택을 단계적으로 업그레이드하고 Ubuntu로 이관했습니다. 의존성 문제와 SSL 오류를 해결하며 운영 서버 전환과 Vue3 적용까지 마무리했습니다.