프론트엔드

Do it! 프로그레시브 웹앱 만들기

글로벌 기업들의 차세대 모바일 전략, PWA(프로그레시브 웹 앱)를 배우자!

(4.9) 수강평 11개

수강생 1,162명

이지스퍼블리싱

PWA 웹앱 Vue.js Vuetify

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

ES6+ 필수 기능을 배울 수 있어요
뷰, 뷰티파이의 기초부터 고급까지!
실습을 통해 기본기를 다질 수 있어요

웹과 앱을 한 방에 만드는
프로그레시브 웹앱(PWA)의 모든 것!

구글이 주도하고 MS와 삼성이 주목했다!
프로그레시브 웹앱, 한 권으로 끝내기

이지스퍼블리싱 Do it! 프로그레시브 웹앱 만들기

이 강의는 도서 『Do it! 프로그레시브 웹앱 만들기 (이지스퍼블리싱)』 기반으로 만든 동영상 강의로, 글로벌 IT 기업들이 주목하는 차세대 웹 기술인 프로그레시브 웹앱(PWA)을 다룹니다.

✅ 차세대 웹 기술, 프로그레시브 웹앱(PWA)

✅ 기본 반응형 웹 개발 + PWA 핵심 적용

✅ 구글 플레이 직접 배포까지

뷰(Vue.js)와 뷰티파이(Vuetify), ES6 버전 이상의 모던 자바스크립트를 활용해 기본적인 반응형 웹을 개발하고, 여기에 PWA(Progressive Web Apps)의 핵심 요소를 추가함으로써 데스크톱이나 모바일 등 어디서나 실행되는 웹앱을 만듭니다.

또한 파이어베이스를 활용해 실시간 데이터베이스 연동과 푸시 알림, 구글 인증 등의 기능을 구현하면서 서버리스 웹 애플리케이션 개발을 경험할 수 있으며, PWA를 하이브리드 앱으로 만들어 구글 플레이에 직접 배포하는 방법까지 안내합니다.

강의를 듣고 나면 스위프트나 코틀린, 자바와 같은 프로그래밍 언어를 새로 배우지 않고도 모던 웹 기술로 네이티브 앱 수준의 성능과 사용자 경험을 제공하는 모바일 앱을 개발하고 배포하는 방법을 익히게 됩니다.

목차 🙆‍♀️

헬로! 프로그레시브 웹앱

프로그레시브 웹앱이 뭐예요?
프로그레시브 웹앱을 대표하는 6가지 핵심 기술
비주얼 스튜디오 코드 설치하기
‘안녕하세요’ 예제 만들기

모던 자바스크립트 꼭 필요한 것만 배우기

재활용할 수 있는 블록 함수
변수 선언
화살표 함수
모듈 내보내기와 가져오기

순수 자바스크립트로 PWA 만들기

‘안녕하세요! PWA by JS’ 구경하기
매니페스트 작성하기
메인 화면 작성하기
서비스 워커 만들고 실행하기

뷰 기초 쌓기

뷰, 자바스크립트 프레임워크의 절대 강자
‘안녕하세요!’ 예제 만들기
단방향 바인딩과 v-bind 디렉티브
양방향 바인딩과 v-model 디렉티브

뷰 고급 기능 익히기

복잡한 로직과 computed 속성
이벤트 핸들러 로직과 methods 속성
컴포넌트로 HTML 엘리먼트 만들기
컴포넌트 속성 props

이 강의의 지식공유자는

김응석 🎓

교수이기 전에 개발 팀장과 기술 이사로 IT 산업 현장을 경험한 전문가입니다. 전국 100여 개 대학에서 강의 교재로 채택된 도서를 집필한 IT 전문 저술가이기도 합니다. 프로그레시브 웹앱 개발과 UI/UX 디자인을 위한 ‘CODE*DESIGN 웹앱(code-design.web.app)’ 커뮤니티 카페에서 모던 웹앱 개발과 디자인 방법을 안내하는 데 힘쓰고 있습니다. 저서로는 『Do it! 쉽게 배우는 웹앱 & 하이브리드앱』, 『구글 완전 활용법』, 『新 한글 비주얼 베이직 6』, 『안녕하세요 터보C』, 『안녕하세요 컴퓨터 길라잡이』 등이 있습니다.

이력 사항

한양대 컴퓨터공학과 졸업, 숭실대 미디어아트과 박사 학위 수료
안산대학교 멀티미디어디자인과에서 정보디자인, 웹 UI/UX 디자인 강사로 활동 중

이런 분들께
추천드려요!

학습 대상은
누구일까요?

실제 앱 제작이 궁금한 사람
프로그레시브 웹앱을 처음 접한 사람

안녕하세요
이지스퍼블리싱입니다.

13,637

명

수강생

162

개

수강평

4.8

점

강의 평점

개

강의

사람을 구체적으로 도와주는 책을 만듭니다.

커리큘럼

전체

32개 ∙ (6시간 14분)

섹션 1. 헬로! 프로그레시브 웹앱

6개 ∙ (1시간 18분)

섹션 2. 모던 자바스크립트 꼭 필요한 것만 배우기

8개 ∙ (1시간 39분)

7. 재활용할 수 있는 블록 함수 (1)
15:55
8. 재활용할 수 있는 블록 함수 (2)
12:36
9. 변수 선언 (1)
12:54
10. 변수 선언 (2)
12:05
11. 화살표 함수 (1)
10:22
12. 화살표 함수 (2)
12:30
13. 모듈 내보내기와 가져오기 (1)
13:01
14. 모듈 내보내기와 가져오기 (2)
09:51

섹션 3. 순수 자바스크립트로 PWA 만들기

6개 ∙ (1시간 11분)

15. '안녕하세요! PWA by JS' 구경하기
15:21
16. 매니페스트 작성하기 (1)
12:42
17. 매니페스트 작성하기 (2)
06:23
18. 메인 화면 작성하기
10:35
19. 서비스 워커 만들고 실행하기 (1)
14:10
20. 서비스 워커 만들고 실행하기 (2)
12:34

섹션 4. 뷰 기초 쌓기

6개 ∙ (1시간 2분)

섹션 5. 뷰 고급 기능 익히기

6개 ∙ (1시간 2분)

강의 게시일: 2023. 04. 17.

마지막 업데이트일: 2023. 04. 18.

수강평

전체

11개

4.9

11개의 수강평

수원양민
수강평 66
∙
평균 평점 4.7
2025. 01. 09.
5
100% 수강 후 작성
좋은강의 감사합니다.
정동욱
수강평 1
∙
평균 평점 4.0
2024. 12. 19.
4
100% 수강 후 작성
초보 단계에서 간단하고 쉽게 진입해 볼 수 있는 수준의 강의.
이명환
수강평 7
∙
평균 평점 5.0
2025. 05. 13.
5
31% 수강 후 작성
김태훈
수강평 5
∙
평균 평점 5.0
2024. 10. 09.
5
31% 수강 후 작성
youngmin
수강평 2
∙
평균 평점 5.0
2024. 05. 31.
5
100% 수강 후 작성

이지스퍼블리싱님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Do it! HTML5 + CSS3 웹 표준의 정석 전면 개정 2판

이지스퍼블리싱

무료

입문 / HTML/CSS

4.9

(24)

800+

탄탄한 웹 기본기를 쌓고 싶은 분은 여기로 모이세요!

입문

HTML/CSS

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

이지스퍼블리싱

무료

입문 / HTML/CSS, JavaScript, DOM

4.7

(27)

2,300+

키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!

입문

HTML/CSS, JavaScript, DOM

Do it! Node.js 프로그래밍 입문

이지스퍼블리싱

무료

초급 / Node.js, JavaScript, Express, MongoDB

4.9

(26)

1,600+

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

초급

Node.js, JavaScript, Express

Do it! SQL 입문

이지스퍼블리싱

무료

입문 / SQL

4.5

(22)

2,000+

굵직한 글로벌 기업의 현직 데이터베이스 전문가가 20년 간의 기업 실무와 강의 경험을 아낌없이 담았다!

입문

SQL

Do it! 자바스크립트 입문

이지스퍼블리싱

무료

초급 / JavaScript, DOM

4.9

(8)

1,000+

프런트엔드, 백엔드에 모두 쓰는 자바스크립트 실무 문법 웹 도서 1위 저자와 함께 한 권으로 끝내자!

초급

JavaScript, DOM

된다! 사각사각 아이패드 드로잉 with 프로크리에이트

이지스퍼블리싱

무료

입문 / Procreate

5.0

(5)

800+

《된다! 사각사각 아이패드 드로잉 with 프로크리에이트》의 저자 선생님들과 함께 드로잉/캘리그라피/디자인을 시작해 보세요!

입문

Procreate

2018 Do it! 안드로이드 앱 프로그래밍

이지스퍼블리싱

무료

입문 / Java, Android

4.7

(39)

3,500+

안드로이드 분야 도서 1위 도서 저자 정재곤 박사가 직접 알려주는 안드로이드 강좌!! (2018 개정판)

입문

Java, Android

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

핵심만 골라 배우는 Vue.js

수코딩

₩79,200

25%

₩59,400

초급 / Vue.js, Vue 3, pinia

5.0

(3)

Update

프론트엔드 입문자들은 필수적으로 익혀야하는 Vue.JS!! 기초부터 시작해서 고급에 이르기까지 Vue.JS를 샅샅히 파헤쳐봅니다!

초급

Vue.js, Vue 3, pinia

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

장기효(캡틴판교)

₩55,000

25%

₩41,250

중급이상 / JavaScript, Vue.js, ES6, Vuex

4.9

(607)

6,300+

Update

Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.

중급이상

JavaScript, Vue.js, ES6

코로나맵 개발자와 함께하는 지도서비스 만들기 1

이동훈

₩33,000

초급 / Node.js, 웹앱, Express, VSCode

4.8

(88)

800+

Update

코로나맵 개발자가 알려주는 지도서비스 만들기 강의입니다.

초급

Node.js, 웹앱, Express

아빠가 들려주는 [R shiny app] 만들기

김지형

무료

초급 / 웹앱, R

4.9

(30)

1,200+

Update

R의 무궁무진한 기능을 웹 앱상에서 구현하도록 해 주는 R shiny 가장 간단하게 활용하고 배울 수 있도록 해 줍니다.

초급

웹앱, R

PWA를 통한 1만 시간의 법칙 앱 제작!

제주코딩베이스캠프

무료

초급 / 웹앱, PWA

4.9

(28)

1,200+

PWA로 서비스 중인 웹 페이지를 앱 서비스로 만들어보세요! 간단하게 PWA, 앱 제작을 경험해보고 싶으신 분들에게 권해드립니다.

초급

웹앱, PWA

Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작

임종태

₩27,500

초급 / Vue.js, PWA, Firebase, Nuxt.js, pinia

Update

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login를 쉽게 배울수 있어요~~

초급

Vue.js, PWA, Firebase

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

₩49,500

22%

₩38,500

초급 / Vue.js, supabase, Vue 3, PWA

5.0

(1)

Update

답변 활발

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

Vue.js, supabase, Vue 3

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

₩33,000

초급 / Vue.js, Django, Bootstrap

4.8

(12)

200+

Update

인기 3총사 (Vue + Django + Bootstrap) 를 활용하여, 쉬우면서도 멋진 나의 블로그를 만들 수 있습니다. 반응형은 기본, 스마트폰으로도 볼 수 있습니다.

초급

Vue.js, Django, Bootstrap

Klaytn 클레이튼 블록체인 어플리케이션 만들기 - NFT

SEJONG IT EDU

₩79,200

중급이상 / 웹앱, 블록체인, NFT

4.7

(41)

500+

Update

이 강좌를 통해 대체불가능한 NFT (Non Fungible Token) 을 활용한 비앱을 만들 수 있게 됩니다.

중급이상

웹앱, 블록체인, NFT

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

₩22,000

입문 / 네트워크, Google Chrome, Chrome DevTools, 웹앱

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

입문

네트워크, Google Chrome, Chrome DevTools

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

김영한

₩88,000

30%

₩61,600

초급 / Java, Spring, 웹앱, Spring Boot, JPA

5.0

(2,248)

25,600+

Update

답변 활발

실무에 가까운 예제로, 스프링 부트와 JPA를 활용해서 웹 애플리케이션을 설계하고 개발합니다. 이 과정을 통해 스프링 부트와 JPA를 실무에서 어떻게 활용해야 하는지 이해할 수 있습니다.

초급

Java, Spring, 웹앱

카카오,구글 SNS 로그인(springboot3, vue3)

bradkim

₩55,000

초급 / OAuth, oauth2, JWT, Spring Boot, Vue.js

4.9

(11)

100+

Update

답변 활발

springboot를 활용하여 카카오, 구글로그인을 구현합니다. jwt토큰 기반 로그인이 구현됩니다. vue3를 통해 간단한 화면을 구성합니다.

초급

OAuth, oauth2, JWT

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

₩29,700

중급이상 / Node.js, 웹앱, TypeScript

4.4

(14)

400+

Update

답변 활발

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

Node.js, 웹앱, TypeScript

코알못도 누구나 쉽게 따라하는 웹, 앱 만들기 (기초부터 실전 활용까지)

조코딩

무료

입문 / 웹앱

4.9

(78)

3,500+

누구나 배울 수 있는 쉬운 코딩을 만들겠습니다. 코딩이 무엇인지 이해하고 라이브러리, API 등 최대한 외부 자원을 활용하여 서비스 가능한 웹과 앱을 제작하는 것이 목표입니다.

입문

웹앱

자바(javafx) 실전 데스크탑앱 프로젝트 - 유튜브관리앱

김래옥

₩24,200

입문 / Java, 웹앱, JavaFX

4.9

(9)

100+

Update

최소한의 이론으로 데스크탑앱만들기! 프로그래밍 경험이 없어도 누구나 시작하는 앱만들기!

입문

Java, 웹앱, JavaFX

순수 함수형 프론트엔드 언어 Elm 가이드

김대현

무료

초급 / elm, 함수형 프로그래밍, SPA, 웹앱

5.0

(5)

300+

순수 함수형 프로그래밍으로 프론트엔드 웹앱을 만드는 Elm 프로그래밍 언어 가이드 문서를 3시간만에 다 공부합니다.

초급

elm, 함수형 프로그래밍, SPA

[개정판] 웹 애플리케이션 개발을 위한 IntelliJ IDEA 설정

Dowon Lee

무료

초급 / IntelliJ IDEA, 웹앱, apache-tomcat, maven, JSP, servlet

4.8

(76)

2,800+

답변 활발

자바를 이용한 웹 애플리케이션 개발에 필요한 SW에 대해 소개하고, 필수 SW의 설치 및 사용 방법에 대해 알아봅니다. 또한, Jetbrains(https://www.jetbrains.com/)사의 프로그래밍 개발 도구 IntelliJ IDEA Community에서 자바 웹 프로그래밍을 시작하기 위한 설정 과정 및 실행 방법에 대해서도 소개합니다. 본 강의를 통해 웹 애플리케이션의 개발을 위한 기본적인 과정 및 사용 도구에 대해 실습해 보실 수 있습니다.

초급

IntelliJ IDEA, 웹앱, apache-tomcat

[연재형] WE CAN Cusor AI ! - 커서AI 우리도 할 수 있습니다.

이프로

무료

입문 / cursor, 인공지능(AI), 생성형AI, frontend, 웹앱

5.0

(22)

900+

< WE CAN Cursor AI ALL-IN-ONE 마스터 클래스 > 코딩 지식 ZERO도 괜찮아요! #AI와 함께 시작하는 스마트 코딩 여정 #매주 새로운 성장 스토리 #당신만의 AI 개발 파트너가 되어드립니다 #비개발자도_가능 #AI코딩 #CursorAI #코딩초보환영

입문

cursor, 인공지능(AI), 생성형AI