: Web2.0에서 블록체인 인센티브 기반 토론 시스템을 갖춘 커뮤니티 사이트 개발

🌐 목표

블록체인 기반 소셜 미디어 서비스를 제공하는 웹사이트이자, 소셜네트워크 서비스를 구현하려고 노력하였다. 또한 생태계를 유지하기 위한 이용자는 커뮤니티에 글을 쓰는 등의 활동을 통하여 토큰발급을 진행는 것을 목표로 프로젝트를 진행하였다.

🙏 기술 스택

• Node.js
• React
• web3
• postman
• ganache
• express
• • solidity

🙏 기능구현

1. UI 구성
2. 로그인 기능
3. 게시물 기능
4. 로그인 및 게시물 등록시 토큰발행

🙏 라이브러리

• redux
• react-router-dom
• axios
• express
• mysql2
• eth-lightwallet
• web3
• sequelize

🕛 홈 화면

!

🕒로그인 화면

🕔게시물 화면

🌐 Code Detail

로그인 api

const login = () => {
    axios
      .post("http://localhost:5000/users/login", {
        // 5000포트에 요청 ! userId, password
        user_id: userId,
        password: password,
      })

      //요청에 대한 응답이 왔다면 실행
      .then((res) => {
        if (res.data.message === "login") {
          dispatch(setUser(res.data.data));
          setSuccessLogin(true);
          console.log("성공");
          window.alert("1 토큰 지급");
          history("/");
        }
      })

      //에러
      .catch((e) => {
        console.log(e);
        setSuccessLogin(false);
      });
  };

Web3 api

require("dotenv").config();
const express = require("express");
const router = express.Router();
const Web3 = require("web3");
const { User } = require("../models");

const web3 = new Web3("http://localhost:7545");
const tokenabi = require("../contract/tokenAbi");
const bytecode = require("../contract/bytecode");

router.post("/", async (req, res) => {
  const serverAccount = await User.findOne({
    attributes: ["privatekey"],
    where: {
      username: "server",
    },
  });
  console.log("찾기 성공")
  //console.log(serverAccount)
  const server = await web3.eth.accounts.wallet.add(serverAccount.dataValues.privatekey);
 //console.log(server)
  const parameter = {
    from: server.address,
    gas: 3000000,
  };
 //console.log("바이트 코드", bytecode)
  const tokenContract = new web3.eth.Contract(tokenabi);
  //console.log('성공')
  tokenContract
    .deploy({
      data: bytecode,
    })
    
    .send({
      from: server.address,
      gas: 3000000
    })
    .on("receipt", async (receipt) => {
      res.status(201).json({
        message: "deploying ERC20 is succeed",
        receipt,
      });
      //console.log(receipt.events.Transfer.returnValues.value)
      //생성된 토큰양
    })
    .on("error", (error) => {
      console.log(error);
      res.status(400).json({ message: "deploying ERC20 is failed" });
    });
});

module.exports = router;

🤔 회고

First Project

Keep(장점, 유지할 점)

새로운 경험, 부족한 부분을 인지. 새로운 프로젝트를 접하면서 배웠던 스택들을 되돌아 볼 수 있었다. 전 보다는 이해한다는 측면에서는 빠르게 인지할 수 있었지만 진짜 내것이지에 대한 측면에서는 많이 부족하다. 경험했던 이해를 더 살려 진정 내것으로 만들어야한다.

Problem(단점, 변경 또는 버릴 점)

협업성에 부족, 기술스택 이해 부족… 욕심이 많았다. web3, 스마트컨트랙트, 프론트, 백엔드 여러 방면으로 업무를 나눠서 진행을 했지만 확실한 이해와 수행 없이 욕심이 앞서 프론트를 진행했다가 백엔드로 넘어갔다가 다시 돌아오는 등 부족한 모습을 많이보였다.. 확실한 이해로 진정 도움이 될 방법을 찾으려고 노력하는 자세를 가져야겠다.

Try(시도할 점, 앞으로의 행동)

“확실한 이해” , 숙련되지 못한 스택들을 활용하여 프로그래밍할 때 얼마나 많은 것을 놓치고 효율적이지 못한지 알 수 있었다. 좀 더 기본적인 부분부터 이해와 철학들을 쌓아가면서 집중도를 가져오려고 노력해야 겠다는 생각이 든다.

Detail ) 리액트(리덕스) hooks, 백엔드 연동api, web3

<깃헙 참조>

https://github.com/HYOSEUNGAN/project2Frontf
https://github.com/codestates/beb-04-second-Essence