메이플스토리 월드에서 사용하는 탭 메이플스토리 월드에서 사용하는 탭은 크게 두 종류(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를 활용하면, 원격 저장소의 커밋 ...

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

배경 게임 이벤트 페이지 제작에 국문, 영문 다국어 처리를 해야 했다. 나는 단일페이지 개발이라 HTML + CSS + VanillaJS + Webpack 환경을 구성하고 페이지를 개발했다. 다국어 처리 프로세스 페이지 최초 접속 시 URL 뒤 쿼리스트링을 붙여 리다이렉트 이후 기본 URL로 접속 시 로컬 스토리지에 저장된 언어코드에 따...

나에게 시련이… 입사하고 나서 얼마 지나지 않아 MapleStory Worlds의 크리에이터 모집 페이지 제작 업무를 받았다. 디자인 시안에서 기획서 검토할 때 없었던 인터랙션들이 많아 당황했다. 전 직장에서 CSS의 기본적인 것만 활용할 줄 알았던 나에게 여러 가지 인터랙션이 존재하는 웹페이지 제작은 커다란 두려움으로 다가왔다. 이미 크리에이...

HTTP? 웹 브라우저와 웹 서버가 통신할 때 규칙이 필요한데 이러한 규칙을 HTTP(Hyper-Text Transfer Protocol)라고 한다. HTTP는 클라이언트 - 서버 구조를 따르고 있다. 이는 클라이언트(= 웹 브라우저)에서 서버로 요청하고 서버에서 클라이언트에게 응답하는 형태이다. 서비스를 요청하고 제공하는 쪽이 명확하기 때문에 단방...

캐시 자주 쓰이는 데이터들을 별도 공간에 복사하고 제공하는 기술이다. 캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장된다. 캐시의 주요 목적은 상대적으로 더 느린 공간에 액세스해야 하는 필요성을 줄여 응답속도를 높이기 위함이다. 웹 캐시 서버 웹 서버의 정적 자원(html, javascript,...

Mock API? Mock의 사전적인 의미를 알아보자. mock : 거짓된, 가짜의, 모의의 사전적인 의미로 유추해본다면 Mock API란 실제 API가 아닌 가짜, 모의의 API이다. Mock API는 말 그대로 진짜인 API를 흉내 내 사전에 정의된 데이터를 단순하게 돌려주는 형태의 API이다. 그렇다면 왜 실제 API가 아닌 가짜 A...