|
'프로그래시브 웹 앱'
조금은 복잡한 용어이지만 개발자들은 들어본 단어일 것이다.
Progressive Web App(PWA), 단어 그대로 해석하자면 '혁신적인 웹 앱'이라고 할 수 있을 것 같다.
2015년 구글에서 개발되어져 점점 그 사용범위가 넓어지고 있다.
프로그래시브 웹 앱이 각광받는 이유 중 하나는 '네이티브 앱'과 '웹'의 장점만을 취한 것이다.
책의 부제처럼 '네이티브 앱처럼 작동하는 웹'이다.
 이 책은 PWA에 대한 설명부터 시작해, 개발을 위한 환경 설정, 그리고 PWA의 핵심 요소를 상세하게 설명하고 있다.
필요한 기술과 용어만 설명한 것이 아니다.
프로그래밍을 배우면서 가장 곤혹스러운 것이 다양한 기술과 방법을 익혔음에도 무엇을 만들어야 할지 모른다는 것이다.
이 책은 '사용 가능한 SNS를 만든다'는 목적을 두고, 필요한 기술을 하나하나 알려주고 있다.
그렇기에 '어떻게' 사용하는지를 배우면서, '어디에' 쓰이는지도 함께 배울 수 있다.
이 책에서 언급된 최종 소스는 https://github.com/bjpublic/snsapp에서 제공하고 있다.
사용자에게 설치를 강요하지도 않는다.
개발자에게는 OS별도 따로 개발할 필요가 없다.
웹처럼 사용자의 반응에 따라 바로바로 서비스를 수정,개편할 수 있다.
푸쉬, 알림과 같은 앱의 서비스도 사용할 수 있다.
이러한 장점을 가진 프로그래시브 웹 앱에 대해 구체적인 프로젝트를 통해 장점을 직접 구현하고 느낄 수 있었다.
이 책을 기반으로 더 확장 가능한 서비스를 만들어 갈 수 있을 것이다.
|
|
2010년 경 모바일 앱을 처음 만들어 봤다. 당시만 해도 대세는 네이티브 앱이었는데 모바일 웹과 중복으로 개발해야 하는 생산성 문제 때문에 폰갭 등의 하이브리드 앱이 등장하였다. 10년이 지난 후 모바일 개발 생태계는 춘추전국시대가 되어버렸다. 안드로이드 진영에는 코틀린이 네이티브 개발을 대체하는 추세이고, 본 도서에서 소개하는 PWA가 나름의 한 축을 이끌어 가고 있으며, 구글의 플러터도 한 축을 담당하고 있다. 아직 어느것 하나가 뚜렷하게 대세를 끌고 있는 형국은 아니기에 개발 목적에 제일 부합하는 방식을 찾는 융통성이 필요한 시점이 아닐까 한다. 이 책은 그런 측면에서 PWA의 장단점을 쉽게 파악하고 PWA는 웹 앱임에도 네이티브 앱에서 제공하는 기능을 구현할 수 있다는 점이 장점이며, 자바스크립트 하나만으로 서버 사이드 까지 아우를 수 있다는 심플함이 있다. 개인적으로는 애플 진영에서 이 기술을 어디까지 용인하느냐가 대세 여부에 지장을 줄 변수라고 본다. PWA를 사용하면 본 도서는 Paper라는 간단한 예제에 PWA의 기능들을 입혀가며 개선하는 과정을 통해 PWA를 학습할 수 있게 도와준다. PWA의 핵심 기능인 서비스 워커를 알기 쉽게 풀어나가는 점도 책의 매력이라 할 수 있다. 기본적으로 자바스크립트는 싱글 스레드 기반으로 움직이기 때문에 이 제약을 피하기 위해 백그라운드의 기술이 중요해 진다. 이는 Node.js에서도 마찬가지이다. 서비스 워커를 활용하면 대표적으로 아래와 같은 3가지 기능을 활용할 수 있게 되는데 책의 예제를 통해 한 단계씩 구현하다보면 쉽게 익힐 수 있다.
그 외 캐시스토리지, IndexedDB, 웹 앱 매니페스트 등의 자주 활용하는 부가기능이 소개된다.
다음으로 앞서 설명했던 서비스 워커의 심화과정인 주로 서비스 워커에 동기화 작업을 등록하여 처리하며 클라이언트와의 마지막으로 Paper 앱에 Push 기능을 구현하며 대단원을 마무리한다. 앱 푸시 아키텍처에 대해 익힌 후 알림 API를 활용하며 구글의 FCM이라는 푸시서비스 연동을 통해 알림 기능을 구현한다. 부가적으로 전반적으로 Paper라는 앱 하나를 선정하여 PWA의 주요 기능을 하나씩 구현해나가는 과정이 통일성을 부여하여 집중력을 높여주는 구성이 백미이다. 더불어 PWA의 주요 기능들을 디테일하게 다루고 있기에 초보자도 쉽게 따라해보며 기능과 개념을 익힐 수 있다는 점이 장점이다. 더불어 가독성이 좋아 매끄럽게 읽힌다. PWA에 관심이 있거나 앱 개발을 처음 시작하는 분이라면 본 도서로 시작할 것을 추천하고 싶다. |
|
이번 책 리뷰 이벤트에 당첨이 되어 이 리뷰를 쓰게됩니다. 책은 비제이 퍼블릭에서 무상으로 제공받았습니다. 현재 저는 회사에서 웹페이지를 만드는 일을 하고 있으며 그런 저에게 웹 기술을 배우는 기회가 될거라는 생각에 지원했고 다행히 당첨되게되었습니다. 책의 구성으로는 기술의 발전 및 기능의 설명으로 시작하였으며 그 이후로는 그림과 자세한 설명으로 조금은 쉽게 따라할수 있겠끔 구성되어있습니다. 마치 웹 페이지를 앱처럼 사용가능 하게 만들어주는 기술이라고 보고있습니다. 리뷰를 쓰는 자세에 미치지 못하지만 아직 책을 전부 이해하지 못하였기에 글을 쓰는데 두서가 없음을 사과드립니다. 책을 반정도 본 입장에서 이야기를 하자면 일단 기초지식이 없어도 어느정도 따라 갈수 있는 구조로 되어 있다고 생각합니다. 여러 예제가 있으며 필요 프로그램 설명도 잘되어있습니다. 한번에 이해하기 힘들더라도 몇번의 반복만으로 실현되는 프로세스를 이해할 수 있을거라고 생각합니다. 따라가는 것만으로도 기술 향상에 도움이 될거라고 생각하며 처음 배우시는 분들도 충분히 예제를 따라가기 수월한 구성으로 되어있습니다. 아쉬운 점이라면 조금 가독성이 떨어지는 느낌이 들었지만 이건 개인적인 문제라고 생각을 하면서 2번은 읽고 따라해보는걸 추천드립니다. 일단 처음엔 이해하는것보다 한번 쭉 따라해보시고 두번째에서 이해를 노력하는게 좋아보입니다. 이런 말하는 저도 아직 반 정도 진행 한 상황이지만 충분히 이해를 도와주며 설명이 잘되어있다고 생각합니다. 우선 이벤트 기간이라는게 정해져 있다보니 이렇게 글을 올리지만 후에 완벽히 이해가되면 다시 한번 올리는것을 생각중에 있습니다. 아울러 이런식으로 새로운 기술에 접할수 있게 기회를 준 출판사 담당자님께 감사함을 느낍니다. |
|
저자소개 고등학교 시절 부터 지금까지 웹 개발자로 일하고 있으며 우연히 접한 웹 개발을 시작으로 흥미를 얻어 현재까지 웹 분야에 대한 다양한 기술을 배우고 활용하고자 노력하고 있으며 지금보다 더 나은 웹을 추구하는 개발자 중 한명이다 다른 사람과 지식을 공유하는 것을 좋아하여 개인 블로그와 깃허브에 다앙한 내용을 종종 올리고 있다 온라인 자료 - 저자 개인블로그: https://geundung.dev - 저자 GitHub: https://github.com/leegeunhyeok - 출판사 GitHub: https://github.com/bjpublic/snsapp 프로그레시브 웹 앱(PWA) 설명 웹은 네이티브 앱과 비교해보면 상대적으로 좋지 못한 성능과 사용자 경험을 제공한다는 단점이 존재한다 네이티브 앱의 사용성과 웹의 접근성이 적절히 조합된 프로그레시브 웹 앱(PWA)은 이러한 단점을 해결하고 지금까지 사용해왔던 웹과는 다른 새로운 경험을 제공한다 네트워크가 없는 오프라인 상태에서 웹 서비스를 사용하고 백그라운드에서 데이터를 동기화하거나 푸시 메시지를 제공하는 등 기존의 웹에서 할 수 없었던 일들을 웹 기술만을 사용하여 구현할 수 있다 프로그레시브 웹 앱은 지금도 계속해서 발전하고 있으며 구글과 모질라뿐만 아니라 애플과 마이크로소프트에서도 프로그레시브 웹 앱을 지원하고자 노력하고 있다 지금도 게속해서 다양한 기능이 만들어지면서 구현되고 있기 때문에 점점 더 강력한 힘을 얻게 될것이다 책의 구성 아래에 나열한 프로그레시브 웹 앱의 대표적인 기능에 대한 개념을 학습하고 밑바닥 부터 직접 구현해보며 일반적인 웹 앱을 프로그레시브 웹 앱으로 발전시켜 나가는 방향으로 실습이 진행된다 - 프로그레시브 웹 앱의 기본적인 개념 - 서비스 워커 - 웹 앱 매니페스트 등의 주요 구성 요소 - 오프라인 캐싱 - 백그라운드 동기화 - 푸시 알림 서평 그동안 자바스크립트와 웹 기술은 정말 엄청난 속도로 발전해 왔으며 현재도 진행 중이다 쉽고 간편하게 만들기에는 네이티브 앱보다는 웹 앱이 활용도가 높았으나 여러단점들이 존재 했었다 이 책은 그에 대한 대안으로 나온 프로그레시브 웹 앱에 대한 대표적인 기능들을 직접 구현해보며 프로그레시브 웹 앱 개발에 입문할 수 있도록 도움을 준다 이 책의 초반부에 자바스크립트와 웹에 대해 잘모르는 사람들을 위해 간략히 설명하고 있으며 네이티브 앱, 웹 앱, 하이브리드 앱, 프로그레시브 웹 앱 정말 앱에도 다양한 종류가 나와있어 햇갈리는 부분이 많은데 이부분에 대해 궁금증을 해소 시켜 준다    실습을 위한 개발환경을 준비하기 위해 Node.js 와 Visual Studio Code를 설치하고 실습 소스코드를 GitHub에서 Pull 받는다  3장에서는 Paper를 프로그레시브 웹 앱으로 개선하기 위해 준비하는 과정을 소개 한다 Paper의 기능 파악 부터 시작해서 어떠한 방향으로 기능을 개선해 나갈지 전체적으로 살펴보는 챕터이다
4장에서는 프로그레시브 웹 앱의 주요 기능을 구현하기 위해 핵심적으로 필요한 서비스 워커에 대해 알아본다 서비스 워커는 프로그레시브 웹 앱의 핵심 구성 요소이며 다양한 기능을 제공하는 심장 같은 존재라고 할 수 있다 프로그레시브 웹 앱에서 구현되는 다양한 기능은 대부분 서비스 워커를 통해 구현이 된다  5장에서는 오프라인 환경에서 Paper를 사용할 수 있도록 캐시 스토리지 API에 대해 알아보고 다양한 활용 패턴에 대해 알아 본다 캐시 스토리지란 오프라인에서 웹 페이지를 작동시키기 위해 필요한 작업은 웹 페이지의 구성 요소를 어딘가 미리 저장해 두는 것이다 오프라인에서 웹 페이지를 사용하려면 구성 요소를 어딘가에 미리 저장해두고 웹 페이지를 로드할 때 불러올 수 있어야 한다 여기서 어딘가에 해당하는 것이 바로 캐시 스토리지 이다 캐시 스토리지는 HTTP 캐시와 별개로 브라우저에 리소스를 직접 저장하고 관리할 수 있는 공간이며 캐시 스토리지 API를 통해 다양한 기능을 제공한다 페이지를 구성하는 요소를 캐시 스토리지 공간에 캐싱해두고 이후 필요할 때 꺼내오거나 새로운 캐시로 갱신하는 등 다양한 기능을 직접 구현할 수 있다  6장에서는 IndexedDB의 기본 개념에 대해 알아보고 컨텐츠 데이터를 저장 및 관리하기 위한 저장소를 구성하여 Paper에 적용하는 실습을 진행한다 IndexedDB 란 브라우저에는 캐시 스토리지 외에 로컬 스토리지, 쿠키 스토리지, 세션 스토리지등과 같은 다양한 목적을 가진 저장소가 존재한다 이러한 저장소를 통해 서버나 외부 저장소에 데이터를 저장하지 않고 브라우저 자체에 저장할 수 있으며 웹 개발자가 쉽게 활용할 수 있다는 장점이 있다 위에서 언급한 저장소 외에 다양한 저장소가 존재하며 그중 IndexedDB가 포함되어있다 IndexedDB는 브라우저에서 객체를 저장하고 트랜잭션 기반으로 데이터를 처리하는 데이터베이스 이다 IndexedDB는 널리 사용되는 RDBMS 보다는 NoSQL에 더 유사한 유형의 데이터베이스 이다 IndexedDB는 데이터베이스, 객체 저장소, 데이터 세가지 구성 요소로 이루어져 있으며 일반적인 RDBMS와 비슷한 부분이 많다  7장에서는 설치 가능한 웹 앱을 구성하기 위해 필요한 웹 앱 매니페스트와 다양한 구성에 대해 알아본다 웹 앱 매니페스트란 웹 앱을 일반적인 앱 처럼 설치 가능 하도록 만들어 주는 것 웹 앱 매니페스트는 웹 앱에 대한 정보를 담고 있는 JSON 형식의 파일이다 여기에는 웹 앱을 설치하고 실행하기 위해 기본적으로 필요한 다양한 정보들을 담고 있다 웹 앱 매니페스트에는 웹 앱의 이름, 아이콘, 시작 페이지, 화면모드등의 정보가 포함 되어있다  8장에서는 서비스 워커의 백그라운드 동기화 이벤트에 대해 알아보고 오프라인 상태에서 수행한 작업을 동기화할 수 있도록 새로운 기능을 구현해본다  9장에서는 서비스 워커와 클라이언트간 메시지 통신 방법에 대해 알아보고 일부 보완이 필요했던 Paper의 기능을 개선해본다  10장에서는 푸시 알림에 대한 전반적인 이론을 살펴보고 Paper의 좋아요 푸시 알림 기능을 구현해본다 푸시란 상대방이 내게 메시지를 보냈을 때 푸시 알림을 통해 메시지가 도착했다는 사실을 확인할 수 있고 반대로 상대방에게 나의 행위를 알릴 수 있는 수단이기도 하다 기존에는 이러한 푸시 알림 기능은 오직 네이티브 환경에서만 구현할 수 있었지만 웹 기술이 점점 발전하게 되어 푸시 API 가 새롭게 추가 되었다 푸시 API는 웹 페이지가 로드되어 있지 않은 상태라도 서버로부터 메시지를 받을 수 있는 기능을 제공한다 이를 통해 웹 환경에서도 언제든지 푸시 메시지를 받아 사용자에게 푸시 알림을 제공할 수 있는 기능을 구현할 수 있게 되었다  총 평 이 책은 모바일 시대에 맞게 발전해온 웹 앱 개발 기술인 프로그레시브 웹 앱의 핵심적인 기능들을 직접 실습을 통해 익힐 수 있는 서적이다 웹 개발자로서 모바일 개발은 전혀 접해 보지 못했었는데 요즘 나오는 크로스 플랫폼 기술들과 이런 프로그레시브 웹 앱 같은 기술 덕분에 원하는 방식의 개발을 훨씬 쉽고 수월하게 할 수 있게 된 것 같다 개인 적으로는 이론서보다는 이런 에제로 배울 수있는 쿡북 같은 형태의 개발도서들을 좋아한다 핵심적인 기능들에 대한 설명과 적절한 예제들로 기술에 대한 이해도 쉽게 할 수 있고 반복적인 실습으로 개발 기술에도 쉽게 적응할 수 있게 해주어 프로그레시브 웹 앱에 입문하고자 하는 사람들에게 빠르게 기술을 이해하고 활용할 수 있도록 많은 도움을 줄 수 있는 개발서적인 것 같다
※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 정성껏 작성한 리뷰 입니다 |
|
최근 프론트 엔드 공부를 하고 있는데 정말 괜찮은 책으로 공부를 시작했습니다. 그리고 최근 웹개발에서 프론트단 SPA, PWA 기반으로 SNS를 만들기도 합니다. 책의 가장 좋은 점은 인스타그램 실습을 통하여 구조와 원리, 더 나아가서는 구현까지 한 번 실행할 수 있는 점이 좋았습니다.
그리고 JS 에서 유용한 기능인 서비스워커에 대하여도 알려준다는 점이 좋았습니다. 이러한 기술 tech stack을 잘 배워 놓았다가 추후 현업에 가면 잘 쓸 수 있을 듯 싶습니다. |
