개요 기존의 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를 활용하면, 원격 저장소의 커밋 ...

인코딩 관련 이슈 발생 진행하고 있는 프로젝트에서 댓글 관련 테스트를 진행하는 도중 댓글을 입력하는 시점에는 문제없다가 댓글을 저장 후 서버로 부터 응답 받은 댓글이 깨지는 이슈가 발생했다. 서버팀에 문의하니 로깅 시스템을 추가하는 과정에서 모든 요청 데이터의 인코딩/디코딩 방식이 잘못되어 발생한 이슈라고 답변받았다. 음… 이 기회에 인코딩/디코딩 ...