투자유의 개발 블로그

JWT, 로컬 스토리지에 저장 안전한가? 로컬 스토리지에 저장하는 방식은 xss 공격에 취약하다고 한다. (당연히 쿠키에 넣어서 관리하는 것보단 낫다...)아래 링크에서 jwt를 로컬스토리지가 아니라 인 메모리에서 관리함으로써 더 나은 보안을 구축할 수 있다. (당연히 손이 훨씬 많이 간다.) https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#login https://gaemi606.tistory.com/entry/React-JWT%EB%A5%BC-In-Memory-%EB%B0%A9%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-localStorage-%EC%82%AC%E..

쿠키 서버에서 브라우저에 저장해둔 작은 데이터 블록. 사용자에 관한 데이터를 저장해 둔다. (개인화, 추적 등의 목적)쿠키를 이용해서 서버는 클라이언트(브라우저)에 그 클라이언트 사용자에 관한 데이터를 넣어둔다. 그러면 앞으로 클라이언트의 모든 요청은 그 쿠기와 함께 전달된다. 물론 쿠키는 도메인에 따라 제한된다. 특정 도메인에서 보내준 쿠키는 해당 도메인으로 요청을 보낼 때만 함께 전달된다. 그리고 쿠키는 유효기간이 있다. 그래서 서버가 정한 기간 동안만 유효하다. 쿠키는 인증만이 아니라 여러가지 데이터를 저장할 수 있다. 예를 들어, 브라우저에서 언어 설정을 변경(ko -> en)하는 요청을 서버로 보내면 서버는 해당 클라이언트가 사용하길 원하는 언어 정보를 쿠키로 전달한다. 그 때부터 클라이언트는 ..

https://github.com/Hyun2/my-beb-01 메타마스크 연결 ERC20 토큰 등록 / 전송 ERC721 토큰 민팅 / 등록 / 전송 GitHub - Hyun2/my-beb-01 Contribute to Hyun2/my-beb-01 development by creating an account on GitHub. github.com https://github.com/codestates/BEB_01_Yukjo GitHub - codestates/BEB_01_Yukjo Contribute to codestates/BEB_01_Yukjo development by creating an account on GitHub. github.com 오픈씨의 일부 기능 구현 자체 배포한 ERC20 토큰과 ..

Web3.js 자바스크립트를 이용한 이더리움 네트워크 API. Web3.js는 자바스크립트에서 HTTP, IPC, WebSocket 등을 사용해 이더리움 네트워크의 노드들과 상호작용하기 위한 API이다. 이더스캔 기능 구현 지갑 주소 하나와 블록 넘버(시작, 끝 블록)를 입력받아 해당 블록 범위 내에서 지갑 주소와 관련이 있는 트랜잭션을 출력하는 스크립트를 작성해보자. const Web3 = require("web3"); const fs = require("fs"); const readline = require("readline"); const INFURA_PROJECT_ID = fs.readFileSync("./infura_project_id.txt", { encoding: "utf8", flag: "..

TL;DR Typescript 사용자나 컴팩트한 라이브러리(로딩 성능 향상)를 원한다면 ethers를 사용하면 될 것 같다. web3.js는 이더리움 재단의 서포트를 받아 과거부터 표준으로 사용되어 왔다. web3와 ethers 이더리움 블록체인 네트워크와 상호작용하기 위한 API web3 이더리움의 재단이 서포트 오래전부터 표준으로 사용 (그래서 Github 스타나 의존성을 가진 라이브러리가 많음, 아마 구글링도 잘될 것) 타입스크립트 미지원(일부 지원?) - 4.x에서 fully 지원한다고 하는데 현재 1.6.x 이름을 잘 지었다. (web3가 들어가서 이쪽을 선택하는 사람들이 꽤 된다고...) ethers Typescript 지원 메인테이너가 1명 (하지만 Discord에서 많은 사람들이 참여할 수..

// SPDX-License-Identifier: MIT pragma solidity ^0.8.7; import "@openzeppelin/contracts/token/ERC721/ERC721.sol"; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import "@openzeppelin/contracts/utils/Counters.sol"; contract myNFT is ERC721URIStorage { using Counters for Counters.Counter; Counters.Counter private _tokenIds; constructor() ERC721("myNFT", "NFT") {} fu..

Ganache ganache는 개발을 목적으로 로컬 블록체인 네트워크를 제공하는 도구이다. 어떤 블록체인 네트워크에 접근해서 정보를 얻으려면 그 네트워크에서 돌아가는 노드가 필요하다. 그러나 노드를 운영하는 것은 쉬운 일이 아니므로 ganache 같은 도구가 존재한다. ganache를 이용하면 해당 블록체인 네트워크의 블록이나 트랜잭션 등을 확인할 수 있다. Truffle 스마트 컨트랙트 개발을 위한 도구이다. 스마트 컨트랙트의 테스트, 컴파일, 배포 등의 기능을 제공한다. Truffle과 Hardhat은 스마트 컨트랙의 개발을 위한 도구 이므로 블록체인 네트워크에 연결해서 사용한다. 테스트를 위한 용도로 Ganache나 Infura의 엔드포인트를 연결해서 사용할 수 있다. Hardhat Ganache ..

상태관리 web3.js 로 이것저것 시도해보는 와중에 상태관리가 필요해서 recoil과 zustand를 사용해보았다. recoil과 zustand에 대한 좋은 평가를 예전부터 듣고 있었다. `swr + recoil` 또는 `swr + zustand` 조합으로 많이 사용한다고 들어왔던 터라 사용해보고 싶었다. 이번에 사용해보니 둘 다 redux 보다 사용하기 좋았다. 사실 이번에 zustand 까지 사용해볼 생각은 없었다. react를 만든 facebook팀에서 recoil을 개발했기 때문에 recoil을 사용할 생각이었다. 결론적으로 web3 객체의 상태관리가 recoil에서 되지 않아 zustand도 사용해보게 되었다.(정확히 확인해보진 못했지만 이 당시 사용한 css 프레임워크 때문일지도 모르겠다. ..