BEST

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

배달앱 클론코딩 [with React Native] 대시보드

(4.9) 37개의 수강평 ∙ 1191명의 수강생

조현영

React Native

71,500원

월 14,300원

5개월 할부 시

지식공유자: 조현영

총 63개 수업 (13시간 47분)

수강기한: 무제한

수료증: 발급

난이도: --

지식공유자 답변이 제공되는 강의입니다

폴더에 추가 948

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

리액트 네이티브로 라이더용 배달앱을 만들어봅니다. 6년간 리액트 네이티브로 5개 이상의 앱을 만들고, 카카오 모빌리티에 매각한 개발자의 강의입니다.

✍️
이런 걸
배워요!

리액트 네이티브

리액트 내비게이션

토큰 인증

네이버 지도

네이티브 모듈

웹소켓

푸쉬 알림

코드푸쉬

앱 출시

"믿고 듣는" 제로초의
모바일 앱 개발 강의! 🤳

이 강의에서는?

리액트 네이티브로 라이더용 배달 앱을 따라 만들며
환경세팅, 개발, 배포까지 전부 배워봅시다!
(리액트를 아신다면 누구든 앱을 만들 수 있어요.)

강의 기획 배경 🖋️

리액트 네이티브를 통해 현재 회사의 앱을 만들어서 안정적으로 운영하고, 카카오 모빌리티에 회사 매각도 가능했기 때문에 저에게는 매우 고마운 기술입니다.
하지만 시중에 판매 중인 리액트 네이티브 강의들을 보니 대부분 엑스포를 쓰고 있거나, 너무 간단한 앱이라 네이티브단을 다루지 않는 강좌들이 많았습니다. (JS만 알면 네이티브를 몰라도 앱을 만들 수 있다는 거짓된 정보도 많았고요.)
그래서 저만의 스타일로, 잘못된 오해를 바로잡고 첫 프로젝트 설정부터 출시까지 겪는 일들을 현실적으로 알려드리고자 강의를 만들었습니다.

Who is ZeroCho?

_{제로초 블로그 및
유튜브 채널 운영}

_{웹개발 베스트셀러
<Node.js 교과서> 저자}

_{주식회사 오늘의픽업
CTO}

📌 모르는게 있다면, 질문해주세요!
24시간 이내에 빠르게 답변해드립니다.

강의 특징 📚

리액트 네이티브가 현실적으로 어떠한 장단점이 있는 정확하게 알려드립니다.
6년간 리액트 네이트브로 앱을 만들면서 제로초가 겪었던 고민 & 노하우가 함축되어있습니다.
강의 교안, 참고 자료, 소스 코드가 전부! 준비되어있습니다.
제로초 강좌는 Q&A 답변이 엄청 빠른 것 아시죠?
거기다 추가로! 수강생분들의 질문이 빈번한 내용이나 추가로 알고싶은 내용이 있다면 보너스 강좌로 제작해서 올려드립니다. Q&A에 언제든지 의견 남겨주세요!

누가 이 강의를 들으면 좋은가요? ✋

안드로이드와 iOS를
다 배우기엔 부담스러우신 분

타 플랫폼으로의
기술 스택 확장을 원하시는 분

리액트 네이티브 하나로
앱 출시까지 하고싶으신 분

강의를 듣고난 후의 내 모습 💭

리액트 네이티브를 통한 앱 제작
앱스토어 및 플레이스토어 배포
리액트 네이티브와 네이티브단 연동

강의내용 맛보기 📣

1. 로그인, 로그아웃

2. 스플래시 스크린, 코드푸쉬 적용

3. 일련의 배송 과정
(주문 수락, 내 위치 확인, 배송 완료 후 이미지 업로드, 수익금 확인)

4. TMap 연동

예상 질문 답변 ❔❕

Q. 리액트를 알아야하나요?

네, 리액트 네이티브도 리액트입니다. 잘 모르시는 분들은 제 무료 강좌를 먼저 보고 오시면 충분히 이해하실 수 있습니다. 추가적으로, CSS의 Flex 지식은 어느 정도 있으시면 좋습니다.

Q. 타입스크립트로 꼭 해야하나요?

강좌 중 어떤 부분이 타입스크립트 코드인지 정확하게 알려드리기 때문에 원하신다면 타입스크립트를 빼고 자바스크립트로 전환해서 학습하실 수 있습니다.
그러나 자바스크립트 생태계는 이제 거의 타입스크립트로 전환되었다고 보셔도 무방하고, 대기업들은 신규 개발을 할 때 거의 타입스크립트를 사용한다는 점은 참고해주세요!

Q. 리액트랑 리액트 네이티브랑 비슷한가요?

기본적인 원리 (state, props, 라이프사이클, 훅 등)는 비슷합니다. 하지만 div, input 같은 컴포넌트 대신 네이티브에 대응되는 컴포넌트가 따로 있습니다. 화면 그리는 법은 강좌에서 따로 알려드립니다.

Q. 요즘 플러터가 인기많던데 꼭 리액트 네이티브인 이유가 있나요?

플러터 대신 리액트 네이티브를 사용한 이유인 코드푸쉬 (출시없이 실시간 소스 변경)도 함께 배우니, 강의에서 확인해주세요!

Q. 맥이나 아이폰이 필요한가요?

안드로이드 쪽은 윈도우로도 충분하고 강좌도 윈도우로 진행됩니다. 다만 아이폰 앱 개발을 하려면 윈도우에서는 매우 느리고 라이선스 문제도 있기 때문에 맥이 필요합니다. 아이폰은 필수는 아닌지만 출시 테스트를 위해서 있으면 더 좋습니다.

기타 🛠️

포트폴리오 / 개인 영상
오늘의픽업 라이더스 안드로이드 iOS
선수 과목
https://www.inflearn.com/course/web-game-react
소스코드 및 강의교안
https://github.com/zerocho/food-delivery-app

🎓
이런 분들께
추천드려요!

리액트 네이티브로 앱개발을 하고 싶으신 분

리액트를 통해 다른 플랫폼으로 기술 스택을 넓히고 싶은 분

📚
선수 지식,
필요한가요?

리액트

자바스크립트

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

– Node.js교과서, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중
– 오늘의픽업 CTO(카카오모빌리티에 엑싯)

– 카카오모빌리티 개발파트장

이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 리액트 네이티브 시작! 15 강 ∙ 3시간 18분

리액트 네이티브 시작하기 미리보기 11:29 필수시청[에러질문법] 미리보기 15:53 윈도우-안드로이드 환경 설정하기 미리보기 12:27

[맥 전용]환경 설정하기 1편 09:57

[맥 전용]환경 설정하기 2편 08:07

프로젝트 시작하기 10:32

기본 프로젝트 구조와 index.js 08:51

리액트 네이티브 기본 컴포넌트 분석 16:36

데브메뉴와 Flipper 14:00

앱 이름 바꾸기, 강좌 폴더 구조 잡기 08:15

리액트 내비게이션 사용해보기 14:06

flex와 요소 배치 12:39

리액트 내비게이션 화면 전환하기 10:52

라우트 params와 헤더 옵션들 12:18

보너스: relative, absolute로 모달 그리기 32:21

섹션 1. 리액트 내비게이션 7 강 ∙ 1시간 43분

앱 라우터 구성하기 14:16

스크린과 중첩 라우팅 14:12

로그인 화면 만들기 17:22

TextInput 사용하기 17:24

회원가입과 Keyboard, KeyboardAvoidingView 11:10

keyboard-aware-scrollview와 커스텀 타이핑 10:58

리덕스 연결하기 18:09

섹션 2. 서버 API와 연동하기 9 강 ∙ 1시간 51분

axios로 서버에 요청보내기 11:37

로딩창 만들기(ActivityIndicator) 13:34

서버 주소 react-native-config로 관리하기 11:27

react-native-config 문제 해결하기 12:56

Redux, Config, EncryptedStorage, AsyncStorage의 차이 07:47

리덕스 소개 15:44

accessToken과 refreshToken 13:02

웹소켓 연결하기 10:50

실시간 데이터 받기, 로그아웃(Bearer 토큰) 14:08

섹션 3. 주문 수락, 거절, 완료 6 강 ∙ 1시간 14분

앱 껐다 켜도 로그인 유지하기 미리보기 10:22

주문 리덕스에 넣기 11:44

수익금 확인하기 07:10

주문 목록 화면 만들기(FlatList) 12:12

주문 수락, 거절 버튼 만들기 17:46

토큰 재발급하기(axios interceptor) 15:33

섹션 4. 네이버맵에 내 위치 표시하기 6 강 ∙ 1시간 23분

네이버맵 연동하기 21:06

[맥 전용]네이버맵 세팅 04:25

위치정보, 카메라 권한 얻기(react-native-permissions) 21:22

내 위치 가져오기(geolocation) 12:45

이미지 선택해서 리사이징하기 13:59

RN에서 폼데이터 사용해서 이미지 업로드하기 09:35

섹션 5. 네이티브 모듈 수정하기 9 강 ∙ 2시간 10분

네이티브 모듈 수정하기 13:58

patch-package 수행하기 16:15

[맥 전용]섹션 5에 필요한 작업들 총정리 14:11

TMap 연동하기(네이티브 모듈) 31:49

스플래시 스크린(react-native-splash-screen) 07:39

앱 아이콘 설정하기 미리보기 06:06

벡터 아이콘(react-native-vector-icons) 08:07

이미지 그리드 만들기(react-native-fast-image) 19:51

보너스: sentry, react-native-upgrade-helper 12:51

섹션 6. 푸쉬알림, 코드푸쉬, 배포 11 강 ∙ 2시간 5분

[맥 전용]애플 개발자 계정 만들기 08:37

FCM 설정하기 11:56

푸쉬 알림 코드 작성하기 11:34

실제 기기 연결하기 10:29

푸쉬 메시지 오는 것 확인! 06:44

[맥 전용]FCM, APNS 설정하기 13:57

코드푸쉬 설정하기 24:10

[맥 전용]코드푸쉬 설정하기 07:12

[맥 전용]아이폰 앱 배포 과정 10:07

[맥 전용]fastlane 설정해서 버전 관리 07:03

안드로이드 앱 배포과정 14:03

강의 게시일 : 2022년 02월 11일 (마지막 업데이트일 : 2022년 10월 19일)

수강생분들이 직접 작성하신 수강평입니다.

4.9

37개의 수강평

5점

4점

3점

2점

1점

VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

강의 방식은 코드리뷰 입니다. 앱 만들기 파트부터는 폴더구조나 화면구성에서 같이 코딩하긴 하지만, 기본적인 틀은 강사님이 짜신 코드를 켜놓고 같이 하나하나 읽으면서 흐름을 파악하는 방식으로, 자바스크립트랑 리액트를 어느정도 따라갈 수 있는 수준이 되었을 때 이해할만 합니다. 강사님보다는 직장선배같은 느낌이여서 좋았습니다. 설명하실 땐 책에서도 자세히 설명하지 않아 그냥 외웠던 걸 심도있게 설명하시거나, 반대로 굳이 하나하나 곱씹으면서 할필요는 없는 것(예를들면 export default, useState, 삼항연산자 등)들은 과감하게 지나가서 입문자보단 확실히 중급자한테 어울린다고 볼 수 있었습니다. 저는 실무 하다가 필요에 의해 강의를 수강하게 되었는데 저랑 너무 잘 맞습니다!!

2022-02-17

React Native 독학 3개월차 취준생입니다. 학원에 몇 백씩 내면서 공부하는 것보다 혼자 구글링하면서 하나씩 배워나가는게 가치있다고 느껴 공부를 하다가 일정 선 이상으로는 도약하기가 힘들어서 이 강좌를 구매하게 되었습니다. 실무자에게만 들을 수 있는 값진 지식을 받아가는 것 같아서 너무나 보람찬 시간이었습니다. 감사합니다 : )

2022-03-25

하나의 앱을 같이 만들어보는 올인원 강의 입니다. 실무와 앱 출시를 진짜 해보려는 분들에게 보석같은 강의일 것 같습니다. 수박 겉핥기 식으로 대충 쉽게 만들어 보는게 아니라, 실제 RN으로 앱을 출시해본 경험을 바탕으로 RN으로 앱을 출시하면 겪는 고충들을 팁으로 녹여내어 수업 내내 집중하며 듣게 됩니다. 실무에 적용이 필요하신 분들께 강추합니다. 난이도는 다소 있을 수 있지만, 다 듣고 나면 RN 으로 앱 출시할 때 어떤 부분들이 필요한 지 확실히 알 수 있게 됩니다. 강의 감사합니다! 그리고 저처럼 의지가 약하신 분들은 제로초님이 운영하시는 타임어택 강추 드립니다. 매주 진도 목표와 같이 수강하시는 분들의 피드백을 보며 게을러지는 것을 방지할 수 있습니다ㅎㅎ

2023-03-11

(수정)이전에 제대로 강의 듣지 않고 수강평을 남겼었네요, 역시 명불허전 제로초님입니다. 저의 경우 타입스크립트는 전혀 모르는 상태로 진행했지만 타입스크립트 관련 상세하게 알려주시고 깃허브에 메뉴얼까지 있어 수월했습니다. m1 사용하시는 분들 걱정말고 강사님 깃헙에 m1 설치방법 있으니 도전해보시면 됩니다. 덕분에 현업에서 바로 적용할 수 있게 되었습니다 감사합니다

2023-02-08

꿀팁 많이 알고 갑니다. 이해하기도 쉽고 도움이 확실히 됩니다. 한가지 아쉬운거는 실제 실무에서 쓰는 것처럼 클린한 코드를 유지하기 위한 꿀팁도 얻고 싶었으나 생각보다 중복된 코드, 중복된 컴포넌트, 같은 기능을 하는 함수가 많았음.. 그런 부분을 어떻게하면 효과적으로 정리하는지 실무에서 쓰는 것처럼 코드를 볼 수 있을 줄 알았음 그게 아쉽네 타입 정의도 더 개빡세게 할 수 있을텐데.. 아쉬움 타입 스크립트 실무에서 쓰는 것 처럼 개빡세게 쓰는 것도 보고싶었는데 말이죵

2023-01-05

지식공유자 조현영

"사실 실무에서 코딩할 때는 시간이 없고 귀찮아서 이 강좌처럼 중복된 코드가 많습니다. 오히려 더 실무를 반영한 것이죠!"... 는 농담이고요. 시간 될 때 한 번 수정해보도록 하겠습니다. 감사합니다 ㅎㅎ

2023-01-05 3

anthony

해당 댓글에 공감합니다. 지금 강의 구성도 너무 좋은데요. 리팩토링 섹션이 별도로 존재하여 전체 리팩토링은 아니더라도 하나를 제대로 리팩토링하는 강좌가 있으면 정말 완벽한 강의가 될것 같습니다 !

2023-02-27 0