프로젝트2 시작
프로젝트1을 마무리 짓고 프로젝트2를 시작하게 되었다.
이번 프로젝트에서는 web2.0기반의 커뮤니티를 만들지만 유저의 활동에 보상을 지급하는 추가적인 기능이 들어간다.
이때 주어지는 보상은 이더리움 기반의 erc20 토큰이 되기 때문에 블록체인의 요소도 들어가게 된다.
사용자는 커뮤니티에서 자유로운 활동을 하면서 토큰을 보상으로 받아 이득이 되고 서비스 제공자는 커뮤니티가 더욱 활성화 되는 효과를 얻기 때문에 이득이 되는 구조를 가지고 있다.
처음으로 CRUD의 모든 기능을 사용하는 기본적인 커뮤니티를 만들 생각에 막막하기도 하고 한편으로는 기대감을 가지고 프로젝트를 시작하게 되었다.
개발 전 회의
이번에도 역시 팀을 배정받게 되었고, 이번 팀은 평소 알고리즘 스터디를 같이 진행하는 분과 페어 프로그래밍을 통해 합을 맞춰봤던 분과 3인 팀을 이루게 되었다. 이제는 프로젝트를 위해 사람들과 모여 인사를 나누고 계획을 하는 일이 익숙해지는 것 같았다.
개발에 들어가기 전 전체적인 계획을 세우기 위해 회의에 들어갔다.
이번 팀에서 가장 중요시하게 생각하는 목표는 멋진 결과물보다는 과정을 통한 성장이었다.
- 커뮤니티를 만들기 위해서는 일단 CRUD를 위한 API설계가 필요하였다.
- DB는 모두가 익숙한 MySQL을 사용하기로 하였다.
- ORM 모듈을 사용하여 조금 더 편하게 쿼리를 다루기로 하였다.
- 커뮤니티에 필요한 DB스키마를 작업하였다.
- 서버 코드는 MVC 패턴을 사용하기 위해 router로 분할하는 방법을 사용하기로 하였다.
- 리액트는 MUI를 사용하여 컴포넌트 디자인을 좀 더 편하게 사용하기로 하였다.
전체적인 계획을 먼저 세웠고, 구체적인 시간 계획을 세워서 성과를 달성하고자 하였다.
첫째 주에 설계된 API를 바탕으로 서버코드를 완성시키고 주말에 스마트컨트랙트 관련한 기능을 만들고 마지막 주에 프론트엔드를 완성하기로 목표를 설정하였다.
이번 목표는 과정을 통한 성장이었기 때문에 Github의 마일스톤도 적극 활용하고 안써본 모듈들도 적극적으로 활용해보자는게 팀의 공통된 의견이었다.
매주 목표에 관한 마일스톤을 만들었고 todolist 이슈카드를 만들어서 task 관리를 하였다.
또 모두가 풀스택을 다 경험하는 것이 좋다고 생각되어 매일 기능별 역할 분담을 실시하였다.
회의는 매일 진행하였으며 회의 진행 시에 본인의 코드를 리뷰하고 merge하는 작업을 해주었다.
개발
want it은 블록체인 기반 커뮤니티인 steamit과 facebook과 같은 SNS를 벤치마킹 하고자 하였다.
블록체인은 가나슈를 사용하여 테스트 하였고 테스트넷으로 이전은 아직 진행하지 않았다.
내가 맡은 부분
이번에도 팀장을 맡게 되어 전체적인 프로젝트 총괄을 하게 되었다. DB스키마와 API설계는 팀원 모두 같이 작업하였다.
서버에서는 회원가입, 게시글 수정, 게시글 삭제, ORM 연결, 컨트랙트 관련 기능을 맡아서 진행하였다.
클라이언트에서는 로그인 컴포넌트, 메인 컴포넌트, 회원가입 컴포넌트, 페이지네이션, 검색, 전체 디자인을 맡아서 진행하였다.
DB schema
일반적인 SNS라고 생각하고 스키마를 설계하였다.
API 설계
모든 기능을 CRUD에 맞게 API를 설계하였고 이를 바탕으로 개발을 진행하였다.
작동 GIF
메인화면
회원가입
로그인
게시글 조회
게시글 작성
게시글 수정
검색
로그아웃
마이페이지
토큰 전송
개발 내용
- CRUD 에 맞춰서 모든 기능이 다 구현되어있지만 인센티브 기반 커뮤니티이기 때문에 삭제기능은 악용될 가능성을 고려해 버튼을 만들지 않았다.
- 모든 기능은 로그인시에만 동작하게 되어있고 로그아웃시 무조건 메인페이지로 리다이렉트 시켜두었다.
- 회원가입, 로그인, 글작성, 댓글 작성 시에 토큰 보상을 지급하게 만들었다.
- 로그인 시에는 유효성 체크를 해두었다.
- 글작성, 회원가입, 댓글 작성 시에 빈칸을 작성하려하면 alert로 경고하고 동작안하게 만들었다.
- 작성자 본인만 글 및 댓글을 수정할 수 있게 해두었다.
- 회원가입시에 아이디 중복체크 기능을 추가하였다.
- 게시글 제목을 통해 검색이 되는 기능을 추가하였다.
Github
https://github.com/codestates/beb-03-second-wantit
회고
좋았던 점
API 설계를 모두 해놓고 시작을 했기 때문에 서버 작업에서 크게 어려움이 없었다. 정말 뚝딱뚝딱이라는 표현이 맞을 것 같다. 역할을 분담하고 다음날이 되면 기능들이 만들어졌다. 계획과 기획이 얼마나 중요한가를 절실히 느끼는 순간이었다. 또 기능별 역할을 분담하여서 모든 부분을 다 한번 씩 경험해볼 수 있어서 좋았던 것 같다. 팀원들과 정말 많은 오류를 잡아내면서 성장을 크게 하였다고 생각해서 그것도 좋은 부분이었다.
평소 깊게 생각안해본 모듈과 개발 도구들을 다 사용해보면서 좀 더 편하게 개발하는 방법을 익힐 수 있어 좋은 시간이었다.
아쉬운 점
시간의 한계로 많은 기능을 구현하지 못한 점이 너무 아쉽다. 블록체인과는 좀 많이 동떨어져 있는 web2.0 기반 커뮤니티이기 때문에 조금 더 DAPP에 가깝게 구현했다면 좋았을 것 같다. 프론트 디자인 부분도 시간이 있다면 더 좋게 만들 수 있을 것 같고 좀 더 고도화된 서비스를 제공할 수 있을 것 같은데 아쉬움이 많이 남는다.
또 이번에도 인라인 CSS를 사용해버렸다. 습관이 무서운 법이다. styled 컴포넌트 사용법을 다시 한번 숙지해야 할 것 같다.
느낀점
이번 프로젝트에서 정말 많이 성장하고 느낀 점이 많다. 정말 풀스택 모든 것을 경험했던 것 같다. 프로젝트 진행 중에 정말 많은 오류와 마주하였다. 특히 web3 모듈을 이용하여 컨트랙트를 서버와 연동하는 작업에서 정말 어려움이 많았다. 우리 프로젝트에서는 eth-lightwallet 모듈을 사용하여 지갑을 생성했기 때문에 비밀키 관리에 어려움이 있었고 이 비밀키가 있어야 서명을 한 트랜잭션을 블록에 담을 수 있었기 때문에 정말 어려웠다. 결국 비밀키는 DB에 바로 저장하는 방식을 사용하게 되었다. 니모닉 코드만으로 비밀키를 대신하는 방법이 있을 것 같지만 그 방법을 찾지 못하였고 급하게 임시방편으로 DB에 저장하게 되었다. 너무 위험하고 좋지 않은 방식임을 알기 때문에 찝찝함이 많이 남았다.
또 메타마스크를 사용하면 항상 서명을 쉽게 했기 때문에 서명이라는 걸 서버에서 일일히 작업해주는게 정말 어려웠다. web3 공식문서를 수백번을 읽었지만 동작하지 않는 코드가 많이 있었고 진짜 모든 경우의 수를 다 대입해보았다고 봐도 무방한 것 같다. 하지만 이러한 과정에서 오류를 정복하는 방법을 알았고 이제는 오류메시지를 보면 대충 어떤 부분에서 문제를 일으키고 있는지 찾을 수 있게 되었다.
프론트엔드 작업 시에 리액트 버전때문에 라우터 오류를 만나고, cors 오류를 만나고, 컨트랙트 코드들의 오류, API설계의 허점 등을 발견하는 과정 등 정말 많은 오류를 만났다. 하지만 끝까지 해결하려고 노력하였고 모든 부분을 해결할 수 있었다. 또 ux디자인을 할때 여러 프로젝트를 경험 하다보니 조금씩 익숙해져 조금 더 유연하게 예외처리와 유효성체크를 할 수 있게 되었다. 사용자 입장을 고려한 서비스는 디테일이 정말 중요한 것 같다는 생각을 많이 하게 된다.
팀장으로서 나의 할일을 하면서 팀원들의 모든 코드를 이해하고 에러를 해결해주고 매일의 목표설정과 역할 분담을 하는 것은 정말 쉽지 않았다. 하지만 힘든 만큼 더 크게 성장하는 기회가 되었다. 이러한 성장 속도로 정말 전천후적인 개발자가 되는 것이 나의 목표가 되었다.
많은 것을 느끼고 보람도 많이 느낀 재밌는 프로젝트였다.
