[Team Project] 회고록

목표 : SNS IC 커뮤니티 개발

팀원 : 4명 

기한 : 2주 

사용 스택 : React, MongoDB, nodejs, solidity(eth)

담당 파트 : 프론트, 백앤드

 

이전 회사에서 풀스택으로 근무 했을때 팀 으로 프로젝트를진행한다는 느낌을 받은적이없었다

이번 기회를 통해서 팀프로젝트을 경험해 본다 

 

먼저 Git을 활용한 프로젝트 관리를 통해 기능을 나누어 구현을 하고 합병하고 커뮤니케이션하며 하나씩 하나의 목표를 위해 함께한다는는게 즐겁다는것을 느꼈으며 혼자했을때의 답답함을 벗어던지고 대화를 통해 다양한 해결 방법이 도출될수있다는것을 느끼며 팀에 대한 메리트를 느끼게 되었다

 

다들 팀워크가 서툴어서 의사소통의 문제와 제대로된 업무 분담이 힘들어 겹쳐진 부분도있어 합병에 충돌이 나는 문제를 겪는 조금의 문제가 있었지만 해결을 하였고 다음에 진행하게될 프로젝트에서 이와같은 실수를 반복하지않게 상호간에 프로토콜을 만들어 진행해야하는 필요하다는 생각이든다 

 

프로젝트의 진행은 처음엔 순탄하였다 

내가 맡은 파트는 프론트와 백앤드였다

프론트에서 React 기술을 활용한 프로젝트는 처음이기에 필요한 기술들을 학습하여 적용하는것이 필요했다 

프로젝트 초창기에는 다들 욕심이 있어서 기존에 있던 기획에서 간단한 커뮤니티가아닌 SNS를 적용하게 되어 작업량이 늘어났기에 더욱더 속도를 붙일 필요가있었다 

 

먼저 백앤드 환경설정과 디비셋업을 먼저 한후 프론트 작업을 진행하였다

역시 처음 부터 만드는것을 기한내에 끝내지 못한다고 판단하여 UI배치구도와 기능설명과 work flow만 간단하게 작성한후 팀원들과 얘기를 통해 수정 보완을 한후 UI 템플릿을 찾았다 html코드로만 짜여진 템플릿이였고 react에 적용하여 컴포넌트 분리를 시키는 작업을 시작하였고 MaterialUI를 사용하여 ui의 부족한 요소를 채워 넣었다

 

순탄하던 프론트 작업은 상태관리에서 문제가 생겼다  

모든 어플리케이션은 생명주기를 가지고있는데 페이지에 필요한 상태값에 대한 동기화가 전혀되지 않아 지갑주소 또는 로그인시 유저정보등을 활용한 post렌더링과 api호출이 되지않아 시간이 지체되었다 

 

문제점은 렌더링전 비동기호출에대한 데이터를 바인딩하고 자식 컴포넌트가 해당 상태값을 가지고 렌더링을 해야했는데 

useEffect()사용한 방식으로는 렌더링이후의 작업 밖에 구현이 되지않았 제대로된 렌더링이 보여지지 못했다 

 

찾아보니 componentWillMount 수명 주기 방법이 있었는데 해당 방법은 17v 까지만 지원을 하여 이후 부턴 deprecates 되어 

액세스가 불가하여 다른 방법을 찾았으며 

 

그방법은 간단하였다

 자식 컴포넌트에 넘겨주기전 user != ?? 상태값을 체크한후 다시 렌더링 시키는 방법으로 해결하였다 

이부분을 제외하고서는 프론트 작업에서 문제는 없었다

짧은 시간이었지만 react대한 숙련도가 많이 올라갔으며 왠만한 어플리케이션은 구현가능한 수준까지 끌어올려 뿌듯하였다 

 

이후 백앤드인데 

프론트 작업을 하면서 중간 중간 백앤드 작업도 같이 진행하였다 

팀 미팅을 통해 필요한 api를 요청하였고 팀원이 다른 작업중이라 일부분의 API를 직접 추가하여 구현하여 적용했다 

백앤드에서 문제는 크게없었다 

 

프로젝트 막바지쯤 SNS 형태의 IC 커뮤니티에 문제점이 생겼다

Contract를 호출하는도중 tx가 생기면 기본적으로 서명이 필요하다 tx가없는 storage에 저장된 데이터를조회 하는건 문제가 되지않았다 

기본적으로 우리는 계약에 대한 서명이라는것은 본인이 직접 서명을 해야하지않겠냐라는 의견에 동의하여 클라이언트 - Contract의 인터랙션을 기본으로 생각하여 작업을 진행했었다 

 

하지만 사용자가 게시물을 작성하고 댓글을 달고 좋아요의 액션을 취할시 Market Contract로 부터 토큰을 분배 받는데 

매번 서명 창이 떠야하는 문제가 생겨 서비스질이 낮아지는 현상이 생긴거다 

 

이부분은 굉장히 크리티컬하여 백앤드 구조를 바꿔야하는 상황이 생겼다 

백앤드에서 지갑을 생성하고 컨트랙트 서명을 한후 토큰을 전달받는식으로 진행이 필요했던것이다 

 

이부분에 아쉽다고 느낀것은 조금만더 구현이후 발생했을 시나리오를 조금만 떠올려봤다면 이러한 불편함과 문제점을  찾을수 있을것이라고 생각이든다 

 

기본적으로 이번 프로젝트에 필요한 최소 기능이상의 구현을 하여 다행이라 생각이들지만 

아쉬움을 지울수가없었다

다음번엔 좀더 디테일하게 접근할 필요하다 

 

프로젝트 소개 : SNS 기반의 IC 커뮤니티 

- 기능 :

게시물 업로드,

댓글,

팔로우,

구글 로그인,

로컬 로그인,

NFT생성 구매 거래,

ERC20 토큰 거래

 

 

   

메인 페이지- 게시글 업로드, 댓글, 팔로우 수행

 

 

 

 

 

마이 페이지 - 유저 정보 조회, 토큰 전송, 게시물 관리

   

 

 

  

 

NFT 마켓 - NFT 구매 (마켓 전용 토큰 사용)