BLOCKCHAINER - 토큰 보상 커뮤니티 웹 사이트

citron03·2022년 5월 2일

프로젝트

목록 보기

6/8

토큰 보상 기반 커뮤니티 웹 사이트를 개발하였다.

사용자들이 지갑을 만들지 않고, 회원가입을 하면 해당 계정에 대한 지갑을 서버에서 만들고, 그 지갑으로 커뮤니티 활동에 대한 보상(토큰)을 지급하도록 하였다.
🧀 사용자들은 토큰을 받기 위해서 복잡한 지갑 생성 과정을 거치지 않고, 토큰과 nft를 획득할 수 있다.
🧀 사용자 경험의 측면에서 바라보았을 때, 지갑 연결이나 트랜잭션을 승인하는 부분 등 블록체인과 직접적으로 관련된 부분을 서버에서 처리를 함으로써, 사용자는 dApp을 이용함에도 기존의 사이트를 이용했던 것처럼 웹 사이트를 이용할 수 있다.
🧀 결과적으로, 사용자들이 새로운 서비스를 더 쉽게(기존의 방식처럼) 사용할 수 있게 하였다.

개발 회고

내가 맡은 부분은 다음과 같다.
🎆 게시물 리스트와 게시물 상세 페이지의 프론트 엔드를 개발하였다.
🎇 Home 페이지의 API와 프론트엔드를 개발하였다.
게시물을 작성, 수정, 삭제한 뒤 바로 화면이 갱신되지 않는 문제가 있었다.
이를 해결하기 위해서, redux로 전역 변수를 하나 만들고, 서버로부터 요청에 대한 응답을 받으면 이 변수를 갱신하는 방법을 사용하였다.
데이터를 받아오는 함수를 useEffect로 관리하고, useEffect의 deps에 위의 변수를 넣어주었다.
하지만, 이상하게도 삭제가 일어난 뒤에 fetch가 일어나도 바로 데이터가 갱신되어 있지 않아서 setTimeout을 사용하여 일정 시간이 지난 뒤 다시 렌더링이 일어나도록 하였다.
fetch로 데이터를 가져오지 않고, 삭제 요청이 성공하면 기존의 데이터에서 삭제 요청을 보낸 데이터만 제거하는 방법을 생각했으나, 실제 DB의 데이터로 갱신하는 것이 더 맞다고 생각하였다.
🍇 react query 라이브러리를 사용했다면, 더 깔끔하게 ajax 처리를 할 수 있었을 것 같다.
delete 메소드를 사용하면서, delete 메소드에는 body를 사용할 수 없는 것을 알 수 있었다. (쿼리나 파라미터를 사용해야 했다)
게시판을 만들기에 많은 게시물을 상정해야 했고, 따라서 pagination을 생각하게 되었다. 그리고 pagination을 하는 과정에서 백앤드를 맡은 팀원과와 의사소통이 필요했다.
기본적으로 전체 페이지를 알고 있어야 했는데, 전체 게시물의 갯수를 불러오는 방식으로 전체 페이지를 계산하였다.
검색 기능에서 pagination을 따로 사용하지는 않았다. 데이터가 많아지면, 검색 기능에 pagination 기능 역시 필요하다고 느껴지는데 검색에서 pagination api를 어떻게 구현하는지 알아봐야겠다고 생각했다.
개발이 진행되면서 본래 생각했던 핵심기능인 댓글이나 게시물 작성시 토큰을 받는 기능이 마지막에 구현되었다.
결국, 부가적인 기능이 추가되더라도 기본적인 커뮤니티 웹 사이트의 기능들이 먼저 선행되어야 했기에 개발을 위해 주어진 기간에 일정을 맞추는 일이 생각보다 빡빡했다.
위와 같은 경험을 겪고, 개발을 위해서 우선순위를 철저하게 세우고 핵심 기능을 구현하기 위한 로드맵과 같은 가이드라인이 중요하다고 생각하게 되었다.
예쁜 화면의 구성을 위해서 캐러셀을 만들었는데, image의 크기 조절 때문에 어려움을 많이 겪었다.
캐러셀의 이미지 크기 문제는 결국, 가로나 세로의 max 크기를 설정하지 않았던 것이 문제점이었다. 이미지의 크기는 줄어들 수는 있지만 커질 수는 없었기 때문에 화면 비율에 딱 맞춰지지 않았던 것이다.
캐러셀을 구현하는데 라이브러리를 따로 사용하지 않았는데, 다음에 구현한다면 더 다양한 기능을 위해서 React Slick이나 Swiper.js와 같은 라이브러리를 사용하는 것이 좋을 것 같다.
grid 레이아웃을 일부분 사용하였는데 그리드는 화면에 표시될 아이템의 갯수가 정해져있고, 한 줄에 이 아이템을 몇 개씩 보여줄지 정해두었을 때, 깔끔하게 표현이 가능한 것 같다.