i18n은 internationalization 의 약자로 i와 n사이에 18글자가 들어있기 때문에 i18n이라고 한다. i18n은 어플리케이션을 다양한 언어에 쉽게 적용할 수 있도록 하는 개발 프로세스이다. 각 특정 로케일에 대해 다시 개발을 할 필요 없이 전 세계 사용자가 동일한 어플리케이션을 사용할 수 있도록 한다. 예를 들면 홈페이지의 영문버전, 한글버전이 그 예이다. React에서는 이를 지원해주는 i18next라는 라이브러리가 있다. 1. i18n 세팅 src폴더에 아래와 같은 폴더들을 만들어준다. // i18n/index.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from ..

1. 초기설정 react 폴더 설치 npx create-react-app front 프론트는 리액트로 구성, 메타마스크 연결은 가나쉬 네트워크에 연결, 스마트컨트랙트 배포는 트러플로 구성했다. 가나쉬 실행 npx ganache-cli 트러플 초기 설정 npx truffle init 리액트폴더안에서 라이브러리 설치 npm i axios web3 2. 스마트 컨트랙트 /contracts/Counter.sol // SPDX-License-Identifier:MIT pragma solidity ^0.8.17; contract Counter{ uint256 private _count; event Count(uint256 count); function current() public view returns(uint2..

프론트를 만들다 보니 파일의 수가 많아지면서 import 경로가 깔끔하게 보이지 않았다. 그래서 루트 폴더를 설정해주기 위해 jsconfig.json 파일을 만들고 아래와 같이 경로를 설정해줬다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 하지만 위 파일에 JSON schema for a JavaScript project using TypeScript tooling 라는 오류가 떴다. 오류를 찾아보니 대부분 아래의 설정을 검색해서 체크하라고 한다. 그래도 실행이 안되서 다른방법들을 해봤지만 모두다 실패했다. 나의 경우는 남들과는 달랐다. 나는 jsconfig.json 파일을 react프로젝트 src 경로에 생성했었다. 이것이 문제였고..

[BlockChain] RPC web3 테스트 1. RPC 개념 분산 네트워크를 프로그래밍으로 어떻게 쉽게할지 고민하다가 나온 개념이다. 일반적으로 통신 패턴은 서버를 켜고 클라이언트에서 서버에 요청, 서버에서 반환, 클라이언트는 반환 diary-blockchain.tistory.com 1. 프론트와 메타마스크 연결 (1) 네트워크 추가 메타마스크에서 네트워크 수동추가를 누른후 아래와 같이 입력한다. 현재 ganache를 켜놨기 때문에 사용중이라고 뜨지만 상관없다. 계정 가져오기를 누른후 ganache 에 있는 개인키를 입력하면 test넷에 test용 이더가 들어가 있는걸 확인 할 수 있다. (2) 프론트와 연결 트랜잭션을 보낼때 사용자의 개인키를 사용해서 서명을 만드는 과정을 거친다. 개인키를 이용하면..

1. index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); reportWebVitals(); 2. App.js import "./App.css"; import Mycom from "./components/Mycom"; import CalenderTop from "./components/CalenderTop";..