Thumbnail
개발 · 프로그래밍 프레임워크 및 라이브러리
iOS/Android 앱 개발을 위한 실전 React Native - Intermediate
(4.7)
7개의 수강평 ∙ 142명의 수강생
110,000원

월 22,000원

5개월 할부 시
지식공유자 : Wintho
총 83개 수업˙총 9시간
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 123 공유
중급자를 위해 준비한
[프레임워크 및 라이브러리, 모바일 앱 개발] 강의입니다.

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일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
7개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
T Lifth thumbnail
아주 좋습니다.
2021-08-13
지식공유자Wintho
T Lifth님, 안녕하세요. 지식공유자 Wintho입니다. 수강평 감사드립니다. 부족하지만 열심히 만든 강의라 좋은 평가 받으니 보람되네요!! 본 강의를 통해 원하시는 결과 얻으셨길 바랍니다!! 감사합니다 :):)
2021-09-21
이야기바람 thumbnail
이해가 쏙쏙 됩니다
2021-09-05
지식공유자Wintho
이야기바람님, 안녕하세요. 지식공유자 Wintho입니다. 이해가 잘 되신다니 다행입니다!! 복잡한 내용을 설명하려다 보니 가장 걱정되었던 부분이었는데 강의 구성이랑 스크립트 작성에 신경 쓴 보람이 있네요!! 수강 화이팅하시고 원하시는 결과 얻으시길 바랍니다!! 감사합니다!!
2021-09-21
김부릉🚗 thumbnail
알아 듣기 쉬운데 npm 라이브러리 버전들이 맞지 않아서 오류투성이로 돌아가서 ㅜ 최신본으로 업데이트버전이 있었으면 좋겠어요....
2021-09-20
지식공유자Wintho
김부릉님, 안녕하세요. 지식공유자 Wintho입니다. 외부 라이브러리 설치 관련하여 불편을 겪으셨네요ㅠ 모든 언어, api, 3rd party library가 그러하듯, react native 또한 외부 라이브러리와 버전 호환성이 중요합니다. 오히려 최신 버전으로 업데이트를 하면 어제까지 잘 돌아가던게 에러가 생기는 문제가 발생할 수 있죠. 최신 버전으로의 업데이트도 중요하지만, 상호간 호환성도 굉장히 중요한 이슈입니다. 현재 수강생님 진척도를 확인해보니, react navigation에서 문제가 생긴 듯 하네요. 버전 이슈가 생길 듯 하여, 강의에서도 버전 명시 없이 설치한 라이브러리는 모두 삭제하고, 특정 버전을 명시 후 재설치하였습니다. 강의에서 안내드리는대로 설치 부탁 드리며, 강의자료로 올려둔 코드의 package.json 을 보시면 모든 라이브러리 버전의 확인이 가능합니다. 수강생 분께서 설치하신 버전과 비교 후, 다른 부분은 재설치 부탁드립니다. 감사합니다.
2021-09-21
국제화연구소 thumbnail
유익했습니다.
2021-09-26
민정아빠류동수 thumbnail
즐겁게 잘 듣고 있습니다. 많은 도움이 됩니다. ~
2021-10-01
110,000원

월 22,000원

5개월 할부 시
폴더에 추가 123 공유
지식공유자 : Wintho
총 83개 수업˙총 9시간
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스