늘보의 서랍

프로젝트 폴더로 다시 넘어와서 vuefire 플러그인을 설치하려고 했는데 이와 같이 dependency 오류가 떠버렸다. 그래서 이 글을 작성하다가 에라 모르겠다 하고 @next를 뺀 명령어를 입력했는데 설치가 돼버렸네? 심지어 버젼도 2.2.5로 원하던 2.x 버젼이 깔렸다. vuefire 버젼이 업데이트 되면서 @next를 입력하면 3.x 버젼이 깔려 호환성 문제가 발생했던 듯하다. 해결돼서 다행이다. 그 후, Firebase 프로젝트를 만들고 Firestore 기능을 추가해주었다. 그리고 프로젝트 파일에서 firebase.js 를 생성하고 작성한 후, main.js에서도 firebase 변동사항을 업데이트 해주었다. project Id가 코드에 기입되어 있기 때문에 코드 내용은 따로 공개하지 않겠다..

어제 계속 PWA 공부를 하고 후에 회의까지 해서 피곤한 감에 일지를 마무리하지 못했다. 그래서 오늘 정리를 살짝 해보고자 한다. 일단 데이터 소스를 json 형식으로 따로 관리하는 방법에 대해 배웠다. 저번부터 계속 실습을 통해 요령을 하나씩 터득해 나가고 있다. 그런데 또 새로운 문제가 발생했는데 그것은 바로 devServer를 활용할 때의 코드 문제였다. 교재에서는 disableHostCheck 옵션을 사용하였는데 실제로 코드를 돌려보니 해당 옵션이 작동하지 않고 또 없는 것을 볼 수 있었다. devServer는 모바일 환경에서 어플리케이션을 테스트해보는 데 사용하는데 안드로이드 스튜디오 처럼 별도의 가상 머신이 없는 비쥬얼 스튜디오 코드를 사용할 때엔 필수적인 게 아닌가 생각이 든다. 그래서 나중..

파이어 베이스를 활용해서 프로젝트를 만들고 배포해 보는 실습을 하였다. 그런데 Vue-Cli 버젼 문제(추정)로 오른쪽 화면에서처럼 설계한 코드가 제대로 구현되지 않았다. 이전 실습에서도 발생했던 문제인데 추후에 관련 문서를 살펴볼 예정이라 일단 무시하고 실습을 진행하였다. 꼭 원하는 결과창이 나오지 않더라도 실습하고 코드의 흐름이나 특이사항을 배우는 건 할 수 있으니까! 그리고 LightHouse라는 Chrome 확장 프로그램을 사용해 웹페이지 성능을 평가해보는 작업도 해보았다. 확장 프로그램을 추가하고 원하는 웹페이지에서 해당 프로그램을 활성화시키면 되는 간단한 문제였다. 이 이후에는 파이어 베이스 DB에 연결하는 방법을 실습하고 또 다른 어플리케이션을 빌드해서 배포해보는 작업도 하였다. 기록해두는 ..