깃허브
목표
- json-server를 통해 데이터를 받아온다.
- 대쉬보드의 뷰와 필터, 토글, 메뉴바 transition 기능 등을 구현한다.
알게 된 것
이번 과제를 통해 json-server가 포함된 프로젝트를 Heroku로 배포할 수 있게 되었고, 예전에 풀지 못했던 반응형 문제를 해결하였다.
문제 해결 로그
🥫 일부만 반응형이 되었던 문제
메인 페이지 반응형을 처리할 때 카드와 카드 상단의 제목 text 및 selector와 toggle이 있는 부분이 함께 반응형 처리가 되지 않고 카드만 반응형이 되는 현상이 있었다.
해결
제목부터 selector toggle까지 Navbar로 묶고 반응형을 준 다음
카드를 감싸는 박스에 flex-wrap과 기본 width를 설정해 주었더니 해결되었다.
석달 전 velog의 ListPage를 할 때는 해결을 못했던 부분이었는데 이번 과제를 통해 성공했다.
🚀 json-server 배포기
노션에 문서화한 링크
🥗 json-server 설치 및 실행하기
🍝 json-server 프로젝트 Heroku로 배포하기
이번 과제에는 json-server를 Heroku로 배포하는 과정에서 큰 혼란을 겪었다. 처음에는 배포된 사이트가 작동하는 것을 보고 배포가 잘 됐다고 생각했는데, 나중에 vscode 상에서 켜진 서버를 배포된 사이트에서 켜져 있는 것으로 착각했던 것을 알게 되었다. 다음 날 결국 과제 제출 시간을 넘겨 제대로 된 배포를 할 수 있었지만, 덕분에 json-server Heroku 배포 문서를 보완할 수 있었다.
heroku config:set NPM_CONFIG_PRODUCTION=falsedevDependency도 설치하게 설정하는 명령어 라고 한다. 배포 과정 터미널에서 이 한 줄을 추가하니 그토록 안 되던 json-server의 heroku 배포가 정상적으로 이루어졌다..
예전에 json-server는 실제 프로덕트에 사용되는 패키지가 아니어서 dev로 설치해야 한다는 블로그 글을 본 적 있다. 이번 프로젝트에서는 일반 패키지로 json-server를 설치했는데도 배포에는 성공을 했지만, 좀 더 설치된 패키지를 의미있게 관리하기 위해 다음에는 json-server를 dev로 설치하고 배포를 시도해 봐야겠다.
