HelloMaple 백오피스 작업할 때 HTTP Response 에러를 일괄적으로 처리한 방법에 대해서 정리했다. 구현하기 현재 다른 프로젝트들을 살펴보면 try, catch 구문을 이용해 에러를 핸들링하고 있다. HelloMaple 백오피스도 다른 프로젝트와 동일한 방법을 이용하려고한다. 커스텀 에러 클래스 정의 ErrorBase.ts 커스텀 ...

개요 기존의 Maplestoryworlds 백오피스는 인증과 인가를 사내에서 제공하는 Proxy Server를 이용했다. 하지만, 신규 프로젝트에 더 이상 해당 서비스를 제공하지 않는다고 해서 HelloMaple 백오피스는 다른 방법으로 개발했다. 이 과정에서 배운 점을 기록하려고 한다. 인증(Authentication)과 인가(Authorizati...

개요 HelloMaple 백오피스 개발하는 중 데이터를 불러올 때 테이블에 로딩 처리를 하는 페이지와 그렇지 않은 페이지가 있어서 로딩을 제거할지 아니면 테이블에 모두 적용할지 고민에 빠졌다. 같이 고민하면 좋을 것 같아서 팀 메신저를 통해 아래 내용을 물어봤다. 흠 HelloMaple 백오피스를 개발하면서 고민이 되는 사항이 있어서 여기 남겨...

배경 Maplestory Worlds 관련 프로젝트는 Vue 라이브러리를 사용한다. Vue 2 → Vue 3 마이그레이션을 진행하는 중 Vue 3는 반응형을 어떻게 구현했는 지 궁금해서 정리해보았다. 반응형이란? 공식 홈페이지에서 반응성은 선언적인 방식으로 변화에 적응할 수 있는 프로그래밍 패러다임 이라고 소개하고 있다. 선언적인 방식? 어...

배경 Vue 2 지원이 올해 말(2023-12-31) 중단됨에 따라 현재 Nuxt 2 프레임워크를 사용하는 프로젝트들을 Nuxt 3으로 이관하는 작업이 필요하다. Vue 3는 폭넓은 TS를 지원하므로 이번 이관 작업에 TS 도입도 포함되어 있다. 이관이 필요한 프로젝트는 총 3개의 프로젝트가 있다. 포털웹 크리에이터센터 ✅ 백오피스 ...

해상도 별 고정 픽셀 적용하기 메이플스토리 월드에서 월드 런칭 이벤트 페이지를 개발할 때 초기에 해상도 별 고정 픽셀을 적용했다. 1920px ~ 1280px ~ 1919px 768px ~ 1279px 360px ~ 767px 문제 발생 그런데, 1920 이상의 해상도에서 콘텐츠가 너무 작아 보이는 이슈가 발생했다. 아...

메이플스토리 월드에서 사용하는 탭 메이플스토리 월드에서 사용하는 탭은 크게 두 종류(line, box)가 있다. 탭 컴포넌트를 사용하는 데 불편하다는 동료의 의견을 듣고 리팩토링을 해보려고 한다! 필요성 아래 코드는 기존 컴포넌트를 사용할 때 작성한 코드다. <v-tabs v-model="tab" :tab-list="tabDa...

필요성 메이플스토리 월드에서 Tooltip을 사용하는 부분이 있는데, 비슷한 기능을 수행하는 Tooltip 관련 컴포넌트가 총 3개나 있다. <tip-button /> <ban-tooltip /> <tip-layer /> 이를 새롭게 만든 <v-tooltip /> 컴포넌트를 ...

개선 이유 메이플스토리 월드의 포털 웹페이지는 Vuex를 사용해 상태 관리를 하고 있다. 그런데 스토어의 특정 값 갱신 시 매번 mutation, action 정의 코드를 작성하는 것이 번거로워서 공통화 코드를 작성했다. 아래 이미지와 코드를 살펴보자! 위 이미지는 현재 스토어 구조다. initialCategoryNo을 변경하기 위해 코드를 작성...

개요 팀에서 커피챗 도중 배포 사항을 수동으로 기록하는 것이 불편해 자동으로 기록하는 것이 있으면 좋을 것 같다는 의견이 있어 알아보게 되었다. 들어가기전에! 우리 팀의 브랜치 전략과 커밋 컨벤션 기준으로 작성된 문서이므로 이 부분은 인지하고 읽으면 좋을 것 같다! GitLab API 활용하기 GitLab API를 활용하면, 원격 저장소의 커밋 ...