진화하는공간

뷰 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..

모던자바스크립트는 기존 자바스크립트와 달리 변수가 유지될 수 있는 범위가 더 엄격해졌으며, 함수를 객체처럼 변수에 저장해서 사용할 수 있는 함수 표현식도 가능해졌습니다. 1. 함수와 변수 ① 함수 표현식 - 함수명 없이 선언한 후 객체 변수에 저장하는 방식입니다. 예를 들어 const fnPlusNumber = function(p1,p2){ return p1+p2; } 위와 같이 const 변수에 함수를 대입하여 사용합니다. 또한 함수표현식은 선언 후 호출할 수 있어서 순서를 엄격하게 지켜야합니다. 만약 아래와 같이 사용한다면 에러가 발생합니다. fnPlusNumber(1,2); const fnPlusNumber = function(p1,p2){ return p1+p2; } ② 변수 - 기존 자바스크립트..

1. PWA란? 네이티브 앱은 스마트폰 운영체제에만 작동하는 앱을 말합니다. 이것은 Android, IOS와 같은 개별 운영체제에 맞게 개별로 개발하여야 하므로 시간과 비용이 많이듭니다. 웹앱은 운영체제에 구현받지 않고, 브라우저로 통신하기 떄문에 모두 똑같은 콘텐츠를 볼 수 있습니다. 또한 웹 표준 언어로 만들어 시간은 비교적 짧아지고, 비용또한 절감됩니다. 즉, HTML5, CSS3, JAVASCRIPT를 그대로 사용하여 스마트폰에서 작동하는 앱을 만들 수 있습니다. 또한 배포를 구글플레이스토어, 아이폰 앱스토어에 올릴 필요없이 URL 링크만으로 배포할 수 있습니다. 하이브리드 앱은 웹 표준 기술을 그대로 사용해 웹앱을 만든 것으로 네이티브앱 + 웹앱의 장점만 살린 기술입니다. 개발은 웹앱처럼하고, ..