아이오닉 8 크로스 플랫폼 모바일 앱 개발 교육 과정

아이오닉 및 크로스 플랫폼 환경 소개

• 아이오닉이란 무엇이며 언제 네이티브 또는 Flutter 대신 선택해야 하는가?
• 아이오닉 UI를 powering하는 웹 컴포넌트 아키텍처
• Angular, React 및 Vue 생태계 전반의 프레임워크 지원
• PWA와 모바일 앱의 실제 사용 사례

개발 환경 설정

• Node.js 및 npm 설치 및 구성
• 아이오닉 CLI 설치
• 새로운 아이오닉 프로젝트 생성 및 구조화
• 브라우저 및 연결된 디바이스 모드에서 앱 실행

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

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

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

• 페이지 구조를 위한 ion-header, ion-toolbar 및 ion-content 사용법
• 입력 컨트롤: ion-input, ion-select, ion-checkbox
• 버튼, FAB(플로팅 액션 버튼), 카드, 목록 및 그리드 시스템
• 현대적인 아이오닉 폼 컨트롤 관례
• 실습: 로그인 페이지 및 대시보드 레이아웃 구축

네비게이션 및 라우팅 전략

• Angular 라우터 및 React 라우터 통합
• 페이지 네비게이션 패턴 및 딥 링크링
• 성능을 위한 레이저 로딩(Lazy Loading)
• 탭 네비게이션 및 사이드 메뉴 패턴

스타일링 및 테마팅

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

폼 및 유효성 검사

• Angular를 위한 리액티브 폼 프레임워크
• React를 위한 커스텀 훅 및 검증 패턴
• 에러 처리 및 검증 UI 피드백
• 복잡한 다중 단계 폼 구축 및 검증

서비스 및 API 통합

• HTTP 클라이언트 구성 및 인터셉터
• RESTful API 호출 수행 및 응답 처리
• 상태 관리 모범 사례
• 에러 boundary 및 네트워크 실패 복구

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

• Capacitor 브리지 및 플러그인 생태계 이해
• 기존 프로젝트에 Capacitor 설치 및 구성
• 카메라 및 이미지 피커 접근
• 地理位置(위치) 기반 기능 및 맵 통합
• 네이티브 스토리지 및 환경 설정
• 실습: 디바이스에서 이미지 캡처 및 데이터 저장

고급 UI 컴포넌트

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

성능 최적화 기술

• 코드 분할 및 레이저 로딩 모범 사례
• 번들 크기 줄이기 및 일반적인 함정 피하기
• 목록 및 대용량 데이터 세트의 렌더링 최적화

PWA 및 빌드 파이프라인

• 앱을 PWA로 전환
• 서비스 워커 구성 및 오프라인 기능 설정
• 앱 매니페스트 및 PWA 설치 프롬프트

빌드 프로세스 및 배포

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

통합 프로젝트: 미니 앱 완전 구축

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