늘보의 서랍

[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 프로젝트 셋업 후 컴파일까지 해주었고 그 결과로 서비스 워..

오늘부터 프로젝트 개발을 시작하였다. Kotlin 운동앱은 따로 마무리지었다. 하... 갑자기 크롬 팅겨서 다시 작성한다. 우선 Vue 프로젝트를 만들어주었다. 옵션들에 대해 설명하자면, Babel : ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 하는 일종의 컴파일러 같은 개념의 Plugin [Vue.js] 바벨 출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 be-a-weapon.tistory.com TypeScript : TypeS..

오늘은 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을 해보았다. 입력을 받는데 그 입력값에 따라 변수값 또한 바뀌는 모습을 볼 수 있..

Vue 교재나 한국 가이드에 따라 hello world 예제를 하는 중 Vue 머스태시 부분(sTitle)의 랜더링이 안되는 문제가 발생했다. 결론은 Vue 버젼이 2에서 3으로 업그레이드 됐기 때문이고 교재는 2버젼을 기반으로 작성되어 있었기 때문이었다. script 부분 vue를 불러오는 곳에 vue 버젼을 vue@2와 같이 명시해주면 문제는 해결된다.