배경 Maplestory Worlds 관련 프로젝트는 Vue 라이브러리를 사용한다. Vue 2 → Vue 3 마이그레이션을 진행하는 중 Vue 3는 반응형을 어떻게 구현했는 지 궁금해서 정리해보았다. 반응형이란? 공식 홈페이지에서 반응성은 선언적인 방식으로 변화에 적응할 수 있는 프로그래밍 패러다임 이라고 소개하고 있다. 선언적인 방식? 어...
TS 다형성(Polymorphism) 적용해보기
배경 Vue 2 지원이 올해 말(2023-12-31) 중단됨에 따라 현재 Nuxt 2 프레임워크를 사용하는 프로젝트들을 Nuxt 3으로 이관하는 작업이 필요하다. Vue 3는 폭넓은 TS를 지원하므로 이번 이관 작업에 TS 도입도 포함되어 있다. 이관이 필요한 프로젝트는 총 3개의 프로젝트가 있다. 포털웹 크리에이터센터 ✅ 백오피스 ...
CSS vw 사용기
해상도 별 고정 픽셀 적용하기 메이플스토리 월드에서 월드 런칭 이벤트 페이지를 개발할 때 초기에 해상도 별 고정 픽셀을 적용했다. 1920px ~ 1280px ~ 1919px 768px ~ 1279px 360px ~ 767px 문제 발생 그런데, 1920 이상의 해상도에서 콘텐츠가 너무 작아 보이는 이슈가 발생했다. 아...
컴포넌트 리팩토링 (Tab)
메이플스토리 월드에서 사용하는 탭 메이플스토리 월드에서 사용하는 탭은 크게 두 종류(line, box)가 있다. 탭 컴포넌트를 사용하는 데 불편하다는 동료의 의견을 듣고 리팩토링을 해보려고 한다! 필요성 아래 코드는 기존 컴포넌트를 사용할 때 작성한 코드다. <v-tabs v-model="tab" :tab-list="tabDa...
컴포넌트 공통화 (Tooltip)
필요성 메이플스토리 월드에서 Tooltip을 사용하는 부분이 있는데, 비슷한 기능을 수행하는 Tooltip 관련 컴포넌트가 총 3개나 있다. <tip-button /> <ban-tooltip /> <tip-layer /> 이를 새롭게 만든 <v-tooltip /> 컴포넌트를 ...
Vuex 스토어 값 갱신 시 보일러 플레이트 코드 없애기
개선 이유 메이플스토리 월드의 포털 웹페이지는 Vuex를 사용해 상태 관리를 하고 있다. 그런데 스토어의 특정 값 갱신 시 매번 mutation, action 정의 코드를 작성하는 것이 번거로워서 공통화 코드를 작성했다. 아래 이미지와 코드를 살펴보자! 위 이미지는 현재 스토어 구조다. initialCategoryNo을 변경하기 위해 코드를 작성...
GitLab 배포사항 자동 기록하기
개요 팀에서 커피챗 도중 배포 사항을 수동으로 기록하는 것이 불편해 자동으로 기록하는 것이 있으면 좋을 것 같다는 의견이 있어 알아보게 되었다. 들어가기전에! 우리 팀의 브랜치 전략과 커밋 컨벤션 기준으로 작성된 문서이므로 이 부분은 인지하고 읽으면 좋을 것 같다! GitLab API 활용하기 GitLab API를 활용하면, 원격 저장소의 커밋 ...
인코딩(Encoding)과 디코딩(Decoding)
인코딩 관련 이슈 발생 진행하고 있는 프로젝트에서 댓글 관련 테스트를 진행하는 도중 댓글을 입력하는 시점에는 문제없다가 댓글을 저장 후 서버로 부터 응답 받은 댓글이 깨지는 이슈가 발생했다. 서버팀에 문의하니 로깅 시스템을 추가하는 과정에서 모든 요청 데이터의 인코딩/디코딩 방식이 잘못되어 발생한 이슈라고 답변받았다. 음… 이 기회에 인코딩/디코딩 ...
다국어 처리에 대한 고찰
배경 게임 이벤트 페이지 제작에 국문, 영문 다국어 처리를 해야 했다. 나는 단일페이지 개발이라 HTML + CSS + VanillaJS + Webpack 환경을 구성하고 페이지를 개발했다. 다국어 처리 프로세스 페이지 최초 접속 시 URL 뒤 쿼리스트링을 붙여 리다이렉트 이후 기본 URL로 접속 시 로컬 스토리지에 저장된 언어코드에 따...
복잡한 인터렉션 적용하기 (requestAnimationFrame)
나에게 시련이… 입사하고 나서 얼마 지나지 않아 MapleStory Worlds의 크리에이터 모집 페이지 제작 업무를 받았다. 디자인 시안에서 기획서 검토할 때 없었던 인터랙션들이 많아 당황했다. 전 직장에서 CSS의 기본적인 것만 활용할 줄 알았던 나에게 여러 가지 인터랙션이 존재하는 웹페이지 제작은 커다란 두려움으로 다가왔다. 이미 크리에이...