벨로그 일지를 작성하는 지금 시점엔 이미 개발이 완료하고 발표 준비를 하고 있지만... 힘들었던 개발 일지를 꼭 어딘가엔 남기고 싶어서 오늘에서라도 작성을 해보려고 한다. 완전한 기억은 아니고 그 때 남았던 강렬한 감정이나 흐름상 이 때 이랬던 것 같다, 하는 느낌으로 적은 것들도 있으니 감안을 해야 할 것...
우선 7월 6일까지의 개발 일지는 여기에... → dApp개발 1편 두 번째 일기만에 完... 그만큼 바빴단 뜻이지~
7월 6일까지는 원래 내가 맡았던 부분 중 등록된 회원정보 업데이트와 메인 페이지에 사진 띄우기(?)를 완료했었다. 근데 이건 어디까지나 백엔드에서 코드만 작성해보고 임의로 ejs 뷰를 만들어 테스트를 해봤던 것이지 프론트와 연결한 것이 아니었다. (페이지 완성이 아니었음)
7월 7일에는 거의 개발이 이뤄지지 않았다. 왜냐면 오전에 기업 소개가 있어서 프로젝트를 진행할 수 없었기 때문이다 ^^! 프로젝트 기한도 기획 포함 13일밖에 주어지질 않았는데... 그 와중에 면접을 볼 기업 소개를 프로젝트 중간에 끼워넣은 것이다. 연계 기업이 확정되지 않는 등의 문제가 있어서 일정이 이렇게 된 것이겠지만, 솔직히 수강생이 이런 것까지 이해를 해줘야 한다고?하는 생각이 들어서 화가 났다. 기업 소개를 당연히 받아야 하는 부분이지만 애초에 프로젝트 끝나고 발표 바로 다음날 면접을 보는 것부터가 제정신인가 싶다. 하지만 일개 수강생인 내가 무슨 힘이 있겠음... 걍 하라는 대로 해야지. 주말에는 각자 이력서와 포트폴리오를 재정비하는 시간도 필요했기 때문에 서로 소통을 하며 개발을 진행하지는 않았다. 기한도 개짧은 와중에 이력서와 포폴을 9일까지 제출해야 했다... 수정 기한을 더 주셨기에 망정이지 아니었으면ㅠ 11일에 어느정도 기능 구현을 다 끝내놓은 후에 밤을 새워 포폴을 만들고 이력서를 수정해서 겨우 제출할 수 있었다... 여기 진짜 너무 힘들었어 ㅠ
📌 46일차 dApp개발 (07.10)
이 날의 결론은... '결국 난 한 게 없네.' 그래서 매우매우 빡쳤던 기억이 난다. 진행된 것이 없다. 오히려 roll back...
😰 session issue...
개발 시작부터 금요일 오후, 월요일까지 계속해서 우리의 골머리를 앓게 한 것은 바로... 로그인 세션 문제였다. 쿠키가 생기지를 않고... 세션이 유지가 되질 않았다. 페이지가 이동하면서 세션 유지가 되지 않으니... 로그인 유지가 안 되고 뒷 작업을 거의 할 수가 없었던 것 같다. 코드를 아무리 뜯어봐도 이유를 알 수 없었고, 쿠키-세션에 대한 공부를 해봐도 이론적인 내용을 잠깐 겉핥기 식으로 머리 속에 집어 넣는 것과 정확히 모르는 상황에서 다른 사람들의 코드를 이리저리 따라해본다고 문제의 원인을 파악하거나 쿠키 생성, 세션 유지가 되는 것은 아니었다...
마이 페이지에서 회원 정보를 업데이트 하는 코드 자체는 구현을 했지만, 세션에 저장된 정보를 프론트에서 가져오질 못하니 결국 아무 것도 할 수가 없었다... 그게 안 되니 다음 단계로 넘어갈 수도 없었다. 그리고 방법을 이리저리 시도를 해보는데 쿠키-세션 이해도 벅찬 사람에게 계속해서 새로운 방식들이 튀어나오니 그걸 이해하는 것도 쉽지 않았다. 당장 화요일까지는... 완성을 해야 할텐데... 나 어떡하지? 하는 생각에 우울하고 너무 화가 났다. 이 당시에는 강사님도 도움이 되지 않았다. 해결이... 안 돼...
결국 프론트에서 세션 저장하는 방식으로 넘어가게 되었다. 하하... 이 때는 '내가 제대로 이해한 건진 모르겠지만... 아무튼 그렇게 되었구나...' 생각을 하며... 어떻게든 되겠지... 하고 우울했다. 이렇게 아무것도 모르는데... 내가 인턴을 갈 수 있을까? 누가 날 뽑아주긴 할까? 이게 맞나?
😓 협업 시 소통의 중요성
이 당시에는 프론트와의 소통도 잘 되지 않아서 힘들었다. 서로 불통을 하려고 했다기 보다는... 나는 나대로 내가 만들어야 하는 코드에 대한 불확신, 과정에 대한 불안함, 이해 부족으로 인해서 어떤 식으로 말을 드려야 할 지 몰랐다. 마감이 코 앞이었기 때문에 다들 발등에 불똥이 떨어진 상태에다가, 프론트에서 현재 어디까지 작업이 끝났고, 어디를 작업하고 있는지도 몰랐기 때문에 다짜고짜 '저 지금 이러이러한 것이 필요해요/이 부분 프론트에서 넘겨주는 키 값을 알아야 해요/이 부분 이해가 안 가요 질문이 있어요'라고 질문을 드리기가 어렵다고 느꼈다. (죄송하잖아요,,, 하지만 그 때 그랬어야 했던걸까, 아직 잘 모르겠다.) 이런 부분은 프로젝트를 더 많이 진행하다보면 개선이 되지 않을까... 기대해봅니다... 열심히 하자... 나야... 빨리 내가 해야하는 페이지를 진행하고 싶은데... 진도가 어쩔 수 없이 더디게 나가는 것 같아서 맘이 너무 힘들었다. 뭐 하나 새로운 것이 나오면 이해하기도 벅차고... 힘들었습니다... 정말...
여기서 프론트/백을 나누어 개발하는 것의 단점을 느꼈다.
장점이라면 내가 맡은 부분만 신경을 써도 됐다는 것? (그렇다고 다른 분이 하는 것에 아예 관심이 없으면 안 되지만 ㅋㅋㅋ) 백엔드 개발에만 조금 더 온전한 집중이 가능하다는 것이... 정말 큰 장점이었다! 적어도 기능 구현 측면에서 다른 부분(페이지 디자인이나 자신 없는 프론트...)에 스트레스 받지 않고 백엔드에만 집중할 수 있다는 것은... 특별한 경험...⭐ 프론트도 배우고 싶어서 이 수업을 선택한 거였지만 리액트 수업도 갑자기 삭제되고~ 결국 다시 백엔드~ 더구나 프론트 개발 환경이 리액트라서... 정말 모른다.
단점은... 소통이 어렵다 😂 백엔드 개발을 지망한다고 하더라도 프론트엔드 개발에 대한 지식이 필요하다는 것을 느꼈다. 아주 다른 것은 아니지만 종종 서로 사용하는 용어가 달라서 같은 말을 하는데 대화가 빙빙 돌거나, 서로 무슨 말을 하는지 이해하지 못하는 상황이 발생했다. 게다가 서로 진행 상황 교류가 잘 안 됐던 것 같다. 이건 내가 잘 물어보지 못한 탓도 있긴 한데... 어떻게 물어봐야 하는지... 어려웠다. (우리는 only 구두로 소통해야 했음... 계획대로 착착 진행되는 것이 아니었기 때문에...)
그리고 무엇보다 프론트와 백에서 데이터가 이동할 때 어떤 방식으로 데이터를 전해주고, 어떤 키 값으로 전해주는지... 내가 저쪽에 어떤 데이터를, 어떤 형식으로 넘기는지, 혹은 그 반대를 잘 알지 못하니까 이야기를 해줄 수가 없었다! 물어볼 수도 없고! 설명을 하기도 어려웠다! (프론트 분도 비슷한 이야기를 하셨던 것으로 기억) 리액트는 지식이 전무하니까... ejs로 html 화면을 만들어 테스트를 할 때는 그래도 어떤 방식으로 데이터를 보내주는지 알 것 같았는데 리액트로 구현된 화면 코드는 읽는 것이 더 어려웠다. 진득하게 앉아서 찬찬히 뜯어보면야 뭐가 뭔지 조금은 알 수 있으려나 싶은데 시간이 너무 없어서 마음이 조급했다.
🙄 그래서 결국 어떻게 되었냐면...
마이페이지의 회원정보 수정은... 결국엔 다른 분께 넘어가게 되었다. 하... 뭐 그리 대단한 코드를 머리 싸매며 만든 것은 아니었지만... 결국 마이페이지 맡으신 한원님께서 라우터를 새로 만들어 하게 되셨다. 하하하하하하하. 수업 끝나고 7시까지 남아서 하는데 집 가기 직전에 결국... 그렇게 하는 게 좋을 것 같다고 하셔서... 어쩔 수 없었다... 데이터가 어떻게 넘어가는지 몰라서 하나하나 찍어보는 중이라 그걸 나에게 냅다 떠넘기기가 죄송하다고... 나도 모르는 것이 너무 많고... 그 심정이 이해가 갔기 때문에 ㅠ 결국 오케이를 하고... 뭐 오케이 할 수밖에 없지... 내가 구현해야 하는 주요 기능 중 하나가 날아가고 아직 그 다음 단계로 완전히 넘어간 것이 아니라 이러다가는 프로젝트 기여도가 0이 될 것 같아서 마음이... 안 좋았다 정말...
게다가! 이 날은 갑자기 오후에 대표님의 블록체인 강의가 끼어 있었다. 아니 진짜... 이 교육 과정에서는 프로젝트를 하고 싶어하는 우리들에게 별로 도움이 되질 않았다. 이후에 과정을 수료한 후에 회고를 한다면 (개빡쳐서 꼭 쓰긴 할 것 같은데 바빠지면 안 쓰겠죠) 이 부분에 대해서는 짚고 넘어갈 것들이 참 많다. 프로젝트 중간에, 심지어 기한도 이렇게나 짧은데 중간에 갑자기 또 뭐 엄청 중요하다는 강의를 넣는게... 우리는 면접을 봐야 하고, 여기서 결과물을 낸 후 포트폴리오를 만들어야 하고, 정말 간절하다고요... 진짜 아! 너무 짜증이 났다. 정말 꼭 필요한 강의라고, 프로젝트는 프로젝트일 뿐 이건 정말 필요하고 중요한 수업이라는데 강의생들을 설득하지도 못했고, 우리 입장에서는 와닿지도 않은 말일 뿐더러, 설득력이 매우 떨어져보였다. 그 분들 입장에서야 전체적으로 어떻게 돌아가는지 알아서 그렇게 말 하는 것일 수 있겠지만, 우리는 정말 간절하고 불안한 마음을 떠안고 3개월을 달려오고 있는데... 진짜 너무 너무 우울하고 뭐 하나 제대로 풀리는 것이 없는 하루였다.
오전에는 세션으로 씨름하고 결국 해결된 것은 없었으며, 오후에는 대표님의 강의를 듣느라 이 날도 또... 머리는 싸맸으나 결과가 없어 공친 것 같은 느낌이 들었달까. 정말 화가 잔뜩 난 하루였다. 기분 풀어주려고 노력한 환이가 고생...
📌 47일차 dApp개발 (07.11)
전날 환이가 엄청 위로를 해주고... 기분을 풀어주고... 좋은 쪽으로 생각을 해야지! 했으나... 자고 일어나자마자 완전 reset...
죽상을 하고서 교육장에 갔다. 그리고 죽상을 하고 앉아서... 프론트에서 이제 최종으로 마일리지 송금 부분(마지막 파트) 코드 마무리해서 달라고 하길래 오전엔 일단... 내가 생각할 수 있는 선에서 코드를 짰다. 내가 생각하는 로직과 프로젝트 흐름도에 적힌 로직이 조금... 상충되는 부분이 있었는데 ('이걸 굳이 왜 라우터를 나누지?' 하는 생각이 있었다. 컨트랙트에 등록된 멤버인지 확인, 멤버 조회, 송금 이렇게 세 번으로 나누는 것이 불필요해보였음... 그리고 결국 나중에 프론트와 함께 작업하며 라우터는 간단하게 멤버 조회 및 송금으로 줄였다!) 누구와 이 상황이나 생각에 대해 이야기를 나누고 수정을 할 시간은 없어 보여서 혼자서 낑낑 만들어보긴 했다. 일단 틀려도 만들어놓고 수정하자는 마음으로...
이것이 아마... 그 당시의 코드. 모든 작업은 Router 폴더의 trade.js에서!
☹️ 문제 하나: 블록체인 네트워크와 http 연결에 대한 이해 부족...
// Router() 변수에 대입
const router = express.Router();
// 컨트랙트의 정보 로드
const contract_info = require("../build/contracts/Mileage.json");
const contract_abi = contract_info.abi;
const contract_address = contract_info.networks[1001].address;
console.log("##컨트랙트 주소: " + contract_address);
// 컨트랙트가 배포된 네트워크 등록
const { Web3 } = require("web3");
const web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
const smartcontract = new web3.eth.Contract(contract_abi, contract_address);이건 거의 뭐... 기초도 모르고 저지른 개빡대갈 실수인데 release 브랜치에 올리자마자 에러나서 쓸 수도 없게 만들었다. ㅎㅎ...
우리는 KAS API를 사용하기로 했다... Klaytn 기반의 블록체인 네트워크를 사용한단 말임! 그런데 web3 모듈을 가져와서 사용하겠다고 선언을 해준 것...
명식오빠가 말 해줘서 그제서야 '이게... 뭐지?' 하고 찾아보고 그래서 web3는 언제 쓰고 caver-js는 또 뭐고 언제 쓰는 건데...? 하고 피어올랐던 질문에 대한 답이 됐다. 왜 처음에 js 파일을 만들 때는... 찾아보지 않았던 걸까.
caver-js: 개발자가 HTTP 또는 웹소켓 연결을 사용해 Klaytn 노드와 상호작용할 수 있도록 하는 자바스크립트 API 라이브러리web3: 이더리움 네트워크와 상호작용 할 수 있는 다양한 메서드를 제공하는 자바스크립트 라이브러리
아무래도 내가 web3 라이브러리와 web3.0의 개념을 헷갈리고 있었던 거라는 생각이 든다. web3.js에 대해서 이 링크를 보고 조금 설명이 된 듯 하다... 기회가 되면 web3.0에 대해 찾아보고 공부한 내용을 기록하는 것으로... 아무튼 정말 이렇게나 모르는 것이 많습니다...
caver-js로 다시 연동은 완료// 컨트랙트의 정보 로드 const contract_info = require("../build/contracts/Mileage.json"); // caver-js 로드 const Caver = require("caver-js"); // 바오밥 네트워크 주소 입력 const caver = new Caver("https://api.baobab.klaytn.net:8651"); const smartcontract = new caver.klay.Contract( contract_info.abi, contract_info.networks["1001"].address );
☹️ 문제 둘: DB 업데이트... 아마도 생각 부족?...
처음에 작성했던 api는 아래와 같다...
module.exports = function () {
// api 생성
// 해당 파일의 api의 기본 경로: localhost:4000/trade
// 지갑주소 혹은 폰넘버 보내고 누구인지 혹은 없는지 리턴
// localhost:4000/checkMember [get] 컨트랙트에 등록된 유저인지 확인
router.get("/checkMember", function (req, res) {
const input_id = req.query._id;
const input_amount = req.query._amount;
console.log("## 회원번호 확인: " + input_id);
smartcontract.methods
.view_users(input_id)
.call()
.then(function (result) {
// 컨트랙트에 등록된 회원이 확인되면 마일리지 송금 페이지로 보내준다
if (result[0] == input_id) {
res.render("/selectMember", {
input_id: result[0],
input_amount: result[1],
});
} else {
// 등록된 회원이 아닐 시 다시 회원 확인
res.redirect("/checkMember");
}
});
});
// localhost:4000/selectMember [get] 내 마일리지 정보와 마일리지를 송금할 회원 정보와 송금할 마일리지 정보 불러오기
router.get("/selectMember", function (req, res) {
// 로그인 한 사용자 정보(지갑 주소) → 프론트에서 가져오는거 이렇게 하는거 맞는지 확인해야 함
const user = req.query.MEMBER_WALLET;
console.log("## 로그인한 사용자의 지갑 주소: " + user);
// checkMember 페이지에서 입력받은 데이터를 이렇게 불러오는 거 맞나... 모르겠음
const input_id = req.query.input_id;
const input_amount = req.query.input_amount;
console.log(
"## 거래 주소, 거래 마일리지 양: " + input_id,
input_amount
);
// 그냥... 데이터 보내주면 되는건가...? 화면에 보여지기만 하면 되니까?
res.json({
user: user,
input_id: input_id,
input_amount: input_amount,
});
});
return router;
};이 때는 일단 프론트에서 받아올 데이터의 키 값도 같이 정하기 전 상태라 내가 임의로 지정한 것 그리고 불필요하게 라우터를 두 개나 만들어 놓은 것도 문제지만 그건 내 머리에서 나온 건 아니고...
저런다고 DB에 정보가 알아서 업데이트라도 된다는 거냐고~!! module.export 윗부분에 기껏 DB 연결도 해놓고선... 저딴식으로 써놓고 알아서 되기만을 바란 것... 뭐 한 거임? 지금 생각하면 너무 웃기다. 하지만 그 때 나는... 어디에 써야 하는지? 어디에 써도 되는지?, 우선 이 질문에 대한 답도 할 줄 몰랐지만 그냥 저러면 되는 줄 알았던 것 같다. 저 때의 나는... 너무나 방황하고 있었음... 침착함도 잃었고, 생각도 얕았고, 어떻게 돌아가는지 구조 자체도 파악을 못 하고 있었던 것 같다. 주석에도 보면... 혼란스러움 가득해보여서 웃기고 조금 불쌍함. Node.js 처음 써보면서... 아무것도 모르고... 뭐라도 해보겠다고 낑낑거렸던 것 같다. 정말 막막하고 힘들었다 ㅠ 어차피 공부는 나 혼자 하는 거고, 스스로 찾아보면서 해야 한다지만... 물가에 내놓은 오리새끼가 내가 된 것 같았음. ㅠ transfer 부분에서도 비슷한 문제 양상이 드러나기 때문에 나중에 한 번에 코드 리뷰를 하는 것으로~
☹️ 문제 셋: 스마트 컨트랙트에 대한 이해 부족
배포된 스마트 컨트랙트를 불러오는 과정에서 내가 모르는 것이 정말 많다는 사실을 깨달았다.
// 테스트 1
router.post("/user_list", function (req, res) {
smartcontract.methods
.view_users()
.call({
from: account.address,
})
.then(function (result) {
res.send(result);
});
});
// 테스트 2
router.get("/user_mil", function (req, res) {
smartcontract.methods
.view_mileage("0x05d46463676Ec5F0e9676f39D651379c0F983bA4")
.call({
from: account.address,
})
.then(function (result) {
res.send(result);
});
});일단 첫 번째로 배포된 계약의 함수들을 제대로 파악하고 있지 못했다. 어떤 건 조회만 하는 함수가 있고 실제로 트랜잭션이 발생하는 함수가 있는데 그걸 불러와서 어떻게 사용하는지를 몰랐다.
우선 view_users()나 view_mileage()같은 경우에는 함수 이름에서도 알 수 있지만 트랜잭션이 발생하지 않고 결과값을 보여주기만 한다. 이 경우에는 함수를 호출한 후 .call()을 하기만 하면 되는 것 같다.
만일 트랜잭션이 발생할 경우에는 .send()를 사용하여 결과값을 어디론가 보내줘야 한다. 두 번째 문제는 call()함수와 send() 함수를 사용할 줄 몰랐던 것도 문제였다.
세 번째로는, 그냥 값을 확인만 하려는 함수이지만
// 마일리지를 조회하는 함수
// 오너만이 함수 호출이 가능하고 등록된 유저여야 마일리지 조회가 가능
function view_mileage(
address _address
) public onlyOwner checkUser(_address) view returns (
uint
) {
return mileage[_address];
}이런 식으로 주소값이 필요하다. 때문에 단순히 call() 함수를 통해서 호출만 하면 되는 일이 아니었다.
.call({
from: account.address;
})이 부분이 필요한 것임...!
네 번째로... 트랜잭션이 발생하면... 가스비는 누가 낼 건데...? 내는 사람이 없잖아...! 수수료를 지불할 지갑이 부재했었다.
// 수수료를 지불할 지갑을 등록
const account = caver.klay.accounts.createWithAccountKey(
process.env.public_key,
process.env.private_key
);export.module 위에 뒤늦게 적어주었다. 그래서 우리가 가입한 KAS 계정의 지갑에서 수수료를 지불하게 만들어 두었다.
send() 함수는 아래와 같이 사용하면 된다.
// 테스트 3 회원가입할 때 처리함 (지갑 주소에 마일리지 넣어주는 거)
router.post("/add_mile", function (req, res) {
const receiver = req.body._receiver;
const amount = req.body._amount;
console.log(receiver, amount);
smartcontract.methods
.add_mileage(receiver, amount)
.send({
from: account.address,
gas: 2000000,
})
.then(function (receipt) {
res.send(receipt);
});
});전부 배웠던 내용임에도 실제 코드를 작성할 때 내가 생각하지 못하고 있는 부분이 정말 많았다. 그냥 자바스크립트를 가지고 웹개발을 하는 것보다 생각할 것들이 더 추가된 듯 하다.
나중에 .send() 함수와 .call() 함수에 대해서도 어떻게 사용하는지 인자로는 어떤 값들이 들어갈 수 있는지를 알아보는 것도... 추후 업데이트 예정... 아마도~...
📮 POSTMAN 사용과 consol.log() 사용
위에서 언급한 것 외에... 정말 치명적이고 멍청한 실수가 하나 있었는데... 그것은 바로...!
// 바오밥 네트워크 주소 입력
const caver = new Caver("https://api.baobab.klaytn.net:8651");이 부분에서... 주소에... http://api.baobab.klaytn.net:8651 오타가... 나 있었다. 그러니까 아무리 해도... 안되지... 분명 코드에는 문제될 것이 더 없었는데... 고치고 고쳐도 문제될 부분이 더 없었는데... 환장할 노릇이었는데 내가 ^^ 복붙을 뭐 어떤식으로 한 건지 https에서 s를 빼먹은 상황. 하... (복붙 아니라 내가 친 걸 수도 있겠다는 생각이 든다...)
아무튼 상황이 이렇게 됐어서 ㅋㅋㅋㅋ (사실 저게 제일 치명적인 실수이긴 했지만 하나하나 고쳐가는 과정이 꽤 상당했다.) 데이터가 잘 전달이 되는지 확인하느라 postman을 좀 더 잘 활용할 수 있게 됐다. 사실 나 혼자서는 못 했을 거고... 강사님이 도와주셔서 그나마 '아~ 이렇게 쓰는건가...' 하면서 이후에 조금 활용이 가능했다.
지금은 코드랑 키 값이 달라져서... 결과는 나중에 기회가 되면 다시 찍어보는 거로 하고
selectMember가 되는지 안 되는지 열심히 명식오빠와 테스트를 해봤던 흔적...
이건 강사님과 transfer가 왜 안 되나 열심히 테스트를 해봤던 흔적...
강사님께서는 raw로 보내는 것을 더 선호하시는 것 같았다 JSON으로 보내기!
굳이 힘들게 뷰를 만들지 않아도 앞으로는 테스트가 훨씬 쉬워질 것 같다. 요렇게 하는 것이구먼! + 콘솔에도 찍히고 DB업데이트도 되는... 멋진 친구다. 백엔드 개발자의 든든한 조력자...
콘솔... 조력자 2...
사실 사용할 줄이야 알아도 실제로 어떻게 봐야 하는지 감을 여전히 못 잡고 있었는데 이제는 좀 바로바로 체크를 할 줄 알게 된 것 같다.
const sender = req.body.user_wallet;
const sender_num = req.body.user_num;
const receiver = req.body.input_wallet;
const amount = req.body.input_amount;
console.log(
"## 보내는 사람, 받는 사람, 보내는 마일리지: " + sender,
receiver,
amount,
sender_num
);
// 마일리지 거래한 후 결과값을 보내주기...?
smartcontract.methods
.trans_mileage(sender, receiver, amount)
.send({
from: account.address,
gas: 200000,
})
.then(function (result) {
console.log("## transfer result: " + JSON.stringify(result));
// DB insert 구문 (token 테이블)
sql = `
insert into token
(member_num, token_changed, trade_address)
values
(?, ?, ?)
`;
values = [sender_num, amount, receiver];
console.log(
"sender_num, amount, receiver: " + sender_num,
amount,
receiver
);
connection.query(sql, values, function (err, token_result) {
if (err) {
console.log(err);
res.send(err);
} else {
console.log("token_result: " + token_result);
}
});명식오빠가 콘솔에 직어볼 때 '##[확인할 내용]' + [변수명] 이런 식으로 작성해주니 콘솔에서 확인하기도 더 쉬웠고 [Object object]로 뜨는 콘솔은 JSON.stringify() 이런 식으로 하니 json 파일로 결과를 까서 보여주는 것을 알았다. 조금은 더 개발 툴을 잘 활용할 수 있게 된 것이 아닌가...! 하는...! 나만의 미미한 발전.
그렇게 완성해서!! release 브랜치에 최종 커밋!
📌 48일차 dApp개발 (07.12)_최종
자잘한 수정들을 마치고! 잘 되나 안 되나 최종적으로 연결해서 테스트를 해 보는 날이었다. 정근이의 포트에서 서버를 열어서 접속 후 회원가입 및 기능 테스트~
회원가입은 핸드폰 번호를 입력하여 인증을 거친 후에 진행된다. 가입과 동시에 지갑 주소가 생성되며 100 마일리지가 주어진다.
메인 페이지는 내 이름과 현재 BEANS 잔액을 보여준다. Notice 아래 부분은 추후... 시간이 된다면 구현할 예정...
잔액을 누르면 거래내역 상세 페이지로 이동한다. 우리 프론트엔드 진짜 열일 오지게 한 것이 느껴짐...
햄버거 버튼을 누르면 나오는 NAV
Beans 보내기버튼은 내가 만든 송금 페이지로 이동하고Beans버튼을 누르면 회원 랭킹 페이지로 이동하고Mypage버튼을 누르면 회원 정보를 수정할 수 있는 페이지로 이동한다.- 나머지는 아직 구현 이전...
수량과 핸드폰 번호 혹은 주소를 입력하면 (프론트에서 둘 중 하나의 값이 들어오면 멤버 조회하게 처리함) 이렇게 보내기가 가능하다.
상세 거래 내역에도 업데이트 완!
총 발행된 Beans 수량과 유통되고 있는 Beans 수량이 대시보드에 뜨고 (보유량은 카페가 가지고 있는 수량인데 아직... 저희는 사업자 로그인 이후를 구현하지 않아서...) 회원들의 Beans 수량으로 랭킹이 뜬다. 누르면 그 사람의 주소와 보유량, Beans(마일리지) 거래내역을 확인할 수 있다. (블록체인 상 거래 시 신뢰성 확보를 위해)
수정 페이지는 이렇다!
우리의 귀여운 로딩 화면 (스마트 컨트랙트가 조금 시간이 걸리는 편이라 로딩페이지가 종종 뜬다)
이렇게 우리가 우선적으로 구현하고자 했던 기능들은 기능 구현을 완료했고... 프론트도 기획대로 예쁘게 잘 나왔고... 잘... 마무리가 된 듯 하다... 정말 힘들었던 시간... 이렇게 마무리!
회고는... 다음에...
