NFT를 활용한 웹 서비스 DApp 어플리케이션 역할 및 성과 - FE 개발자로서 React 지식을 바탕으로 향후 프로젝트에 사용할 폴더 구조와 같은 특정 기능 개발을 주도하고 일정에 대한 팀원 간의 커뮤니케이션을 관리했습니다. 베트남에 기반을 둔 5명의 프론트엔드 및 백엔드 개발자 팀과 함께 프로젝트 관리 경험을 쌓았고 Google Meet 및 Discord와 같은 화상 통신 서비스를 통해 원격 개발 환경에서 협업했습니다. - 분산형 웹 어플리케이션을 만들기 위해 팀과 협력하고 Cavar.js를 통해 로그인 기능을 구현하고, IPFS 프로토콜을 통한 Opensea에서 Suhosin NFT 데이터를 페치해서 프론트 React.js에 표시했습니다. 수호신 NFT 가 있어야 접속이 가능하고, ​​(2023년 1월 기준)지금까지 Opeansea를 통해 총 12만개의 KLAY 거래되었습니다. https://opensea.io/collection/suhosin-official - API가 없는 상황에서 어떤식으로 데이터를 전달 해달라고 백앤드 개발자분께 명확하게 설명하고, Redux의 initialState부분에 Mock데이터를 입력 후, 먼저 프론트 작업을 시작해 개발 일정을 맞추는데 효율적으로 업무 - AWS S3, Cloudfront를 통한 프론트 배포 경험 담당 기능 클라이언트 : Auth, my Info 및 옥션 & 어드민 페이지: 래플 관리 메타마스크에 수호신 NFT가 없으면 서비스 접근이 불가능하기에, 밑의 수호신 AMA 소개 영상을 통해 확인 부탁드리겟습니다. https://www.youtube.com/watch?v=iKP2xEPwWPE&ab_channel=SUHOSIN 31:55 서비스 소개, Caver.js 와 LocalStorage를 활용한 로그인/로그아웃 기능 33:14 My info, React-Google-maps를 통한 주소 상태 등록 및 소셜 미디어 등록 https://www.youtube.com/watch?v=aFHROjNbuP0&t=1366s&ab_channel=SUHOSIN 17:15 옥션 리스트/옥션 Action 활용한 라이브러리 React.js, Redux Toolkit, CaverJS, Postgresql, AWS S3, Cloudfront, EC2, RDS, Route53 어려웠던 부분/고민한 부분: NFT를 로딩하는 과정에서 IPFS 프로토콜을 활용해야 했기 때문에, 기존의 JSON 형태로 백엔드에서 데이터를 가져오는 것과는 다르게 처음 시도하는 기술이었습니다. 또한, 패칭을 해오는 과정에서 사용자의NFT 싱크가 되지 않는점이 있었습니다. 해결방법: 해결방법: 우선, IPFS 프로토콜을 활용하여 NFT 데이터를 불러오는 과정에서 생기는 문제를 해결하기 위해, 클레이튼 CDN(Content Delivery Network)를 도입하여 로딩 시간을 단축시켰습니다. 또한, 백엔드에서 데이터를 가져오기 전에 케이버JS와의 싱크를 맞추는 등 로딩 과정에서 필요한 선행 작업이 필요했습니다. 불법적인 취득을 차단하기 위해, 백엔드에서 NFT 주소의 유효성을 검사하고, 특정 유저의 부적절한 행위를 탐지하는 로직을 추가하였고, 프론트에서는 기다리는 동안 스켈레톤 UI로 사용자 경험을 개선하고 높였으며, Lazy Loading 기술을 사용하여 필요한 만큼 로드할 수 있도록 하였습니다. Lazy Loading: 모든 NFT를 한꺼번에 로드하는 대신, Lazy Loading 기술을 사용하여 사용자가 스크롤링하면 필요한 만큼 로드할 수 있습니다. 이렇게하면 초기 로드 시간이 줄어들고 사용자 경험이 개선됩니다. 캐싱: 사용자가 이전에 로드한 NFT를 캐시하여, RPS(Requests Per Second)는 초당 요청 수를 줄일 수 있도록 하였습니다. 결과: 클레이튼 API를 통한 CDN과 IPFS 노드 캐싱을 도입하여 로딩 시간을 단축시켰으며, 백엔드에서의 로딩 선행 작업을 통해 데이터 로딩 문제를 해결하였습니다. 또한, 보안성을 강화하여 특정 유저의 부적절한 행위를 차단할 수 있게 되었습니다. 이러한 노력으로 인해 NFT 로딩 시 문제가 발생할 가능성을 크게 줄이고, 이는 사용자들의 이용 만족도와 서비스 신뢰도에 긍정적인 영향을 미쳤습니다.

더보기