React + Ts 프론트엔드 개발기(feat. 메이플스토리) - 01. 시작

https://openapi.nexon.com/ko/game/maplestory/?id=14

NEXON Open API | game

 

메이플스토리에서 제공하는 open API를 활용한 프로젝트를 시작했습니다.

 

Vite + Ts + Swc로 프로젝트를 구성했으며,

 

[1] 디렉토리는 우선적으로 도메인 단위로 구분한 후, 세분화된 내용(component, hook, etc..)을 그 내부에 담는 방식을 활용했습니다.

[2] 막상 해보려니 각각의 도메인에 특화된 컴포넌트들이 잘 떠오르지 않아 component, hook등을 우선적으로 나누는 방식을 활용하기로 변경했습니다.

[3] 도메인처럼 우선적으로 수평적으로 구분하되, 도메인이 아닌 '데이터'의 종류에 따라 나누기로 결정했습니다. 특정 데이터와 해당 데이터가 사용할 수 있는 컴포넌트를 매칭해 사용 가능하게끔 하고자 합니다. 비록, 새로운 형태의 데이터가 추가된다면 그 때 마다 새로운 컴포넌트를 작성해야하는 번거로움이 있겠으나, 서비스 특성상 데이터의 형태가 추가되지 않을 것으로 예상되기에 결정했습니다.

 

프로젝트를 진행하며

 - rollup을 사용하는 Vite를 채택해 웹팩을 활용하던 CRA와의 차이점

 - Swc를 활용하며 Babel과의 차이점

 - TypeScript를 활용하며 무분별하게 타입 단언을 사용하던 부분을 슬기롭게 풀어나가는 방법

등의 내용을 몸소 느껴보고자 합니다.

 

 

backend

Rust로 백엔드 개발기(feat. 메이플스토리) - 01 시작