[JJM Holders] Material UI 적용

안녕하세요.

JJM holders UI에 material ui를 적용해봤습니다.

기존의 사용하던 text, table, button 등을 이미 material style의 text, table, button등으로 바꾸는 작업을 해봤습니다.

기존의 기능은 그대로 유지하면서 페이지를 분리해봤습니다.

  • 스팀 로그인 (네비 바)
  • 홀더 페이지
  • 보팅 페이지

https://passionbull.github.io/jjm/ 에 접속하시면 확인할 수 있습니다.

 

https://ipfs.busy.org/ipfs/QmUpqJZt6jmeCSSGZ8rV67wVwqCeme32XG4evXB8Dr4PbN)DBsWRjz2P

https://ipfs.busy.org/ipfs/QmQYurDsw91hYdLwDo2xiXTWcvBdESPt87dtLqchKsYUfx


Material design에 대한 설명을 가져와봤습니다.

https://material-ui.com/premium-themes/

https://material.io/design/introduction/#principles

https://medium.com/beginners-guide-to-mobile-web-development/a-guide-to-google-material-design-977315149ea5

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

Google named it as material design ( codenamed as “Quantum Paper”) and introduced it in 2014 Google I/O conference.

Google’s Material Design considers “material” as a homogeneous digital fabric in which the material responds according to the user interaction . It provides the certain design standards for developing application across android , web and ios devices.

 


과정

UI를 바꾸는 과정은 생각보다 쉬웠습니다.

먼저 가장 좋은 템플릿을 찾아봤습니다.

https://material-ui.com/premium-themes/

이 사이트에서 무료로 공개된 템플릿 중에 material-dashboard-react라는 것을 활용했습니다.

https://www.creative-tim.com/product/material-dashboard-react?partner=104080

이 템플릿에서 제가 필요한 부분을 사용하고 사용하지 않는부분을 빼면서 작업했습니다.

크게 admin.jsx에 sidebar, navbar, main page, bottom bar로 구성되어있습니다.

UI 구성에는 어려움이 적었습니다. 원하는 UI 구성요소가 이미 있어서 편했습니다.

 


어려웠던 점 & 개선할 점

github page에서 route관련 문제

https://passionbull.github.io/jjm/ 이 route page인데 https://passionbull.github.io/jjm/voting으로는 바로 접속을 못합니다.

접속을 못하는 이유는 github에서는 /jjm/voting을 다른 호스팅으로 생각을 해서 그런가? 싶습니다.

아마 서버에서 호스팅한다면 이런 문제는 없을것 같긴 합니다.

이 문제는 router 쪽 코드에서 파라미터로 이동할 페이지의 이름을 받아서 이동하면 될까? 싶습니다. 개선해야합니다.

스팀 라이브러리 & 네트워크 문제

Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR

홀더들에게 보팅을 하기 위해서는 언제 보팅을 받았고, 최신 글이 뭔지 확인해야합니다. 이 과정에서 정보들을 가져오는데 시간이 걸립니다.

거기다가 스팀에서 계정 정보, 포스팅정보를 가져올 때 에러가 날 경우가 있습니다. 그럴 경우, 몇 개의 계정은 누락될 수 있습니다. 제 핸드폰에서는 잘 되는데, 노트북에서는 에러가 날 때가 있더군요.

해결 방안으로 몇가지 생각하고 있는데

  1. 여러번 로드를 합니다.

  2. 이 부분은 따로 미리미리 서버에서 계정들의 포스팅 정보를 로드해놓는 것이 유용할 것 같습니다.

  3. 다른 방법으로 dsteem 라이브러리를 사용해볼까합니다.

서버비용 없이 서비스 만들기

최대한 서버없이, 관리비용없이 웹페이지를 만들어보고 있습니다.

많은 사용자가 사용하지 않을 것 같아서 github page이면 충분하지 않을까 생각합니다.

그 외에 aws-s3를 사용하긴 했습니다. aws-s3는 스토리지 저장소로, 이미지, 텍스트를 저장해놓을 수 있습니다. 이 스토리지에 보팅할 메시지를 저장해놓고, 보팅을 할 때 이 메시지들을 가져와서 댓글을 작성합니다.

작성될 메시지를 수정하고 싶다면 코드를 수정하지 않고 스토리지 저장소의 보팅 메시지만 수정하면 보팅할때 작성할 메시지를 변경할 수 있습니다.

스테이트 관리

state 관리를 잘 해야겠다. 그리고 코드 분리, 기능과 ui를 분리해보는 것, 설계 등에 더 노력해야겠다 생각하고있습니다. mobx를 공부해서 적용해 볼 예정입니다.


관리자 페이지 개발 계획

  1. 홀더 정보 보여주기
  2. 스팀커넥트 로그인
  3. 보팅 자동화 with 댓글
  4. 보팅할 떄 작성할 댓글을 원격에서 수정
  5. UI 업데이트
  6. 배당 자동화

 

웹 개발을 해보면서 부족함을 많이 느낍니다. ㅜㅜ

앞으로 공부하면서 발전시키도록 하겠습니다.

감사합니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다