본문 바로가기

전체 글276

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.
[Portfolio Log] NFT 가구점 13 당연한 이야기지만, 월렛 개발을 할 때도 프론트엔드와 백엔드 개발을 나눠서 처리해야 했다. 기존에 개발하고 있던 NFT Furniture Store의 백엔드에서 같이 처리해줄까 생각도 했는데, 아무리 생각해도 그건 좀 설계적으로 이상하다고 판단했다. 그래서 일단 메타마스크를 토대로 어떤 기능이 있는지 정리했다. 모든 기능을 구현할 생각은 네트워크 변경, 활동 기록, 트랜잭션 수락/거절, 송금 기능 등을 처리하려고 한다. 일단 프론트엔드부터 작업 진행중에 있다. 생각보다 깔끔하게 작업되고 있고 여기에 Dialog 몇 가지 추가한 이후에 바로 백엔드 DB 설계 진행할 것이다. 월렛이 최종 보스긴 한데 꾸준히 작업해서 잘 마무리 해보자. 2023. 12. 28.
[Portfolio Log] NFT 가구점 12 메인페이지 부분과 블록체인 연동 부분을 작업했다. 그 외에 디테일 다이얼로그에서 처리가 정상적이지 않은 부분 역시 수정했다. 내일은 Wallet 개발을 본격적으로 진행해보려고 한다. 꾸준히 작업해서 메타버스 환경까지 마무리 잘 해보자. ㅎㅎ 2023. 12. 26.
[Portfolio Log] NFT 가구점 11 블록체인 네트워크에 배포할 Contract에 대한 코드를 작성했다. 리믹스 상에서 NFT 민팅, 소각, 판매, 판매 취소, 구매, 정보 가져오기 등 다양한 처리에 대한 테스트를 마쳤으며, 현재 프론트엔드에서 web3js로 통신하고 있다. 대부분의 처리는 이미 완료된 상태이고 메인 페이지 쪽에 판매중인 NFT 정보를 출력하는 부분을 작업하면 어느 정도 마무리가 될 것으로 보인다. 메타마스크를 이용한 블록체인 연동 부분을 마친 이후에는 크롬 익스텐션으로 Wallet 개발을 진행할 예정이다. 나는 메타버스 환경보다 Wallet 개발쪽이 최종보스라고 생각하고 있다. 물론 세부적인 통신 처리는 어느 정도 테스트를 했지만, 디테일한 부분은 아직 해보기 전이니까. 컨트랙트 코드에서 msg.sender, msg.val.. 2023. 12. 26.
[Express] S3 이미지 업로드 전체적인 프로세스: S3 버킷 생성 -> IAM 사용자 추가 -> 백엔드 및 프론트엔드 연동(express, react 환경) S3 버킷 생성 1. S3 검색, 버킷 만들기 클릭 2. 버킷 만들기 리전, 버킷 이름 입력 -> ACL 활성화 체크(다른 계정이 버킷 객체를 소유할 수 있음) -> 모든 퍼블릭 액세스 차단 off -> 퍼블릭상태가 될 수 있음을 알고 있습니다 체크 -> 버전관리 off, 기본 암호화, 버킷 키 활성화(기본 셋팅대로 진행) 3. 버킷 정책 수정 버킷 이름을 클릭 -> 탭에 권한 -> 버킷 정책 부분에 편집 버튼 클릭 -> 정책 생성기 버튼 클릭 -> s3 Bucket Policy 체크 -> Principal에 * 입력 -> Actions에 PutObject, GetObject 추.. 2023. 12. 24.
[Portfolio Log] NFT 가구점 10 프로필 변경 부분을 작업했으며, Furniture World 정보 API를 연동했다. S3를 연동하였는데 생각보다 그렇게 어렵지 않더라. 아마존 콘솔에서 S3버킷 생성해주고, 버킷 정책 수정해주고 IAM 사용자 추가해주고 그 정보 가지고 server에서 연동하면 된다. 프론트에서 form-data 형태로 값을 던지고, express에서 미들웨어 방식으로 처리하니까 잘 되더라. 개발하다가 약간 루즈해서 switft 문법을 공부하고 있다. 코틀린하고 비슷하면서도 독특한 문법 특히 괄호 잘 안 쓰는 부분이 독특하긴 하더라. 앞으로도 꾸준히 스위프트도 공부해서 iOS앱 개발도 할 줄 알아야 할 것 같다. 블록체인 코드와 연동하여 일단 NFT Furniture Store에서 필요한 코드를 연동해주고(일단 메타마스.. 2023. 12. 24.
[Portfolio Log] NFT 가구점 9 유저 정보 페이지의 가구 API, 팔로워, 팔로잉, 댓글 API를 연동했다. 로그인을 하지 않은 경우나, 자신의 정보 페이지가 아닌 경우 등 각 권한에 맞추어 적절하게 버튼을 숨기거나, 처리를 달리하고 있다. 프로필 편집 기능, 이미지 업로드 기능 등을 작업하고 ethers 라이브러리를 이용하여 블록체인 부분을 연동하고(일단 메타마스크 사용) 이후에 크롬 익스텐션 개발을 진행하면서 Wallet 기능을 구현할 생각이다. 하나씩 해보자. 2023. 12. 23.
[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.
[LoRa] Wio-E5 mini 모듈 정리 로라 모듈(Wio-E5 mini) 테스트를 진행했다. PC와 로라 모듈이 연결된 상태에서 AT 커맨드로 장치 설정을 진행한다. 제작사 공식문서에서 The Things network에 연결하는 방법을 알려주는데, 게이트웨이 서버와 백엔드 서버에 연결하는 시스템을 구축하는데 사용한다. 게이트웨이 개념이 있어서 로라 모듈과 게이트웨이가 통신하고, 게이트웨이는 백엔드 서버와 wifi 통신하는 형태라고 한다. => 안 해도 문제 없을 것이라 생각하여 굳이 연결 안 했다. 로라의 경우 지그비처럼 엔드디바이스를 따로 설정하지 않고 동일한 주파수를 갖도록 설정하여 통신할 수 있다. 다음처럼 주파수를 설정한다. AT+TEST=RFCFG,[FREQUENCY],[SF],[BANDWIDTH],[TX PR],[RX PR],.. 2023. 12. 19.
[Portfolio Log] NFT 가구점 6 express 환경에서 mysql을 연동했다. passport 라이브러리를 사용하여 세션을 저장하도록 하여 매 요청마다 정상적인 요청인지 확인할 수 있도록 했다. 아직 passport 쪽은 잘 모르고 있는 부분이 많은 것 같다. 어떤 느낌으로 처리하고 있는지만 대략적으로 느껴진다고 해야 하나, 여러 번 써봐야 알 수 있을 것 같다. 또한 프로필 변경 다이얼로그를 추가했다. express 환경에서 passport 사용방법 이해, mysql 쿼리 작성 방법 등을 익히느라 시간을 많이 사용했다. 아마 api 작업은 상대적으로 금방 쳐내지 않을까 기대하고 있다. API 작업 => 프론트 연동 => 월렛 개발 => 블록체인 개발 => 메타버스 환경 연동 순으로 작업하지 않을까 싶다. 아무튼 이번 프로젝트에서도 이.. 2023. 12. 17.
[Express] MySql 연동 express 환경에서 mysql을 연동하는 작업을 진행했다. mysql2를 깔고 다음과 같이 처리하면 된다. dotenv를 사용하여 처리한다. .env PORT=3000 DB_HOST=localhost DB_PORT=3306 DB_USER=root DB_PASSWORD=1234 DB_NAME=name config/mysql.js const mysql = require("mysql2"); const db_info = { host: process.env.DB_HOST, port: process.env.DB_PORT, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, }; const pool .. 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.

티스토리툴바