Thumbnail
BEST
개발 · 프로그래밍 모바일 앱 개발

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate 대시보드

(4.6)
18개의 수강평 ∙  458명의 수강생
110,000원

월 22,000원

5개월 할부 시
지식공유자: Wintho
총 83개 수업 (9시간)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

중급자를 위해 준비한
[풀스택, 모바일 앱 개발] 강의입니다.

React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드 내용까지 함께 배우면서, 서버 연동/ 로그인/ 데이터 송수신/ 공공API 활용 등이 가능한 하나의 완벽한 앱을 개발할 수 있도록 제작된 강의입니다.

✍️
이런 걸
배워요!
React Native 심화 내용
손쉬운 앱 상태 관리를 위한 Redux의 개념 및 사용법
React Native Debugger 활용을 통한 Redux의 로직 이해 및 앱 상태 확인 방법
Component(화면 구성 요소) 응용을 위한 관련 외부 라이브러리 활용 방법
용이한 개발을 위한 앱 구조(화면 Tree 구조, Redux 시스템 구조, 서버 연동을 위한 미들웨어 구조 등) 설계 방법
서버 연동을 위한 Firebase의 개념 및 사용법
Firebase를 React Native에 연계하여 서버 연동하는 방법
회원가입/ 로그인/ 로그아웃 기능
데이터 읽기/ 쓰기/ 수정/ 삭제 기능
유저식별자 기반 계정 관리 및 서버 데이터 접근 권한 설정
공공API의 개념 및 사용법
코로나19 및 미세먼지 공공데이터 활용 방법

리액트 네이티브(React Native)로 
모바일 앱 개발에 도전해보세요!


다음 순서로 
진행됩니다.

섹션 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 현황 및 미세먼지 수치 등을 앱에서 확인할 수 있도록 학습하는 섹션입니다.


이 강의만의 특징을 
확인해보세요.

하나, React Native 개발에 필요한 선수지식 내용을 하나의 강의에 담았습니다.

진정한 React Native 개발자로 거듭나기 위해 필수로 알아야 하는 Redux 개념을 다룹니다. Redux는 앱 상태(state)를 용이하게 관리하기 위한 JavaScript 라이브러리이고 React Native에서 제공해주는 내부 기술이 아니기 때문에, 그 개념을 이해하고 있더라도 React Native에 연계하는 방법 학습이 추가로 필요합니다. 본 강의를 통해 Redux의 개념 이해와 React Native 연계 방법을 터득하실 수 있으실 겁니다.

둘, 프론트엔드 강의이지만 백엔드도 함께 다룹니다.

본 강의는 서버와 연동하는 실제 앱 개발을 목표로 합니다. 따라서, React Native의 심화 내용 학습뿐만 아니라 백엔드 구현 내용도 함께 배우게 됩니다. 회원가입, 로그인, 로그아웃, 데이터의 읽기/쓰기/수정/삭제 기능을 학습하고 직접 구현해보면서 실제 앱 개발에 필요한 넓은 지식을 습득할 수 있도록 구성되었습니다.

셋, Firebase를 써서 백엔드는 정말 쉽게 배웁니다.

Firebase는 백엔드 기능을 클라우드 서비스 형태로 제공하며, 모바일 서버를 개발하기 위한 진입장벽을 한껏 낮춘 앱 개발 플랫폼입니다. 도메인 또는 서버를 구입할 필요 없이 무료로 백엔드 기능을 구현할 수 있습니다. Firebase를 이용한 백엔드 내용들을 다루면서 서버 연동이 얼마나 쉬운지, 왜 Firebase 플랫폼을 쓰면 프론트엔드 개발과 백엔드 개발의 경계가 허물어진다고 하는지 알려드리도록 하겠습니다.

넷, 공공API 활용 방법을 배웁니다.

공공API는 정부 기관에서 국민들한테 제공해주는 오픈 API이고 누구나 접근 가능합니다. 코로나19 및 미세먼지 예시를 통해 공공API의 개념과 활용 방법을 터득할 수 있도록 구성되었습니다. 정부 부처에서 생성/관리하는 그 어떤 공공데이터도 활용할 수 있게 되실 겁니다.


리액트 네이티브 개발의 
전체적인 과정을 
경험할 수 있어요!

이 강의를 듣고 나면?

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

이 강의를 듣기 전 여러분은 몇 개의 컴포넌트들의 조합으로 간단한 화면의 작성. 또는 그 화면들 간 이동 정도의 구현 능력을 갖고 계실 겁니다. 그러나 본 강의를 완주하고 나면 우선 Redux를 통해 손쉽게 앱 상태를 관리하는 능력을 갖게 되셨을 거고요, 그걸 React Native에 연계하는 앱 개발 방법에 대해서도 알게 될 겁니다. 게다가, Firebase를 배워서 로그인뿐 아니라 데이터의 읽고 쓰기, 수정, 삭제 등을 다룰 수 있게 되실 거예요. 그리고 공공데이터를 활용하는 방법도 익히시겠네요.

앱 개발 관점에서 본다면 여러분의 능력은 꽤 많은 단계를 뛰어오르게 될 테고, 실제 앱 개발 및 현업에서의 co-work까지도 충분히 할 수 있는 중급자 이상의 앱 개발 능력을 보유하게 되시리라 생각합니다.

수강 전 참고해주세요!

  • 본 강의에서는 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 환경에서만 구동이 가능하기에 아이폰에서의 앱 결과물을 확인하기 어렵습니다.


이 강의를 만든 
지식공유자를 소개합니다.

Wintho

안녕하세요. 여러분들께 React Native 지식을 공유해드릴 Wintho입니다.
저는 Computer Vision을 전공하여 자동차 업계에서 자율주행 시스템을 개발했고, 현재는 로봇 업계에서 사물인식, 장애물 회피 등의 영상처리 알고리즘을 개발하는 개발자입니다.

새로운 영역에서의 개발 Stack을 쌓아보고자 취미로 앱 개발을 시작했습니다. Java와 Swift 언어로 Android/iOS 네이티브 앱 개발도 해봤지만, React Native 만큼 진입장벽이 낮고 개발이 용이한 API도 없다고 생각합니다. 쉬운 데다가 단 하나의 코드로 iOS/Android 동시 개발이 가능하다는 건 더할 나위 없는 메리트겠죠? :)

외국에서는 이미 Mega Trend의 흐름에 합류하여 개발자들의 Community도 급증하고 있는 React Native입니다. 국내에서는 React Native의 명성에 비해 그 인지도가 낮은 것이 현실이고요. 많은 분들께 React Native의 훌륭함을 공유해드리고자 ‘iOS/Android 앱 개발을 위한 실전 React Native – Basic’ 강의를 제작했었고, 많은 수강생 분들의 요청과 심화 학습 강의를 제작하겠다는 수강생 분들과의 약속을 지키기 위해 본 강의를 만들게 되었습니다. 목말라했던 지식을 습득하시는 유익한 시간이 되시길 바라며, 그를 통해 국내에서도 React Native 개발자들의 Community가 활성화 되길 바랍니다.

그럼 강의에서 뵙겠습니다. 감사합니다 :-)

지식공유자의 다른 강의가 궁금하다면?

iOS/Android 앱 개발을 위한 실전 React Native - Basic
시작만 하고 끝을 못 보는 앱 프로그래밍은 이제 No!

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
React Native 기초 지식 습득을 완료하였고, 심화 내용의 학습이 필요하신 분
단편적인 Component 사용법 학습이 아닌, 실제 앱 개발에 필요한 Skill 습득과 응용이 필요하신 분
Stand Alone 앱이 아닌, 서버와 연동하는 앱 개발 능력이 필요하신 분
진입장벽이 낮은 백엔드 내용 학습이 필요하신 분
프론트엔드와 백엔드를 함께 다루는 강의를 찾고 계신 분
공공API 활용 방법을 배우고 싶으신 분
앱 개발의 A to Z 경험이 필요하신 분
앱 하나를 제대로 개발해보고 싶으신 분
진정한 앱 개발자로 거듭나고 싶으신 분
📚
선수 지식,
필요할까요?
React Native의 기본 이해 및 기초 개발 능력이 필요합니다. 본 강의는 ‘iOS/Android 앱 개발을 위한 실전 React Native – Basic’ 강의에서 다룬 내용을 학습 완료 또는 그에 준하는 지식을 갖고 계신다는 전제 하에 설명이 진행되며, 보다 심화된 내용의 학습을 위한 컨텐츠들로 구성이 되었습니다. React Native를 처음 접하시는 분들께서는Basic 강의를 선수학습하시기 바랍니다.

안녕하세요
Wintho 입니다.
Wintho의 썸네일

안녕하세요. 여러분들께 React Native 지식을 공유해드릴 Wintho 입니다.

저는 Computer Vision을 전공하여, 자동차 업계에서 자율주행 시스템을 개발했고, 현재는 로봇 업계에서 사물인식, 장애물 회피 등의 영상처리 Alg.을 개발하는 개발자입니다.

새로운 영역에서의 개발 Stack을 쌓아보고자 취미로 앱 개발을 시작했습니다. Java와 Swift 언어로 Android/iOS 네이티브 앱 개발도 해봤지만, React Native 만큼 진입장벽이 낮고 개발이 용이한 API도 없다고 생각됩니다. 쉬운 데다가 단 하나의 코드로 iOS/Android 동시 개발이 가능하다는 건 더할 나위 없는 메리트겠죠? :):)

외국에서는 이미 Mega Trend의 흐름에 합류하여 개발자들의 Community도 급증하고 있는 React Native입니다. 국내에서는 React Native의 명성에 비해 그 인지도가 낮은 것이 현실이고요. 많은 분들께 React Native의 훌륭함을 공유해드리고자 본 강의를 제작하게 되었습니다. 수업을 통해 목말라했던 지식을 습득하시는 유익한 시간이 되시길 바라며, 그를 통해 국내에서도 React Native 개발자들의 Community가 활성화 되길 바랍니다.

그럼 강의에서 뵙겠습니다. 감사합니다. ^^;

커리큘럼 총 83 개 ˙ 9시간의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. Redux
Redux란 01:33
Redux의 데이터 흐름 미리보기 04:11
action과 action creator 03:12
dispatch 01:18
store와 state 01:21
reducer 01:20
connect 02:50
Redux 사용 목적 02:57
섹션 2. 신규 프로젝트 생성 및 셋업
새 프로젝트 생성 및 라이브러리 설치 06:22
Redux 셋업 10:59
React Navigation 셋업 (1/2) 06:14
React Navigation 셋업 (2/2) 07:51
섹션 3. 로그인 화면 구현 (프론트엔드)
로그인 화면 작성 위한 파일 및 로고 준비 04:49
로그인 화면 만들기 05:48
재사용 컴포넌트 작성 (1/2) 07:17
재사용 컴포넌트 작성 (2/2) 05:15
효율적인 코드 작성을 위한 state 활용 09:27
TextInput 이벤트 핸들러 및 함수 (1/2) 미리보기 05:32
TextInput 이벤트 핸들러 및 함수 (2/2) 05:16
로그인 화면 버튼 및 이벤트 생성 07:17
회원가입 버튼 이벤트 생성 06:22
로그인을 위한 Validation Framework 작성 06:42
Validation Rule 함수 구현 (1/2) 07:05
Validation Rule 함수 구현 (2/2) 05:22
로그인/등록 버튼 이벤트 생성 08:03
Redux를 통한 로그인 로직과 흐름 검증 (1/2) 06:52
Redux를 통한 로그인 로직과 흐름 검증 (2/2) 06:54
섹션 4. 로그인 화면 구현 (백엔드)
Firebase 프로젝트 생성 05:20
Firebase 회원가입 연동 (1/2) 06:51
Firebase 회원가입 연동 (2/2) 미리보기 06:46
Firebase 로그인 연동 03:09
AsyncStorage를 이용한 Token 저장 (1/2) 06:55
AsyncStorage를 이용한 Token 저장 (2/2) 04:11
AsyncStorage를 이용한 Token 읽어오기 05:50
Refresh Token을 이용한 자동 로그인 (1/2) 06:28
Refresh Token을 이용한 자동 로그인 (2/2) 08:20
섹션 5. 다이어리 화면 구현 (백엔드 개발 병행)
메인 화면 구성 (Navigator & Header Bar Style) 07:47
React Native Vector Icon 설치 03:53
메인 화면 구성 (Tab Bar Style) 07:15
Redux Framework 구성 04:33
[백엔드] Redux 동작 확인 (Firebase Data 취득) (1/2) 06:36
[백엔드] Redux 동작 확인 (Firebase Data 취득) (2/2) 05:11
화면 Layout 구성 및 버튼 추가 06:31
ScrollView 활용한 피드 Layout 설계 06:13
다이어리 Data 접근 및 피드 Style 구현 (1/2) 07:00
다이어리 Data 접근 및 피드 Style 구현 (2/2) 06:58
화면 간 파라미터 Passing 07:06
화면 Layout 구성 - Index (1/2) 07:21
화면 Layout 구성 - Index (2/2) 06:20
화면 Layout 구성 - Date, Title 08:11
화면 Layout 구성 - Description 04:18
[백엔드] Firebase Storage 생성 및 SDK 활용 준비 09:58
[백엔드] 화면 Layout 구성(Image) 및 Firebase SDK 활용 09:23
화면 Layout 구성(Image) 및 Image Picker 설치 08:38
화면 Layout 구성 - Button 06:37
화면 Layout 구성 - Keyboard 08:37
[백엔드] Realtime Database의 Data Create 07:41
[백엔드] Storage의 Data Create 10:23
View 수정 & Activity Indicator 추가 07:52
[백엔드] Realtime Database 및 Storage의 Data Delete, Update 08:44
[백엔드] 유저식별자 통한 로그인 여부 판단 13:05
[백엔드] 로그인 정보와 데이터 연계 위한 사전 작업 08:39
[백엔드] 로그인 정보와 데이터 연계 09:08
[백엔드] 로그인 정보 연계 위한 Storage 사용법 10:55
[백엔드] 데이터 CRUD 함수 수정 07:51
로딩 화면 생성 - 애니메이션 09:06
로딩 화면 후 앱 진입 화면 분기 05:12
이전 화면으로의 이동 방지 08:35
[백엔드] 로그아웃 08:20
섹션 6. 뉴스 화면 구현 (공공API 활용)
화면 레이아웃 설계 (코로나19) 07:54
화면 컴포넌트 스타일 (코로나19) 07:38
화면 레이아웃 설계 (미세먼지) 05:37
화면 컴포넌트 스타일 (미세먼지) 06:40
[백엔드] 공공API 데이터 활용 신청하기 03:23
공공API 데이터 활용 위한 State 및 함수 정의 07:39
[백엔드] 공공API 데이터 요청 및 활용 위한 함수 구현 08:08
코로나19 데이터 가공 위한 함수 구현 및 State Update 09:03
미세먼지 데이터 가공 위한 함수 구현 및 State Update 09:50
코로나19 데이터 Rendering 04:20
미세먼지 데이터 Rendering 04:49
섹션 7. 강의를 마치며
강의를 마치며 04:17
강의 게시일 : 2021년 08월 06일 (마지막 업데이트일 : 2021년 08월 06일)
수강평 총 18개
수강생분들이 직접 작성하신 수강평입니다.
4.6
18개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
택민 권 thumbnail
5
도움이 많이 되었습니다. 감사합니다.
2022-02-28
ch lee thumbnail
5
기초강의에 이어서 실전 강의를 들으니 실무에서 사용할 스킬들을 상황별로 코딩해 볼 수 있어서 좋았습니다. 강의 감사합니다.
2022-01-07
전인욱 thumbnail
4
좋은 강의입니다.^^ 추천합니다
2023-08-29
Qok Forte thumbnail
5
개인적으로 많은걸 배운 강의였습니다. 처음엔 무조건 따라 써보는 식으로 진행했는데, 오류가 났을 때 체크하는 것도 어렵고 지금 뭘 하고 있는지 스스로 회의감도 자꾸 생겨서 중간에 다시 처음으로 돌아가 관련된 docs 나 포럼 스레드 같은것을 뒤져보며, 동시에 일지를 기록해가며 따라가 봤습니다. 어느덧 완강까지 왔는데, 되돌아보니 웹개발 경험은 물론 앱개발 경험도 없던 저에겐 단순히 react나 rn, redux등을 다뤄본 경험 뿐 아니라 개발 습관, 목표, 나아가 개발자로서의 시야도 조금 가져갈 수 있는 시간이 아니였나 생각이 듭니다. 강의에서 많은 부분을 다뤄주십니다만, 특히 앱 자체를 기획하거나 구성하는 단계를 계속 보여주려 하신게 기억에 남는 것 같습니다. 좋은 강의 맡아주셔서 감사드리고, 앞으로도 기회가 된다면 다른 강의에서 다시 뵐 수 있기를 바랍니다.
2022-01-11
yjhji thumbnail
5
비전공자로 리액트네이티브에 대한 지식이 많이 없어서 강의를 듣기전에 걱정을 많이 했는데, 개념에 대해서 알기 쉽게 설명해 주셔서 끝까지 완주할 수 있었던것 같습니다. 앞으로 앱 개발을 목표로 하고 있는데 이곳에서 배운것을 잘 활용해서 목표달성을 하겠습니다! 좋은 강의 만들어주셔서 감사합니다.
2022-01-02