Velopers 홈

오늘 새 글

0개

오늘 조회수

132회

필터 1

2025년 1월 9일

프론트엔드

Vue.js 환경에서 페이지 이탈 방지 팝업 구현하기

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

기술 한 스푼으로 웹앱 사용자 경험 개선하기

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

로딩 스피너는 이제 그만! UPTN Station UX 개선 사례

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

웹앱 사용자 경험을 개선하는 기술 한 스푼

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

삐걱거리는 오래된 Legacy 시스템 업그레이드

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

디자인 시스템, 디자인과 코드의 간극 줄이기

디자인 시스템에서 Figma와 코드 간 간극이 커지며 커뮤니케이션 비용과 개발 피로도가 늘어나는 문제를 다뤘습니다. Figma 규약 정비와 Plugin API 기반 도구로 명세 검증과 코드 변환을 자동화하는 방안을 소개했습니다.

#디자인 시스템#Figma

23005분

Velopers 추천광고

쿠팡 파트너스

개발자를 위한 인기 상품을 확인해 보세요

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

#개발자#노트북#컴퓨터

2024년 7월 9일

프론트엔드

웹 컴포넌트로 프레임워크 마이그레이션 준비하기

Vue2에서 React로 점진적 마이그레이션할 때 웹 컴포넌트를 도입한 사례를 소개했습니다. 프레임워크별 UI 중복 구현을 줄이고 디자인 일관성과 유지보수 효율을 높였습니다.

여러 프레임워크에서 사용할 수 있는 라이브러리 만들기

Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.

#JavaScript#TypeScript

31005분

2024년 3월 25일

프론트엔드

Vue3, Composition API와 Pinia를 이용한 상태관리 (2)

Vue3 Composition API와 Pinia를 실제 서비스에 적용한 사례를 다루었습니다. 인재풀 화면에서의 적용 결과와 느낀 점을 함께 정리했습니다.

React + TypeScript 전환기 (Feat. msw)

사람인 채용달력 모바일 서비스를 React와 TypeScript로 전환한 사례를 다뤘습니다. 기존 Vue 기반 경험에서 FE 분리 전환 과정과 MSW 활용 맥락을 소개했습니다.

상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드

온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.

ffmpeg.wasm

브라우저에서 ffmpeg를 실행하는 ffmpeg.wasm의 개념과 샘플 코드를 소개했습니다. 네이티브 ffmpeg보다 느리지만 서버 없이 처리할 수 있다는 장점을 확인했습니다.

#ffmpeg#WebAssembly

16005분