전체 글 61

useState 상태값으로 보여지는 내용 분류하기 (Tab / select)

1. 버튼 Tab 방식React의 useState hook으로 Tab 값을 관리하면서 선택된 Tab에 따라 보여지는 내용이 달라지는 메뉴 기능을 구현하려고 한다. 버튼 Tab 방식은 직관적인 상태 기반 렌더링으로, 구현된 결과물 UI는 다음과 같다. 기본적인 useState와 onClick 속성을 사용할 줄 안다면 간단하게 구현할 수 있다. import { useState } from 'react'const [tab, setTab] = useState('mint');선택된 tab을 관리하기 위한 useState 변수를 생성하고 초기값은 'mint'로 지정한다. setTab은 tab 변수를 변경시키는 데에 사용되는 함수이다. (간단한 mint와 not mint 메뉴 탭 예시) ..

React 2025.06.23

필드 상태를 특정 값으로 변경하는 (PATCH) API 구현하기

USER의 역할을 초기값 FAN -> PLAYER로 승격시키기 (관리자 전용) 현재 내가 관리하는 USER 테이블의 isPlayer 값을 'PLAYER'로 변경하는 요청을 작성해보려고 한다. isPlayer 필드는 User_Type이라는 enum 타입을 사용하는데, 'PLAYER' 혹은 'FAN'이라는 문자열을 값으로 가진다.enum User_Type { PLAYER FAN} 서비스 로직 상 DB에 없는 address로 최초 지갑 연결이 되면 새로운 user를 생성한다. 생성되는 user의 초기 isPlayer 값은 'FAN'으로 지정되게 구현하였는데 더 나은 방법이 있는지 모색중이다. SoulBase/libs/util/src/hooks/useAccount.tsconst registerUser ..

NestJS 2025.06.22

CSS Modules과 tailwind 적용하기

CSS Modules 팀원과 같은 이름의 스타일 클래스를 작성해서 스타일이 겹치는 일 발생했다. 각자의 컴포넌트에서 제한된 스타일 클래스를 사용하기 위해 CSS Module을 이용하였다. 파일명 규칙*.module.css주요 특징클래스가 컴포넌트 범위로 스코프 제한됨 (충돌 없음)사용 방법import styles from './file.module.css'import styles from './MyComponent.module.css';export default function MyComponent() { return Hello CSS Modules;} Tailwind CSS도 함께 적용하기 animation background-position을 이동시켰을 때 시각적으로 변화를 주기 위해 back..

HTML&CSS 2025.06.15

간단한 CSS 로딩 애니메이션 만들기 (원형, 바)

@keyframes CSS 애니메이션을 정의할 때 사용하는 규칙특정 애니메이션 이름을 기준으로 시작부터 끝까지의 스타일 변화를 지정할 수 있다. deg degree의 약자 360deg = 2rad = 1turn @keyframes circle{ from{ transform:rotate(0deg); } to{ transform: rotate(360deg); }}.circle{ width:40px; height:40px; border: 5px solid #3498db; border-top: 4px solid transparent; border-radius:50%; animation: circle 1s infinite}.progre..

HTML&CSS 2025.06.06

The Graph Subgraph를 이용한 온체인 데이터 누적 수집

https://thegraph.com/studio/subgraph/pool-status/SubgraphsThe Graph와 그 안에서 사용하는 서브그래프 (subgraph)는 블록체인 데이터를 효율적으로 조회하기 위한 탈중앙화된 인덱싱 프로토콜 블록체인 특성 상 과거 데이터 누적, 시간 경과 기반 계산, 통계 집계에 부정확하다. 따라서 오프체인 인덱싱 시스템을 사용하도록 한다. Subgraphs | Graph ExplorerExplore subgraphs published to The Graph Network.thegraph.comhttps://thegraph.com/studio/ 의 subgraph 생성 과정을 따라가는 글 The Graph CLI (Command Line Interface..

블록체인&Web3 2025.05.14

Polygon Bridge와 POL로 Swap

Bridge (ETH에서 Polygon PoS 이동)서로 다른 블록체인 간의 자산 전송을 돕는 중간 다리 역할을 한다. https://portal.polygon.technology/bridge portal.polygon.technology 내 목표는 지갑의 ETH를 Polygon PoS mainnet으로 자산 전송하기 (ETH → Polygon PoS)Polygon portal의 bridge를 이용해보려고 한다. 내 지갑 주소 ...CcC에서 0.005 ETH 이동 트랜잭션이 수행된 것을 Etherscan에서 확인할 수 있다. 그리고 내부적인 Internal Transaction으로 Matic Bridge -> Ether Brdige 0.005 ETH가 이동한다. 브릿지 과정에서 내가 보낸 ETH는..

블록체인&Web3 2025.04.14

업그레이드 가능한 contract (Proxy)

있는 기술을 배우지 않는 것은 죄악이다 왜냐면 재배포하느라 너무 고생했다 - vvalvvizal-스마트계약 업그레이드Proxy 패턴스마트 계약이 주소를 변경하지 않고도 업데이트될 수 있도록 하는 디자인 패턴Ritesh Nikhoriya Understanding Proxy Patterns in Solidity: A Developer’s Guide delegatecall 다른 컨트랙트 어카운트의 code를 사용하되, storage는 기존 컨트랙트 어카운트를 사용하는 호출방식컨트랙트 A의 delegatecall()은 external 컨트랙트 B가 A의 storage를 수정하는 것을 허용한다.즉 A가 B의 코드를 실행하면서도 A의 storage를 변경할 수 있다. fallback() 만일을 위해 대비된 함수로,..

Solidity 2025.04.03

TS의 런타임과 interface type

TypeScript의 런타임에 대한 이해  No, TypeScript Types Don't Exist At RuntimeLearn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.www.totaltypescript.comTypeScript의 타입은 runtime에 존재하지 않으며 컴파일 단계에서 사용되며 이후 JavaScript로 컴파일 되도록 설계 되었다. 코드가 JavaScript로 컴파일되면 type이 사라지는 셈이다.   런타임시 타입스크립트 인터페이스가 존재하지 않는 이유..

JS.TS 2025.03.11

ERC-5192 실습 : SBT (Soul Bound Token)

ERC-5192 이란?https://eips.ethereum.org/EIPS/eip-5192#copyrighthttps://it-timehacker.tistory.com/455 ERC-5192: Minimal Soulbound NFTsMinimal interface for soulbinding EIP-721 NFTseips.ethereum.org ERC-5192는 ERC-721을 기반으로 만들어졌으며 ERC-721의 기능을 상속한다.여기에 ERC-5192는 전송이 불가능하다는 특성이 존재한다.  생성시에 잠금 여부를 한번 정하고 SBT면 잠김 상태로 모든 컨트렉트가 그 이후에는 작동을 하고 잠금 상태가 아니라면 일반적인 NFT처럼 작동을 하는 모델 Locked 여부Locked와 Unlocked 이벤트  ..

Solidity 2025.02.25

DEX 운영 방식 (AMM, 유동성 풀, CPMM)

DEX (탈중앙화 거래소) ↔ CEX(중앙화 거래소)탈중앙화 시스템에선 관리 시스템이 없기 때문에 유동성 풀을 이용하여 은행 금고 역할을 한다. 개인과 개인끼리 P2P 거래를 진행해야 하기 때문에 자동화된 시장 조성자 (AMM)가 필요하며, 스마트 계약이 자동화 시스템을 담당하는 역할을 한다.AMM (자동화 마켓 메이커 Automated Market Makers) 유동성 풀 (Liquidity Pool)자동화된 시장 메이커(AMM)에서 거래를 성사시키기 위해 필요한 자산의 집합체유동성 풀에는 자산 X와 자산 Y가 일정 비율로 예치되어 구성된다.   유동성 공급자 (Liquidity Provider)상장(리스트업)의 개념이 없으니 유동성 공급자를 모집하여 유동성을 공급받아야 한다. 자산 X와 자산 Y, 한..

블록체인&Web3 2025.01.27