분류 전체보기241 [NFT Furniture Store] 블록체인 포트폴리오 [작품 이름] NFT Furniture Store Furniture Wallet [작품 소개] NFT Furniture Store는 가구 교환권 NFT를 민팅하여 구매, 판매, 사용할 수 있는 플랫폼입니다. 가구 교환권을 사용하면 메타버스 환경에서 사용할 수 있는 가구를 얻을 수 있습니다. Furniture Wallet을 사용하여 트랜잭션 사이닝, 송금, 계정 복구 등의 작업을 수행할 수 있습니다. 메타버스 환경과 디앱을 제공하는 NFT Furniture Store, 크롬 익스텐션인 NFT Furniture Wallet으로 구성되어 있습니다. [개발 기간] 2023.12.10~2024.01.30 [주요 기능] 1. 회원가입과 로그인 2. 비밀번호 찾기 3. 프로필 - 프로필 수정 - 팔로우 기능 - 방명.. 2024. 1. 30. [Portfolio Log] NFT 가구점 17 오랜만에 글을 쓴다. 사실 개발은 계속 하고 있었는데 귀찮음이 도져서 기록으로 남기지 않았다. 영상 하나 찍어서 올리고 글 20줄 쓰는데 얼마나 걸린다고 그걸 안 하고 있는지 ㅎㅎ;; 트랜잭션 사이닝 처리 이후에, 활동 정보를 출력하도록 처리했다. 활동 항목을 클릭하면 다음과 같은 화면이 나온다. 클라이언트에서 요청한 트랜잭션 요청을 사이닝하고 이에 따른 응답을 전달하는 부분이 작업되었다. (정확히는 app -> background -> content-script -> client로 전달) 트랜잭션 이벤트가 쌓이는 경우 뱃지 수를 카운팅 하고 있다. 또한 트랜잭션 처리 중에는 로딩을 처리하도록 수정했다. 그 외에도 트랜잭션이 쌓인 경우에 대한 처리, 팝업 중복으로 안 뜨도록 처리, 트랜잭션 감지(stor.. 2024. 1. 15. Nextjs 정리 https://nextjs.org/docs Next.js는 풀스택 웹 어플리케이션을 만들기 위한 프레임워크입니다. 리액트에서 서버사이드 렌더링과 SEO 최적화를 위해 사용된다. 파일 시스템 기반의 라우팅, 렌더링 최적화 등을 지원하고 있다. Next.js를 사용할 때 주로 백엔드 서버를 따로 둬서 개발하는 것이 일반적인 것 같다. Client -> Next(프론트서버) -> Nest(백엔드서버) -- 일반적인 사례 Client -> Next(백엔드) Next.js의 pages 폴더를 통해 라우팅을 설정할 수 있다. / → pages/index.js /about → pages/about.js /blog/hello-world → pages/blog/[slug].js 리액트 코드 내에서는 Link 컴포넌트를 .. 2024. 1. 10. [Portfolio Log] NFT 가구점 16 연락처, 북마크, 네트워크, 계정 등에 대한 storage 처리를 추가했다. Chrome Extension Local storage로 개발을 하기에는 빌드가 너무 오래 걸려서, 인터페이스 함수를 만들고 config 값에 따라 처리를 분기했다. (웹 스토리지와 익스텐션 스토리지를 분기하여 사용) 아마 익스텐션 설정으로 빌드하면 크롬 익스텐션 로컬 스토리지를 이용하게 될 것이다. 또한 계정 생성/임포트시 니모닉 정보로 계정을 생성하는 코드를 작성했다. 이 부분 역시 로컬 스토리지를 연동해놓아서 정상적으로 동작한다. 니모닉 정보는 따로 저장하지 않는다. 중간에 계정을 생성하는 부분은 미리 10개 계정에 대한 정보를 미리 생성하고 로컬에 저장하는 식으로 처리한다. (아마 메타마스크도 이런 식으로 처리하지 않았을.. 2024. 1. 8. Nestjs 공식문서 정리 Nestjs https://docs.nestjs.com/ 확장 가능하며, 효율적으로 아키텍처를 제공하기 위한 프레임워크, 앵귤러에서 많은 영감을 받음. controller: 어플리케이션 처리를 위한 요청을 받는 것 컨트롤러를 사용하기 위해 데코레이터와 클래스를 사용한다. 컨트롤러의 클래스 위에 @Controller('cats')를 지정하여 prefix처리할 수 있다. @Get, @Post, @Delete 같은 데코레이터를 지원한다. nest g resource [name] 명령어를 통해 한번에 모듈을 생성할 수 있다. import { Controller, Get, Req } from '@nestjs/common'; import { Request } from 'express'; @Controller('ca.. 2024. 1. 3. Typescript 공식문서 정리 Typescript https://www.typescriptlang.org/ko/docs 자바스크립트는 일단 실행하고 문제 생기면 수정하는 방식으로 처리된다. 타입스크립트는 이러한 이슈를 미리 판단하고 먼저 오류를 알려줄 수 있다. 자바스크립트에서 존재하지 않는 속성에 접근하면 undefined가 나오는 반면 타입스크립트에서는 컴파일 오류가 발생한다. 인터페이스는 Java에서 메소드를 정의하는 데 사용되는 것과 다르게 단순히 오브젝트를 정의하는데 사용된다. 인터페이스 개념은 자바스크립트의 '덕 타이핑'과 동일하게 동작합니다. (단순히 구조적으로 문제가 없는지 확인) C++의 typedef 같은 개념이 존재하는데, 간단하게 type 키워드로 타입을 재정의할 수 있습니다. interface는 형태를 수정할 .. 2024. 1. 3. 크롬 익스텐션 Storage API 정리 크롬 익스텐션 환경에서 사용할 수 있는 Storage API에 대해서 정리를 해본다. chrome.storage https://developer.chrome.com/docs/extensions/reference/api/storage?hl=en - 익스텐션 서비스 워커, 컨텐트 스크립트는 스토리지 API에 접근 가능 - 모든 json 직렬화 가능한 객체는 object 속성으로 저장된다. - bulk read, write에 대하여 비동기적으로 처리된다. - 캐시와 브라우저 히스토리를 지워도 데이터가 유지된다. - split incognito를 사용하는 경우에도 저장된 설정은 영속된다. - 기업 정책을 위한 read only managed storage area를 제공한다. (익스텐션의 셋팅에서 사용한다.) .. 2024. 1. 3. [Portfolio Log] NFT 가구점 15 2~3일치 한번에 올리는 거라 양이 많다. 프론트엔드에서 추가적으로 해야 하는 부분들을 정리했고 현재는 web3js를 가지고 계정을 생성하는 부분, 니모닉을 통해 계정 복구 하는 부분을 위주로 보고 있다. 하나씩 로컬스토리지와 연동하면서 작업할 예정이다. 아래는 추가된 화면들 2024. 1. 3. Web Storage API 정리 https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API Web Storage API 1. Key-value 페어 형태로 사용 가능하다. 2. 세션 스토리지와 로컬 스토리지가 있다. 3. 로컬 스토리지와 세션 스토리지는 서로 다른 스토리지 오브젝트를 사용한다. 4. 키는 항상 string으로 처리된다. 페이지 세션의 시간만큼 사용 가능한 세션 스토리지 기능이 존재한다. 탭이나 브라우저가 종료되기 전까지 유지 된다. 로컬 스토리지는 영속적으로 데이터가 저장된다. 브라우저 캐시를 지우거나 내부적으로 저장된 데이터를 날리는 경우 없어진다. 혹은 자바스크립트로 날릴 수도 있음. window.sessionSt.. 2024. 1. 2. [Portfolio Log] NFT 가구점 14 활동, 네트워크, 계정 다이얼로그를 추가하고 상단 헤더 버튼에 hover 처리를 추가했다. 정보 다이얼로그 및 구문 입력 화면 정도 추가하고 이제 슬슬 백엔드 작업을 처리할 예정이다. 2023. 12. 29. 이전 1 2 3 4 ··· 25 다음
