IC에서 나만의 토큰 생성하기~!
암호화폐 토큰을 생성하고 이를 블록체인에 구축하기

---

토큰과 코인

토큰과 코인의 차이점

코인을 구축하기 위해서는 자신만의 블록체인이 필요하고, 토큰은 이미 존재하는 블록체인 (예를 들어 ethereum이나 Internet Computer 블록체인 등) 에 구축하면 된다.

코인을 구축하기 위해서 자신만의 블록체인이 필요한데, 사실 기존 블록체인의 복사본을 만들어서 사용하면 된다. 그러나 블록체인의 보안을 지키고 싶다면 코인 채굴량이 많아야할것이다.. 즉 나의 코인의 예후가 밝다고 생각하는 마이너들이 많아야 한다는 것인데... 즉 에너지와 전기... CPU를 돌려서 채굴을 할 의사가 있는 사람이 많아야 한다는 것..아무튼 마케팅까지 하게 되야함...그래서 코인의 경우에는 많은 에너지와 자원을 소모하게 된ㄷ ㅏ

반면에 토큰 채굴에 관한 것은 신경쓰지 않아도 된다. 어차피 이미 존재하는 블록체인 위에 구축하면 되니까 바로 public하게 공개되는건가?? 몰라 아무튼 그저 ledger에 관한 코드를 작성하고, 내가 만든 토큰이 어떻게 전송이 될 것이며 ledger에 어떻게 기록될 것인지만 코드를 작성하면 된다고 한다...

대체 코인이랑 토큰이 뭐하는건데 믿힌

토큰과 코인을 대체 어디에 쓸까..

1. 토큰 하나를 다른 토큰으로 교환하거나 토큰 하나를 서비스 또는 제품과 교환할 수 있다.

2. 토큰을 자본으로서 가질 수 있다. 따라서 분산된 애플리케이션의 미래에 대해 투자할 수 있도록 사람들에게 일정량의 토큰을 제공할 수 있다.
   예를 들어 ICP에서는 ICP 토큰을 구입하여 인터넷 컴퓨터에 저장하여 특정 안건에 투표할 수 있다.
   그리고 그 결과에 따라 보상을 받을 것이고 또한 자신이 보유한 토큰의 가치도 올라가게 된다. 회사 주식을 소유하는 방법과 비슷하다

3. 일종의 유용성을 제공한다.
   예를 들어, 분산형 애플리케이션을 배포할 때의 사이클을 생각해 보면, 이러한 사이클은 토큰의 한 형태이며 특정 애플리케이션과 상호 작용하거나 애플리케이션 또는 블록 체인 내에서 어떤 기능을 수행할 수 있게 된다.

그렇다고 한다

---

토큰 활용 웹페이지..

프론트엔드 연결하기

dfinity앱을 생성한 후 리액트와 연결하는 방법

dfx new [프로젝트 이름]

명령어 사용하여 프로젝트 생성한 다음에 프론트엔드 부분에 리액트 사용하여 화면 작성해준다.

프로젝트 구조는 아래와 같다 (src기준)

.
├── token
│   └── main.mo
└── token_assets
    ├── assets
    │   ├── favicon.ico
    │   └── main.css
    └── src
        ├── components		<- 리액트 컴포넌트
        ├── index.html
        └── index.jsx

1. 웹팩 설정파일의 진입점 수정

webpack.config.js

// 여기서
module.exports = {
  target: 'web',
  mode: isDevelopment ? 'development' : 'production',
  // 진입점을 수정해준다
  entry: {
    // js에서 jsx로
    index: path.join(__dirname, asset_entry).replace(/\.html$/, '.jsx'),		로
  },
  devtool: isDevelopment ? 'source-map' : false,
  optimization: {
    minimize: !isDevelopment,
    minimizer: [new TerserPlugin()],
  },
 // ... 생략

2. 모듈부분 주석해제

  // Depending in the language or framework you are using for
  // front-end development, add module loaders to the default
  // webpack configuration. For example, if you are using React
  // modules and CSS as described in the "Adding a stylesheet"
  // tutorial, uncomment the following lines:
  module: {
    rules: [
      { test: /\.(ts|tsx|jsx)$/, loader: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },

3. tsconfig.json 파일 추가

{
  "compilerOptions": {
    "target": "es2018",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "lib": ["ES2018", "DOM"],  /* Specify library files to be included in the compilation. */
    "allowJs": true,           /* Allow javascript files to be compiled. */
    "jsx": "react",            /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
  },
  "include": ["src/**/*"],
}

여기까지 해준 뒤 아래 명령어 순서대로 실행하면 화면 나타난다

dfx start

npm install

dfx deploy

npm start