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

처음 배우는 리액트 네이티브 대시보드

(4.8)
41개의 수강평 ∙  792명의 수강생
77,000원

월 15,400원

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

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

자바스크립트를 이용해서 모바일 앱을 만들 수 있는, 리액트 네이티브 입문자를 위한 강의입니다. 리액트 네이티브를 개발할때 필요한 기초 지식을 익히고, 간단한 프로젝트를 진행합니다.

✍️
이런 걸
배워요!
리액트 네이티브
리액트 (Components, Hooks, Context API)
styled-components
React Navigation
iOS/Android 앱 배포

자바스크립트로 만드는 모바일 앱! 📱
React Native의 기초를 탄탄히 익혀보세요.

📋 강의 소개 

모바일 앱을 만들기 위해서는 SwiftKotlin같이 각 플랫폼을 개발하기 위한 언어를 따로 공부해야 했습니다. 하지만, 리액트 네이티브를 이용하면 자바스크립트를 이용해서 iOS, Android 앱을 개발할 수 있습니다. 


[ React Native Showcase ]

리액트 네이티브(React Native)를 이용하는 서비스는 상당히 많이 있습니다. 우리에게 익숙한 페이스북, 인스타그램 뿐만 아니라, 쇼피파이(Shopify)나 세일즈포스(Salesforce) 같은 회사들도 있습니다. 

이 강의에서는 자바스크립트를 알고 있는 분들을 대상으로, 리액트 네이티브 기초를 익힙니다. 
그 과정에서 다음과 같은 내용을 다룹니다. 

  • Expo를 사용한 리액트 네이티브
  • React Components
  • React Hooks
  • React Context API
  • styled-components
  • React Navigation
  • iOS, Android 앱 배포

이 강의를 모두 마치면, 리액트 네이티브의 기초를 익힐 뿐만 아니라, 리액트 네이티브를 사용하기 위해 필요한 리액트(React) 지식도 함께 익히게 됩니다. 마지막에는 iOS와 Android 앱을 배포하는 방법과 자바스크립트만 수정해서 배포된 앱을 수정하는 방법을 알아봅니다. 

여러분도 이 강의를 통해 리액트 네이티브에 입문하고, 여러분의 서비스를 리액트 네이티브로 만들어 보세요~!

📱 프로젝트

강의를 통해 배운 내용을 이용해서, 간단한 프로젝트를 두 번 진행합니다. 
프로젝트 전체 소스코드는 깃헙에서 확인이 가능합니다. (Link)

TODO App

Chat App

📗 처음 배우는 리액트 네이티브

처음 배우는 리액트 네이티브(한빛미디어)를 바탕으로 진행되는 강의입니다. 
리액트 네이티브를 처음 접하는 입문자를 대상으로 기초적인 내용을 다룹니다. 
TODO 앱과 채팅 앱을 만들어 보며 강의를 통해 익힌 내용을 활용해보고, 그 과정에서 필요한 몇몇 라이브러리(ex. styled-component, React Navigation 등등)의 사용방법을 함께 다룹니다. 

❓ 강의 관련 예상 질문

Q-1. 자바스크립트를 얼마나 알고 있어야 하나요? ("자바스크립트의 기초" 기준이 뭔가요?) 

A-1. 자바스크립트를 사용할 수 있고, 코드를 이해할 수 있으면 됩니다. 조금 더 자세한 내용은 섹션 0의 두번째 강의 "강의 수강을 위한 준비" 영상에서 확인하시기 바랍니다. 혹시 강의 수강을 하기에 조금 부족하다고 느껴진다면, 자바스크립트를 조금 더 공부하고 진행하시는 것을 권장합니다. 

Q-2. 리액트를 알아야 시작할 수 있나요?

A-2. 리액트를 몰라도 됩니다. 저도 처음 리액트 네이티브를 시작할때 리액트를 모른 상태에서 시작했습니다. 강의에서 리액트 네이티브에서 필요한 리액트 내용도 함께 설명하니, 자바스크립트만 알고 있다면 충분히 진행이 가능합니다. 

Q-3. 왜 Expo를 사용하나요?

A-3. Expo를 사용하면 사용중인 핸드폰을 이용해서 개발 및 테스트가 가능합니다. 사용자의 환경에 구애받지 않고, 가상 기기를 실행하지 않더라도 진행이 가능하다는 부분과, 몇몇 라이브러리를 사용할때, 보다 쉽게 사용할 수 있다는 점에서 리액트 네이티브 입문을 위해 가장 좋은 선택이라고 생각합니다. 

학습 환경 안내

  • 본 강의에서는 VSCode를 사용합니다. 사용하고 계신 익숙한 에디터를 사용해도 수강할 수 있습니다.

이런 분들께 추천드려요!

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

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

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

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

감사합니다 :)

커리큘럼 총 75 개 ˙ 11시간의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. 리액트 네이티브 시작하기
리액트 네이티브란 05:23
프로젝트 생성 06:17
Expo 프로젝트 실행 07:34
섹션 3. 컴포넌트
JSX 05:49
내장 컴포넌트 06:39
커스텀 컴포넌트 10:54
props 13:24
state 06:06
이벤트 06:54
섹션 4. 스타일링
스타일링 10:28
flexbox 08:46
정렬 04:30
그림자 08:55
styled-components 12:12
styled-components 활용 17:39
섹션 5. To-Do App
우리가 만들 앱 미리보기 02:10
프로젝트 준비 05:25
Title 만들기 05:23
Input 컴포넌트 만들기 - 디자인 06:40
Input 컴포넌트 만들기 - 상세 설정 08:59
IconButton 컴포넌트 만들기 11:23
Task 컴포넌트 만들기 08:15
기능 구현하기 - 추가 06:31
기능 구현하기 - 삭제 05:12
기능 구현하기 - 완료 08:33
기능 구현하기 - 수정 08:16
데이터 저장하기 11:19
로딩화면과 아이콘 07:49
축하합니다 !!
섹션 6. Hooks
Hooks 란 02:03
useState 11:56
useEffect 11:17
useRef 04:31
커스텀 Hooks 14:42
섹션 7. Context API
Context API 란 02:39
Context API 사용하기 18:20
섹션 8. React Navigation
React Navigation 03:51
Stack Navigation 13:33
Stack Navigation - 화면 이동 09:17
Stack Navigation - 헤더 수정 11:58
Stack Navigation - 버튼 수정 08:48
Tab Navigation 07:41
Tab Navigation - 탭 바 수정 08:43
섹션 9. Chat App - Part 1
우리가 만들 앱 미리보기 02:27
프로젝트 준비 10:24
인증 화면 11:07
로그인 화면 - Button 컴포넌트 09:06
로그인 화면 - Image 컴포넌트 07:29
로그인 화면 - Input 컴포넌트 16:05
회원가입 화면 10:46
회원가입 화면 - 사진 11:24
기능 구현 - 로그인 18:07
기능 구현 - 회원가입 17:54
인증과 화면 전환 18:15
섹션 10. Chat App - Part 2
인증 후 화면 - 메인 화면 12:46
탭 버튼과 헤더 타이틀 07:08
프로필 화면 13:07
채널 생성 화면 18:52
채널 목록 화면 - FlatList 컴포넌트 14:41
채널 목록 화면 08:02
채널 화면 20:43
축하합니다 !!!
섹션 11. 배포하기
프로젝트 빌드 09:44
iOS 배포 11:40
Android 배포 06:41
앱 업데이트 02:19
섹션 12. 마치며
마치며...
강의 게시일 : 2021년 03월 30일 (마지막 업데이트일 : 2021년 03월 30일)
수강평 총 41개
수강생분들이 직접 작성하신 수강평입니다.
4.8
41개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
이종엽 thumbnail
5
강의가 참 좋습니다. 공부하는데 정말 많은 도움이 되었습니다. 다만....프로젝트에 대한 최종 소스는 제공되지 않나요?
2021-05-03
지식공유자 김범준
안녕하세요, 이종엽님, 도움이 되었다니 다행이네요 :) 좋은 평가 감사합니다 :) 프로젝트 전체 소스는 아래 링크에 있습니다. https://github.com/Alchemist85K/inflearn-react-native 제가 강의 소개에 링크를 올렸다고 생각했는데 지금 확인하니 링크가 안보이네요 ;;;; 강의 수강에 불편을 드린것 같아 죄송합니다. 좋은 평가 다시 한 번 감사드립니다. 즐거운 하루 되세요 감사합니다
2021-05-03
Schidshow MilkyWay thumbnail
5
잘 보고 있습니다. 상당히 강의가 스피디해서 짧은시간에 많은 정보로 꽉 채워진 느낌을 받아 저에게 잘 맞습니다. 끝까지 잘 보고 많이 배워가도록 하겠습니다.!
2021-04-20
지식공유자 김범준
Schidshow MilkyWay님, 수강평 감사합니다 :) 강의가 잘 맞는다니 다행이네요 :) 진행하면서 궁금한점은 언제든지 질문 올려주세요~ 항상 건강하시고, 즐거운 하루 보내세요~ 감사합니다
2021-04-20
이태광 thumbnail
5
제가 15년차 자바 개발자 입니다. 이번에 사람들 끼리 모여서 앱을 구상중인데, 이전에 리액트 책도 좀 보고 강의도 보았는데, 리액트 네이티브에 대해 잘 몰라서 이 강의를 듣게 되었는데요. 아주 많은 도움이 되었습니다. 앱을 하나 구성해서 만드는데 크게 문제가 없을거 같습니다. 감사합니다. 김범준 강사님.. 이런 강의 많이 올려 주세요. ㅎㅎㅎ
2021-05-01
지식공유자 김범준
안녕하세요 이태광님, 강의가 도움이 되었다니 다행이네요 :) 기획 중인 앱도 성공적으로 완성하길 바랍니다~ 즐거운 하루 되세요 감사합니다 :)
2021-05-01
강유정 thumbnail
5
좋은 소식 감사합니다
2021-05-18
지식공유자 김범준
안녕하세요 강유정님, 수강평 강사합니다 :) 항상 건강하시고, 즐거운 하루 보내세요~ 감사합니다
2021-05-19
Lucy Kim thumbnail
5
리액트 네이티브를 어떻게 시작해야 할지 감이 안잡혀서... 여러 가지 책이나 영상을 찾아보다가 이 강의를 듣기 시작했는데요 예제와 함께 쉽게 설명해주셔서 많은 도움이 되었습니다. 특히 중간에 프로젝트를 통해 배운 내용을 실제로 적용해보는게 저에게는 이해하는데 정말 많은 도움이 되었습니다.
2021-04-24
지식공유자 김범준
안녕하세요 Lucy Kim 님, 강의가 도움이 되었다니 다행이네요 :) 좋은 수강평 감사합니다 :) 궁금한 내용은 언제든지 질문 올려주세요~ 즐거운 하루 되세요~ 감사합니다
2021-04-25