안녕하세요.
JJM holders UI에 material ui를 적용해봤습니다.
기존의 사용하던 text, table, button 등을 이미 material style의 text, table, button등으로 바꾸는 작업을 해봤습니다.
기존의 기능은 그대로 유지하면서 페이지를 분리해봤습니다.
- 스팀 로그인 (네비 바)
- 홀더 페이지
- 보팅 페이지
https://passionbull.github.io/jjm/ 에 접속하시면 확인할 수 있습니다.
https://ipfs.busy.org/ipfs/QmUpqJZt6jmeCSSGZ8rV67wVwqCeme32XG4evXB8Dr4PbN
https://ipfs.busy.org/ipfs/QmQYurDsw91hYdLwDo2xiXTWcvBdESPt87dtLqchKsYUfx
Material design에 대한 설명을 가져와봤습니다.
https://material-ui.com/premium-themes/
https://material.io/design/introduction/#principles
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를 공부해서 적용해 볼 예정입니다.
관리자 페이지 개발 계획
홀더 정보 보여주기스팀커넥트 로그인보팅 자동화 with 댓글보팅할 떄 작성할 댓글을 원격에서 수정UI 업데이트- 배당 자동화
웹 개발을 해보면서 부족함을 많이 느낍니다. ㅜㅜ
앞으로 공부하면서 발전시키도록 하겠습니다.
감사합니다.
This page is synchronized from the post: ‘[JJM Holders] Material UI 적용’