개발 · 프로그래밍

모바일 앱 개발

입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

32명 이 수강하고 있어요.

깊알못nodeep

입문자를 위해 준비한
[웹 개발, 모바일 앱 개발] 강의입니다.

이런 걸 배울 수 있어요

타입스크립트
아이오닉
파이어스토어
파이어베이스 스토리지
PWA 변환
파이어베이스를 통한 앱 배포

타입스크립트 기초부터
ionic6까지 한 번에! 💥

강의 기획 배경을 알려드릴게요 📖

같은 앱을 윈도우용, 안드로이드용, 아이폰용 등 별도로 개발하는 것은 어렵지만, 대부분의 코드를 공유하면서 한 번의 개발로 플랫폼별 앱을 만들 수 있다면 어떨까요?

이를 가능하게 해주는 방법은 크로스 플랫폼을 사용하는 것인데, 그 중에서도 간편하고도 쉽게 앱을 꾸밀 수 있는 아이오닉 프레임워크로 플랫폼별 앱을 만들수 있는 강의를 기획하게 되었습니다.

강의는 윈도우 노트북과 아이오닉6로 진행하며, 만들어진 앱을 크롬을 통해 실행하고 설치합니다!

(🎈 참고. 카메라 테스트 영상에서 아이폰으로 테스트하는 부분은 없습니다.)

이런 분들이 들으면 좋아요 🔍

타입스크립트를
배우고 싶은 분

모바일 앱을 만들어
본 적 없는 분

파이어베이스의 스토어와
스토리지를 사용하고 싶은 분

이 강의만의 특징을 알려드려요 ✨

어려운 이론 설명보다는 같이 코딩을 하는 강의
자바스크립트를 몰라도 타입스크립트를 사용할 수 있는 강의
앵귤러나 리액트 경험이 없더라도 따라오는데 문제가 없는 강의
각 섹션 별로 샘플 코드가 제공되는 강의

어떤 걸 배우는지 알려드릴게요 📚

1. 타입스크립트

챕터별로 정리된 샘플 코드가 제공되고, 실제로 이를 작성해보면서 타입스크립트 강의를 진행합니다.

2. 아이오닉 사용방법

챕터별로 컴포넌트의 활용법과 샘플코드가 제공됩니다.

3. 윈도우 설치

앱을 만들어 윈도우에 설치합니다.

4. 기타

로그인 기능을 구현하고, 스마트폰에 있는 카메라를 이용해서 원격 저장하는 방법을 배웁니다.

5. 스마트폰 설치

본인의 스마트폰에 직접 설치해봅니다.

예상 질문에 대해 미리 답해드려요 💬

Q. 강의 환경은 어떻게 되나요?

윈도우, 비주얼스튜디오코드, npm, 아이오닉으로 진행합니다.

Q. 버전에 따른 차이가 큰가요?

새로운 버전이 나올 때 사용방법이 변동되는 경우가 있습니다.
본 강의보다 최신 강의가 있다면 그 강의를 듣는 것이 더 쉬울 수도 있습니다.
하지만 어느 정도 수준에 도달하면 버전에 의한 차이는 쉽게 극복이 가능합니다.

Q. 자바스크립트나 앵귤러를 알고 있어야 하나요?

물론 알고 있으면 도움이 되겠지만, 모르셔도 강의를 이해할 수 있습니다.
강의 자체가 자바스크립트나 앵귤러를 모른다는 가정을 토대로 진행하기 때문입니다.

또한 입문강의로서 어려운 원리 보다는 사용방법 위주로 누구나 쉽게 접근 할 수 있도록 구성하였습니다.

Q. 섹션 1의 타입스크립트는 알고 있는 내용인데 꼭 들어야 하나요?

섹션 1, 섹션 2 , 섹션 3은 내용 자체가 연결되어있진 않습니다.
그렇기 때문에 자신이 알고 있는 강의는 듣지 않아도 충분히 이해하실 수 있습니다.

Q. 안드로이드 폰과 아이폰을 모두 가지고 있어야 하나요?

별도의 장치를 가지고 있지 않더라도 크롬에서 모든 화면을 확인할 수 있습니다.
(실제 카메라 테스트를 할 경우에는 해당 장치를 가지고 있어야 가능하지만, PWA로 변환 후에는 안드로이드폰과 아이폰에서 설치가 가능합니다.)
강의에서는 안드로이드 스튜디오를 사용하여 에뮬레이터를 통한 카메라 테스트를 진행합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

크로스 플랫폼을 배우고 싶으신분
안드로이드, PC, ios 앱을 만들어 보고 싶으신 분
아이오닉에 입문해 보고 싶으신 분
PWA 앱으로 배포하고 싶으신 분
타입스크립트 기초를 배우고 싶으신 분

안녕하세요
깊알못nodeep입니다.

14,933

명

수강생

243

개

수강평

개

답변

4.8

점

강의 평점

개

강의

생산 및 품질 관리 프로그램, POP, 스마트 팩토리, PMS 등 컴퓨터 프로그램 개발자로 활동하다가 강의를 시작하게 되었습니다. 프로그램 개발이라는 것이 생각보다 어려운 영역은 아닙니다. 공부방법을 터득하시면 누구나 접근 할수가 있습니다.

커리큘럼

전체

74개 ∙ (9시간 59분)

해당 강의에서 제공:

수업자료

섹션 1. 타입스크립트 입문

19개 ∙ (2시간 13분)

1. node js 타입스트립트 비주얼 스튜디오코드 설치
01:53
2. 데이터 타입 string number boolean 타입추론
09:04
3. 타입스크립트 프로젝트 초기화 연산자
05:26
4. 논리 비교 연산자
05:26
5. 배열 튜플 전개연산자 매개변수 파라미터
10:37
6. enum, 리터럴, object, const, 유니온, 유니온 함수
06:56
7. 클래스 인터페이스 정적변수
12:07
8. Switch, For , While 반복문
16:29
9. 익명함수 화살표함수 콜백함수
04:39
10. 모듈 export imporrt
08:12
11. 추상클래스
06:00
12. 비구조화할당 undefined null
03:04
13. 고차함수
04:14
14. 내장 고차함수 filter, map, reduce, sort
11:20
15. yield 제네릭함수
06:22
16. SetInterval SetTimeout
02:33
17. 프로미스 프로미스올
08:57
18. 프로미스 race finally
09:54
19. 샘플코드

섹션 2. 아이오닉 컴포넌트

26개 ∙ (3시간 1분)

20. 아이오닉 설치
03:53
21. 비주얼스튜디오코드 설치 및 아이콘 설치
01:39
22. 사이드 메뉴 추가하기 레이블
06:47
23. 카드, 뱃지, 버튼, 아이콘
17:23
24. 비주얼스튜디오코드에서 자동완성 추가, 경고창 만들기
07:46
25. 서비스 추가, 체크박스
10:35
26. 칩
05:29
27. 피커
17:14
28. 펩버튼
06:20
29. 그리드
11:23
30. 리스트
05:57
31. 버철스크롤 인피니티스크롤
13:39
32. 인풋, 텍스트 에리어, 폼
09:07
33. 아이템 디바이더, 그룹
05:07
34. 노트
05:10
35. 로딩인디케이터, 프로그레스바, 스피너
08:10
36. 라디오 레인지
05:02
37. 리플레셔
04:19
38. 리오더
05:33
39. 검색창
04:33
40. 세그먼트 버튼
02:50
41. 셀렉트
03:16
42. 슬라이드
06:31
43. 탭버튼
03:15
44. 토스트 토글 백버튼
10:18
45. 샘플코드

섹션 3. 아이오닉 간단한 앱 만들기

29개 ∙ (4시간 45분)

46. First App 프로젝트 생성
06:06
47. 사이드메뉴 추가하기
04:46
48. 사이드메뉴 주소 수정 모델 서비스 추가 바인딩
11:50
49. 회의실 상세페이지 만들기
09:55
50. 스토리지 설치
04:08
51. 회의실 등록 페이지 기능 추가-1
08:08
52. 회의실 등록 페이지 기능 추가 -2
08:36
53. 회의실 등록 페이지 기능 추가 -3
11:03
54. 회의실 등록 페이지 기능 추가 -4 Form Validators 검증
10:13
55. 회의실 수정 페이지 삭제 기능 추가
10:44
56. 회의실 상세정보 배열 데이터 저장
13:29
57. 파이어스토어 설치 및 데이터 불러오기
13:51
58. 파이어스토어용 디테일, 추가 등록 페이지
12:02
59. 삭제기능 추가, 수정 화면 만들기, 파이어스토어 문서 아이디 받아오기
13:33
60. 예약 등록 화면 만들기 - 뱃지,DateTime, Select 추가
13:30
61. 예약 등록 화면 만들기- 캘린더 팝오버 적용, 등록 현황삭제 기능 추가
17:17
62. 회원가입, 로그인 화면 만들기, 파이어 스토어와 연결
14:34
63. 회원가입 기능 완성하기 - 스피너 추가
05:08
64. 로그인 화면 완성하기
06:51
65. 패스워드 변경 기능 추가하기
07:51
66. guard 가드로 접근제어하기
09:20
67. 로그아웃 기능 추가
03:01
68. 캐피시터 설치, 카메라 기능 추가
22:28
69. PC에서 접속시 카메라 대신 이미지 선택 기능 추가
06:47
70. 파이어스토리지에 이미지 저장하기
16:03
71. 추가 , 수정 카메라 이미지 적용
12:22
72. ionic serve lab 설치, 카드에 scss적용
02:05
73. PWA 프로그레시브웹앱으로 변환, 파이어베이스를 통해 윈도우, 안드로이드, 아이폰에 설치하기
09:24
74. 샘플코드

강의 게시일: 2022. 02. 07.

마지막 업데이트일: 2022. 10. 03.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

깊알못nodeep님의 다른 강의

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

블렌더 파이썬 BPY 입문강의

깊알못nodeep

블렌더에는 bpy라는 재미있는 기능이 있습니다. 파이썬 코드를 활용해서 블렌더를 제어할 수가 있습니다. 하지만, 파이썬 코드를 몰라도 학습할 수가 있습니다.

초급

Blender

블렌더 왕초보 입문 기초강의

깊알못nodeep

이론 보다는 실습 위주의 강의로 입문자 분들을 위한 강의 입니다. 블렌더의 메뉴와 기능들을 익히실 수가 있습니다.

입문

Blender

PySide6 파이썬 GUI

깊알못nodeep

파이썬으로 GUI프로그램을 만들어 볼 수가 있어요.

초급

Python, pyside6, GUI

C# WPF .NET Core(7.0)

깊알못nodeep

윈도우 앱 개발 경험이 없어도 충분히 따라하실 수 있습니다.

초급

C#, wpf, xaml

원격으로 PC 서버 점검 파워쉘 입문 ~ GUI

깊알못nodeep

로컬과 원격으로 PC와 서버를 손쉽게 점검할 수 있는 방법을 배웁니다. Power Shell의 막강한 기능으로 프로그래밍 경험이 없어도 쉽게 접근할 수 있습니다.

입문

Powershell

C# 자마린 + 몽고DB + nodejs 연동

깊알못nodeep

직접 DB와 node express를 백엔드로 설치하고 C#으로 윈도우 앱과 스마트폰 앱을 통한 데이터를 저장, 갱신해봅니다. 소켓을 사용하여 채팅 기능까지 구현하는 방법을 빠르게 배워봐요!

초급

MongoDB, Express, C#

몽고DB + node express + ionic6 연동

깊알못nodeep

파이어베이스의 리얼타임데이터베이스를 사용하지 않고 직접 DB를 설치하고 데이터를 저장, 갱신 그리고 소켓을 사용하여 채팅기능까지 구현하는 방법을 배웁니다.

초급

MongoDB, Node.js, Express

리액트 앵귤러 없이 아이오닉 컴포넌트 사용하기

깊알못nodeep

아이오닉 플랫폼이 아닌 html과 자바스크립트가 가능한 환경이라면 아이오닉 컴포넌트를 사용할 수가 있습니다.

초급

IONIC

C#으로 로그인 가능한 앱 구현하기 Xamarin 자마린 폼즈 (안드로이드, 윈도우)

깊알못nodeep

이 강의에서는 C#과 Xamarin Forms를 활용하여 로그인 처리, 카메라/전화/문자/이메일 앱과의 연동, 자동이메일발송 등의 기능 구현, API와의 연동을 통한 원격지 저장 등 앱 개발에 필요한 여러 가지 기능을 학습해 봅니다.

초급

C#, 하이브리드 앱, Xamarin

C# Xamarin Forms 자마린 폼즈 API 강의 + 간단한 API 만들기

깊알못nodeep

자마린(Xamarin)에서 SQL의 데이터를 어떻게 접근해서 수정, 삭제, 추가, 조회할 수 있는지 설명하는 강의입니다. WEB API도 같이 만들면서 API를 어떻게 활용하는지 알수 있습니다.

초급

Web API, Xamarin

C# 입문부터 안드로이드, 윈도우 앱(UWP) 동시에 만들기 Xamarin Forms(자마린 폼즈) + Maui(마우이)

깊알못nodeep

스마트폰 앱과 윈도우 앱을 동시에? C#으로 만들어보는 크로스 플랫폼! C#을 몰라도 이 강의를 통해 C# 기초를 배우고, Xamarin으로 스마트폰 앱과 윈도우 앱(UWP)을 만들어 볼 수 있습니다.

입문

C#, GUI, Xamarin

비슷한 강의

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

실전 연습으로 익히는 고급 타입스크립트 기술

애프터캠프

타입스크립트의 기능들을 제대로 활용해보세요!

중급이상

TypeScript

몽고DB + node express + ionic6 연동

깊알못nodeep

초급

MongoDB, Node.js, Express

아이오닉(ionic2) 개발을 위한 타입스크립트 기본

차정민

하이브리드 앱 개발을 위한 프레임워크 중 하나인 Ionic2 Framework를 학습하기 위한 사전단계로 Typescript 를 배워봅니다.

초급

IONIC, TypeScript

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

제로초(조현영)

타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

중급이상

TypeScript

따라 하다 보면 완성되는, Ionic 훑어보기

Padawan.Joy

Ionic의 전반적인 개발 과정을 이해하고, 모바일 앱에서 가장 많이 사용되는 요소의 개발 방법을 학습합니다. 이를 통해 효율적으로 나만의 하이브리드 모바일 앱 개발을 할 수 있습니다.

초급

IONIC

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

중급이상

멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

초급

MongoDB, Express, React

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

코드팩토리

이 강의를 통해 주니어급 Flutter 개발자가 중급 Flutter 개발자가 되기까지 필요한 필수 지식들을 단기간에 배워볼 수 있습니다.

중급이상

Flutter, 하이브리드 앱

실전 프로젝트로 배우는 타입스크립트

장기효(캡틴판교)

"타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄

중급이상

TypeScript, ES6

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

코드캠프

수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

입문

React, Next.js, GraphQL