늘보의 서랍

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

[PWA] Vue.js 프로젝트에 PWA 적용하기 아래 3가지를 충족해야 PWA가 될 수 있다.웹 앱 매니페스트 (Web App Manifest)서비스 워커 (Service Worker)HTTPS 프로토콜Vue 프로젝트가 없다면 Vue CLI를 통해 프로젝트를 생성한다.웹 앱 매니페스트란 앱 velog.io 교재와 위의 링크를 참고하여 몇 가지 추가로 진행하였다. 메니페스트를 개략적으로 만들어놓고 인덱스에 메니페스트 주소 추가 pwa 설치 어떤 부분이 했던 건지 또 어떤 부분이 해도 되는 건지 헷갈린다. npm install - project setup npm run build - compiles and minifies for production 프로젝트 셋업 후 컴파일까지 해주었고 그 결과로 서비스 워..

오늘 먼저 살펴본 것은 푸시알림을 만들고 보내는 방법이다. 실제로 전달되는 메시지에 비해 공정은 복잡하다는 느낌을 받았다. 설정할 수 있는 세부 부분도 많았다. 하지만 푸시 알림이 어플리케이션의 강력한 기능 중 하나이니 어려워도 해야겠지. 컨포넌트 작성이 끝나고 파이어베이스 서버에 함수를 작성하려 했지만... 요금제를 업그레이드 해야 한다길래 스킵하였다. 나중에 필요해질 때 다시 알아보고 해봐야겠다. 저번 일지에서 이번엔 기필코 코드를 실행시키라! 다짐했었는데 안타깝게도 그 다짐은 이루어지지 않았다. 본격적으로 프로젝트에 들어갔을 때 초기 단계에서부터 하나씩 맞춰가는 게 나을 것 같아서 고집부리지 않기로 했다. 다음으로는 Cloud Firestore와 enablePersistence() 함수를 활용해 오..

오늘은 실습으로 주어진 프로젝트를 하며 구글이나 다른 매체를 통해 로그인하는 방법에 대해 학습하였다. 그간 마주쳤었던 로그인 페이지들이 이런 식으로 짜여져 있었구나를 알게 되어서 흥미로웠다. 오늘은 일단 에러 메시지를 최대한 처리해서 결과 창을 어떻게든 띄워보려고 했었는데 일정이 있어서 마무리하지 못할 것 같다. 소득은 firebase/app을 임포트 하는 게 아니라 firebase/compat/app을 임포트해야 한다는 것을 알았다는 것! 다음 예제에서는 이런 저런 문제들을 다 해결하고 결과 창을 꼭 띄워봐야지! 마음이 급해져서 이만 줄이겠다. 곧 책을 끝낼 수 있을 것 같고 또 곧 프로젝트 개발에 들어갈 수 있을 것 같다. 화이팅!

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

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

오늘은 Vuetify에 대해 학습하였다. 뷰티파이는 뷰에서 사용할 수 있는 UI 프레임워크의 일종이다. 기본 레이아웃을 만들어 본 모습이다. 처음부터 옆의 화면이 나오지 않아서 애를 먹었는데 vuetify@2.2.x라 교재에 되어있는 부분을 Github 코드를 보고 vuetify@2.x라 고쳐주니 잘 실행되었다. 앱바 부분과 본문, 바닥 글까지의 스타일을 설정해보았다. 바닥글 부분이 스크린 샷에 안나왔네...ㅠ 카드 UI를 만들어보았는데 옆 화면의 스샷처럼 직사각형 영역 안에 요소들을 배치하는 방식이다. 많이 본 것 같으면서도 약간 유행이 지난 스타일인 것 같은 느낌이 든다. 그리드 레이아웃에 대해 살펴보았다. 열의 개수를 다르게 설정함에 따라 화면에 어떻게 출력되는지 알아보았다. 앞으로 많은 시행착오를..

저번에 이어서 Vue에 대해서 학습했다. Vue 설정하고 Mustache를 사용해보았다. script에서 vue를 불러오는 부분에서 버전 문제로 애를 먹었었다. 현재는 version 3가 default인 듯하다. 그래서 version 2를 사용하려면 vue@2로 명시해주어야 한다. Vue bind에 대해 학습했다. 단방향 바인딩 방법이다. html element의 attribute값이 바뀌어도 연결된 변수값은 변하지 않는다. 다른 사람이 코드만 보고 학습하긴 어차피 어려울 것 같아서 스샷에 코드를 그냥 첨부하기로 했다. 저자의 github에 가면 그대로 있는 코드기도 하다. 이번에는 Vue-model로 양방향 binding을 해보았다. 입력을 받는데 그 입력값에 따라 변수값 또한 바뀌는 모습을 볼 수 있..

며칠 그림 그리고 쉬다가 다시 코딩 공부를 시작하였다. 프로젝트에서 구상한 아이템을 PWA로 만들자고 결정이 되어서 이제 Kotlin이 아닌 PWA를 공부하게 되었다. 물론 Kotlin도 틈틈히 공부해서 마무리 지을 생각이다. 하지만 당장 급한 게 PWA고 진행한 부분에 대해서 팀원들과 공유해야되기 때문에 오늘은 하루 종일 PWA에 대해서 공부하였다. 그리고 공부하는 데 사용한 교재는 아래 링크의 교재이다. Do it! 프로그레시브 웹앱 만들기 - YES24 구글이 주도하고 MS와 삼성이 주목했다!웹과 앱을 한방에 만드는 프로그레시브 웹앱, 한 권으로 끝내기!글로벌 IT 기업들이 주목하는 차세대 웹 기술인 프로그레시브 웹앱(PWA)을 다룬다. 뷰와 뷰 www.yes24.com 아래는 교재 실습 코드의 G..