iOS/Android 앱 개발을 위한 실전 React Native - Basic
iOS/Android 앱 개발을 위한 실전 React Native - Basic
수강정보
(3개의 수강평)
76명의 수강생
25% 할인, D-5
41,250원
55,000원
지식공유자 : Wintho
78회 수업 · 총 7시간 8분 수업
기간 : 평생 무제한 시청
수료증 : 미발급 강의
수강 난이도 : 입문
지식공유자의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

이런 걸 배워요

  • React Native 개발 언어인 JavaScript의 6번째 표준 스펙(ECMAScript 6) 배경지식
  • React Native의 근간인 React 배경지식
  • React Native의 기본 Component 사용법 학습을 통한 화면 구성 방법
  • React Navigation 학습을 통한 화면 전환 및 연결(Stack, Drawer, Tab) 방법
  • 연락처/카메라/갤러리와 같은 Phone Resource 활용 방법
  • Image, Text 등의 Animation 생성 방법
  • React Native의 심화 코딩을 위한 Tip (디버거, 재사용 Component 제작 등)
  • iOS/Android App Front-End 개발자가 되기 위한 기초 지식
  • React Native 및 유관 3rd Party Library 공식 문서 활용을 통해 스스로 개발 및 문제를 해결할 수 있는 Skill

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

"시작만 하고 끝을 못 보는 앱 프로그래밍은 No!!
React Native로 나도 이제 앱 개발자!!!"

■ 강의 소개

● Section 0 : React Native 소개 및 개발 환경 구축

React Native(리액트 네이티브) 소개 및 개발 환경 구축에 대한 설명으로 진행됩니다. 모바일 앱 Cross Platform Framework인 React Native는 어떻게 하나의 코드로 iOS와 Android에서 앱 구동이 가능한지, React Native 개발에 필요한 선수지식은 어떠한 것들이 있는지 등 React Native의 전반적인 이해를 돕기 위해 구성되었으며, React Native 개발을 위한 프로그램 및 툴 설치 방법을 알려드립니다. 리액트네이티브 개발을 위한 환경구축이 까다로울 수 있습니다. 각각의 프로그램 및 툴의 버전을 명시했기 때문에 호환성 Issue는 걱정하지 않으셔도 됩니다. 하나하나 같이 설치해보면서 환경구축에 대한 허들을 낮출 수 있도록 구성된 Section입니다.

● Section 1 : Simulator 구동

개발 코드를 Android Emulator와 iOS Simulator에서 구동시켜보는 방법에 대한 설명으로 진행됩니다. React Native는 Cross Platform Framework이지만, iOS와 Android에서 제공하는 Native Component Style 및 성격에 다소 상이한 부분이 있습니다. 각각의 Simulator 구동을 통해 여러 기종의 단말기에서 Rendering되는 출력 화면을 확인할 수 있도록 구성된 Section입니다.

● Section 2 : ECMAScript 6 (ES6)

React Native 개발에 필요한 선수지식인 ECMAScript 6 (ES6)의 기초 문법 설명으로 진행됩니다. React Native 개발에 주로 사용되는 핵심만을 발췌하여 불필요한 학습을 최소화하고 효율적인 선수지식 학습이 될 수 있도록 구성된 Section입니다.

● Section 3 : React

React Native 개발에 필요한 선수지식인 React의 기초 문법 설명으로 진행됩니다. React Native 개발 코드를 활용하여 설명을 드리기 때문에, React Native 개발 코드에 친숙해지실 수 있습니다. 뿐만 아니라, React Native 개발에 필요한 알짜배기 핵심만을 발췌하여 효율적인 선수지식 학습이 될 수 있도록 구성된 Section입니다.

● Section 4 : React Native Component

본격적인 React Native 기초 문법 설명으로 진행됩니다. App 화면을 구성하는 다양한 Component들(View, Text, Button, Image, TextInput 등)의 기본 사용법을 배우고, 심화 학습을 통해 여러 Component들의 조합을 활용하여 Advanced한 화면 Rendering을 다룹니다. 하나의 화면을 구성하기 위한 기초 문법 및 심화 내용을 학습할 수 있도록 구성된 Section입니다.

RN-Component-Numbers-revised.gif

             

RN-Component-TextInput-revised.gif

● Section 5 : React Navigation Ver. 5

화면 전환을 도와주는 3rd Party Library인 React Navigation의 기초 문법 설명으로 진행됩니다. 가장 최신에 Update 된 Ver. 5의 내용을 다루며, Stack Navigator(버튼을 이용한 화면 전환)/ Drawer Navigator(화면 좌우측에서 열리는 새 창)/ Tab Navigator(Tab 버튼을 이용한 화면 전환)/ Vector Icon(다양하고 편리한 Pictogram 사용)에 대한 학습이 가능합니다. 뿐만 아니라, 각 Navigator의 조합을 통한 화면 Tree 구조 설계(Nesting Navigator)를 통해 다양하고 풍부한 화면 전환 방법을 학습할 수 있도록 구성된 Section입니다.

● Section 6 : Phone Resource 활용

스마트폰 자원 활용 방법에 대한 설명으로 진행됩니다. App에서 연락처/카메라/갤러리 등의 단말기 자원을 사용하기 위해서는 추가적인 3rd Party Library의 설치가 필수적이며, 접근 권한 여부 판단 등의 Process가 선행되어야 합니다. iOS와 Android의 각 보안 정책을 기반으로 단말기 자원을 활용하기 위한 권한 부여 방법을 알아보고, 실제 개발을 통해 스마트폰 자원 사용법을 학습할 수 있도록 구성된 Section입니다.

PhoneResource-ImagePicker-revise.gif

             

PhoneResource-Contacts-revised.gif

● Section 7 : Animation

도형 및 텍스트에 Animation 효과를 부여하는 방법에 대한 설명으로 진행됩니다. React Native는 Animation 효과를 지원합니다. 색깔, 투명도, 회전, 이동 등의 효과뿐만 아니라, 각 Animation 효과의 조합(Interpolation, Sequence, Parallel)을 통해 보다 다양하고 풍성한 시각적 효과의 연출 방법을 학습할 수 있도록 구성된 Section입니다.

● Section 8 : Good To Know Things

React Native 개발에 필요한 고급 Skill에 대한 설명으로 진행됩니다. 심화 코딩에 필요한 Debugger의 소개를 시작으로 재사용 Component를 직접 생성하여 사용해보고, Platform별로 각기 다른 결과를 출력하는 방법 등에 대한 학습이 가능합니다. 보다 Advanced한 내용의 학습과 현업에서 사용하는 Skill의 습득을 목표로 구성된 Section입니다.

● Section 9 : 강의를 끝내며

본 강의 학습을 마치신 후의 여정에 대해 설명 드립니다. 본 강의에서는 React Native의 기초적인 부분을 다뤘으며, 실제 App 개발 및 현업에서의 Co-Work을 위해서는 Redux의 개념과 함께 Back-End에 대한 이해도 필수적입니다. Redux의 학습 및 심화 코딩을 통해 실제 App을 개발해보는 Tutorial 강의가 Open될 예정입니다. 로그인 Process 구현, 서버로부터의 데이터 수신 및 출력 등의 Advanced 내용의 학습을 원하시는 분들께서는 다음 강의를 수강하시기 바랍니다.

■ 강의 특징

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

React Native 개발을 위해서는 ECMAScript 6 (ES6) 및 React의 지식이 필요합니다만, 실제 React Native 개발에 활용되는 지식은 그 전체 중 일부입니다. 어떤 것들을 배워야할지 몰라서 모든 내용을 공부한다는 것은 굉장히 비효율적이죠. 그래서 본 강의는 React Native 개발에 핵심이 되는 요소들만을 발췌하여 구성되었습니다. 단 하나의 강의로 React Native 기초 학습을 즐기시길 바랍니다.

● React Native 기초를 다룹니다

본 강의는 Mobile App Front-End 개발을 위한 React Native 기초 학습을 목표로 하고 있습니다. 기초 개념을 탄탄히 다질 수 있도록 상세한 설명을 다뤘으며, React Native 개념이 아닐지라도 이해가 버거울 수 있는 사항에 대해서는 부연 설명을 포함시켰습니다. React Native를 처음 다루는 분들께서도 쉽게 이해하실 수 있으실 겁니다.

● React Navigation Ver. 5를 다룹니다

본 강의에서는 React Navigation의 최신 버전인 Ver. 5를 다룹니다. Ver. 4로부터의 Update 이후 큰 변화들이 있었습니다. 실제 코딩을 통해 공식 문서 확인으로는 습득하기 어려운 내용들을 다루면서, 최신 버전의 React Navigation을 학습할 수 있도록 구성되었습니다.

● 비전공자도 쉽게 따라할 수 있습니다

본 강의는 비전공자도 충분히 따라오실 수 있도록 제작되었습니다. 진입장벽이 낮은 Script 언어 및 API를 사용할 뿐만 아니라, 쉽게 학습하실 수 있도록 코딩 진행 방법과 설명의 난이도/템포 조절에 유의하였습니다. App 개발 세계에 처음 발을 내딛는 비전문가분들께서도 이 강의를 통해 App 개발자가 되시길 바랍니다.

■ 참고 사항

● 본 강의에서는 Mac을 사용합니다. Mac 환경을 구축해 두시기 바랍니다.

● 본 강의에서는 React Native CLI를 사용합니다. React Native CLI의 대체재인 Expo CLI는 Beginner분들에게는 용이할 수 있으나, 개발 측면에서의 자유도가 현저히 낮습니다. React Native CLI 사용법을 익히셔서 개발의 한계점을 극복하시기 바랍니다.

(※ 이 강의는 지식공유자의 사정에 의해 답변이 늦을 수 있는 점 양해바랍니다.)

도움 되는 분들

  • Native Mobile App의 Front-End 개발을 배우고 싶으신 분
  • iOS App 개발을 위한 Swift 언어, 혹은 Android App 개발을 위한 Java/Kotlin 언어의 높은 진입장벽을 느끼신 분. 혹은 이미 장벽의 높이를 체감하신 분
  • 진입장벽이 낮은 언어/API 기반으로 비전문가도 쉽게 배울 수 있는 App 개발 방법을 찾고 계신 분
  • Mobile App Front-End 개발을 해보고 싶은데 iOS와 Android 중 어떤 Platform이 좋을지 고민이신 분
  • 단 하나의 코드 개발로 iOS와 Android에서의 App 구동을 원하시는 분
  • React Native를 배우고 싶지만, ES6(ECMAScript 6)와 React의 선수지식 학습이 부담스러우신 분
  • 취업/이직을 위해 Mobile App Front-End 개발자로서의 개발 Stack을 쌓고 싶으신 분
  • 창업을 위해 단기간에 Mobile App 개발 Skill을 습득하고 싶으신 분
  • Mobile App Front-End 개발 학습을 쉽고 즐겁게 하고 싶으신 분

선수 지식

  • JavaScript의 이해가 필요합니다. 하지만, 무작정 시작해 보시는 것도 나쁘지 않을 것 같습니다. ^^;; 직관적인 Script 언어를 기반으로 하기 때문에 쉽게 이해할 수 있고, 함께 코딩을 하다보면 금방 익숙해지실 겁니다. 그래도 JavaScript 선수지식의 부재가 걱정되시는 분들께서는 JavaScript의 6번째 표준 스펙을 다루는 'Section 2: ECMAScript 6 (ES6)'를 필히 수강하시기 바랍니다.

지식공유자 소개

안녕하세요. 여러분들께 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가 활성화 되길 바랍니다.

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

교육과정

모두 펼치기 78 강의 7시간 8분
섹션 0. React Native 소개 및 개발 환경 구축
5 강의 30 : 01
Intro
02 : 40
React Native 기본 원리
02 : 13
Expo CLI vs. React Native CLI
03 : 20
Installation 01
08 : 39
Installation 02
13 : 09
섹션 1. Simulator 구동
3 강의 08 : 41
새 프로젝트 생성
01 : 56
iOS Simulator 구동
03 : 21
Android Emulator 구동
03 : 24
섹션 2. ECMAScript 6 (ES6)
8 강의 37 : 59
섹션 3. React
8 강의 26 : 33
React란
03 : 29
화면 출력 맛보기
03 : 34
State 01
02 : 28
State 02
01 : 56
setState 01
04 : 54
setState 02
03 : 14
Props 01
01 : 50
Props 02
05 : 08
섹션 4. React Native Component
17 강의 104 : 53
Intro
04 : 59
View, Text
02 : 56
Style 01
05 : 24
Style 02
05 : 17
TouchEvent 01
05 : 24
TouchEvent 02
06 : 26
Button 01
07 : 56
Button 02
05 : 03
TouchEvent 심화
06 : 22
ScrollView
05 : 58
TextInput
08 : 20
Button, ScrollView, TextInput 심화
08 : 00
Picker
07 : 21
Slider
06 : 15
ActivityIndicator
02 : 26
Image
08 : 41
Modal
08 : 05
섹션 5. React Navigation Ver. 5
19 강의 125 : 38
React Navigation 소개
03 : 42
React Navigation 설치
04 : 22
[Stack] 화면 Linking 01
07 : 51
[Stack] 화면 Linking 02
04 : 02
[Stack] Navigation Params
07 : 04
[Stack] Header Bar 설정
09 : 31
[Stack] 여러 화면에 공통 Style 적용
03 : 18
[Stack] Header Bar 커스터마이징
06 : 49
[Stack] Header Bar에 버튼 추가
04 : 26
[Drawer] 설치 및 화면 Linking
05 : 29
[Drawer] Style 설정 01
09 : 12
[Drawer] Style 설정 02
06 : 42
[Drawer] Custom Component
11 : 43
[Tab] 설치 및 화면 Linking
04 : 23
[Tab] Style 설정
10 : 12
React Native Vector Icons 설치
07 : 09
React Native Vector Icons 활용
04 : 10
Nesting Navigators(화면 구조 설계) 01
08 : 18
Nesting Navigators(화면 구조 설계) 02
07 : 15
섹션 6. Phone Resource 활용
6 강의 36 : 01
Image Picker 설치
04 : 20
카메라 & 이미지 갤러리 사용하기
08 : 00
React Native Contacts 설치
06 : 27
연락처에 접근하기
07 : 46
연락처 추가하기
06 : 04
연락처 Form 활용
03 : 24
섹션 7. Animation
6 강의 31 : 16
XY Animation 생성하기
07 : 15
XY Animation의 추가 효과 및 Triggering Button 생성
04 : 43
다른 Animation 효과 생성하기
02 : 01
Interpolation(Animation 효과 조합) 01
04 : 41
Interpolation(Animation 효과 조합) 02
06 : 18
Animation 효과 순서 정하기
06 : 18
섹션 8. Good To Know Things
5 강의 25 : 53
React Native Debugger
05 : 31
재사용 Component 생성
06 : 55
Platform별 다른 코딩 구현
05 : 47
Dimensions
04 : 00
Device 정보 가져오기
03 : 40
섹션 9. 강의를 끝내며
1 강의 01 : 47
Wrap-Up 및 향후 여정 소개
01 : 47

공개 일자

2020년 9월 3일 (마지막 업데이트 일자 : 2020년 9월 3일)

수강 후기

5.0
3개의 수강평
default_profile.png
Jake Kim 2일 전
앱 개발을 해보고 싶어서 수강했습니다. 앱 개발 세계를 잘 알지는 못하지만 리액트 네이티브라는 툴이 여러모로 좋은 것 같네요. 생각했던 것보다 어렵지도 않고. 설명도 쉽고 친절히 잘 해주셔서 무리없이 배우고 있습니다. 저 같은 코알못이 앱개발 공부 시작할 때 많은 도움 되는 강의입니다. 감사합니다.
default_profile.png
Jazz i 21일 전
앱 프론트엔드 쪽 개발자를 꿈꾸는 취준생입니다. 최근 스타트업의 채용공고들을 보면 React Native 개발자를 많이 찾더라고요. React Native 강의를 알아보던 중 저한테 딱 필요한 강의를 찾은 것 같습니다. 코딩은 조금만 건드려봐서 아직 아기 걸음마 수준인데, 강사님 설명이 친절하셔서 따라가기 어렵지 않았네요. 무엇보다 툴 설치랑 환경구축 부분에서 걱정이 많았는데 강의에서 알려주신대로 따라하니 큰 문제는 없었습니다. 아직 수강 초반인데 구성도 좋고 내용도 너무 좋은 것 같습니다. 리액트 네이티브 개발에 필요한 배경지식까지 설명해주셔서 다른 강의를 또 들을 필요는 없었고요. 남은 강의가 기대가 많이 됩니다. 좋은 강의 올려주셔서 감사합니다.
Wintho

Wintho 18일 전
Jazz i님, 안녕하세요. 좋은 수강평 남겨주셔서 너무 감사드립니다. 제 강의가 도움이 되신 것 같아 정말 뿌듯하네요!! :]:] 강의를 통해 기초 부분 만큼은 탄탄하게 다질 수 있으실 겁니다. 남은 강의도 화이팅하셔서 원하시는 목표 꼭 이루시길 바랍니다. :):) 감사합니다!!

default_profile.png
fontj 13일 전
안녕하세요. react-native를 써야해서 강의를 수강하게되었는데 처음 시작하는데 이강의만한게 없는거 같습니다. 너무 깔끔하게 강의를 해주셔서 시간가는줄모르고 들었네요. 혹시 다음 심화강의는 언제쯤 나올까요? 기대하고있겠습니다
Wintho

Wintho 13일 전
fontj님, 안녕하세요. 너무 좋은 후기 남겨주셔서, 그동안 강의 준비&제작하면서 힘들었던 것들 다 보상받는 느낌이네요. 정말 감사드립니다. 다음 심화강의는 현재 준비&착수 단계에 있습니다. 준비하고 실제 녹화하는데 다소 시간이 걸리지만 최대한 빨리 오픈될 수 있도록 임하고 있습니다. 현업이 또 바쁜지라 서두르지 못하는 점 양해 부탁드립니다. 다음에도 더 만족하실 수 있는 양질의 강의로 찾아뵙도록 하겠습니다. 남은 강의도 화이팅하셔서 원하시는 목표 꼭 이루시길 바랍니다 :):) 좋은 수강평 남겨주셔서 너무 감사합니다!!

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스