프로젝트2

FeelSoo·2022년 7월 1일
1

CodeStates

목록 보기
43/43
post-thumbnail

기능 구현 주요 목표는 다음과 같았다.


난 프론트엔드단의 Myblogs ( 나의 페이지 ), 글 작성 페이지 구현을 맡았다.


웹 페이지의 간단한 시퀀스를 정리하자면


클라이언트 : React, Redux, Next.js

  1. 클라이언트 페이지에서 서버에 Axios 요청을 보내고 ( GET or POST )

  2. useState 를 활용하여 받아온 값을 상태변수에 저장시켜 놓은 후

  3. (상태변수).map을 활용하여 필요한 컴포넌트에 속성값을 뿌려준다




서버 : Node.js, Express, Web3, MySQL

  1. 서버는 axios 요청에 맞춰 해당하는 데이터를 response로 return 해준다

    ( 서버 구축에는 Express.js, DB는 MYSQL이 사용되었으며 ORM sequalizer를 활용하여 서버에 요청이 들어오면 자동으로 DB를 탐색할 수 있게 구현되었다 )


2. 글 작성이나 회원 가입 관련 axios라면 스마트 컨트랙트와 연동하여 ERC-20 토큰을 발급해준다 ( Web3 )

— 회원가입시, 글 작성시 ERC-20 토큰 발급

— 발급받은 토큰을 타 계정에 전송하기


<< 기능 구현 모습 >>


1. < 로그인 >



2. < 글 작성 >



3. < 토큰 전송 1 >



3. < 토큰 전송 2 : 전송 완료 후 응답 메시지 >



3. < 토큰 전송3 : VS Code 터미널에서의 console 값 >


< 깃 허브 링크 > : https://github.com/PILSUCHOI/beb-04-Eight



소감 :

프로젝트를 진행하며 다양한 툴과 기능을 접할 수 있었고 또 다양한 버그를 맞닥뜨렸다.

  1. 깃 이슈 ( merge & crash )
  2. 세션 id 쿠키 이슈 ( ngrok 관련 )
  3. getStaticPaths 이슈 ( 상세페이지 로딩 불가 이슈 )

… etc

세션 id 쿠키가 로컬환경에서는 잘 동작했지만 ( 한 컴퓨터에서 서버와 클라이언트 페이지를 둘 다 띄웠을 때는 )

원격 환경에서는 잘 동작되지 않았다. 때문에 jwt 방식으로 변경하여 진행했었다.

프로젝트 진행시 디버깅의 비중이 상당히 크다는 것을 느꼈다.


next.js 프레임워크 학습과 적응의 필요성을 느꼈으며

css 부분에서도 많은 라이브러리를 사용해보고 숙달해야 될 것 같다. ( material-ui, tailwind css, bootstrap, semantic-ui 등등 )

기본적인 git 활용법 복습, 프론트쪽 다양한 기능

가령 무한스크롤, 상세페이지 구현 시퀀스 등 많은 부분들을 학습해야 할 것 같다.


백엔드쪽 관련해서는 Mysql 기본적인 쿼리문 복습, ORM sequalize 연동

MongoDB & mongoose ( ODM ) 을 사용해보고 숙달시켜야 할 필요성을 느낀다.


그리고 web3, infura, solidity 등 스마트 컨트랙트 파트도 깊게 학습해야 될 거 같다.

profile
세상은 넓고 배울건 많다

0개의 댓글