[Project] Toy 프로젝트 회고

🚪 프로젝트 명 ‘옷장’

‘옷장’ 은 프라이빗 블록체인을 (하이퍼레저 패브릭) 이용한 토이프로젝트 입니다

나의 옷장에 있는 옷들의
색상, 사이즈, 메이커 등 상세정보를 입력하고
사진을 찍어 블록체인에 기록할 수 있습니다

🧬 아키텍처 설계

🚦 프로젝트 구성

프로젝트 기간 (11/7 ~ 11/13)

  • Front-end
    타입스크립트 를 이용한 웹페이지 UI/UX 구성

  • Smart Contract
    Go lang 으로 작성된 체인코드 배포
    CouchDB 에 데이터 저장

  • Back-end
    Node js & express 를 이용한 API 세부설계
    체인코드 함수 호출

💻 기능 소개

메인 페이지

권한등록 버튼을 누르면 회원가입을 승인해줄수 있는 관리자가 생깁니다

한번 권한 등록을 한 후에는 알림창이 나옵니다 ❗

옷장등록 (회원가입)

옷장등록 버튼을 누르면 옷장등록 (회원가입)을 할 수 있는 페이지로 이동됩니다

옷을 등록하기 위한 옷장을 등록페이지 (회원가입)

중복 아이디 유효성검사 기능

옷 등록하기

블록체인 원장에 기록하기 위한 정보들을 입력합니다

  • 회원가입한 옷장 아이디
  • 옷 주인 이름
  • 등록할 의류 이름 (종류)
  • 제조사 (메이커)
  • 사이즈
  • 색상
  • 구매 연도
  • 금액
  • 사진

옷 정보 수정하기

등록된 옷의 정보들을 수정하는 기능도 있습니다

수정하고자 하는 정보와 / 수정되지 않는 정보도 그대로 다 입력해야 합니다 ❗

⭐⭐ 블록체인에 올라간 데이터는 수정 & 삭제가 안된다고했는데 가능할까?

👉 하이퍼레저 패브릭 월드스테이트 데이터베이스(WSDB) 는 블록의 최신기록만 저장해놓는다

https://wavescats.github.io/blockchain/2022/08/28/bc52.html
(👆 블록체인에서의 CRUD 기능 참고)

옷 정보 조회하기

등록한 옷을 조회합니다

옷 판매(전송) 하기

등록된 옷을 판매(전송) 할 수 있습니다

옷의 주인을 변경

등록된 옷 삭제하기

등록되어 있는 옷을 삭제 할 수도 있습니다

블록체인에 등록된 데이터 조회하기

couchdb 를 통해 블록체인에 등록된 데이터를 조회 할 수 있습니다

‘옷장’ Github 코드
https://github.com/wavescats/Wardrobe-dApp

개발 회고 💡

프라이빗 블록체인 ‘하이퍼레저 패브릭’ 을 이용한 첫 결과물입니다!
토큰이코노미가 안들어가서 크게 복잡하지 않았던거 같습니다

감을 익히려고 예제를 응용해서 단순기능만 구현해봤는데
이것저것 조금씩 추가하고 만지다보니 더 공부가 되었던 프로젝트였습니다

‘프라이빗’ 이라는 장점을 이용하면 아이디어와 적용할 분야가 무궁무진 할 것 같습니다 💡

CSS는 심플하게 꾸며보려고
‘부트스트랩’ 과 ‘스타일 컴포넌트’를 사용해봤는데
전에 비해 스타일 코드가 조금 간결해졌습니다

역시… CSS 는 항상 어렵고 아쉬움이 남는거 같습니다 💧

아쉬웠던 점 & 보완해야 할 사항

로딩 효과

버튼 클릭시 onClick 이벤트 👉 Axios 호출 👉 해당 결과 Modal 창

이 단계에서 서버로 부터 응답을 받는 시간이 조금 걸려서
해당 결과 Modal 창이 나오기 전에 ‘로딩 효과’ 를 주러고 했는데

그냥 화면에 뿌려주는 Axios 호출은 Html 페이지 상에서
3항 연산자로 해결하면 됐지만

버튼을 눌렀을때 👉 서버 응답을 받는 중… 일때
로딩효과를 보여주는건 어떻게 구현해야할까?

복잡한 체인코드

하이퍼레저 패브릭 예제를 응용해서 단순기능만 구현해봤는데
‘프라이빗’ 이라는 장점을 생각해서 구현해보고 싶은 아이디어가 많습니다 💡
조금 복잡한 체인코드를 작성해서 구현해보고 싶습니다