개요 HelloMaple 백오피스 SSO(OAuth) 로그인을 개발할 때 로그인 상태를 유지하기 위해 JWT를 사용했는데 보안 검수에서 세션 방식을 이용할 것을 권고받아 세션 방식으로 변경한 경험을 정리하려고 한다. JWT? 세션? JWT와 세션에 대하여 간략하게 알아보자. JWT JWT은 JSON 객체를 사용하여 정보를 전달한다. JWT의 구조는 ...

요구사항 MapleStory Worlds 백오피스에서 사용자가 UTC offset(+07:00, +09:00)을 직접 선택하여 날짜 데이터를 입력하는 기능을 추가해달라고 요청받았다. 위 이미지와 같이 UI를 구성하면 백오피스 사용자가 날짜를 적용하려는 국가의 UTC offset을 직접 확인해 설정할 것이라는 답변 받았다. 하지만 내 생각은 사용자가...

들어가기 앞서 현재 대부분 Vue 3를 이용해 회사 프로젝트를 진행하고 있지만, 커피챗 도중 리액트 메모리 누수 아티클을 읽었는데 흥미로워 따로 정리하려고 한다. 원본 아티클은 Sneaky React Memory Leaks: How useCallback and closures can bite you이다. 클로저 리액트 메모리 누수에 대해 알아보기 전...

돌아보기 위 이미지는 이전에 구현한 CHANGELOG.md 자동 업데이트가 동작한 결과 중 일부 이미지다. 해당 기능에 대한 자세한 설명은 GitLab 배포 사항 자동 기록하기 여기를 참고하자! 꾸준히 잘 사용하고 있었지만 개선하면 더 좋을 것 같은 점들이 있어 추가로 작업했다. 작업하면서 기록으로 남기고 싶은 부분이 있어 게시글을 작성한다. 개...

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 이상의 해상도에서 콘텐츠가 너무 작아 보이는 이슈가 발생했다. 아...