โ๏ธ This is the complete sample code for the book 'Do it! Making Progressive Web Apps'. ๐ช 'Do it! ํ๋ก๊ทธ๋ ์๋ธ ์น์ฑ ๋ง๋ค๊ธฐ' ์ฑ ์ ์ค์ต ์์ฑ ์์ค์ฝ๋์ ๋๋ค.
์ด ๊ณณ์ 'Do it! ํ๋ก๊ทธ๋ ์๋ธ ์น์ฑ ๋ง๋ค๊ธฐ' (์ด์ง์คํผ๋ธ๋ฆฌ์ฑ, ๊น์์ ์ ) ์ฑ ์ค์ต์์ ์์ฑ ์์ค์ฝ๋ ์๊ฒฉ์ ์ฅ์(Repository) ์ ๋๋ค.
์์ฑ๋ ์์คํ์ผ
๊ณผ ์ฑ
๋ด์ฉ์ ๋ฐ๋ผ ์ง์ ๋ฐ๋ผํด ๋ณผ ์ ์๋ ํ๋ก์ ํธ ํ
ํ๋ฆฟ(boilerplate)
์ด ์ค๋น๋์ด ์์ต๋๋ค.์ฑ ์ ๋ํ ์์ธํ ์๊ฐ๋ ์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
'Do it! ํ๋ก๊ทธ๋ ์๋ธ ์น์ฑ ๋ง๋ค๊ธฐ' ์ฑ ์ด๋?
์ด ์ฑ ์ ์ค๋ฆฐ ๋ค์ํ ์ค์ต์ ๋ฐ๋ผ ํ๋ค ๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ 14๊ฐ์ง ํต์ฌ ์ฃผ์ ๋ฅผ ์์ฐ์ค๋ฝ๊ฒ ํฐ๋ํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ๋ชจ๋ ์น๊ณผ ๋ชจ๋ฐ์ผ ์ฑ์ ๊ฐ๋ฐํ ๋ ํ์์ด๋ฏ๋ก ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๋ ๋ฐ ํญ๋์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
1. ES6+ ํ์ ๊ธฐ๋ฅ
2. ๋ทฐ, ๋ทฐํฐํ์ด ๊ธฐ์ด & ๊ณ ๊ธ
3. ๊ตฌ๊ธ ๋จธํฐ๋ฆฌ์ผ ๋์์ธ ์คํ 2
4. ๋ฐ์ํ ์น ํ๋ก๊ทธ๋๋ฐ
5. ํ์ด์ด๋ฒ ์ด์ค ์ค์๊ฐ DB
6. ์ํฌ๋ฐ์ค ๋ฐํ์ ์บ์
7. ๋ชจ๋ฐ์ผ ํ๋์จ์ด ์ ์ด
8. ์ด๋ฉ์ผ-๊ตฌ๊ธ ์ธ์ฆ
9. ํธ์ ์๋ฆผ
10. ์คํ๋ผ์ธ ๋๊ธฐํ
11. ์ํ์น ์ฝ๋ฅด๋๋ฐ๋ก ํ์ด๋ธ๋ฆฌ๋ ์ฑ ๋ง๋ค๊ธฐ
12. PWA โ ๋ค์ดํฐ๋ธ ์ฑ ๋ณํ
13. ๊ตฌ๊ธ ํ๋ ์ด ์คํ ์ด์ ๋ฐฐํฌ
14. ์๋ฒ๋ฆฌ์ค ํ๋ก๊ทธ๋๋ฐ
๋น์ฃผ์ผ์คํ๋์ค ์ฝ๋
[Code] - [Download ZIP]
๋ฒํผ์ ์ ํํ๋ฉด ์์ถ๋ ZIP ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์ ์ ์์ต๋๋ค.[Fork]
๋ฒํผ์ ๋๋ฅด๋ฉด ์์ ์ ๊ณ์ ์ผ๋ก ๋ณต์ ๋ฉ๋๋ค.๊นํ๋ธ ์ฌ์ฉ์ ์ต์ํ์ ๋ถ๋ค์ git clone
๋ช
๋ น์ผ๋ก ๋ค์ด๋ก๋ ๋ฐ์ ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค.
git clone https://github.com/codedesign-webapp/pwa-example
ex01-01
์ 1์ฅ์ ์ฒซ๋ฒ์งธ ์์
๋ผ๋ ์๋ฏธ์
๋๋ค. ์์ฑ๋ ์์ค์ฝ๋๊ฐ ๋ค์ด ์์ต๋๋ค.ex05-07_start
๋ ์์ํ ๋ ํ์ฉํ๋ ํ๋ก์ ํธ ํ
ํ๋ฆฟ
์ ์๋ฏธํฉ๋๋ค. start ํด๋๋ฅผ ์ด์ด ์ฑ
์ค๋ช
์ ๋ง์ถฐ์ ์์ค์ฝ๋๋ฅผ ์
๋ ฅํ๋ฉฐ ํ์ตํ์๋ฉด ๋ฉ๋๋ค.์ฑ ์ ์ฝ๋ค๊ฐ ๊ถ๊ธํ ์ ์ ์ด์ง์คํผ๋ธ๋ฆฌ์ฑ ํํ์ด์ง๋ ์ ์๊ฐ ์ง์ ์ด์ํ๋ 'CODE*DESIGN ์น์ฑ' ์ปค๋ฎค๋ํฐ ์นดํ์ ์ง๋ฌธํด ๋ณด์ธ์. ๋ํ ์นดํ์์๋ ํ๋ก๊ทธ๋ ์๋ธ ์น์ฑ ๊ด๋ จ ์ต์ ์์๋ ๋ง๋ ์ ์์ต๋๋ค.
์ด์ง์คํผ๋ธ๋ฆฌ์ฑ ํํ์ด์ง
: www.easyspub.co.kr
CODE*DESIGN ์น์ฑ
: https://code-design.web.app
๊ฐ์ฌํฉ๋๋ค.
CODE*DESIGN ์น์ฑ : https://CODE-DESIGN.web.app
'CODE*DESIGN ์น์ฑ'์ PWA ํ๋ก๊ทธ๋ ์๋ธ ์น์ฑ์ ๊ฐ๋ฐ๊ณผ UIUX ๋์์ธ ๋ฐฉ๋ฒ์ ์คํฐ๋๋ฅผ ์ํ ์ปค๋ฎค๋ํฐ ์นดํ์ ๋๋ค.
This is a source code repository for practicing examples of the book which is 'Do it! Making Progressive Web Apps' (Easys Publishing, Eungsuk Kim).
A complete source file
that can be executed regardless of version and a project template(boilerplate)
that can be followed directly according to the contents of the book are prepared.For a detailed introduction to the book, please refer to the link below.
What is the book 'Do it! Making Progressive Web Apps'?
By following the various examples in this book, you can naturally master the 14 key topics: These skills are essential when developing modern web and mobile apps, giving you a broad experience in growing as a front-end developer.
1. ES6+ essential features
2. Basic & Advanced for Vue.js, Vuetify.js
3. Google Material Design Specification 2
4. Responsive Web Programming
5. Firebase real-time DB
6. Workbox runtime cache
7. Mobile hardware control
8. Email-Google authentication
9. Push Notification
10. Offline synchronization
11. Making hybrid apps with Apache Cordova
12. PWA โ Native App Conversion
13. Publishing on Google Play Store
14. Serverless Programming
Visual Studio Code
[Code]-[Download ZIP]
button to download the compressed ZIP file.[Fork]
button in the upper right corner to duplicate your account.If you are familiar with GitHub, you can download it with the git clone
command.
git clone https://github.com/codedesign-webapp/pwa-example
ex01-01
means that it is the first example in Chapter 1
. It contains the completed source code.ex05-07_start
means the project template(boilerplate) used when starting
. You can learn by opening the start folder and entering the source code according to the description of the book.If you have any questions while reading a book, ask the Easys Publishing homepage or 'CODE*DESIGN web app' community cafe operated by the author. Especially in cafe, you can also find the latest news related to Progressive Web Apps.
Easys Publishing homepage
: www.easyspub.co.kr
CODE*DESIGN web app
: https://code-design.web.app
Thank you.
CODE*DESIGN web app: https://CODE-DESIGN.web.app
'CODE*DESIGN Web App' is a internet community cafe for PWA Progressive Web App development and UI/UX design method studies.