드디어 백엔드와의 첫만남

저번에 솔라나 웹앱을 만들었을 때는,
백엔드 없이 블록체인 온체인 데이터만을 이용해 어플리케이션을 구성했었다.
하지만 이번 프로젝트는 많은 NFT들의 메타데이터와 image파일을
온체인만을 거쳐서 가져오기엔 시간이 너무 오래 걸릴 것 같아, 백엔드를 같이 구성했다.

일단 느낀 점은,
백엔드 개발자가 온전히 회사 소속이 아니다보니, 상시로 소통하기가 힘들어서
이정도 간단한 백엔드는 만들 줄 알면 좋겠다는 생각이 들었다.
물론, 만들어진 백엔드를 수정하는 정도는 어렵지 않았지만,
처음부터 설계하며 만드는건 공부를 좀 해봐야겠더라

또한 저번에도 들었던 생각이지만, 정말 await를 아무데나 걸면 안된다.
한번에 여러 데이터를 가져올 때는 Promise.all()을 꼭 이용하자.

더 공부할 것들

• GET과 POST의 차이, 특히 어떤 GET은 POST로 처리해야 할때가 있는지
• http 프로토콜
• RESTful 한 api란 무엇인가

성장한 부분들

확실히 저번에 했던 Dalgona Mint에 비해서, 스스로 성장했다고 느낀 부분들이 있었다.

일단 Web3 부분으로 봤을 때, 여러 라이브러리를 쓰는 방법에 익숙해졌다.
이번에 메인으로 공부하고 사용했던 라이브러리는 Metaplex였는데,
이 친구는 갓 태어난 친구라 Solana Web3보다도 더 열악한 docs로 인해
공부하는 것이 정말 쉽지 않았는데,
이젠 더 복잡한 rust 프로그램이나 js sdk를 이해하는 것에 더 자신이 붙은 것 같다.

물론 막혔던 부분도 많았었다.
특히 오래 걸렸던 건 Metadata를 Arweave에 업로드 하는 과정이었는데,
이 과정을 Metaplex가 공개해두지 않은 cloudfunction으로 처리하려다보니
에러가 나도, 무엇 때문에 어디서 문제가 되는지 알 수가 없어서 답답했다.
결국 해결하긴 했지만, 이를 계속 사용하는 건 위험한 것 같아서
Bruhan이 새로 스크립트를 짜야했다.

또한 지갑 라이브러리도 저번 프로젝트 끝나고 알게 돼서,
다음에 써봐야겠다고 생각했었는데, 이번 프로젝트에서 아주 유용하게 쓸 수 있었다.

솔라나 구조도 이젠 어느정도 가닥이 잡혀서,
pda와 같은 개념을 설명할 수 있을 정도도 된 것 같다.

https://velog.io/@leedc0101/%EC%86%94%EB%9D%BC%EB%82%98-%EC%A0%95%EB%A6%AC

더 성장할 수 있는 부분들

• 나만의 라이브러리 공부법이나 정리하는 방법 구축하기
• js sdk 구성하는 방법 이해하기

UI/UX

요즘 느끼는 것이, 스타트업과 같이 인력이 부족한 곳에서 일할 땐
어쩔 수 없이 반복의 작업을 최대한 줄여야 할 필요가 있다고 생각하는데
이를 위해 UI 라이브러리인 Chakra-UI의 힘을 많이 빌리고 있다.

다만 너무 이런 툴에 의존하면 나중에 협업할 때가 어려움이 있을 것 같아서
조금 규모가 커지거나, 혼자서 프로젝트 할 때는 다른 work around를 알아보는 게 좋겠다.

프로젝트가 다 마무리 되면 css transition, animation 부분을 더 공부해야겠다.

또한, 미리미리 UI/UX 디자인들을 봐두면 좋을 것 같다. (특히 interactive 쪽)
물론 디자이너가 디자인 시안을 주긴 하지만,
보통 나에게 오는 디자인들은 고정되어 있는 static한 디자인이 오게 되는데,
내가 구현해야 하는 것은 동적인 어플리케이션이기에,
평소에 이런 고민을 조금만 더 한다면, process가 조금 더 수월해질 것 같았다.

더 성장할 수 있는 부분들

• interactive 디자인 공부
• css transition, animation에 대한 이해
• css 패턴?
  UI 라이브러리 없이 css 적용하는 방법론

Server

이번에 내 손으로 직접 Front와 Back을 배포해봤는데,
생각보다 어렵진 않았다. 다만 내 스스로 제대로 정리가 되지 않았을 뿐

다음 주에 쉬면서 이 부분을 좀 제대로 정리해봐야겠다.

기억나는 부분만 지금 대충 정리해보자면

먼저 express 이용해서 build 되어있는 파일을 Serve 할 수 있게 하고
이를 pm2로 background에서 돌아갈 수 있게끔 했다.

여기까지는 깔끔하게 정리가 되는 것 같은데
문제가 되었던 부분은 도메인과 ip주소를 연결하는 부분이었다.

내가 사용했던 방법은 포트 3000을 열어두고,
80으로 들어오면 3000으로 돌아가도록 하는 방법이었는데,
뭔가 석연찮은 방법이라는 느낌이 있다.
아마 https는 이렇게 못할 것 같은 느낌이기도 하고

nginx
좀 더 알아봐야겠다.

js

배열의 map, 객체의 assign 많이 많이 사랑하자.
이렇게 편할 수가 없다.

ESLint와 Prettier

설정 방법 다시 알아보자
ESLint 설정은 되는데, Prettier랑 연동하는게 아직 안됨