프로그래밍/Portfolio Log30 [Portfolio Log] NFT 가구점 8 오늘은 백엔드 API 작업을 마무리하고 API 문서를 간단하게 작성했다. 로그인, 로그아웃, 회원가입, 비밀번호 API 연동을 진행했다. 비밀번호 재설정 메일을 보내면 다음과 같은 포맷으로 보낸다. 랜덤으로 생성한 토큰 정보 및 시간을 유저 정보에 기입해놓고 링크를 타고 재설정을 하면 토큰, 비밀번호 값을 토대로 비밀번호 변경 처리를 진행한다. 유효시간이 지나거나 토큰에 맞는 유저 정보가 없는 경우는 처리되지 않는다. 차크라 UI에서 제공하는 토스트 메시지를 사용하여 클라이언트의 오류 메시지를 처리해주고 있다. 그 외에도 nodejs CORS 처리, Axios에 대한 처리를 진행했다. axios는 클라이언트에서 비동기 프로그래밍의 방식(await, async)을 지원하고 호출하고 싶은 메소드에 따라 손쉽.. 2023. 12. 22. [Portfolio Log] NFT 가구점 7 백엔드 부분 작업이라 작업 내역만 정리해서 올리겠다. 물론 수정은 계속 진행되고 있다. 더 추가해야 하는 부분도 있다. 하나하나씩 작업해보자 ~ 작업내역 POST /editProfile name, desc, worldName, worldDesc NFT 아이템 정보를 넘겨주는 api GET /getNftItems => 전역변수로 관리 2. 가구 세상 - 내가 팔로우하고 있는 유저들의 방 정보를 가져온다. 백엔드: 팔로우하는 유저의 방 정보 POST /getWorldList - 가구 세상 접속 함수 백엔드: 해당 방 online + 1 소켓 서버: 접속하고 데이터 전달 POST /connectWorld - 가구 세상 나가기 함수 백엔드: 해당 방 online -1 POST /disconnectWorld 3... 2023. 12. 19. [Portfolio Log] NFT 가구점 6 express 환경에서 mysql을 연동했다. passport 라이브러리를 사용하여 세션을 저장하도록 하여 매 요청마다 정상적인 요청인지 확인할 수 있도록 했다. 아직 passport 쪽은 잘 모르고 있는 부분이 많은 것 같다. 어떤 느낌으로 처리하고 있는지만 대략적으로 느껴진다고 해야 하나, 여러 번 써봐야 알 수 있을 것 같다. 또한 프로필 변경 다이얼로그를 추가했다. express 환경에서 passport 사용방법 이해, mysql 쿼리 작성 방법 등을 익히느라 시간을 많이 사용했다. 아마 api 작업은 상대적으로 금방 쳐내지 않을까 기대하고 있다. API 작업 => 프론트 연동 => 월렛 개발 => 블록체인 개발 => 메타버스 환경 연동 순으로 작업하지 않을까 싶다. 아무튼 이번 프로젝트에서도 이.. 2023. 12. 17. [Portfolio Log] NFT 가구점 5 가구 항목에 대한 다이얼로그가 추가되었다. 메인페이지에 표출하는 NFT 카드 UI가 수정되었고, 정보 페이지에서 이미지 옆 버튼을 눌러 탭을 이동하도록 처리하였다. 그 외에는 백엔드 개발이 필요한 부분에 대해 기능을 정리했다. 대략적인 내용까지만 정리해두었으며, url, 메소드 정보도 추가할 예정이다. DB는 설계해 두었다. 약간 수정되었는데, 워크벤치가 말을 안 들어서 다시 사진을 뽑지 못하고 있다. 1. 메인페이지 - 현재 판매중인 NFT를 순서대로 출력한다. (페이지네이션) 블록체인: 현재 판매중인 NFT의 정보를 요청 백엔드: NFT의 정보를 토대로 프론트에서 백엔드에 요청(nftItemId) 2. 가구 세상 접속 다이얼로그 - 내가 팔로우하고 있는 유저들의 방 정보를 가져온다. 백엔드: 팔로우하.. 2023. 12. 17. [Portfolio Log] NFT 가구점 4 12월 15일 작업 NFT 탭 기능을 추가했다. 다이얼로그를 출력하는 부분을 작업했는데, 정확한 이유는 모르겠지만 리액트 컴포넌트에서 외부에서 선언한 전역변수의 값을 변경했을 때 문제가 생기더라. 그래서 useAtom으로 다이얼로그에 출력할 문자를 관리하고 있다. 다이얼로그에 띄울 때 값을 설정해주고 있다. NFT의 상태에 따라 구매 가능 여부, 가격, 이름, 설명 등의 정보를 출력하고 있다. NFT의 이름이나 기본적인 내용은 DB에 저장해놓고 사용할 생각이다. 다만 어떤 아이템에 해당하는지, 가격은 어떤지, 판매 중인지 여부는 블록체인 네트워크에 저장할 생각을 하고 있다. flutter로 개발할 때와 비교하면, 리액트 쪽이 확실히 미리 만들어진 코드를 재사용한다는 느낌이 더 강했다. 이미 지원해주는 라.. 2023. 12. 16. [Portfolio Log] NFT 가구점 3 개발내역 방명록에 댓글 편집 버튼을 추가했다. 팔로잉 탭 내용을 추가하여 하트 애니메이션을 공통으로 적용했다. 기존에 댓글마다 다이얼로그가 있던 형태를 수정하여 탭이 가지고 있도록 했다. (리팩토링) 배운 내용 리액트의 다이얼로그는 매번 재생성 되는 형태가 아니라, 한번 그리고 flag로 애니메이션 처리만 해주는 형태이다. 따라서 useState로 초기값을 들고 있을 때, 변경되는 전역변수의 값이 처리되지 않더라. 그래서 useAtom(jotai 라이브러리)를 써서 전역변수에 대해 변하는 값을 인식하도록 처리한다. export const userAtom = atom(null); Const [item, setItem] = useAtom(userAtom); 내가하고 싶은 처리는 특정 전역 변수가 변했을 때,.. 2023. 12. 15. [Portfolio Log] NFT 가구점 2 요즘 개발을 너무 게을리하는지 집에 와서 글이나 쓰고 있지, 실질적으로 개발을 안 한다. 좀 맞아야 할 것 같은데;; 방명록 탭을 만들었다. 추가적으로 개발한 것이 없으니 배운 것만 정리하고 마무리하겠다. CSS 속성으로 width="calc(100% - 100)" 이런 식으로 사용할 수 있다. 차크라 UI에서 Flex와 Stack의 차이 Flex는 영역을 먹고, stack은 먹지 않는다. flutter에서 스택은 좌표계 처럼 위치를 조정하고 실질적인 가로 세로는 Row, Column을 사용한다. 그러나 웹, 차크라 UI에서는 Stack으로 가로, 세로를 처리하고 위치 조정은 position과 absolute/relative로 처리한다. 2023. 12. 14. [Portfolio Log] NFT 가구점 1 최근에 블록체인 프로젝트를 시작한다고 언급했었다. React, Express, 블록체인 기초, 블록체인 월렛(크롬 익스텐션 개발), threejs 등 준비가 다 되었다고 판단하여, 이번 주말부터 개발을 시작하고 있다. 처음에 구상했던 방향과는 약간 다르게 접근하고 있는데, 메타버스 환경 구축을 Unity가 아니라 Web환경에서 구축할 예정이다. React 환경에서 three.js를 사용하도록 도와주는 라이브러리인 threejs-fiber를 이용하고 있다. 앞으로 개발에 사용할 기술 스택은 다음과 같다. 언어: Typescript, Javascript, Solidity 서버: Express(Node.js) 블록체인: Polygon 프레임워크: React 라이브러리: Socket.io, Threejs-fib.. 2023. 12. 10. [메타프루츠] WebRTC 기반 포트폴리오 [작품 이름] 메타프루츠(Metafruits) [작품 바로가기] 웹 사이트: https://metafruits.kro.kr [작품 소개] 메타프루츠는 '메타'와 '프루츠'의 합성어로, 메타버스 환경에서 과일이 되어 채팅이나 다자간 화상회의를 진행할 수 있습니다. [개발 기간] 23.09.27~23.10.17 [주요 기능] 1. 다자간 화상회의 2. 채팅 - 전체 채팅 - 회의방 채팅 3. 캐릭터, 닉네임 변경 4. 장치설정 - 카메라, 마이크 제어 - 장치 선택 - 마이크 테스트 5. 모바일웹(사파리 브라우저) [사용 기술] 언어: javascript, HTML, CSS 서버: node.js(express) 라이브러리: Mediasoup, Phaser, Socket.io, Webpack 프로토콜: HTT.. 2023. 10. 17. [Portfolio Log] WebRTC 기반 포폴 기록 11 (메타프루츠) 모바일 웹 환경에서 캐릭터를 움직일 수 없어서 조이스틱을 추가했다. https://rexrainbow.github.io/phaser3-rex-notes/docs/site/virtualjoystick/ 또한 getUserMedia가 정상적으로 동작하지 않아서 navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if(navigator.getUserMedia) { naviagtor.mediaDevices... } 이런 형태로 수정했다. iOS 환경에.. 2023. 10. 17. 이전 1 2 3 다음
