프로젝트 링크
깃허브 링크

사이퍼즈 아이템 세팅 프로젝트 후기

기간: 2021.08~2021.09 약 한달 반?

만들게 된 계기

사이퍼즈는 내가 오픈 베타 부터 즐기기 시작했으니까
거의 9년이나 한 게임이다...
나는 예부터 선천적 아싸 기질 때문인지 롤이나 메이플 같은 소위 인싸들의 겜은 내 성에 맞지 않은 것이었다.
그런데 사이퍼즈란 게임은 인싸의 주류에서 벗어났지만 그렇다고 모르는 사람도 적지 않은 그런 게임이었다. 그리고 그것이 내 취향을 저격하게 되었다.
민취 게임인것이다. (민기 취향이란 뜻 ㅎㅎ)
하지만 k-게임 대부분은 몇몇 게임을 제외하고는 뉴비 소수에 고인물이 대다수인데...고인물이 대다수라면 온갖 기능이 있는 팬페이지 하나 쯤은 있지만 이 게임은 9년이나 지난 고고고고인물 게임인데 어떻게 된 게임이 아이템 세팅해주는 페이지가 없었다.

그래서 만들었다. 내가. 하하하하

• 리액트 공부해보려고.

만드는 과정

1.아이템 데이터 만들기

처음에는 쉽게 생각했다. 그냥 네오플에서 api로 데이터 받아와서 뿌리면 되겠네 .
하지만. 역시나 생각만큼 쉽지 않았다. 그리고 왜 지금까지 아이템 세팅해주는 페이지가 없었는지 알게 되었다. 그 이유는 ....

아이템 전체 목록을 네오플이 제공해 주지 않았다.

세상에 ...

아이템 이름을 검색하면 능력치 데이터는 보내 주면서 전체 목록은 제공해 주지 않다니......

그 말은 내가 직접 일일히 찾아서 전체 목록을 만들어야 된다는 뜻이었다.

그래서 포기

하지 않고

크롤링을 통해

http://cyphers.nexon.com/cyphers/game/item/itembox

사이퍼즈 공홈에 있는 아이템 박스의 전체를 크롤링해서
거대한 사이퍼즈 전체 아이템 목록을 만들었다.

f12를 눌러서 어떻게 itembox가 돌아가는지 확인해야했다..

아이템 목록을 만들면서 있었던 시행착오로는..

1.아이템 이름이 캐릭마다 다를 줄 알았는데 똑같은 아이템이 존재해서 생긴 문제
2.일부 캐릭터의 이름 오타( 캐럴 캐릭터의 이름이 k로 시작하는 것이 아니라 c로 시작했던 문제)

가 있었다.
물론 해결했다.

2.캐릭터 목록 만들기

캐릭터 또한 전체 목록을 제공하지 않았기 때문에 크롤링

하지 않고

그냥 노가다로 이름 목록을 만드는 것이 시간대비로 빠를 것 같았다.
한번 만들어두면 바꿀 일이 없고 나중에 필요할 것 같았기 때문이다.
그래서 그냥

치지 않고

나무위키 복사 붙여넣기 했다.

3.NEXT JS (REACT JS) 배우기

만들기 전에 생각한게 이 페이지는 서버가 필요 없을 것 같다고 생각했다.
그래서 서버리스 페이지를 만들기로 했다.
나는 지금까지 프론트엔드 라이브러리를 공부해본 적이 없는데 사람들이 많이 쓰는 리액트를 공부해보기로 했다.
생활 코딩 책을 사고 하루에 한챕터씩 해서 리덕스 빼고 4챕터 정도 완료하고 본격적으로 만들기 시작했다.

(이 프로젝트를 하면서 리덕스 같은 상태관리 툴을 쓰지 않기로 했다. 첫 프로젝트이므로 상태관리를 직접해보고 싶었다)

리액트 프레임워크 중 nextjs란 것을 알게되었고 괜찮을 것 같아서 썼다.nextjs를 배우면서 서버사이드렌더링과 클라이언트사이드렌더링도 알게되었고 좋은 경험이 되었다. typescript를 쓰면 더 좋을 것 같아서 타입스크립트도 처음 써봤다.

4.본격적으로 만들기

먼저 여러가지 적절한 atoms를 만들고 molcures를 만들고 organisms를 만들고 templates를 만들었다.

사실 . atomic 패턴을 지키고 싶었지만 협업하는 것도 아니고 그냥 임의로 내가 정해서 컴퍼넌트들을 정리했다.

모바일용 페이지를 따로 만들고 싶지 않아서

이런식으로 좌우에 body div의 최대 width를 두었다.
그리고 디자인의 경우 사이퍼즈 특유의 투박하고 암울하고 구린 느낌을 주는 느낌으로 그림을 그렸다.

버튼 디자인도 직접 그렸다. 사실 딴짓하고 싶어서 직접 그렸다.

만들면서 있었던 문제는

1.상태관리의 어려움.
2.최적화의 어려움.

상태관리의 어려움은 처음에 설계도를 제대로 만들지 않고 만들기 시작해서 생긴 문제인 것 같았다. 그래서 잠시 프로젝트 만드는 것을 멈추고 어떻게 설계해야 할지를 다시 고민하는 시간을 가졌다.

최적화 문제는
사이퍼즈 아이템은 한 캐릭터만해도 공용아이템 합해 400개가 훨씬 넘어가는데 이 아이템하나당 버튼 컴퍼넌트를 형성하므로 계속 리렌더링 하면 당연히 아주 속도가 느려진다.
그래서 최적화에 아주 공들였다.
느려지는 문제는 아이템 버튼들을 담는 아이템 리스트 컴퍼넌트가 무슨 일이 일어날때마다 계속 리렌더링을 수행해서 생긴 문제 같았다.

그래서 나는 여러가지 방법도 써보고 무엇을 해야 되는지 왜 이건 안되는지 매우 고민을 하면서 만들었고 지금은 최적화가 아주 잘되어서 불필요한 리렌더링을 수행하지 않는다.

그리고 찾은 방법을 다른 컴퍼넌트에도 적용해서 매우 최적화가 잘되어있다고 개인적으로는 생각한다.

이 프로젝트에서 이 부분이 가장 마음에 든다.

사실 만들면서 좀더 빨리 만들 수 있었는데 너무 게으름을 피웠나 생각도 든다.

5.배포하기

처음에는 옛날에 경험이 있던 aws를 써보기로 했다. 그래서 그냥 내 방식대로 올리고 할려 했는데 nextjs 공식 doc에 배포를 vercel로 하면 취미로 올리는건 무료라고 하는 것이 아니겠어요./.1?!

그래서 vercel로 올렸다.
깃허브 리포지터리 등록하니까 자동으로 해주더라 .
개꿀 ㅋㅋ

6.후기

사람들이 많이 사용해주었으면 좋겠다.
꽤..열심히 만들었기 때문이다.

끝.