개발과 기술에 대한 다양한 주제의 글들을 모아놓았습니다
최근 진행 중인 BrickML 프론트엔드 애플리케이션에서 큰 과제가 하나 바로 Vue 2 기반 프로젝트를 Vue 3로 마이그레이션하는 작업!! 처음엔 단순히 패키지 업그레이드 정도일 거라 생각했는데, 막상 해보니 호환성 문제, UI 깨짐, 런타임 오류 등 꽤 다양한 난...
최근 Vue 프로젝트에서 Plotly.js를 활용해 데이터를 시각화하는 기능을 구현하면서, 조금 난감한 문제를 하나 마주했습니다. 바로 차트가 너무 작게 그려지는 현상 처음엔 단순 스타일 문제인가 싶었는데, 알아보니 생각보다 복잡한 렌더링 타이밍 이슈였습니다. 🔍 처...
새롭게 맡은 프로젝트에서, 오늘은 FlowNodeDetail 페이지의 Processing Logs 섹션을 사용자 친화적으로 개선하는 작업을 진행했습니다. 데이터 처리 과정을 시각적으로 명확하게 표현하고, 전체 흐름을 쉽게 파악할 수 있도록 UI/UX를 다듬는 것이 주요...
오늘 월드컵 게임의 결과 페이지에서 투표 통계가 제대로 표시되지 않는 문제를 해결했습니다. 통계 매칭 로직과 UI까지 전면적으로 개선했습니다. 🐛 문제 월드컵 게임을 마친 후 결과 페이지에서 "아직 다른 사용자들의 투표 데이터가 없습니다” 라는 안내 문구만 보게 되는...
이직 후 첫 출근 날, 제가 가장 먼저 한 일은 기존 Vue 2 코드베이스를 파악하는 것이었습니다. 주로 React를 써왔고, Vue는 과거 프로젝트에서 몇 달 정도 써본 게 전부였기 때문에 Vue 2는 익숙하진 않았습니다. 문법과 구조도 생소해서 초반에는 낯설었지만,...
개발하다 보면 예상치 못한 버그를 만나게 됩니다. 오늘은 Pik2 게임의 월드컵 토너먼트 모드에서 발생한 흥미로운 버그와 해결 과정을 공유해보려 합니다. 🐛 문제 발견: "어? 내가 선택한 캐릭터가 어디 갔지?" 16강에서 좋아하는 캐릭터들을 선택하고 8강으로 넘어갔...
최근 Pik2 밸런스 게임에 새로운 변화를 줬습니다. 특히 멀티 게임 모드에서 UX을 개선하고, 실제 투표 결과를 보여줄 수 있도록 Supabase와 연동하는 작업을 진행했어요. 이번 작업을 통해 사용자는 더 빠르게, 더 직관적으로 게임을 즐길 수 있고, 실제 투표 통...
이전에는 이미지를 대표 이미지로만 설정할 수 있었습니다. 그런데 글을 쓰다 보니 중간중간 이미지도 넣어서 좀 더 보기 좋게 꾸미고 싶다는 욕심이 생기더라고요. 그래서 이번에는 마크다운 에디터에서 이미지 파일을 선택하면 자동으로 Supabase Storage에 업로드되고...
오늘은 관리자 대시보드를 개선했습니다. 특히 인기 페이지 표시 방식과 30일 방문자 통계 부분을 중점적으로 업데이트했습니다. ✅ 개선 개요 관리자 대시보드의 가독성과 분석 정확도를 높이기 위해 다음 세 가지 핵심 영역을 중심으로 개선 작업을 진행했습니다. 인기 페이지 ...
Pick2 게임에 실시간 투표 통계 기능을 추가했습니다. 사용자들이 각 질문에 대해 어떤 선택을 했는지 실시간으로 확인할 수 있는 기능입니다! 🛠️ 구현한 기능 📊 실시간 투표 통계 각 질문별 A/B 선택 비율 표시 총 투표 수와 퍼센트 계산 커스텀 질문 세트별 통...
Pick2에서는 직접 만든 질문 세트가 브라우저(LocalStorage) 안에만 저장돼서 기기 변경, 캐시 삭제 등으로 날아갔습니다. 그러나 이제는 '질문 직접 만들기'에서 생성한 질문 Supabase 서버에 저장되며 '질문 세트 보기', '공유 코드로 질문 세트 찾기...
리액트 프로젝트를 하다 보면, 파일을 열 때마다 TypeScript 타입 에러가 자주 보이곤 합니다. 저도 오늘 이런 문제를 겪었고, 타입 정의를 꼼꼼히 추가해 한 번에 해결했습니다! 🔍 문제 상황 컴포넌트 파일을 열 때마다 타입 에러가 계속 발생 대부분의 원인은 데...