메이플 헬퍼 서비스 구축기

최근 메이플 헬퍼 프로젝트의 초기 목표가 크게 변경되었다. 앞으로의 프로젝트 방향성을 위해 AAR(After Action Review) 방식으로 중간 회고를 진행했다. 초기 목표 (Plan) 메이플 헬퍼는 약 1년 전에 만든 개인 프로젝트다. 기능 자체는 잘 동작했지만 시간이 지나면서 다음과 같은 기술 부채들이 점점 수면 위로 드러나기 시작했다. UI와 비

기존 메이플 헬퍼 서비스에서는 React에서 기본으로 제공하는 useContext를 활용해 전역 상태를 관리했다. 하지만 프로젝트가 진행될수록 문제가 생겼는데 useContext만으로 복잡한 로직들을 처리하려다 보니 코드를 작성하는 데 시간이 너무 오래 걸렸고, 흩어진 상태와 로직을 유지보수하기도 점점 어려워졌다. 결국 전역 상태 관리 전용 라이브러리의 필

메이플 헬퍼는 넥슨 오픈 API를 붙여서 데이터를 가져온다. 처음에는 “API 키 숨기기”가 목표라서 Next.js API 라우터를 프록시처럼만 사용했는데, 개발이 진행될수록 스파게티 코드가 되어가는걸 느꼈다. 이번 리팩토링에서 방향성을 정리해봤다. - 클라이언트가 오직 “내 서버(/api)”만 보게 만들기 - 넥슨 API 응답을 클라이언트에서 쓰기 좋은

주보캐(배럭 캐릭터) 정보를 로컬스토리지에 저장해두고, 사용자가 매번 값을 다시 입력하지 않아도 자동으로 API 요청을 보내는 구조로 운영하고 있다. 문제는 보스 가격 같은 보스 메타 데이터가 바뀌었을 때다. 서버/정적 데이터는 최신인데, 로컬스토리지가 예전 값을 들고 있으면 사용자는 계속 과거의 가격을 보게 된다. 문제 : 높은 결합도의 데이터 기존 로컬

오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다. 기존 메이플 유틸리티 서비스들은 정보 제공에만 집중해 실제 유저들이 일상 속에서 겪는 사소한 불편함을 해소해 주는 서비스는 찾아보기 힘듭니다. 저는 메이플 헬퍼를 이런 부분을 파고들어 유저들이 생각하지 못했던 서비스들을 제공하려 합니다. 그래서 제가 생각한 기

메이플 헬퍼 서비스에 구글 애드센스(Google AdSense)를 도입하려다 예상치 못한 레이아웃 문제에 부딪혔다. 현재 메이플 헬퍼는 대시보드 중심의 레이아웃을 사용하고 있는데 이 구조는 광고를 적절하게 배치하기에 매우 불리하다. 자연스럽게 광고 영역을 확보하기 어렵고 콘텐츠와 광고의 경계가 모호해져 결과적으로 사용자 경험(UX)을 크게 해칠 우려가 있었

꾸준히 운영해 온 메이플 헬퍼(Maple Helper)를 v2로 업그레이드하려고 한다. 1년 전에 만든 코드라 지금 기준에서 보면 여러 부분이 눈에 밟혔다. 그래서 기능을 추가하기 전에, 앞으로 개발 속도를 떨어뜨릴 구조부터 먼저 정리하기로 했다. v2 목표 v2에서 하려는 목표를 세웠다. - 기존 코드 리팩토링 - “최초의 대적자 패링 연습장” 신규 서비

서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다. SEO 개선 3가지 방법 메타태그 최적화 적절한 메타태그 사용은 검색 엔진과 사용자에게 페이지의 핵심 정보를 전달할 수 있는 중요한 포인트 입니다. 저의 경우는 HeadMeta컴포넌트를 만들어 활용했습니다. 구글 서치 콘솔 등록 구글 서치

안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다. 이번 포스트에서는 프로젝트 진행 과정과 배포 과정 그리고 구현했던 주요 기능들을 되짚어보며 느낀 점과 배운 점들을 공유하고자 합니다. 서비스 소개 사용 언어 및 개발 환경 : Vercel Nexon Open API Next.js React TypeScript Axios Tailwind

메이플에는 제네시스 무기 해방이라는 엔드 컨텐츠가 있습니다. 이번 겨울 쇼케이스 이후에 제네시스 무기 해방 퀘스트의 방법이 바뀌어 이를 계산해주는 계산기를 만들기로 했습니다. 해방퀘 조건 해방퀘스트는 255레벨 부터 시작할 수 있고 하위 보스를 잡고 필요한 어둠의 흔적을 모두 채우면 다음 퀘스트를 진행할 수 있습니다. | 퀘스트 | 필요한 어둠의 흔적 |

기술 스택 및 아키텍처 설계 기술 스택 - Next.js: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크. - React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리. - TypeScript: JavaScript에 타입 안정성을 추가해 개발 생산성 향상. - Axios: HTTP 요청을 간편하

저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의 유틸리티 서비스들이 있습니다. 메이플 헬퍼, 왜 기획하게 되었나? 메이플스토리는 RPG 게임으로 주간마다 잡을 수 있는 보스가 있습니다. 이 보스를 잡고 얻은 전리품으로 캐릭터를 더욱 강하게 만들 수 있는데요 기존에 있는 서비스는 캐릭터를 수동으로 등