티스토리 뷰
1. PWA란?
네이티브 앱은 스마트폰 운영체제에만 작동하는 앱을 말합니다. 이것은 Android, IOS와 같은 개별 운영체제에 맞게 개별로 개발하여야 하므로 시간과 비용이 많이듭니다.
웹앱은 운영체제에 구현받지 않고, 브라우저로 통신하기 떄문에 모두 똑같은 콘텐츠를 볼 수 있습니다.
또한 웹 표준 언어로 만들어 시간은 비교적 짧아지고, 비용또한 절감됩니다. 즉, HTML5, CSS3, JAVASCRIPT를 그대로 사용하여 스마트폰에서 작동하는 앱을 만들 수 있습니다.
또한 배포를 구글플레이스토어, 아이폰 앱스토어에 올릴 필요없이 URL 링크만으로 배포할 수 있습니다.
하이브리드 앱은 웹 표준 기술을 그대로 사용해 웹앱을 만든 것으로 네이티브앱 + 웹앱의 장점만 살린 기술입니다.
개발은 웹앱처럼하고, 앱 배포는 네이트브 앱처럼합니다.
하지만, 하드웨어 기능을 연결하는 플러그인에 의존하므로 사용할 수 있는 API 가 적으며, 처리속도 또한 성능이 떨어집니다.
PWA 프로그래시브 웹앱은 모바일 웹앱처럼 개발하고, 네이티브 앱처럼 사용할 수 있는것이 목표입니다.
2015년 구글 크롬 엔지니어 알렉스 러셀이 만들어낸 개념입니다.
PWA는 오프라인에서 실행되는 캐시, 보안성이 높은 HTTPS, 싱글 페이지의 빠른 UI와 같은 최신 웹 기술과 같이 성장하여 기존의 모바일 웹앱과 달리 웹의 장점과 네이티브 앱의 장점 모두를 갖춘 기술입니다.
2. PWA의 필수 요소
① 매니페스트 - 앱 소개 정보와 기본설정을 담은 Json파일입니다.
매니페스트는 고유제목, 앱 소개글, 화면 방향, 홈화면 아이콘, 브라우저에서 사용할 아이콘, 배경색, 스플래시 화면 등의 정보가 담겨져 있습니다.
PWA는 manifest.json 파일이 필수입니다. 이 파일은 브라우저에게 자신의 신분증과 같은 역할을 수행합니다.
② 서비스 워커 - 웹브라우저안에 있지만 웹페이지와는 분리되어 항상 실행되는 백그라운드 프로그램입니다. 인터넷 연결과 상관없이 동작하는 것이 특징입니다.
③ HTTPS 프로토콜
일반텍스트를 통신하는 HTTP 프로토콜에 비해 HTTPS는 암호화 인증을 거쳐 보안을 강화한 웹 통신 규약입니다.
웹 서버와 브라우저 사이에 주고받는 데이터가 암호화되므로 데이터를 가로채도 내용을 알 수없습니다.
PWA 배포할 때 반드시 HTTPS를 사용하여야 합니다 (홈화면 추가 기능, 라이트하우스..)
위 3개는 필수 요소이고 그 외에도 푸시알림, 홈화면 추가기능(즐겨찾기 x , 앱 설치) , 웹 API 등이 있습니다.
배포(홈화면 추가)는 따로 코딩을 하지 않아도 서비스워커와 매니페스트만 있다면, 브라우저 스스로가 판단해서 홈화면에 추가할 것을 제안합니다.
3. 개발 환경 구축
① 비주얼 스튜디오 코드(VSCode) 설치
code.visualstudio.com/download 에 접속하여 운영체제게 맞는 설치파일을 다운로드합니다.
모두 Next를 눌러 설치하면 되며, 추가 작업선택에서 PATH에 추가(다시 시작한 후 사용가능)을 반드시 체크표시한 다음 Next를 클릭하여 설치합니다.
②필수 팩 설치
설치 완료된 VSCode를 실행하여, 좌측 메뉴에 확장기능 아이콘을 클릭합니다.
검색창에 Korean Language Pack를 쳐서 한글 언어팩을 설치합니다.
2번째로 로컬서버로 테스트 하기 위한 미니웹서버인 라이브서버를 설치합니다.
Live Server를 검색후 설치합니다.
테스트할 HTML파일을 열어 마우스 우측 클릭하여 Open with Live Server 메뉴 선택하여 실행하는 방법과 생태표시줄의 Go Live 버튼을 클릭하는 방법으로 서버를 실행할 수 있습니다.
서버 중지는 상태표시줄의 Port:5500을 클릭하여 중지하면 됩니다.
필수는 아닌 추가하면 좋은 팩 (Eclipse Keymap) 이클립스 단축키를 VSCode에서도 쓸수 있습니다.
③ 프로젝트 시작하기
VSCode 상단 메뉴의 파일 -> 폴더 열기를 선택하여 폴더(프로젝트) 이름을 생성 후 선택합니다.
html파일을 생성하기 위해 탐색기에 있는 생성한 프로젝트에 마우스를 올리면 나타나는 새파일 생성아이콘을 클릭
파일명을 index.html로 입력 후 생성합니다.
VSCode가 확장자를 보고 자동으로 html임을 인식하므로 index.html 열어 html까지만 입력하면,
자동완성 추천항목이 펼쳐지는데 그 중 html:5를 선택하여 줍니다.
그럼 아래와 같이 html 태그가 자동으로 완성되며 <body>태그 안에 Hello PWA를 입력후 서버를 시작해줍니다.
아래와 같이 나오면 성공!
번외로 구글 크롬으로 개발자 도구를 사용하고 싶다면 확장아이콘 클릭 -> 설치된 항목의 Live Server 클릭
설정 톱니바퀴 아이콘 클릭하여 확장설정 클릭
Live Server 브라우저 세팅에 Chrome을 선택을 하면 크롬으로 브라우저를 테스트할 수 있습니다.
이상 PWA에 대하여 알아봤습니다.
아직 갈길이 멉니다 다음장에서는 PWA 필수 개발 언어인 모던 자바스크립트에 대하여 학습하겠습니다.
감사합니다.
'WEB' 카테고리의 다른 글
| [PWA] 뷰티파이 기초편 (1) | 2020.10.28 |
|---|---|
| [PWA] 뷰 vue.js 고급 기능 (0) | 2020.10.26 |
| [PWA] 뷰 vue.js 입문 (1) | 2020.10.26 |
| [PWA] 자바스크립트로 PWA 개발 (1) | 2020.10.26 |
| [PWA] 모던자바스크립트 ES6 입문 (1) | 2020.10.23 |
- Total
- Today
- Yesterday