진화하는공간

저번 글에는 뷰의 기초를 공부하였습니다. marshmello.tistory.com/48 [PWA] 뷰 vue.js 입문 뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하기 위한 PWA 자바스크립트 프레임워크입니다. 프로그레시브란 프로그램 실행에 필 marshmello.tistory.com 뷰의 가장 큰 특징은 HTML 기반을 둔 커스텀 엘리먼트인 컴포넌트를 제작하고 활용 할 수 있다는 점입니다. 그리고 컴포넌트의 상태값 관리와 뷰 간의 이동을 도와주는 Vuex와 라이터 또한 중요한 기능입니다. Vuex와 라우터 기능을 활용하면 싱글 페이지 애플리케이션을 간편하게 제작 할 수 있습니다. 1. computed 속성 vue.js 사이트에 가면,..

뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하기 위한 PWA 자바스크립트 프레임워크입니다. 프로그레시브란 프로그램 실행에 필요한 최소한의 모듈로부터 점점 확장해간다는 의미가 있습니다. 즉, 뷰는 웹에서 UI, 비즈니스 로직, 데이터 관리를 돕는 최고 성능의 콤팩트한 자바스크립트 라이브러리입니다. 뷰는 앵귤러, 리액트와 유사하며 가상돔을 제어하는 기능도 제어합니다. 핵심적인 장점은 다음과 같습니다. 뷰는 html와 css를 토대로하여 동작하므로 진입장벽이 낮습니다. 기존 웹 표준작업에 익숙하면 쉽게 적용가능합니다. MVC 모델또한 지원합니다. 리액티브 양방향 데이터 바인딩을 지원하여 데이터의 변화를 자동으로 체크해서 화면을 바꾸는 동기화..

자바스크립트로만 PWA를 개발해보겠습니다. 단계별로 하나하나씩 PWA를 완성해보도록 하겠습니다. 1. 프로젝트 생성 우선 VSCode를 열어 폴더(프로젝트)를 만듭니다. (파일 -> 폴더열기 -> 폴더생성 후 폴더 클릭 -> 폴더 선택) 저는 PWA_TEST 폴더를 만들었습니다. 프로젝트(폴더) 마우스를 올리면 새파일 아이콘이 나타납니다. 새파일 아이콘 클릭 후 index.html 파일을 만듭니다. index.html 파일을 열어 html5 파일로 만들어줍니다. index.html 파일은 PWA의 메인화면이 됩니다. 2. 매니페스트 작성하기 manifest.json 파일 이름으로 새파일을 만들어주세요 manifest.json 을 작성해봅시다. { "name": "PWA 테스트 앱", "short_name..