Ionic 8 크로스 플랫폼 모바일 앱 개발 교육 과정

Ionic 및 크로스플랫폼 환경 소개

• Ionic이란 무엇이며 언제 네이티브 또는 Flutter 대신 선택해야 하는가?
• Ionic UI를 powering하는 Web Components 아키텍처
• Angular, React 및 Vue 생태계 전반의 프레임워크 지원
• PWA 및 모바일 애플리케이션의 실제 사용 사례

개발 환경 설정

• Node.js와 npm 설치 및 구성
• Ionic CLI 설치
• 새로운 Ionic 프로젝트 생성 및 구조화
• 브라우저 및 연결된 디바이스 모드에서 애플리케이션 실행

프로젝트 구조 및 아키텍처 심층 분석

• 페이지, 모듈 및 재사용 가능한 컴포넌트
• 라우팅 시스템 이해 및 구성
• 서비스 및 의존성 주입 패턴
• 어셋 디렉토리 및 환경 설정

핵심 UI 컴포넌트 및 레이아웃

• 페이지 구조를 위한 ion-header, ion-toolbar 및 ion-content 사용
• 입력 컨트롤: ion-input, ion-select, ion-checkbox
• 버튼, FAB, 카드, 목록 및 그리드 시스템
• 현대적 Ionic 폼 컨트롤 관례
• Hands-on: 로그인 페이지 및 대시보드 레이아웃 구축

네비게이션 및 라우팅 전략

• Angular Router 및 React Router 통합
• 페이지 네비게이션 패턴 및 딥 링크
• 성능을 위한 지연 로딩
• 탭 네비게이션 및 사이드 메뉴 패턴

스타일링 및 테마

• CSS 변수 및 Ionic 색상 시스템
• 다크 모드 지원 구현
• Ionic 8의 동적 폰트 및 팔레트 맞춤 설정
• 디바이스 브레이크포인트 전반의 반응형 스타일링

폼 및 유효성 검사

• Angular를 위한 리액티브 폼 프레임워크
• React를 위한 사용자 정의 훅 및 유효성 검사 패턴
• 오류 처리 및 유효성 검사 UI 피드백
• 복잡한 다단계 폼 구축 및 유효성 검사

서비스 및 API 통합

• HTTP 클라이언트 구성 및 인터셉터
• RESTful API 호출 수행 및 응답 처리
• 상태 관리 모범 사례
• 오류 경계 및 네트워크 장애 복구

Capacitor 및 네이티브 디바이스 기능

• Capacitor 브릿지 및 플러그인 생태계 이해
• 기존 프로젝트에 Capacitor 설치 및 구성
• 카메라 및 이미지 피커 액세스
• 위치 정보 및 지도 통합
• 네이티브 스토리지 및 환경 설정
• Hands-on: 이미지의 캡처 및 디바이스 데이터 저장

고급 UI 컴포넌트

• 현대적 Ionic의 모달, 팝오버 및 알림
• 토스트 알림 및 로딩 오버레이
• 이벤트 및 오버레이 아키텍처의 Ionic 8 개선 사항
• 복잡한 UI 오버레이를 위한 성능 고려 사항

성능 최적화 기법

• 코드 분할 및 지연 로딩 모범 사례
• 번들 크기 줄이기 및 일반적인 함정 피하기
• 리스트 및 대용량 데이터 세트에 대한 렌더링 최적화

프로그레시브 웹 앱 및 빌드 파이프라인

• 애플리케이션을 프로그레시브 웹 앱으로 변환
• 서비스 워커 및 오프라인 기능 구성
• 앱 매니페스트 및 PWA 설치 프롬프트

빌드 프로세스 및 배포

• 프로덕션용 Android 및 iOS 빌드 및 번들링
• 앱 스토어 제출 요구 사항 및 메타데이터 구성
• 스테이징 및 프로덕션 전반의 환경 구성 관리

최종 프로젝트: 완전한 미니 앱 구축

• 앱 아키텍처 및 네비게이션 흐름 설계
• 인증이 포함된 로그인 페이지 구현
• 실시간 데이터 통합이 포함된 대시보드 구축
• Capacitor를 통한 네이티브 카메라 기능 추가
• 코드 검토, 테스트 및 배포 준비