iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

섹션 0 : Intro

앱 개발의 A to Z 경험이 필요하신 분들을 위해 준비했습니다. React Native 심화학습과 Firebase기반의 백엔드(서버 연동)를 함께 다루면서 하나의 앱을 완성해볼 겁니다. 앱 개발자로 거듭나기 위해 요구되는 Skill 항목들을 체크해보고, 앱 결과물을 미리 확인할 수 있도록 구성된 섹션입니다.

섹션 1 : Redux(리덕스)

Redux는 앱 상태(state)를 용이하게 관리하기 위한 프레임워크이고, 오픈 소스 JavaScript 라이브러리입니다. React Native 프로젝트의 몸집이 커지면 Component 구조도 복잡해지는데, 이런 상황에서 모든 Component들이 state를 쉽게 공유하고, 관리도 용이하게 만들어주는 상태 관리 라이브러리입니다. React Native와 상호성이 가장 좋고 또 시너지 효과를 낼 수 있기 때문에, React Native 개발자들은 대부분 Redux와 함께 개발을 하고 있습니다. 이러한 Redux의 개념과 동작 원리를 학습할 수 있는 섹션입니다.

섹션 2 : 신규 프로젝트 생성 및 셋업

하나의 완벽한 앱을 구현하기 위해서는 프로젝트 구조 설계가 중요합니다. 용이한 개발을 위해서는 화면 Tree 구조 뿐만 아니라, 새로 학습하게 될 Redux 시스템 구조, 그리고 서버 연동을 위한 미들웨어 구조 등의 설계가 필요하며 다소 복잡하고 난해할 수 있습니다. 앱 구조 설계 방법과 더불어 Redux를 React Native와 연계하는 방법을 학습할 수 있는 섹션입니다.

섹션 3 : 로그인 화면 구현 (프론트엔드)

로그인 화면의 프론트엔드 개발을 다룹니다. 개발 효율성 향상을 위해 반복적으로 사용되는 재사용 컴포넌트를 직접 만들어보고, 로그인을 위한 이메일 주소/패스워드 규칙 및 유효성 검증 프레임워크를 정의해봅니다. Redux를 사용하여 로그인 프로세스와 로직을 검증해보고, 실제 서버와 연동할 준비를 하는 내용으로 구성된 섹션입니다.

섹션 4 : 로그인 화면 구현 (백엔드)

Firebase(파이어베이스)를 이용하여 로그인과 관련된 백엔드를 실제로 구현해봅니다. 회원가입 정보가 Firebase 서버에 어떻게 저장이 되고, 계정 정보는 어떻게 확인이 가능한지, 그리고 앱 종료 후 다시 켰을 때 자동 로그인이 되기 위해서는 어떤 코드 구현이 필요한지 등의 설명으로 진행됩니다. 섹션 3에서 구현했던 로그인 프로세스와 로직을 Firebase 서버에 적용하고, 실제로 작동하는 걸 확인해볼 수 있는 섹션입니다.

섹션 5 : 다이어리 화면 구현

React Native의 심화 내용 학습뿐만 아니라, 백엔드의 핵심인 데이터의 CRUD(Create, Read, Update, Delete) 설명 및 실제 구현으로 진행됩니다. Firebase의 데이터 저장소를 활용하는 방법, Firebase를 React Native와 연계하는 방법, 로그인 정보에 따른 유저 식별 방법, 데이터의 접근 권한 설정 등의 내용을 학습하며, 프론트엔드와 백엔드를 넘나드는 개발 능력 습득을 목표로 하는 섹션입니다.

섹션 6 : 뉴스 화면 구현

공공API란 정부 기관에서 국민들한테 제공해주는 오픈 API이며, 그를 통해 누구나 공공데이터에 접근이 가능합니다. 공공API를 활용하는 방법을 배우고, 실제 구현을 통해 코로나19 현황 및 미세먼지 수치 등을 앱에서 확인할 수 있도록 학습하는 섹션입니다.

이 강의를 듣고 나면?

• 혼자 힘으로 제대로 된 앱 하나를 개발하실 수 있게 될 거예요.
• 그것도 stand-alone 앱이 아닌, 서버 통신을 하는 앱으로요!

• 본 강의에서는 MacOS를 사용합니다. Mac 환경을 구축해 두시기 바랍니다.
• 본 강의에서는 React Native CLI를 사용합니다. React Native CLI의 대체재인 Expo CLI는 Beginner분들에게는 용이할 수 있으나, 개발 측면에서의 자유도가 현저히 낮습니다. React Native CLI 사용법을 익히셔서 개발의 한계점을 극복하시기 바랍니다.
• 이 강의는 지식공유자의 사정에 의해 답변이 늦을 수 있는 점 양해바랍니다.

Q. React Native를 배우면 뭐가 좋은가요?

단 하나의 코드로 iOS와 Android 앱을 동시에 개발할 수 있습니다 🙂

Q. 이 강의의 특장점이 무엇인가요?

React Native의 심화 내용뿐만 아니라 Firebase 기반의 백엔드(서버 연동)를 배울 수 있습니다. 실제 앱 개발 및 현업에서의 Co-Work을 위해서는 백엔드에 대한 이해가 필수예요!

Q. React Native의 기본 이해가 조금 부족한데, 이 강의를 수강해도 될까요?

React Native를 처음 접하시거나 기초 개발 능력이 부족하신 분들께서는, ‘iOS/Android 앱 개발을 위한 실전 React Native – Basic’ 강의에서 다루는 내용의 선수 학습이 필요합니다. 

Q. 강의에 사용한 소스 코드를 제공하나요?

네, 수업 자료로 올려두었습니다. (우측 상단의 [강의 자료] 버튼 혹은 구름 아이콘을 클릭해 내려받을 수 있습니다.)

Q. Mac 환경에서만 개발이 가능한가요?

아닙니다. React Native CLI를 사용해도 Windows 환경에서 React Native 개발이 가능하며, Android Emulator를 이용하여 앱 결과물을 확인할 수 있습니다. 하지만 Xcode나 iOS Simulator와 같은 프로그램은 Mac 환경에서만 구동이 가능하기에 아이폰에서의 앱 결과물을 확인하기 어렵습니다.