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

핸즈온 리액트 네이티브 대시보드

(5)
5개의 수강평 ∙  163명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자: 김범준
총 160개 수업 (23시간 50분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[모바일 앱 개발, React Native] 강의입니다.

리액트 네이티브를 처음 접하는 입문자를 위한 강의입니다. 처음부터 프로젝트를 진행하면서, 각 상황에서 필요한 내용을 학습하는 방법으로 진행합니다. 이를 통해 리액트 네이티브의 기초를 익히고, 리액트 네이티브를 이용할 때 필요한 내용과 프로젝트를 진행하면서 사용하게 되는 다양한 라이브러리를 사용해봅니다.

✍️
이런 걸
배워요!
리액트 네이티브
리액트 (Components, Hooks, Context API)
리액트 내비게이션(React Navigation)
파이어베이스(Authentication, Firestore, Storage)

따끈따끈, 신규 IT 도서 저자의 직강!
만들면서 배우는 리액트 앱 개발 ⚒️

수많은 기업의 선택, 리액트 네이티브 ✔️

리액트 네이티브는 2015년 3월 메타(구 페이스북)에 의해 공개된 오픈소스 프로젝트로, 사용자 인터페이스를 만드는 리액트에 기반을 두고 제작되었습니다. 

과거에는 모바일 앱을 만들려면 SwiftKotlin같이 플랫폼 개발을 위한 언어를 따로 공부해야 했지만, 리액트 네이티브를 이용하면 자바스크립트를 이용해서 iOS, Android 앱을 개발할 수 있습니다. 리액트 네이티브 쇼케이스(React Native Showcase)를 보면 코인베이스(Coinbase), 우버이츠(Uber Eats), 디스코드(Discord), 테슬라(Tesla), 월마트(Walmart) 등 많은 기업에서 리액트 네이티브를 사용하고 있다는 것을 확인할 수 있습니다. 

이 강의에서는 폭넓게 쓰이는 리액트 네이티브의 기초를 다룹니다. 세 가지 앱을 직접 만들면서 리액트 네이티브의 이론을 익힐 수 있어요.


프로젝트로 이론까지 정복  

사람에 따라 취향이 다르듯, 무엇인가를 학습하는 방법은 다양하고 선호도도 다릅니다. 하지만 한 가지 공통적인 부분이 있습니다. 이론을 먼저 공부하든, 일단 몸으로 부딫히든 결국 무엇인가를 해봐야 합니다.

이 강의에서는 프로젝트를 진행하면서 이론을 공부합니다. 프로젝트 진행 과정에서 우리가 만들고 싶은 모습이나 기능을 위해서 필요한 것이 생길 때 필요한 내용을 공부하는 방법으로 리액트 네이티브를 학습합니다. 그 과정에서 다음과 같은 내용을 익히고 사용하게 됩니다.

리액트 네이티브 사용에
필요한 리액트 지식

(Component, props와 state, Hooks, Context API)

프로젝트 진행에 필수!
내비게이션 기능 활용법

(Native Stack Navigator, Bottom Tab Navigator)

백엔드 지식이 적어도 OK!
Firebase 기본 사용법

(Authentication, Storage, Firestore)


내 손으로 만드는 프로젝트 📱

강의에서는 계산기, 투두 리스트(ToDo List), 여행 사진 공유 앱 3개의 프로젝트를 진행하며 리액트 내비게이션을 공부합니다.

프로젝트 코드는 깃허브에서 확인할 수 있습니다. 깃허브의 코드는 참고용으로, 코드가 잘 동작하지 않을 때 어떤 부분에 차이가 있는지 확인하는 용도로 사용해 보세요. 혹은, 변경된 내용이 많아 헷갈릴 때 확인 용도로 사용하는 것도 좋은 방법입니다.

1) 계산기

2) 투두리스트

  

3) 여행 사진 공유 앱


선수지식이 필요해요 🤓

1️⃣ 자바스크립트

이 강의는 자바스크립트 기초를 익힌 분들을 대상으로 제작되었습니다. 자바스크립트를 아직 잘 모르는 분이라면 강의 내용이 어렵게 느껴질 수 있습니다. 자바스크립트 공부가 필요한 분들은 아래 링크에서 '파트 1. 코어 자바스크립트' 내용을 공부하시는 것을 추천합니다. 

2️⃣ 리액트

리액트 네이티브는 리액트에 기반을 두고 제작되었습니다. 그렇기 때문에 리액트를 익힌 분들은 조금 더 빠르고 편하게 리액트 네이티브를 익힐 수 있습니다. 하지만, 리액트 선행 학습이 필수는 아닙니다.

강의에서 리액트 네이티브에 필요한 리액트 설명을 진행합니다. 단, 자세한 내용은 다루지 않기 때문에 리액트에 대해 공부하고 싶거나 자세한 내용이 궁금한 분들은 리액트 학습을 따로 진행하셔야 합니다. 


💬 예상 질문 Q&A 

Q. 왜 Expo를 사용하나요? 

처음 리액트 네이티브를 공부한다면 Expo를 이용하는 것을 추천합니다.

Expo를 사용하면 핸드폰을 이용해서 개발 및 테스트가 가능하고 환경 설정도 훨씬 쉽습니다. 그뿐만 아니라 윈도우 노트북 사용자도 아이폰을 이용해서 iOS 개발 및 테스트가 가능하다는 장점이 있습니다.

네이티브 모듈을 사용할 수 없다는 것과 몇몇 라이브러리를 사용할 수 없다는 단점이 있지만, 번거로운 부분을 신경 쓰지 않고 리액트 네이티브에 입문하고 공부하는 데 집중할 수 있다는 장점이 있습니다.

먼저 Expo로 리액트 네이티브를 익히고, 필요에 따라 CLI를 사용해보세요. 

Q. 선행 학습이 필요한가요?

앞에서 말씀드린 대로, 자바스크립트 기초 선행 학습은 필수입니다. 자바스크립트를 모르는 상태로 강의를 수강하면 이해할 수 없는 말만 하는 강의로 느껴질 수 있고, 코드를 보고 따라 치는 것 이상도 이하도 아니게 됩니다.

리액트는 강의에서 설명을 진행하므로 필수가 아닙니다. 다만, 리액트 네이티브를 공부하기 위해 필요한 내용만 진행하므로 리액트에 대한 학습을 원하거나 더 자세한 내용이 궁금한 분들은 리액트에 대한 별도 학습을 진행하시기 바랍니다. 

Q. 강의 수강을 위한 준비물이 필요한가요?

컴퓨터가 필요합니다. 그 외에 필요한 기기는 필수가 아닙니다. 가능하다면 iOS, Android 기기를 하나씩 준비하면 좋지만, 구매까지 하면서 준비할 필요는 없습니다. 현재 여러분이 사용하는 기기를 이용해서 테스트를 진행하세요. 그다음 강의를 모두 다 듣고, 추가로 필요하다고 판단되면 그때 구매하시면 됩니다.

테스트할 수 있는 기기가 없다고 하더라도, 가상 기기를 이용해서 개발 및 테스트가 가능하니 너무 걱정하지 마세요. 단, 윈도우 사용자는 iOS 기기가 없다면 iOS 테스트가 불가능합니다.


모르는 게 생겼나요? 💌

말도 안 되는 질문, 잘못된 질문은 없습니다. 모르니까 강의를 듣는 것이고, 안되니까 질문하는 것이죠. 처음부터 잘하는 사람은 없습니다. 잘 안되는 부분이 있거나, 궁금한 부분이 있다면 질문을 남겨주세요.

1️⃣ 검색을 통해 스스로 해결해 보세요

에러 메시지 혹은 문제가 되는 상황을 구글에서 검색해서 해결 방법을 찾아보세요. 스스로 해결하는 연습은 실력 향상에 많은 도움을 줍니다. 해결 방법을 찾지 못할 수도 있지만, 스스로 해결하려고 노력해보세요. 특히, 오타로 인해 발생하는 문제가 많으니, 차분하게 오타를 확인해보세요. 

2️⃣ 깃허브에 코드를 올리고 질문에 링크를 남겨주세요

질문에 에러 메시지만 올리면 정확한 원인을 확인하기 어렵습니다. 특정 코드만 복붙해서 올려도, 해당 코드 부분만으로 확인이 어렵거나, 원인이 해당 코드에 없을 수 있습니다. 
그래서 깃허브에 여러분이 작성한 코드를 올리고, 링크를 남겨주셔야 정확한 확인이 가능합니다. 추가로, 문제가 생기는 상황을 자세하게 알려주면 조금 더 정확한 확인이 가능하니 자세하게 질문을 작성해 주세요. 

3️⃣ 범위를 벗어난 질문에 대해서는 답변하지 않습니다

강의를 벗어난 질문엔 답변하지 않고 있습니다. 예를 들어, 개인적으로 진행하는 프로젝트, 강의와 다르게 진행하는 프로젝트와 같은 질문에는 답변하지 않고 있습니다. 강의에서 작성한 자바스크립트 코드나 로직에 대한 질문에는 답변하지만, 기본적으로 자바스크립트 강의가 아니기 때문에 범위를 벗어난 질문에 대해서는 답변하지 않습니다. 이 부분 양해 부탁드립니다. 


📘 핸즈온 리액트 네이티브

본 강의는 2022년 10월 출판 예정인 집필서 '핸즈온 리액트 네이티브(한빛미디어)'를 바탕으로 진행되는 강의입니다. 
강의 내용과 책의 내용이 거의 같으니, 강의 수강을 위해 책을 구매할 필요는 없습니다. 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 네이티브에 관심이 있는 분들
리액트 네이티브를 처음 시작하는 분들
모바일 앱을 만들어 보고 싶은 분들
자바스크립트로 웹이 아닌 다른 걸 해보고 싶은 분들
📚
선수 지식,
필요할까요?
JavaScript 기초

안녕하세요
김범준 입니다.
김범준의 썸네일

비개발자 혹은 프로그래밍 초급자를 대상으로 꾸준히 개발 교육을 진행해 왔습니다. 

제 경험과 지식이 여러분에게 도움이 되길 바랍니다.

감사합니다 :)

커리큘럼 총 160 개 ˙ 23시간 50분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 계산기 만들기 - 1
2.1 :: 프로젝트 준비하기 미리보기 07:49
2.2 :: 컴포넌트와 스타일 13:49
추가 설명 :: 논리 연산자 05:46
2.3 :: Button 컴포넌트와 props 09:34
2.4 :: 커스텀 컴포넌트 만들기 07:15
추가 설명 :: 객체 구조 분해 03:02
2.5 :: propTypes와 defaultProps 05:11
2.6 :: 터치 이벤트 11:03
2.7 :: 계산기 버튼 만들기 17:38
2.8 :: 상태(state)와 리렌더링 09:45
추가 설명 :: 배열 구조 분해 05:19
2.9 :: useState Hook으로 상태 관리하기 11:13
섹션 3. 계산기 만들기 - 2
3.1 :: 화면 분할과 flex 11:24
3.2 :: 정렬 12:11
3.3 :: StatusBar 컴포넌트 04:32
3.4 :: 버튼 영역 05:23
3.5 :: 버튼 크기와 구분선 09:40
3.6 :: 버튼 배치하기 07:04
3.7 :: 숫자 버튼 배치하기 08:49
추가설명 :: Array.map() 02:55
3.8 :: 숫자 버튼 클릭하기 05:11
3.9 :: 연산 버튼 클릭하기 09:47
추가설명 :: Array.at(), Array.pop(), nullish 병합 연산자, 전개 구문 06:55
3.10 :: 계산 함수 만들기 05:36
섹션 4. 투두리스트 만들기 - 1
4.1 :: 프로젝트 준비하기 미리보기 06:30
4.2 :: 로그인 화면 만들기 06:02
4.3 :: 선명한 이미지 보여주기 06:32
4.4 :: 이미지 크기 조절하기 04:08
4.5 :: Input 컴포넌트 만들기 09:11
4.6 :: TextInput 컴포넌트의 다양한 props 19:17
4.7 :: 키보드 문제 해결하기 19:03
4.8 :: 상태 변수와 스타일 17:03
4.9 :: 벡터 아이콘 08:34
추가설명 :: IIFE와 switch 03:19
4.10 :: useRef Hook으로 입력칸 이동하기 08:55
4.11 :: Button 컴포넌트 만들기 11:03
4.12 :: useEffect Hook으로 원하는 작업 실행하기 06:23
4.13 :: 로그인 기능 만들기 09:25
추가설명 :: 동기와 비동기, Promise와 async-await 04:27
4.14 :: Alert으로 결과 알려주기 06:29
섹션 5. 투두리스트 만들기 - 2
5.1 :: 리액트 내비게이션 05:15
5.2 :: 네이티브 스택 내비게이터 06:22
5.3 :: 화면 이동하기 11:57
5.4 :: 화면 옵션 설정하기 08:01
5.5 :: 헤더 타이틀 11:46
5.6 :: 헤더 왼쪽 버튼 15:32
5.7 :: 헤더 오른쪽 버튼 07:37
5.8 :: 화면이 가려지는 문제 해결하기 07:57
5.9 :: 로그인 여부에 따라 화면 관리하기 11:15
5.10 :: 글로벌 상태 관리와 Context API 10:45
5.11 :: useContext Hook 사용하기 13:18
5.12 :: 로그아웃 버튼 만들기 10:34
5.13 :: 코드 정리와 유용한 기능들 13:09
섹션 6. 투두리스트 만들기 - 3
6.1 :: FlatList 컴포넌트 사용하기 09:50
6.2 :: windowSize와 React.memo 10:15
6.3 :: FlatList 컴포넌트 디자인하기 16:00
6.4 :: 빈 목록 화면 만들기 07:35
6.5 :: FAB 버튼 만들기 11:36
6.6 :: 키보드 높이와 useEffect 정리함수 14:45
6.7 :: 그림자 만들기 04:54
6.8 :: 애니메이션 사용하기 05:09
6.9 :: Animated.timing 적용하기 05:18
6.10 :: Animated.spring 적용하기 10:09
6.11 :: 추가 기능 만들기 08:36
6.12 :: 스크롤 위치에 따라 FAB 숨기기 13:54
6.13 :: 데이터 저장하고 불러오기 10:13
6.14 :: 삭제 기능과 완료 기능 만들기 06:17
6.15 :: 프로젝트 돌아보기 04:40
섹션 7. 여행 사진 공유 앱 만들기 - 1
7.1 :: 프로젝트 준비하기 미리보기 05:52 7.2 :: 앱 아이콘과 로딩 화면 변경하기 미리보기 05:33
7.3 :: AuthStack 컴포넌트 만들기 07:30
7.4 :: Input 컴포넌트 만들기 17:24
7.5 :: 상태에 따른 색 변경과 style props 10:58
추가설명 :: 옵셔널 체이닝 02:53
7.6 :: Button 컴포넌트 만들기 08:17
7.7 :: SafeInputView 컴포넌트 만들기 03:14
7.8 :: 로그인 화면 만들기 07:07
7.9 :: TextButton 컴포넌트 만들기 05:35
7.10 :: HR 컴포넌트 만들기 06:59
7.11 :: 배경 이미지 사용하기 05:51
7.12 :: 회원가입 화면 만들기 06:06
7.13 :: 화면 넘어가는 문제 해결하기 06:48
7.14 :: bounces와 keyboardShouldPersistTaps 05:03
7.15 :: 상태 변수와 컴포넌트 언마운트 04:15
7.16 :: useFocusEffect와 useCallback 07:55
7.17 :: useReducer 알아보기 10:20
7.18 :: action과 reducer 07:18
7.19 :: useReducer 적용하기 17:11
7.20 :: Assets 캐싱하기 12:57
섹션 8. 여행 사진 공유 앱 만들기 - 2
8.1 :: Firebase 사용하기 07:36
8.2 :: 로그인 기능 만들기 07:16
8.3 :: LogBox로 경고 메시지 무시하기 03:06
8.4 :: 로그인 에러 처리하기 04:53
8.5 :: 로그인 후 화면 이동 만들기 09:53
8.6 :: 회원가입 기능 만들기 07:02
8.7 :: 상태 업데이트와 컴포넌트 언마운트 03:56
8.8 :: 로그인 유지하기 10:11
8.9 :: 탭 내비게이터 사용하기 06:03
8.10 :: 바텀 탭 내비게이터 옵션과 아이콘 12:11
8.11 :: 탭 내비게이터를 화면으로 사용하기 08:00
8.12 :: 커스텀 탭 버튼 만들기 06:07
8.13 :: 홈 화면 만들기 12:13
8.14 :: 로그아웃과 사용자 기본 정보 08:52
8.15 :: Storage와 보안 규칙 07:15
8.16 :: 프로필 화면 만들기 15:02
8.17 :: 서버 이미지 캐싱하기 15:19
8.18 :: Modal 컴포넌트와 Button 컴포넌트 준비 14:38
8.19 :: DangerAlert 컴포넌트 꾸미기 13:41
8.20 :: 코드 정리 05:01
섹션 9. 여행 사진 공유 앱 만들기 - 3
9.1 :: 프로필 수정 화면 만들기 12:09
9.2 :: 헤더 왼쪽 버튼 만들기 06:57
9.3 :: 헤더 오른쪽 버튼 만들기 06:45
9.4 :: 닉네임 변경하기 11:03
9.5 :: 이미지 피커 화면 만들기 09:35
9.6 :: 사진 접근 권한 요청하기 08:47
9.7 :: 목록 받아오기 기능 확인하기 04:04
9.8 :: 사진 목록 받아오기 10:07
9.9 :: 다음 페이지 불러오기 10:31
9.10 :: 목록 새로고침하기 04:48
9.11 :: 사진 선택하기 10:39
9.12 :: 이전 화면으로 사진 전달하기 11:38
9.13 :: 컴포넌트 분리하기 16:44
9.14 :: file 경로 받아오기 06:25
9.15 :: 사진 업로드하기 13:27
9.16 :: 보안 규칙 수정하기 07:43
섹션 10. 여행 사진 공유 앱 만들기 - 4
10.1 :: 사진 선택 화면 만들기 13:12
10.2 :: 선택한 사진 슬라이드로 보여주기 07:55
10.3 :: Swiper 컴포넌트 수정하기 08:10
10.4 :: 글 작성 화면 만들기 12:04
10.5 :: 텍스트 입력 옵션 설정과 화면 이동 07:46
10.6 :: Google Places API 사용하기 04:49
10.7 :: GooglePlacesAutocomplete 컴포넌트로 위치 검색하기 10:07
10.8 :: 옵션 수정과 컴포넌트 분리하기 09:09
10.9 :: Firestore 사용하기 11:26
10.10 :: 글 저장하기 11:46
10.11 :: 글 목록 받아오기 07:03
10.12 :: PostItem 컴포넌트 만들기 14:02
10.13 :: PostList 컴포넌트 만들기 06:06
10.14 :: 다음 페이지 받아오기와 새로고침 12:06
10.15 :: usePosts Hook으로 로직 분리하기 08:08
10.16 :: EventEmitter로 이벤트 발생시키기 07:37
10.17 :: 내가 쓴 글 목록과 Firestore 색인 13:06
10.18 :: 액션 시트로 수정 삭제 버튼 만들기 11:34
10.19 :: 삭제 기능 만들기 10:46
10.20 :: 수정 기능 만들기 14:47
10.21 :: 맵 화면 만들기 07:10
10.22 :: 지도에 위치 표시하기 08:23
10.23 :: 위치로 글 목록 받아오기 16:17
추가설명 :: Array.flat() 03:19
10.24 :: 프로젝트 돌아보기 03:24
섹션 11. 마치며
11.1 :: 마치며 11:41
강의 게시일 : 2022년 10월 06일 (마지막 업데이트일 : 2022년 10월 15일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다.
5
5개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
23120716341 thumbnail
5
좋은 강의 감사합니다!
2022-12-13
지식공유자 김범준
안녕하세요 Luke Lee 님, 좋은 수강평 감사합니다 :) 즐거운 하루 되세요 감사합니다.
2022-12-14
yoongdoo0819 thumbnail
5
꼼꼼하게 설명해주셔서 좋아요 ~ 좋은 강의 감사합니다! :)
2023-01-20
지식공유자 김범준
안녕하세요 yoongdoo0819 님, 좋은 수강평 감사합니다 :) 즐거운 하루 되세요 감사합니다.
2023-01-20
ddf thumbnail
5
굿굿굿굿굿굿
2023-06-26
지식공유자 김범준
안녕하세요 ddf님, 좋은 수강평 감사합니다. 강의가 도움이 되었다니 다행이네요 :) 즐거운 하루 되세요, 감사합니다 :)
2023-06-28
Lucy Kim thumbnail
5
이전 강의도 들은 상태라 처음에 들을지 말지 고민했는데 강의가 긴 만큼 진짜 자세하게 설명해주세요!! 프로젝트를 만들면서 진행해서 더 이해가 잘 되고 좋았습니다. 좋은 강의 감사합니다~!!
2022-12-09
지식공유자 김범준
안녕하세요 Lucy Kim님, 좋은 수강평 감사합니다 :) 즐거운 하루 되세요. 감사합니다.
2022-12-11
Gichul Roh thumbnail
5
전체 1차 완강했습니다. 겨울에 비슷한 RN기반 노트앱 만들어볼까 해서 수강했는데, 생각보다 강의 길군요. 타 플랫폼 강의에서도 느꼈지만, 리액트 시니어 개발자급들은 확실히 코드 자체를 강의하면서도 깔끔하게 짜네요. 버튼, 모달 등 UI 컴포넌트의 색상 적용하는 것부터. RN은 일반 리액트앱보다 UX컨트롤 하는게 많긴 하네요. 특히, 각 화면간의 UX플로우처리, 인증처리, 유효성처리, 입력시 가상키보드 제어 등이 포함된 투두리스트의 로그인 처리 강의는 세상에서 가장 긴 로그인 강의 (?) 같아 보입니다. 전체적으로 두세번 강의를 다시 봐야겠습니다. 강의는 전체적으로 만족스러우나, 말씀하실 때 약간의 인토네이션을 넣으면 더욱 괜찮을 거 같습니다 ^^
2022-11-24
지식공유자 김범준
안녕하세요 Gichul Roh님, 좋은 수강평 감사합니다 :) 강의가 도움이 되셨다니 다행이네요 그리고, 좋은 피드백도 감사드립니다 :) 날씨가 많이 쌀쌀해졌습니다. 감기 조심하시고, 즐거운 하루 되시기 바랍니다. 감사합니다.
2022-11-26