[JJM Holders] Material UI 적용
안녕하세요.
JJM holders UI에 material ui를 적용해봤습니다.
기존의 사용하던 text, table, button 등을 이미 material style의 text, table, button등으로 바꾸는 작업을 해봤습니다.
기존의 기능은 그대로 유지하면서 페이지를 분리해봤습니다.
- 스팀 로그인 (네비 바)
- 홀더 페이지
- 보팅 페이지
https://passionbull.github.io/jjm/ 에 접속하시면 확인할 수 있습니다.
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 업데이트- 배당 자동화
웹 개발을 해보면서 부족함을 많이 느낍니다. ㅜㅜ
앞으로 공부하면서 발전시키도록 하겠습니다.
감사합니다.
잘읽고 갑니다.
Posted using Partiko Android
긴글 읽어주셔서 감사합니다!
안녕하세요 jacobyu님
랜덤 보팅 당첨 되셨어요!!
보팅하고 갈께요~
좋은 하루 보내세요!!
Hi @jacobyu!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 2.530 which ranks you at #16301 across all Steem accounts.
Your rank has dropped 663 places in the last three days (old rank 15638).
In our last Algorithmic Curation Round, consisting of 161 contributions, your post is ranked at #124.
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server
Congratulations on your decision to become a holder in JJM. Did you know that the daily upvote is increasing for 1% for each 1000JJM you are holding? Get a max of 46% upvote from @virus707's 450K SP which would equal holding 45,000JJM.
꾸준히 열심히 하시는게 보이시네요~~ 훌륭하십니다~~!! ㅎㅎ
UI 아주 깔끔하네요~
감사합니다.
UI 저도 보기좋더라고요 ㅎㅎ
스팀 api서버가 에러가 나는 경우가 많아서 정말 예외처리가 핵심인 것 같습니다ㅠㅠ
넵 맞아요. ㅜㅜ
감사합니다!
깃허브 페이지에서는 서버 렌더링 방식이 지원하지 않습니다. 그래서 해당 경로(
/jjm/votiing)에 미리 렌더링된 html을 업로드 하거나, 다른 방법으로는 Hash router를 사용해야합니다. Hash router 방식은 history.pushState 를 이용해서 routing 됩니다.각각 장단점이 있어서 어떤게 좋다는 답변은 못드리겠어요.
메테리얼UI 넘 마음에 드네요. 저도 한번 살펴봐야겠어요. 그리고 웹개발 하신걸 보니 저 스스로 더 분발해야겠다는 생각이 들었습니다. 열심히 하시는 모습니 너무 멋지네요.
좋은 정보 감사합니다. Heroku는 서버 렌더링을 지원하나요??
Hash router도 찾아봐야겠어요.
Html도 괜찮은것같고요.
Heroku는 서버 렌더링 가능합니다.
busy가 Heroku에서 호스팅 되고 있습니다.
그리고 Heroku 무료 플랜은 한달에 550 시간 사용 가능합니다.