당신은 주제를 찾고 있습니까 “pwa 란 – PWA가 뭔가요? (+모바일 앱의 종류)“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 얄팍한 코딩사전 이(가) 작성한 기사에는 조회수 22,295회 및 좋아요 671개 개의 좋아요가 있습니다.
Table of Contents
pwa 란 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 PWA가 뭔가요? (+모바일 앱의 종류) – pwa 란 주제에 대한 세부정보를 참조하세요
#PWA #하이브리드앱 #플러터
모바일 어플리케이션의 새로운 개발방식, PWA를 알아보겠습니다.
네이티브 앱이란?: 00:13
웹 앱이란?: 02:01
하이브리드 앱이란?: 03:29
크로스-플랫폼이란?: 04:42
⭐️PWA란?: 05:39
PWA 개발하기: 7:39
= = =
🏠 얄코사이트: https://www.yalco.kr
🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers
🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ
===
🎬 영상 주요 포인트
📱 모바일 앱의 종류
네이티브 앱
네이티브 앱.
스마트폰이란 것이 탄생하면서 있었던
가장 기본적인 형태의 앱이에요.
해당 스마트폰에 깔린 OS
즉 안드로이드 또는 iOS환경에
각각 그 전용으로 개발된 소프트웨인거죠.
…
이처럼 OS 각각의 전용으로 개발되었기 때문에
네이티브 앱은 안드로이드와 iOS 각각에서
주어진 모든 자원과 기능들을 활용할 수가 있어요.
iOS나 안드로이드가 새로 나올 때마다
최신 기능들을 얼마든 탑재할 수 있고
스마트폰의 전후 카메라, 각종 센서,
하드웨어 자원, 내부 파일 시스템 등을
각각의 OS가 허용하는 한 얼마든지 직.접. 활용할 수 있는거죠.
스마트폰의 성능을 최대한 활용할 수 있는
고퀄리티의 앱을 만들 수가 있는거에요.
그리고 각각 iOS의 앱스토어,
안드로이드의 플레이스토어에 올려지기 때문에
구글과 애플에게 검증된 방식대로
쉽게 스토어에서 검색해서 찾을 수 있고
원하는 위치에 아이콘으로 추가해서
언제든 간편하게 사용할 수 있죠.
하지만 단점도 있어요.
iOS와 안드로이드 각각에서 만들어야 하기 때문에
안드로이드 개발자, iOS 개발자를 따로 두거나
혹은 한 사람이 둘을 다 만들어야 하죠.
개발에 드는 인력과 시간이 늘어나는거에요.
…
우수한 성능의 앱을 만들 수 있지만
개발하고 관리하는 과정이 어렵다는 것이
네이티브 앱의 특징이자 장단점으로 정리될 수 있을거에요.
모바일 웹
모바일 웹은 다른 게 아니라
스마트폰 사용자들을 대상으로 만든 웹사이트에요.
…
스마트폰의 좁은 세로화면에서
보기 편안하도록 만들어진 사이트가 모바일 웹이에요.
…
눈치채셨겠지만, 모바일 웹의 장점이라면
개발하고 운영하기가 훨씬 간편하다는거에요.
모바일용으로 웹사이트만 만들어놓으면
사용자 폰에서 크롬이나 사파리 같은
브라우저로 열 수 있기 때문에
웹 개발만 할 줄 알면 OS에 구분 없이
어느 폰에서든 동작하는 웹앱을 만들 수 있고
내용이 바뀔 때도 이 사이트만 업데이트하면 되니까
스토어의 검수를 기다릴 필요 없이
언제든 원하는 때에 버전업을 할 수 있는거죠.
단점은 기능과 성능이에요.
…
브라우저 화면에 나타날 뿐인 모바일 웹으로는
할 수 있는것들이 제한되어 있어요.
이걸로도 만들 수 있는 유용한 앱이 많지만
스마트폰의 모든 자원과 기능을 활용할 수 있는
고성능 게임이나 그래픽 툴 등의 앱은 어렵겠죠.
하이브리드 앱
이 둘 사이에서 절충점을 찾은게 하이브리드에요.
네이티브로 만들되, 그 앱에 브라우저 창을 둬서
일부 또는 대부분의 기능을 웹 형태로 제공하는거죠.
보다 쉽게 말하자면, 안드로이드나 iOS 전용으로
각각 스토어에 올리는 네이티브 앱을 만드는데
그 앱 안에 크롬이나 사파리같은 브라우저처럼
웹사이트를 보여주는 창을 하나 넣는거에요.
…
이런 앱들은 이 네이티브 기능들에 대해서만
스토어를 이용한 업데이트가 필요하고
웹뷰에 나타나는 컨텐츠들은
웹쪽만 업데이트하면 되기 때문에
네이티브 앱보다 더 유연한 운영이 가능하고
탑재할 수 있는 기능에도 제한이 없을거에요.
크로스오버 플랫폼
리액트 네이티브, 플러터, 자마린
이런 크로스오버는 또 다른 방식의 접근이에요.
하나의 언어, 한 번의 개발로
안드로이드와 iOS 모두에서 동작하는
네이티브 앱을 만들기 위한거죠.
리액트 네이티브의 자바스크립트나 플러터의 다트,
또는 자마린의 C#으로 코딩을 하면
iOS와 안드로이드에서 각각 이해할 수 있는 언어로
변환이 돼서 폰에서 돌아가게 되는거거든요.
웹은 브라우저나 웹뷰가 제공하는
이 영역까지의 기능만 사용할 수 있지만
이 크로스오버 플랫폼들은 양쪽 OS의
더 깊은 영역까지 닿을 수 있도록 만들어졌어요.
⭐️ PWA
PWA는 먼저 설명한 것들을 대체하기 위한 것 또는
그것들의 단점을 다 해결할 수 있는 무언가가 아니라
개발하기 쉽고 사용하기 편리한 앱을 만들기 위한
또 하나의 접근법, 방법론이라고 보시면 돼요.
더 정확히는, 이 모바일 웹의 한계를
브라우저의 발전을 통해 끌어올린거죠.
…
브라우저에서 돌아가는 모바일 웹이
어떻게 이게 다 가능하냐구요?
네, 브라우저들이 이제 이런 기능들을 지원하는거죠.
보다 편리한 PWA의 생태계를 위해 위 기능들 뿐 아니라
여러 다른 것들을 가능하도록 하기 위한
브라우저 기능들이 개발되고 발달해가고 있어요.
…
웹으로 개발 가능한 수준의 앱은
브라우저에서 돌리는 것보다 훨씬 편리하게
그리고 지원되는 더 많은 기능들과 함께
이용할 수 있는거에요.
…
거기다 이제 홈에 아이콘으로 추가까지 되니까
스토어에서 다운받는 이 앱들처럼,
기존 사용자들을 묶어놓는것도 가능해진거구요.
===
🎵 엔딩송 : 권민호, 김한영 – Let’s Dance
🎼 자료출처 : https://gongu.copyright.or.kr
🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw
pwa 란 주제에 대한 자세한 내용은 여기를 참조하세요.
PWA(Progressive Web Apps)란 무엇인가? 장점과 구현 사례
PWA는 ‘Progressive Web Apps’의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 …
Source: perfectmoment.tistory.com
Date Published: 2/6/2021
View: 2102
프로그레시브 웹 앱(PWA)이란 무엇이며, 왜 필요한가? – wishket
PWA란 무엇인가? … PWA는 프로그레시브 웹 앱(progressive web app)의 줄임말입니다. PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, 자바스크립트(JavaScript)와 같은 …
Source: blog.wishket.com
Date Published: 6/24/2022
View: 4995
PWA(Progressive Web Apps)란 무엇이고 장단점은 무엇인가
Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 …
Source: ux.stories.pe.kr
Date Published: 9/6/2022
View: 4702
PWA란
프로그레시브 웹앱(Progressive Web Apps) … 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 느린 네트워크에서도 빠르게 …
Source: velog.io
Date Published: 7/21/2021
View: 6661
Progressive Web App이란? PWA란? 프로그레시브 웹 앱이란?
PWA란 Progressive Web App의 줄임말입니다. … 말할 수 있습니다. 예를 들어. 당신은 휴대폰으로 영화표를 예매하고 싶습니다. 웹 : 당신은 브라우저를 …
Source: ko-de-dev-green.tistory.com
Date Published: 8/25/2022
View: 267
[PWA] 프로그레시브 웹 앱 시작하기 (1) – PWA란?
PWA는 Progressive Web App의 약자로, 웹의 장점과 앱의 장접을 결합한 환경입니다. 웹이랑 앱이라니.. 조금 생소하실 수 있습니다. 그렇다고 해서 …
Source: geundung.dev
Date Published: 8/19/2021
View: 8956
프로그레시브 웹 앱 소개 – MDN Web Docs
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 예를 들어, 웹 앱은 발견이 …
Source: developer.mozilla.org
Date Published: 10/28/2022
View: 5323
[똑똑한개발자] PWA란 무엇인가요? – 브런치
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 최대한 합리적인 시간과 비용 …
Source: brunch.co.kr
Date Published: 6/6/2022
View: 6906
주제와 관련된 이미지 pwa 란
주제와 관련된 더 많은 사진을 참조하십시오 PWA가 뭔가요? (+모바일 앱의 종류). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 pwa 란
- Author: 얄팍한 코딩사전
- Views: 조회수 22,295회
- Likes: 좋아요 671개
- Date Published: 2020. 4. 29.
- Video Url link: https://www.youtube.com/watch?v=NMdnzvPsGu8
프로그레시브 웹 앱(PWA)이란 무엇이며, 왜 필요한가?
*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 8만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)
본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 네덜란드의 SEO(검색엔진 최적화) 플러그인 회사인 ‘요스트(yoast)’에서 발행한 글이며, 작가인 에드윈 투넨(Edwin Toonen)은 전략 콘텐츠 전문가로 요스트에 합류하기 전, 네덜란드의 주요 웹 디자인 잡지사에서 수년간 다양한 콘텐츠를 다룬 경력이 있습니다. 본문은 프로그레시브 웹 앱(PWA)이 어떤 것이며, 왜 필요한지에 대해 살피는 내용입니다. PWA에 대해 궁금하셨다면 충분히 도움이 될 만한 글입니다.
스마트폰의 시대가 시작된 지는 오래되었습니다. 그러면서 네이티브 앱(native app, 플랫폼의 OS에 맞는 언어로 제작된 앱)의 시대도 함께 찾아왔습니다. 앱은 계속해서 우리들의 일상에서 중요한 역할을 하고 있습니다. 그리고 수많은 비즈니스 오너들은 스스로에게 몇 번이고 이렇게 묻곤 합니다. ‘우리도 앱을 만들어야 하는 걸까?’ 당연히 그 대답은 한 가지일 수밖에 없습니다. 상황에 따라서 다르다고 말입니다. 네이티브 앱을 개발하고 유지보수하는 것은 상당히 길고 복잡한 과정이며, 상당한 비용이 소요되는 경우도 많습니다. 다행히 다른 방법이 있습니다. 이 방식은 우리가 웹(web)에서 사용하는 기술과 네이티브 앱의 장점을 결합한 것입니다. 그것은 바로 프로그레시브 웹 앱(progressive web app), 줄여서 PWA라고 부르는 것입니다.
PWA란 무엇인가?
PWA는 프로그레시브 웹 앱(progressive web app)의 줄임말입니다. PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱입니다. 하지만 그 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋습니다. 몇 가지의 스마트한 기능들을 추가하면, 세상의 그 어떤 웹사이트라도 PWA로 바꿀 수 있습니다. 즉, 네이티브 앱을 개발하는 것은 상당히 어렵지만, PWA는 훨씬 더 빠르게 개발할 수 있다는 것입니다. 또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있습니다.
트위터(Twitter)도 PWA입니다.
우리가 온라인에서 볼 수 있는 많은 사이트들도 실제로는 PWA입니다. 트위터닷컴(twitter.com)이 대표적입니다. 스마트폰으로 이 사이트에 들어가면, 홈 화면에 트위터닷컴을 추가할 수 있습니다. 그러고 나서 스마트폰에 저장된 트위터 사이트를 열어 보면, 모양도 네이티브 앱처럼 보이고, 기능도 모두 똑같습니다. 브라우저 창 같은 건 아무것도 없습니다. 아이폰이든 안드로이드 스마트폰이든 관계없이, 실행하는 데 있어서는 아무런 차이도 없습니다. 그냥 로그인을 해서 이용하기만 하면 됩니다. 이것이 바로 PWA로 웹 애플리케이션을 만들 때의 가장 큰 장점이라고 할 수 있습니다.
PWA는 점점 더 인기를 얻고 있으며, 대기업의 웹사이트들도 PWA인 경우가 많습니다. 대표적으로는 스타벅스(Starbucks.com), 핀터레스트(Pinterest.com), 워싱턴포스트(Washingtonpost.com), 우버(Uber.com) 등의 PWA를 홈 화면에 설치할 수 있으며, 이들은 모두 각자의 네이티브 앱과 비슷한 사용자 경험(UX)을 제공하고 있습니다.
네이티브 앱과 PWA의 차이는 무엇인가?
흔히들 애플의 앱스토어나 구글의 플레이스토어에서 다운로드할 수 있는 네이티브 앱은 일반적으로 해당 플랫폼에 특화된 프로그래밍 언어로 만드는 경우가 많습니다. 즉, iOS의 앱들은 스위프트(Swift)로 만들고, 안드로이드의 앱들은 자바(Java)로 만드는 식입니다. 원하는 플랫폼에서 실행되는 앱을 만들기 위해서는, 관련된 기술도 알아야 합니다. 물론 지름길도 있기는 하지만, 이런 방법에도 나름의 한계가 있습니다. 그리고 여러 군데의 모바일 환경에 대해서 전부 앱을 만들고 싶다면, 그런 각각의 다양한 환경에 필요한 기술들을 알고 있어야만 합니다. 따라서 하나의 앱을 만들어서 모든 앱스토어에 출시한다는 것은 절대로 쉬운 일이 아닙니다.
당연히 두 개의 환경에서 모두 실행되는 앱을 개발하는 방법은 존재합니다. 대표적인 것이 바로 프로그레시브 웹 앱(PWA)입니다. PWA는 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작합니다. 그리고 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근할 수 있습니다. 따라서 PWA의 성능이 뛰어나다면, 사용자들은 자신들이 웹 기반의 앱을 사용하고 있는 것인지, 아니면 네이티브 앱을 사용하고 있는 것인지를 구분하지 못할 것입니다.
물론 주의해야 할 점도 있습니다. 여러 브라우저들이 PWA를 위한 기술들을 빠르게 채택하고 있기는 하지만, 여전히 한계가 존재하는 것이 사실입니다. iOS의 경우, PWA에 필요한 기술들을 사파리(Safari) 브라우저가 지원하지 않는 경우가 많습니다. 애플은 아직까지 관련 기술들을 완전히 지원하지 않기 때문에, 다른 플랫폼에서와 동일한 환경을 구성하는 것이 조금은 번거롭습니다.
PWA의 장점은 무엇인가?
많은 사람들이 앱을 갖고 싶어 하는 주된 이유는, 그걸 통해서 참여율을 더욱 끌어올릴 수 있기 때문입니다. 앱을 설치하는 사용자들은 이미 관심이 있는 것이기 때문에, 사용자들이 앱을 통해서 회원가입을 하고 매출을 올릴 가능성이 더 높습니다. 그리고 푸시 알림을 이용하면, 그런 사용자들의 관심을 더욱 쉽게 이끌어낼 수 있습니다. 따라서 앱을 활용하면 브랜드에 도움이 되는 뛰어난 경험을 제공할 수 있습니다.
PWA의 장점에 대해서는 이번 글에서도 이미 몇 가지를 말하긴 했지만, 간단하게 정리하자면 다음과 같습니다.
다양한 앱스토어에 출시하기 위해서 별도의 프로세스를 거치지 않아도 된다.
일반적인 웹 기술을 활용해서 PWA를 만들 수 있다.
일반적으로 개발 비용이 더 저렴하다.
기존의 웹사이트를 앱으로 만들 수 있기 때문에, 추가로 유지관리해야 하는 코드베이스(codebase, 소스코드 일체)가 적다.
PWA는 기본적으로 반응형(responsive)이기 때문에, 다양한 화면 크기에도 잘 동작한다.
PWA는 부드럽고 빠르며 가볍다.
구글이나 애플에게 거액의 돈을 줄 필요가 없다.
일반적인 웹사이트와는 달리, 오프라인에서도 작동한다.
PWA는 검색엔진을 통해서 찾을 수 있다. (앱스토어보다는 검색엔진을 사용하는 사람들이 훨씬 더 많다. 그리고 원한다면 앱스토어를 통해서도 PWA를 배포할 수 있다.)
푸시 알림을 통해서 사용자들의 관심을 끌 수 있다.
PWA를 설치하게 함으로써 보다 높은 참여를 이끌어낼 수 있다.
그럼에도 불구하고, 아직은 많은 부분에서 네이티브 앱이 우위를 보이고 있습니다. PWA가 스마트폰의 운영체제 속으로 점점 더 깊이 접근할 수 있게 되었지만, 네이티브 앱이 여전히 훨씬 더 깊숙이까지 들어갈 수 있습니다. 그리고 PWA가 할 수 있는 작업에도 한계가 있습니다. 예를 들어서, 고성능 게임을 개발하고 싶은 경우에는, PWA를 고르는 것이 결코 좋은 선택이 아닙니다.
어쨌든 전반적으로 봤을 때, 여러분의 PWA로 모바일 서비스를 한다는 것은 좋은 생각입니다. 하지만 여러분이 스스로에게 물어봐야 하는 중요한 질문이 있습니다. 그것은 바로, 여러분의 고객들이 이걸 원하느냐 하는 것입니다.
PWA는 누구를 위한 것인가?
모든 사람들이 그냥 PWA를 만들기만 하면 되는 것일까요? 아닙니다. 자신의 비즈니스를 잘 생각해봐야 합니다. 더욱 중요한 것은, 이용 고객들에 대해서 생각해 봐야 합니다. 그들이 앱을 사용하기는 하나요? 여러분이 원하는 것을 달성하기 위해서 훨씬 더 쉬운 방법이 있지는 않나요? 다시 말하지만, 다른 모든 것들과 마찬가지로, 이용 고객들이 원하는 것이 무엇인지를 조사하는 것이 좋습니다. 스스로에게 물어보십시오. 이 기술로 무엇을 하고 싶나요? 사용자들은 어디에 있는 사람들인가요? 그들이 데이터 통신이 원활한 지역에 살면서, 하드웨어 기기도 좋은 걸 사용하나요? 그들은 여러분의 콘텐츠를 어디에서 어떤 식으로 이용하고 있나요? 그리고 여러분이 앱을 만들면 고객들에게 도움이 된다고 생각하시나요?
PWA는 아주 훌륭하며, 그걸 구현하는 것도 그리 어렵지는 않습니다. 하지만 단지 쉽다고 해서, 그걸 만들어야 하는 것은 아닙니다. 여러분의 고객이 그걸 원하지 않는다면, 과연 그걸 굳이 만들 필요가 있을까요?
PWA에서 검색엔진 최적화(SEO)와 관련해서 고려해야 하는 요소들
PWA는 기본적으로 웹(web)이 중심입니다. 웹에서 태어났고, 검색엔진으로 쉽게 찾을 수 있도록 개발되었습니다. 물론, 오래된 웹사이트로도 얼마든지 PWA를 만들 수 있고, 이렇게 하면 시간도 많이 걸리지 않습니다. 그러나 PWA는 자바스크립트를 활용해서 더욱 복잡한 기능을 구현하는 경우가 많습니다. 그리고 요즘에는 검색엔진들도 자바스크립트의 렌더링(rendering, 코드를 화면에 표시하기 위해 변환하는 것)을 더욱 잘할 수 있기는 하지만, 여전히 우려해야 하는 부분들은 남아 있습니다.
우선 PWA를 위한 환경을 설정할 때는, 검색엔진이 자바스크립트에 액세스 할 수 있도록 해야 합니다. 검색엔진의 봇(bot)이 파일에 접근하는 것을 막아 놓으면 안 되며, 링크도 유효한 것인지를 확인해야 합니다. 렌더링 프로세스를 개선하려면, 여러분의 자바스크립트 프레임워크가 서버 측 렌더링(웹페이지의 내용을 서버에서 렌더링 해서 전송해주는 방식)을 사용하도록 설정하는 것이 좋습니다.
기존의 웹사이트를 PWA로 바꾼다고 해서 그것이 곧바로 SEO의 개선을 의미하는 것은 아닙니다. 기존의 사이트를 PWA로 전환하는 게 타당하다면 그렇게 해야 합니다. 하지만 단지 SEO를 개선하기 위한 목적으로 바꾸는 것은 좋지 않습니다. 훌륭한 PWA를 갖게 되면 사람들에게 환상적인 사용자 경험을 제공할 수 있으며, 여러분의 경쟁력을 한층 더 높일 수 있습니다. 그런 측면에서, 여러분이 만든 PWA의 모바일 SEO 전략은 어떠한지를 살펴보는 것이 좋습니다.
세 가지의 주요 구성요소는 무엇인가?
PWA를 설정하는 데는 많은 작업이 필요하지 않습니다. 기존의 웹사이트를 그럴듯한 PWA로 바꾸기 전에 해야 할 작업은 크게 3가지가 있습니다.
보안 연결(HTTPS): PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 합니다. 이건 단지 보안상의 이유 때문만은 아니고, 사용자들의 신뢰를 얻기 위해서도 아주 중요한 부분입니다.
이건 단지 보안상의 이유 때문만은 아니고, 사용자들의 신뢰를 얻기 위해서도 아주 중요한 부분입니다. 서비스 작업자(service worker): 서비스 작업자는 백그라운드에서 실행되는 스크립트입니다. 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주기 때문에, 여러분은 그 점에 대해서는 걱정하지 않고 더욱 복잡한 작업을 수행할 수 있습니다.
서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주기 때문에, 여러분은 그 점에 대해서는 걱정하지 않고 더욱 복잡한 작업을 수행할 수 있습니다. 매니페스트 파일(manifest file, 설정 파일): 이것은 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있는 것입니다. 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있습니다.
구글에서 찾아볼 수 있는 매니페스트 파일의 간단한 예는 다음과 같습니다.
별로 복잡하지 않죠? 여기에는 몇 가지의 흥미로운 항목들이 있습니다.
start-url: 앱이 시작되어야 하는 위치를 지정합니다. 사용자들이 PWA에서 여러분이 원하는 특정한 페이지에서 시작하도록 설정하는 것이 좋습니다
display: 여러분이 보여주고 싶은 브라우저 UI의 타입을 지정할 수 있습니다. 설정할 수 있는 옵션으로는 fullscreen(전체 화면), standalone(스탠드얼론, 네트워크에 연결되지 않은 상태에서도 스스로 동작할 수 있는 것), minimal-ui(최소화된 UI), the standard browser interface(브라우저 표준 인터페이스)가 있습니다.
PWA를 실행하기 위해서는 최소한 위에서 살펴본 세 가지가 필요합니다. 자바스크립트(와 프레임워크)를 통해서 그 기능은 더욱 확장될 수 있습니다.
PWA는 어떻게 설정하는가?
여러분이 직접 간단한 PWA를 만들어 볼 수 있는 리소스들은 많이 있습니다. 직접 시도해보면, 개발 과정에 대한 감각을 얻을 수 있을 것입니다. 구글은 자신들의 웹 데브(web-dev) 사이트에 PWA에 대해서 쉽게 따라 해 볼 수 있는 훌륭한 교육자료들을 많이 올려놓고 있습니다.[1] 모질라(Mozilla)는 PWA 개발에 대한 방대한 문서들을 갖고 있습니다.[2] 마이크로소프트 역시 PWA 개발과 관련한 문서들을 풍부하게 보유하고 있습니다.[3]마이크로소프트는 또한 PWA빌더(PWABuilder)라는 도구도 만들었는데, 이걸 이용하면 여러분의 사이트를 PWA로 바꿀 수 있습니다.[4]물론 워드프레스(WordPress)의 플러그인을 이용해서 PWA를 만드는 방법도 있습니다. 또한, 구글은 워드프레스의 코어(Core)에서 PWA를 기본적으로 지원하기 위해서 작업을 하고 있습니다.[5]
PWA로 사용자들의 참여를 이끌어내기
PWA는 여러분의 모바일 서비스에서 아주 뛰어난 역할을 담당할 수 있습니다. 제대로 만들면 아주 빠르고, 오프라인에서도 동작하며, 네이티브 앱과 같은 기능을 발휘할 수 있습니다. 전반적으로, PWA는 사람들에게 아주 멋진 사용자 경험을 제공할 수 있습니다. PWA를 이용해서 사람들을 기쁘게 해 줄 준비가 되셨나요?
추가로 PWA와 네이티브 앱의 차이점에 대해 궁금하시다면 ‘ PWA vs 네이티브 앱, 어떤 것을 선택해야 할까 ’ 에서 확인하실 수 있습니다.
[1] https://web.dev/progressive-web-apps/ [2] https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps [3] https://developer.microsoft.com/en-us/windows/pwa/ [4] https://www.pwabuilder.com/ [5] https://wordpress.org/plugins/pwa/국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?
PWA(Progressive Web Apps)란 무엇이고 장단점은 무엇인가
반응형
Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다.
PWA란 무엇인가?
PWA에 대해 이렇다 저렇다 여러 정의들이 있지만 쉽게 생각하면 아래와 같습니다.
인터넷 웹사이트의 파일들(html, javascript, css, images같은..)을 컴퓨터에 잘~ 저장(캐싱)해 놨다가 다시 요청이 올 때 저장(캐싱)된 파일들을 먼저 보여주고 필요할 떄 웹서버에 있는 데이터를 받아서 보여주는 기술과 홈스크린에 바로가기 아이콘을 설치 할 수 있게 하는 기술, 그리고 서버의 소식을 클라이언트에 전하는 Push기술 입니다.
PWA를 통해서 사용자는 모바일 앱과 같은 사용자 경험을 누릴 수 있으며 모바일 푸시, 오프라인이나 저속의 네트웍 속도에서의 사용, 무엇보다도 HTML, JAVASCRIPT, CSS를 이용하여 구현할 수 있습니다.
PWA특징
App스러움
PWA의 특징이라면 App스러움이라고 할 수 있습니다. 마치 App처럼 홈스크린에 아이콘을 설치하여 APP처럼 쉽게 바로가기를 실현할 수 있습니다.
Push 메시지 기능
App의 중요 특징 중 하나인 Push가 가능하다는 것입니다. 원래 웹은 클라이언트에서 서버로 요청이 있어야만 결과물을 보내주는 형태로 구현이 되는데 Push는 반대로 클라이언트의 요청이 없더라도 서버의 필요에 의해서 클라이언트에게 데이터를 보낼 수 있는 기능입니다. 보통 쪽지나 Notice형태로 제공됩니다.
Offline 접속 기능
PWA가 캐싱이 되기 때문에 Offline이거나 속도가 느린 상태에서도 미리 다운로드 되어 있는 정보를 계속 볼 수 있습니다.
보안
PWA는 HTTPS에서만 사용이 가능하기 때문에 일반 인터넷 데이터에 비해 보안이 강화된 상태라고 할 수 있습니다.
PWA 제작 기술
PWA를 구현하기 위해서는 크게 manifest.json 과 Service Workers 라는 2가지의 기술이 필요합니다.
manifest.json
manifest.json 은 설치할 때 아이콘은 무얼 사용하고 아이콘을 눌렀을때 접속할 페이지는 무엇인지, 배경색은 무슨색으로 할 것인지 등등..에 대한 설정파일이라고 보시면 됩니다.
service-worker
Service Workers 는 PWA의 핵심으로 캐싱은 어떻게 할 것인지 요청시 캐시를 먼저 보여줄지 웹서버를 통해서 먼저 보여줄지, push 등등에 대한 프로그래밍하는 기술입니다. PWA의 거의 80%에 해당하는 기술이라고 보시면 됩니다.
728×90
Progressive Web App이란? PWA란? 프로그레시브 웹 앱이란?
반응형
Progressive Web App이란? PWA란?
브라우저의 성능이 좋아짐에 따라 여러 웹 기술들
또한 발전이 되어가고 있습니다.
예전에는 항상 정적이었던 웹이 동적으로 상호작용 하기 하고
항상 HTML 파일을 페이지에 맞게 만들어주던 때에서 이제는
라이브러리 혹은 프레임 워크를 통행 SAP로 개발도 가능합니다.
이번 PWA 또한 이러한 기술에 발전에 따라 생겨난 것이라 할 수 있습니다.
그럼 오늘도 전혀 비 전문적이고 간단하게 알아보겠습니다.
목차.
브라우저, 웹과 앱. PWA란? Lighthouse. 마치며.
1. 브라우저, 웹과 앱.
일반 폴더 휴대폰에서 막 피쳐폰이라는 개념이 불어올 때,
그 당시 저는 고등학생이었습니다.
당시 제가 가지고 있었던 휴대폰은 김연아 선수가 광고했던
연아의 햅틱이었습니다. 그 당시만 해도 많은 충격이었죠.
휴대폰이 터치가 되고 인터넷도 사용 가능했기 때문입니다.
그때 당시만해도 휴대폰으로 인터넷을 이용해 이메일을 읽으려면
로그인할 때까지 1분에서 2분은 걸렸던 것 같습니다.
하지만 이제는 그렇지 않죠. 휴대폰의 성능, 컴퓨터의 성능이
발달하면서 자연스럽게 브라우저들도 발전 해왔습니다.
또한 앱을 출시하고 다운로드하면서 웹과 앱의 바람이 불었죠.
지금 현재도 계속해서 성능은 발달되고 있고, 이에 많은 기술들도
발전해오고 있습니다.
브라우저에서도 웬만한 기술들을 휴대폰에서 동작 가능해진 것이죠.
즉 웹과 앱의 경계가 점차 좁혀지고 있다는 뜻입니다.
제가 이번에 직원들을 위해 개발한 홈페이지 또한 웹앱으로
모바일에서도 모든 동작들을 수행 가능합니다.
하지만 여전히 웹앱과 네이티브 앱의 성능은 차이가 있습니다.
따라서 좀 더 성능을 요하는 프로그램을 개발하시려면 당연히
네이티브 앱을 개발하는 것이 맞습니다.
2. PWA란?
PWA란 Progressive Web App의 줄임말입니다.
이는 간단히 말하자면 웹과 앱의 장점들을 두루 살린 것이라고
말할 수 있습니다.
예를 들어.
당신은 휴대폰으로 영화표를 예매하고 싶습니다.
웹 : 당신은 브라우저를 통해 공식 홈페이지에 접속합니다.
그 뒤 영화를 얘 매 하려니 사실 개봉일은 내일이며 오늘은 예매가
불가능합니다. 그렇게 당신은 내일을 기약하며 브라우저를 닫습니다.
하지만 이를 까맣게 잊어버리고 다음날 뒤늦게 예약을 하려니
모든 표가 매진이네요… 당신이 푸시 알림을 받을 수 있었다면…
이런 일은 일어나지 않았을 것입니다.
앱 : 당신은 이번에 앱을 통해 애매를 하려 합니다.
이번에도 역시 보고자 하는 영화는 내일 개봉이며 내일부터
예매가 가능합니다. 당신은 이번에 브라우저와 다르게
앱에서 푸시 알림을 설정합니다.
그리고 다음날 까맣게 까먹었던 당신은 제때 울린 푸시 알람으로
예매에 성공합니다.
즉 브라우저를 닫는다면 푸시 알림 등을 받기가 힘들어집니다.
단순 이메일을 통해 푸시 알림을 받거나, 홈페이지 내부에서 알림을 받을 순 있습니다.
하지만 앱은 동작하지 않을 때라도 시간에 맞게 푸시 알림을 줄 수 있습니다.
예를 들면 게임을 플레이하고 종료 후 하트가 충전되었다며 게임을 할 수 있다고
뜨는 알람을 말씀드리는 겁니다.
하지만 이러한 PWA을 사용하시면 웹이지만 앱처럼 푸시 알림을 받을 수 있습니다.
이것뿐만 아니라 PWA는 더 많은 장점을 가지고 있습니다.
첫째 : 다운로드할 필요가 없습니다. 이는 브라우저를 통해 동작하게 되기에,
따로 앱처럼 다운로드할 필요가 없습니다. 또한 요즘은 브라우저에서 앱처럼
바탕화면에 아이콘을 생성 가능합니다.
둘째 : 오프라인에서도 작동합니다. 우리의 생각대로라면, 인터넷이 없다면
우리는 브라우저에서 에러 화면을 보게 되는 게 정상입니다.
하지만 PWA는 자신이 직접 오프라인에서 작동하게 될 화면과 기능을
유저에게 제공할 수 있습니다. 마치 앱처럼 말이죠.
이처럼 PWA는 아주 강력한 장점들을 가지고 있습니다.
이미 많은 홈페이지들이 PWA로 개발되고 있습니다.
기회가 되신다면 꼭 PWA로 개발을 해보시길 권장드립니다.
특히 리액트를 사용하신다면 아주 쉽게 PWA로 홈페이지를 제작 가능합니다.
3. Lighthouse.
아마 웹 개발자 분이시라면 아무래도 가장 자주 사용하시는 게 크롬이지
않을까 싶습니다. 그리고 누구나 개발자 툴을 사용하기 마련이죠.
이렇게 PAW로 개발을 하셨다면 꼭 개발자 툴에 Lighthouse를 이용해 보세요.
이를 통해 지금 자신이 만든 홈페이지가 정말 PWA인지를 쉽게 파악 가능합니다.
4. 마치며.
새롭거나 조금 다른 기술이라고 전혀 겁내거나 막막해하실 필요가 없습니다.
그런 마음가짐으로는 개발자로 일하시기 힘드실지도 모릅니다.
IT기술은 하루가 다르게 발전하고 바뀌기 때문입니다.
지금 사용하는 언어가 몇 년 뒤에는 더 이상 사용되지 않을지도 모르고,
지금 안 배워놓은 언어가 몇 년 뒤 그 분야에 핫한 언어가 될지도 모릅니다.
라이브러리와 프레임워크도 마찬가지입니다.
그때마다 새로 배우는 것에 스트레스받으시고 벅차 하신다면,
개발자라는 직업이 나름 힘들지도 모르겠습니다.
오늘도 모두 건강하시고 항상 도전하시기 바랍니다.
항상 응원하겠습니다.
완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.
Es gibt keine perfekte Vorbereitung.
Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.
반응형
[PWA] 프로그레시브 웹 앱 시작하기 (1) – PWA란?
반응형
[ 공지 ]프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!
현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,
하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.
(도서 소개 및 실습 미리보기)
https://geundung.dev/106
SNS 앱 예제로 배우는 프로그레시브 웹 앱
(구매 링크 / 2020.07.31 출간)
[YES24] [교보문고] [알라딘] [인터파크도서]프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지
상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.
안녕하세요~
오랜만에 새로운 강좌를 작성해보려고 합니다.
요즘 웹 기술 트렌드인 SPA (Single Page Application) 라이브러리/프레임워크 3대장으로 인해 웹 분야가 많이 핫해졌습니다.
3대장이라면 아직까진 React, Vue.js, AngularJS인 것 같습니다.
SPA 라이브러리/프레임워크도 웹 분야에서 손꼽히는 친구들이지만 PWA(Progressive Web App)도 큰 관심을 불러오고 있습니다.
이번 강좌에서는 PWA에 대해 알아보고 직접 PWA를 개발하는 실습을 진행할 예정입니다.
먼저, 강좌를 학습하시기 전에 미리 알고계셔야할 내용이 조금 있습니다.
– 기본 HTML, CSS
– 자바스크립트 기초
– 구글 크롬 개발자도구 사용법
자바스크립트의 경우 웹 개발 경험이 있으시다면 좋습니다.
또한 ES6 문법에 대해 알고계시다면 더 쉽게 따라오실 수 있습니다.
관련 지식이 없는 분들은 개발하기엔 어려움이 있으니 웹 개발 기초를 익히고 학습하시는게 좋습니다.
저는 아래 강좌를 추천합니다.
[생활코딩 웹 애플리케이션 만들기]https://opentutorials.org/course/1688
그럼 본격적으로 첫 번째 PWA 강좌를 시작하도록 하겠습니다!
[0. 사전 준비]먼저 실습에 필요한 구글 크롬 과 기본 소스코드, 심플서버 를 다운로드 받습니다.
[ 구글 크롬 ]https://www.google.com/intl/ko_ALL/chrome/
이미 크롬 브라우저를 사용하고 계신다면 최신버전으로 업데이트 한 번 진행해주세요!
[ 심플서버 ]https://github.com/leegeunhyeok/simple-server/releases/latest
Assets에 있는 파일 중 exe 파일을 다운로드 받고 설치해주세요
[ 소스 코드 ]https://github.com/leegeunhyeok/pwa-example
빨간 네모로 표시한 Clone or download를 누른 후 zip 파일을 다운받아주세요!
그리고 적당한 위치에 압축을 풀어주시면 됩니다.
풀어주신 후 ch1 폴더를 사용합니다.
매 강좌에 맞는 챕터별로 자료가 준비되어있으니 해당 챕터에 맞는 폴더의 소스코드를 사용하시면 됩니다!
압축을 풀어보시면 위와 같은 구조로 되어있습니다.
images: 예제에 사용할 이미지들과 PWA 아이콘 파일
scripts: 스크립트 파일이 들어있구요
styles: 스타일시트
index.html: 메인 HTML
manifest.json: PWA 매니페스트 파일
service-worker.js: 서비스워커 스크립트 파일
웹 개발을 하셨던 분들도 manifest.json과 service-worker.js가 어디에 쓰일지는 아직 모르실겁니다.
PWA에 대해 알아보며 하나씩 배워나가봅시다!
[1. PWA란?]구글 코드랩에 좋은 실습 내용과 설명이 있습니다.
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko
PWA는 Progressive Web App의 약자로, 웹의 장점과 앱의 장접을 결합한 환경입니다.
웹이랑 앱이라니.. 조금 생소하실 수 있습니다.
그렇다고 해서 네이티브 (리액트 네이티브 등) 앱도 아닙니다.
브라우저에서 지원하는 앱이라고 생각하시면 조금 이해하기 쉬워집니다.
기존의 앱은 플레이스토어, 앱스토어 등을 통해 다운로드 & 설치를 해야만 했습니다.
PWA는 지원하는 웹 브라우저를 통해 설치 없이!
페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있고
언제든지 푸시알림을 통해 재참여가 가능합니다!
또한 오프라인에서도 웹 앱에 접근 가능합니다.
그 외에도 아래와 같은 특징을 가지고 있습니다.
[ 구글 코드랩 ]무엇보다 사용자들이 편리하게 사용할 수 있다는것이 가장 큰 장점인 것 같습니다.
귀찮은 다운로드와 설치 과정 없이 URL 접속 후 사용자가 원한다면 바탕화면에 앱 아이콘을 추가하고 언제든지 빠르게 접속할 수 있기 때문이죠
그렇다고 해서 PWA에 장점만 있는것이 아닙니다.
오래된 브라우저들은 PWA를 지원하지 않습니다 . (자바스크립트 문법을 생각해보시면 이해가 빠릅니다)
지원하지 않는 브라우저에서는 웹 푸시 알림, 오프라인접속, 앱 셸 캐싱 등 강력한 기능을 사용하지 못할 뿐더러 바탕화면에 웹 앱을 추가할 수 없습니다.
최신 브라우저들은 대부분 지원하고 있기 때문에 PWA에 대해 배워두면 큰 도움이 될 것 입니다.
위 특징 리스트 중 연결 독립적 항목이 있습니다.
서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 한다 라고 되어있습니다.
서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동합니다.
스크립트이긴 한데 웹 페이지와 직접적으로 상호작용할 수 없습니다.
기존에는 스크립트를 작성하고 DOM 조작, 데이터 요청 등을 통해 웹 페이지를 제어하며 상호작용했지만 서비스워커는 그렇지 않습니다.
서비스워커는 웹 푸시(알림), 백그라운드 동기화, 캐싱 등의 기술적 기반을 제공합니다.
위에서 앱 셸, 오프라인 환경, 캐싱 등 이런 내용이 몇 번 언급되었습니다.
기본적으로 오프라인 상태로 웹 브라우저를 통해 URL로 접속을 하면 네트워크가 없어서 접속할 수 없다는 메시지가 뜹니다.
그런데 오프라인 환경에서 접속할 수 있는 이유는 바로 서비스워커의 캐싱 덕분입니다.
아래 그림을 봅시다
[구글 코드랩]위 사진은 평범한 앱처럼 보입니다. 만약 웹으로 위와 같은 디자인의 웹 앱을 구현했다고 가정합시다.
상단바, 메뉴, 배경이미지 등 이런 요소들은 바뀔 필요가 없는 요소입니다.
바뀌고 변화하는 부분은 Content 즉, 블로그로 가정하면 글 목록이 여기에 해당되죠
PWA에서는 상단바, 메뉴 등 고정적인 컴포넌트를 앱 셸이라고 말합니다.
이러한 앱 셸들을 브라우저가 캐싱해두면 오프라인 상태라고 해도 앱 셸은 정상적으로 불러올 수 있겠죠.
오프라인이기 때문에 새로운 컨텐츠는 불러오지 못하더라도 앱의 기본 요소들은 캐시된 데이터로 로드가 가능합니다.
우리가 원한다면 컨텐츠도 캐싱해두어 오프라인 상태에서 불러올 수도 있습니다.
지금까지 알아본 내용을 간단히 요약하자면 아래와 같습니다.
1. 웹 브라우저를 통해 실행하는 앱
2. 푸시알림, 오프라인 환경 접속 등 원시 앱과 유사
3. 서비스워커는 독립적으로 실행되며 웹 푸시, 캐싱 등 기능 제공
실제로 구현해보면 어떤 느낌인지 감이 오실겁니다.
이제 다음 단계를 진행하며 기본 소스를 실행해봅시다!
[2. 심플서버로 예제 서버 띄우기](심플서버는 제가 이전에 개발해두었던 프로그램이며 자유롭게 사용하실 수 있습니다.)
준비단계에서 설치한 심플 서버를 실행시켜줍니다.
실행시킨 후 기본설정의 서버 디렉토리 선택 버튼 눌러줍니다.
폴더는 예제 소스코드가 위치한 폴더로 지정해줍니다. (index.html 파일이 있는 폴더)
저는 E드라이브에 압축을 풀어놓았기 때문에 위와 같은 경로로 선택했습니다.
맨 위에있는 서버 정보 옆에 있는 스위치를 눌러 서버를 실행시켜줍니다.
만약 실행되지 않고 문제가 발생했다면 아래의 포트 8080을 다른 값으로 변경한 후 실행시켜보세요
(8090, 8888 등..)
정상적으로 서버가 실행 되면 서버 상태는 실행 중 초록 표시로 변하게 되고
아래에 있는 서버 URL 부분에 마우스를 올리면 서버 주소가 나옵니다.
주소를 클릭하여 서버에 접속합니다.
짠!
이렇게 예제 페이지가 잘 출력되었다면 서버 띄우는것은 성공한 것 입니다.
+ 버튼을 누르면 새로운 동물 이미지가 추가되고, – 버튼을 누르면 동물 이미지가 1개씩 사라집니다.
추가, 삭제 상태는 localStorage에 저장되며 웹 페이지 로드시 해당 값을 불러오기 때문에 상태가 그대로 유지됩니다.
이제 이 기본 소스코드에 서비스워커를 등록하고, 오프라인에서 보여줄 데이터를 캐싱하고,
항상 최신으로 유지하는 PWA의 강력한 기능에 대해 배워나갈 것 입니다.
아, 참고로 PWA는 로컬호스트와 HTTPS가 적용된 웹 페이지 외에서는 동작하지 않습니다!!
예외적으로 로컬호스트에선 HTTPS가 아니더라도 PWA를 개발하고 테스트할 수 있으며,
실제 배포시에는 무조건! HTTPS로 배포하셔야합니다.
보안상의 이유로 HTTPS 인증이 필요한 것 같습니다.
[3. 기본 코드 분석]다운로드 받은 코드를 잠깐 살펴봅시다.
scripts/app.js 파일을 열어주세요
이미 작성해둔 코드가 있습니다.
HTML 파일을 확인해보시면 알겠지만 img 태그가 없는데 실행 결과에는 닭 얼굴을 한 말 사진이 있었습니다.
스크립드 로드 후 app.showImage()를 통해 이미지가 추가된 것 입니다.
// 이미지 리스트 불러오기, 데이터가 없을 경우 [‘images/1.jpg’]로 대체 app . images = JSON . parse ( localStorage . getItem ( ‘images’ )) || [ ‘images/1.jpg’ ]; app . saveImageList (); app . showImage ();
아래쪽에 위와같은 코드가 있는데, 이 부분은 localStorage에서 데이터를 불러오고 데이터가 없는 경우 1.jpg (말 사진)을 새로 저장하는 코드입니다.
그리고 그 아래에서 showImage를 통해 이미지를 HTML에 추가하는 모습입니다.
이후에 1.jpg 뿐만 아니라 2.jpg가 저장되어있다면, 웹 페이지 접속 시 두 개의 이미지가 표시될겁니다.
코드는 이미지 리스트를 불러오고 이미지를 HTML에 추가해주는게 전부입니다.
한 번 웹 페이지에서 F12를 눌러 개발자 도구를 열어보세요!
상단 탭에서 Network를 선택하신 후 빨간 네모로 표시한 Offline에 체크해주세요!
그리고 F5를 눌러 웹 페이지를 새로고침해봅시다.
아직 기본 웹 페이지는 PWA이 아니기 때문에 오프라인 상태에서 접속할 수 없습니다.
앞으로 우리는 서비스워커를 추가하여 오프라인에서도 웹 페이지에 접속하고 이미지를 볼 수 있도록 개발해나갈 것 입니다.
그럼 다음 강좌에서 봅시다!
감사합니다~!
반응형
[똑똑한개발자] PWA란 무엇인가요?
개발 작업 툴 PWA에 대하여 자세히 알아봅시다 !
안녕하세요!
똑똑한개발자입니다 🙂
https://toktokhan.dev
아래 내용은 똑똑한개발자 팀의 매우 주관적인 내용입니다. 개발 방법은 매우 다양하며, 각자의 장단점을 갖고 있기 때문에 많이 알아보시고 좋은 서비스 성공적으로 만드시길 기원합니다!
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 최대한 합리적인 시간과 비용으로 서비스를 제공하기 위해서 PWA를 사용하는 것을 선택하였습니다.
PWA를 사용해야만 하는 이유 !
웹과 앱을 동시에 개발 가능하며, 기존 네이티브의 기능들을 많이 사용할 수 있습니다.
SPA가 기본적으로 구현되어 있어야 하기에 빠른 속도로 UI 처리를 할 수 있습니다.
네이티브 앱을 만드는 것보다 속도가 2배 이상 빠릅니다. (행정처리 포함)
합리적인 가격을 제공할 수 있는 이유 ?
4년 간 다양한 플랫폼 개발을 진행하며, 모든 코드를 재사용 가능한 상태로 만들어 내부 플랫폼 솔루션을 구축했습니다.
디자인 또한 내부 가이드 시스템을 통해 구축한 상태라 빠른 상태로 프런트 구축이 가능합니다.
네이티브 개발을 희망하는 클라이언트
네이티브 개발에서 사용되는 대부분의 기능은 웹에서 이미 제공 가능하기 때문에 PWA를 통해 개발하면 합리적인 가격으로 네이티브 경험을 사용자에게 줄 수 있습니다.
웹 개발을 희망하는 클라이언트
PWA는 단지 앱의 경험을 주는 것을 뛰어넘어 속도 측면에서도 유리합니다. 심지어 인터넷이 안되는 환경에서도 해당 기능들을 사용할 수 있습니다.
프런트엔드 ?
프레임워크는 React 기반의 Next.js를 사용합니다.
React는 페이스북에서 개발한 라이브러리로 SPA라는 기술을 사용하여 퀄리티 높은 UX 경험을 제공하고 있습니다.
React의 단점을 보강하기 위해 SSR을 제공하는 Next를 사용해 개발하고 있습니다.
개발뿐만 아니라 마케팅 부분에서 활용할 수 있는 GA, Facebook pixel 등 트래킹 툴에 대한 세팅도 진행해드립니다.
서버는 Vercel을 사용합니다.
Next.js를 만든 팀에서 개발한 프런트에 최적화된 호스팅 서비스 입니다.
CI/CD를 제공해줘 실시간으로 개발진행 상황을 파악하실 수 있습니다.
간단한 서버 세팅으로 세팅 비용이 매우 저렴합니다.
백엔드?
프레임워크는 Python 기반의 Django를 사용합니다.
확장성 높은 Python으로 다양한 기능을 쉽게 구현 가능합니다.
핀터레스트, 인스타그램과 같은 글로벌 서비스에서 사용할 정도로 안전성이 검증된 프레임워크 입니다.
관리자 페이지를 따로 만들 필요없어 비용 절감에 큰 역할을 합니다.
서버는 AWS을 사용합니다.
Elastic Beanstalk라는 서비스를 사용해 인프라 세팅을 손쉽게 구현합니다.
자동 백업, 자동 리부팅, SSL 무료 등 많은 기능을 제공해줍니다.
AWS에서는 스타트업을 많이 지원해주고 있습니다. 무수히 많은 크레딧 지원과 VC 연계까지, 해주기 때문에 새로 플랫폼 사업을 시작하신 다면 무조건 AWS 를 추천 드립니다.
똑똑한개발자에서도 사용하고 있는 개발 작업툴 PWA에 대해 알아보았습니다.
PWA가 궁금하셨던 분들에게 도움이 되셨길 바라면서
오늘의 글도 마치겠습니다!
https://toktokhan.dev
키워드에 대한 정보 pwa 란
다음은 Bing에서 pwa 란 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 PWA가 뭔가요? (+모바일 앱의 종류)
- 얄팍한코딩사전
- 얄팍한 코딩사전
- 얄팍한
- 코딩사전
- 코딩
- 프로그래밍
- 프로그래머
- 코더
- 개발자
- 컴퓨터공학
- 컴공
- programming
- programmer
- developer
- 개발
- 허니커즈
- coding
- computer sceince
- 얄코
PWA가 #뭔가요? #(+모바일 #앱의 #종류)
YouTube에서 pwa 란 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 PWA가 뭔가요? (+모바일 앱의 종류) | pwa 란, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
