이번에는 블록체인 커뮤니티다.
프론트엔드를 깊게 팔까 했지만 서버쪽을 다뤄 보는 것도 좋은 경험이 될 것 같아
백엔드 조금
컨트랙트 조금
회원가입과
Access Token 발급
기획
1단계 채널, git branch, 포지션 정하기
디스코드 채널을 통해 프런트, 백엔드가 소통 및 코드 공유하기 용이하도록 채널을 팠다.
프런트엔드:김승원, 최정환, 남민우
백엔드, 컨트랙트:남민우, 유해정
2단계 figma로 같이 디자인하기
https://www.figma.com/file/s331HvNPGv4xODJosVFf2p/Untitled?node-id=583%3A154
디자인을 같이 하기 전 틀을 만들고 서로 같이 디자인을 짜보았어요!
3단계 유저, 서버, DB, 컨트랙트 구조 짜기(기능을 뭘 구현할지 회의하였음!)
DB 스키마
회원가입 시 토큰 발급
게시물 작성 시 토큰 발급
좋아요 누를 시 토큰 전송
4단계 라이브러리 종류 및 기능 정하기
Next.js
프로젝트 1에서 사용했었던 연장선으로 사용해보고자 사용
렌더링이 빨라 사용자 경험이 좋음
Typescript
더 강한 검증 및 타입 스크립트에 익숙해지기 위해 사용
Style-component
각 요소가 어떤 역할을 하는지 구분이 쉬워서 사용
Recoil
전역 상태 관리가 Redux보다 코드 사용이 용이하여 사용
apollo.server
apollo.client
graphQL쿼리문 및 뮤테이션 문을 테스트하기 쉬워서 사용하였습니다,
API:graphQL
원하는 응답 값만 받을 수 있다.
엔드포인트에 따라 정해진 응답 값만 받아올 수 있는 REST API와 달리 GraphQL은 쿼리 작성을 통해 필요한 데이터만 골라 받아올 수 있다.
DB:RDS
Web3
Remix
5단계 파일 구조 짜기
프런트
├──./README.md
├──./apollo-client.ts
├──./assets
│ └──./assets/sparkLogo.png
├──./components
│ ├──./components/Body
│ ├──./components/Layout
│ ├──./components/MainList
│ ├──./components/SEO.tsx
│ └──./components/SignInModal.tsx
├──./next-env.d.ts
├── ./next.config.js
├── ./pages
│ ├── ./pages/Mypage.tsx
│ ├── ./pages/SignUp.tsx
│ ├── ./pages/WritePost.tsx
│ ├── ./pages/_app.tsx
│ ├── ./pages/_document.js
│ ├── ./pages/api
│ ├── ./pages/detail
│ └── ./pages/index.tsx
├── ./query
│ ├── ./query/GetQuery.tsx
│ └── ./query/MutationQuery.tsx
├── ./states
│ ├── ./states/spark.ts
│ └── ./states/userId.ts
├── ./styles
│ ├── ./styles/global-styles.ts
│ ├── ./styles/styled.d.ts
│ └── ./styles/theme.ts
├── ./tsconfig.json
├── ./types
│ ├── ./types/interfaces.ts
│ └── ./types/spark.d.ts
└── ./yarn.lock
백엔드
./src
│ ├── ./src/config
│ ├── ./src/constants
│ ├── ./src/graphql
│ ├── ./src/models
│ ├── ./src/server.ts
│ ├── ./src/token
│ └── ./src/utils
└── ./tsconfig.json
개발 (Problem)
문제점 1
pull req를 날리면 conflict 에러 때문에 원래 있던 파일이 날아가는 일이 빈번하게 발생하였음
해결
refactoring을 진행하면서 파일 구조를 기능, 타입별로 분리하여 서로 작업한 파일이 겹치지 않게 하여 conflict에러를 없앴습니다.
+commit을 할 때 어떤 내용을 작업했는지 상세하게 적어놓아 git reset를 하여 복원할 때 불편함이 없도록 하였습니다.
문제점 2
좋아요 누를 때 이더리움이 없으면 가스비 부족으로 에러가 나 서버가 터지는 문제 발생
해결
1.permit을 이용해 가스비를 이더리움말고 현재 커뮤니티 토큰으로 지급하는 방안
2.회원가입 시 롭스텐 이더를 줌으로써 가스비문제를 해결하는 방안
회원가입시 이더리움을 하나씩 준다는 거 자체가 이상하여 문제가 되어 1번으로 가려고 했으나 제한된 시간과 레퍼런스 부족으로 2번으로 타협하여 진행하였습니다.
문제점 3
userID가 전역 상태로 관리가 되지 않아 사용하기가 힘들었음
해결
Recoil 라이브러리를 사용하여 access토큰에서 userID를 뽑아 상태로 저장하여 사용하여 해결
문제점 4
로그인 시 새로고침을 안 하면 페이지업 로딩이 안 되는 문제 발생
해결
locate.reroad() 함수를 사용하여 해결
문제점 5
글 작성 시 쿼리문이 잘못 날아가 400 에러가 나는 문제 발생
해결
사람이다 보니 쿼리문에 살짝 에러가 날수도 있다고 느끼게 되었다. 하나 만 잘못되어도 400 에러가 떠버리니..
1. 아폴로 서버에서 쿼리문을 가져와서 직접 넣어서 해결
2. 해결한 다음 pull을 당겼더니 안 되는 문제가 발생한다면 git reset HEAD~2 등으로 전에 커밋한 내역을 가져오거나 커밋한 내역에서 바로 코드를 찾아서 복사 붙여 넣기 해서 해결
구현한 내용들
회원가입 및 로그인
포스트 들어가고 좋아요눌르기
마이페이지 현재가진 토큰 개수 및 내가 쓴 글 표시
롭 스텐 이더스 캔으로 ERC20(SIT Token) 전송 성공한 모습
회고
Keep/ 느낀 점
Keep
프로젝트 완료 후에도 간직하고 싶은 잘했던 것
1. 프로젝트하면서 백엔드를 같이 협업하여해 보았는데 데이터베이스 스키마도 짜 보고 같이 짠 쿼리 문과 Mutation구문이 어떻게 서버에서 클라이언트 쪽으로 가는지 클라이언트에서 데이터를 불러올 때 어떻게 하면 좋을지 에러를 해결하면서 직접적을 다뤄서 좋았습니다.
다음에 프런트에서 api를 받을 때 뭐가 문제인지 파악하는데 시간이 짧아질 것으로 예상
2. 지갑 생성 컨트랙트를 짜보았는데 3 기분이 나모 닉코 드 생성하는 코드를 짧게 축약시켜주는 라이브러리를 만드셔서 그걸 가져다 써서 코드가 깔끔해졌습니다 앞으로도 나모닉지갑을 만들 때 사용할 예정
3. 팀장으로 두 번째 프로젝트를 하면서 이번에는 건의사항 채널을 하나 추가로 넣었는데 매번 잘 마무리되더라도 항상 불만과 건의사항은 있을 수 있기 때문에 소통에 있어 도움이 더 된 것 같아 좋았다. 다음에도 만들 예정
느낀 점
만들고 싶은 기능들은 많은데 구글링해도 해결이 안돼서 딜레이 되는 상황이 너무 많은 것 같다.
문제 상황이 생겼을 때 해결방안을 많이 적어놓거나 겪어서 해결 능력을 좀 더 길러야겠다고 느꼈습니다.
또한 여전히 기획단계에서 잘 짰다고 생각했지만 코드를 짜고 서로 코드에 대한 이해도가 높아지면서 디렉터리구조가 바뀌는 경험을 하면서 좀더 공부를 해야겠다고 느꼈고 디렉토리 구조를 잘 짜야 역할분담이나 일정을 진행하는 데 있어서도 이슈없이 깔끔하게 할 수 있겠다고 느꼈습니다.