프로젝트 소개
프로젝트 이름 : 에잇
팀 원 : 최00*, 이00, 한00, 우00
프로젝트 내용 :
블로그를 발행할 수 있는 플랫폼 중 하나인 미디엄(Medium) 사이트를 클론 코딩합니다. 계정 생성 시 개인 지갑을 발행하며, 지갑은 서버에서 관리합니다. 계정은 계정 생성 시, 블로깅 시 플랫폼에서 발행하는 ET 토큰을 받을 수 있으며, 개인적으로 지급된 토큰은 User간에 자유롭게 주고받을 수 있습니다.
프로젝트 목표 :
BlockChain 기술을 접목한 커뮤니티 개발을 팀 프로젝트 단위로 진행하여, 팀 협업과 프론트, 백엔드 구현 및 역할을 이해할 수 있는 것을 목표로 합니다.
프로젝트 기술 스택
Front : React, Redux, Next.js
Back : Node.js, Express, Web3, MySQL
프로젝트 설계
프로젝트 구조
프로젝트는 3 티어로 구성되었습니다.
클라이언트는 블로그 미디엄을 클론, 서버는 express 서버, DB는 Mysql을 사용합니다.
블록체인 네트워크는 로컬을 사용하여 테스트 후, Ropsten 네트워크를 사용합니다.
트랜잭션은 서버를 통해서만 이루어지며, 클라이언트는 서버에 요청할 수 있습니다.
구현 목표
구현 목표는 Notion을 통해 정리하였습니다. 작업을 완료하면 체크하여 현재 프로젝트의 진척을 확인합니다.
API
API는 Postman을 사용해 간단히 명세합니다.
프로젝트 구현
MainPage
메인 페이지는 모든 컨텐츠의 목록을 확인할 수 있는 페이지입니다. 한 번에 모든 컨텐츠를 로딩하는 것을 많은 시간을 소요하기 때문에 무한 로딩을 통해 페이지를 구현하였습니다.
회원가입은 메인 페이지의 우측 상단에 있는 Sign in 버튼을 통해 이동 가능합니다. 모달 형식으로 제작하였고, Id, Pw, Name, Phone을 입력하면 회원 가입이 가능합니다.
방금 가입한 계정을 통해 로그인이 가능합니다. Id, Pw를 입력하고 로그인이 성공한 경우, Login Success!를 띄워줍니다. 로그인은 토큰 방식을 이용하여 토큰을 받아오면 로그인이 완료됩니다. 로그인이 완료가 되면 로그인 시 사용 가능한 Nav가 좌측 SideBar에 활성화됩니다.
로그인 상태 시 좌측 SideBar 하단에 위치한 버튼을 클릭하면 로그아웃을 진행할 수 있습니다. 로그아웃이 되면 토큰을 파기하기 때문에 더 이상 로그인 후 사용 가능한 기능을 사용할 수 없습니다.
MyPage
마이 페이지는 현재 로그인한 계정에 대한 정보를 볼 수 있는 페이지입니다. 현재 가지고 있는 토큰을 서버로 전송하면 토큰을 해독해 해당 사용자를 식별합니다. 그리고 해당 사용자의 정보를 반환합니다.
가진 토큰을 전송하는 기능입니다. 기능 테스트에 사용할 가스비를 위해 사전에 사용자 계정에 ropsten네트워크 이더리움을 조금 전송했습니다. 전송받을 지갑 주소와 토큰의 수량을 입력하고 Send Token버튼을 눌러줍니다.
그리고 한 10초 정도(네트워크 상태에 따라 다름) 기다리면 전송이 성공했다는 알림을 줍니다. 지갑에 들어가 확인하면 토큰이 정상적으로 전송된 것을 볼 수 있습니다.
Publish
새로운 게시물을 발행할 수 있습니다. 내가 발행한 게시물을 마이 페이지 하단에서 확인이 가능합니다.
게시물을 발행하고 약 10초 정도 지나면 내 지갑에 새로운 ET 토큰을 받습니다.
Detail
작성한 글을 클릭하면 글의 정보를 모두 볼 수 있는 페이지로 이동합니다. 이전 리스팅 된 글들은 본문의 일부만 보여주기 때문에 모든 글을 읽기 위해서는 클릭을 해 상세페이지로 이동해야 합니다. 상세 페이지에는 작성자, 글 제목, 글 내용을 표시합니다.
결과 고찰
이번 프로젝트는 약 2주간의 제작 기간이 있어 전 프로젝트에 비해 규모를 키우게 되었습니다.
서버와 DB를 두어 3 티어로 구축하였고, 트랜잭션 처리는 서버에서 진행하였습니다. 계정의 지갑을 서버에서 관리하다 보니 프로젝트는 중앙화가 되었습니다. 이 부분이 새로 생성된 지갑들을 사용자가 메타마스크에서 가져오고, 관리하는 불편함을 해소할 수 있어 효율적이라고 생각했습니다. 다만 트랜잭션을 발생시킬 가스비가 필요한데 현재 프로젝트에서는 DB를 확인해야 가스비를 전송할 수 있습니다. 이 부분은 마이페이지에서 지갑의 주소와 이더리움의 수량을 확인할 수 있으면 더 좋았을 것 같다는 생각이 들었습니다.
이번 프로젝트에서는 기존에 배웠던 기술들(React, Redux, Nodejs, express, Mysql)를 익히고 활용하면서, 새로운 배울 기술(Next.js)을 추가해 진행해 보았습니다. SSL이 가능한 Next.js가 데이터 검색이 중요한 블로그 같은 사이트에서 SEO적인 측면에서 유리할 것이라 생각했습니다. 작업 중 Next.js에서 다양한 오류들이 발생하였고, 일부 오류들은 해결이 어려워 차선책을 택하기도 하였습니다. 이번 프로젝트를 진행하면서 팀 프로젝트의 중요성과 어려움, 다양한 기술의 이해와 학습이 중요하다는 것을 다시 한번 느낄 수 있었습니다.
댓글