리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.
수강생 654명
난이도 초급
수강기한 무제한
네이버웹툰
케이티
임직원들도 이 강의를 듣고 있어요!
네이버웹툰
케이티
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
5.0
임용준
와....처음 듣는 강좌인데 이해가 쏙쏙 되네요 강사님 가르치시는 방식도 너무 좋고 네이티브 강좌를 처음하신다면 이 강좌를 적극 추천합니다.
5.0
로빈(Robin)
이번 강의를 통해 React Native, Expo 뿐만 아니라 react-query, react-hook-form, i18n 등 다양한 리액트의 라이브러리 활용법도 배울 수 있는 너무 유익한 시간이었습니다. Kyo 님의 React Native CLI 로 만드는 맛집앱 강의를 통해서도 정말 많은 것들을 배웠었는데, 이번에도 Expo 를 배우며 강사님의 다양한 개발 노하우 또한 함께 익히게 되었습니다. 너무너무 만족스러운 강의였으며, 다음에 Kyo님이 또 다른 강의를 출시하시면 또 수강하여 다른 것들도 배울 수 있었으면 좋겠습니다. 좋은 강의 만들어주셔서 감사합니다!
5.0
zoezoe
expo를 처음 접하는데 굉장히 도움이 되는 강의였습니다 ! 또한 저는 react-hook-form을 이용하는 방법이나 공용 컴포넌트를 만드는 방법에서도 많은 도움을 받은 것 같습니다 시중에는 너무 입문을 위한 쉬운 강좌들이 많은데, 조금은 더 난이도가 있고 조금 더 성장할만한 강의인 것 같아 좋았습니다 강의가 너무 깔끔하고, 강의 하나하나가 너무 길지 않아 집중하기도 좋으며 전반적으로 코드를 작성하는데 배울점이 많아서 cli 강의를 결제해서 이어 들을 것 같습니다 😎
React Native & Expo, TypeScript
React Query (Tanstack Query)
React Hook Form
PushNotification, EAS, Dayjs, i18n
React Native, TypeScript, react-query, react-hook-form, expo
리액트네이티브로 아바타 기반의 커뮤니티앱을 제작합니다. 글 작성/댓글뿐만 아니라 대댓글, 좋아요, 투표, 아바타 시스템, 다국어 설정, 푸시 알림 등의 다양한 기능이 있는 커뮤니티 앱을 완성도 있게 만드는 방법을 알려드립니다.
React Native (Expo), TypeScript, react-query(tanstack query), react-hook-form을 이용하여 iOS, Android 앱을 동시에 개발합니다. 프론트 앱 개발에만 집중할 수 있도록 피그마 디자인 시스템을 포함한 모든 프로덕트 디자인을 제공해 드리며 백엔드 소스코드도 제공해 드립니다.
이 강의에서는 React Native Expo를 사용합니다.
리액트네이티브로 앱을 개발하는 방식에는 Expo로 개발하는 방법과 CLI로 개발하는 방법이 있습니다. 최근 리액트네이티브 공식 문서에서도 Expo를 통한 개발을 권장하고 있는데요.
Expo는 CLI에 비해 환경설정과 개발을 정말 간편하게 할 수 있습니다. 시뮬레이터/실제기기 테스트도 간편하고, 라이브러리 사용 또한 간편하여 Expo를 이용하면 쉽게 React Native 개발을 시작할 수 있습니다. 또한 EAS(Expo Application Services)를 활용해 앱을 쉽게 빌드 및 배포가 가능합니다.
이 강의는 Expo기반의 초급~중급 수준의 앱 개발을 다룹니다.
보다 다양한 앱 개발 경험을 원하신다면 아래 강의도 함께 참고해 보세요!
React Native & Expo
Expo Router
TypeScript
React Query (Tanstack Query)
JWT 기반 인증
공통 컴포넌트 개발
커스텀 훅 패턴
프로필/아바타 기능
다국어 설정 (i18n)
푸시 알림 (Push Notifications)
앱 빌드 및 배포 (EAS)
글작성/수정/삭제
댓글/대댓글 작성하기
투표 첨부, 투표 참여하기
이미지 업로드
좋아요/조회수 기능
낙관적 업데이트 (Optimistic Update)
무한스크롤 (Infinite Scroll)
SVG 사용하기
폰트 적용하기
dayjs로 날짜 다루기
React Hook Form으로 폼 다루기
강의에서는 React Native(Expo), TypeScript, React Query(TanStack Query), React Hook Form, dayjs, i18n 등의 기술을 사용하여 개발합니다. 리액트 경험만 있다면, 모두 사용해보지 않았어도 괜찮아요!
React Query를 사용하여 서버 데이터를 가져오고, 캐싱하고, 업데이트 하는 방법, React Hook Form을 사용하여 아무리 복잡한 폼이라도 쉽게 다루는 방법, dayjs로 날짜를 쉽게 다루는 방법, i18n를 활용하여 다국어 지원을 쉽게 적용하는 방법을 알려드려요.
⚠ 세부 구현 사항은 커리큘럼을 확인해주세요!
1. Android, iOS 동시 개발
두 플랫폼을 함께 개발하며, 여러 플랫폼/화면에 따라 재사용 가능한 공통 컴포넌트를 개발해요. 플랫폼 간의 차이점과 대응 방법 또한 알려드려요.
2. Figma 디자인 시스템 제공
디자인은 고민할 필요 없어요! 색상/컴포넌트/스크린/이미지가 포함된 모든 프로덕트 디자인을 제공해요.
3. 집중도 높은 구성, 수업별 소스코드 제공
불필요한 내용을 줄이고 핵심만 담아, 수업당 평균 7.5분, 최대 16분의 짧고 집중하기 쉬운 구성으로 학습 효율을 높이도록 제작했습니다.
완성되어 있는 백엔드 소스코드뿐만 아니라 프로젝트 시작부터 끝까지 진행되는 모든 수업에 대해 진행되는 수업과 동일한 소스코드를 제공합니다. 수업 별로 첨부자료를 확인해 주세요.
강의는 ReactNative Expo를 이용하여 진행됩니다.
이 강의는 윈도우/맥 사용자 모두 수강하실 수 있으며 Android/iOS 모두 동작을 확인하며 진행합니다. (iOS 앱개발시에는 맥 환경 필요)
이 강의는 3840 × 2160 (4K) 해상도로 제작되어 높은 해상도를 선택하면 더 좋은 화질로 수강하실 수 있습니다.
강의에서 사용되는 이미지(아바타)는 저작권 등록이 되어있는 저작물로, 개인 연습 용도로만 사용해 주세요.
Q. 수강 대상이 어떻게 되나요?
선수 지식으로 리액트네이티브는 필요하지 않지만 자바스크립트 ES6 지식이 있으신 분, 리액트를 경험해 보신 적 있는 분들을 수강 대상으로 하고 있습니다.
Q. 타입스크립트는 필수인가요?
리액트네이티브에서는 기본적으로 프로젝트가 타입스크립트로 세팅되어 있으므로, 강의는 타입스크립트로 진행됩니다. 다만 복잡한 타입은 사용하지 않으므로 타입스크립트 지식이 필수는 아닙니다.
📝 업데이트 노트
[2025.05.03]
강의자료) Expo 53 버전 기준 앱 최종 소스코드를 추가하였습니다.
[2025.07.13]
섹션5) [Note] 안드로이드 에뮬레이터 키보드 설정 변경하기 수업을 추가하였습니다.
[2025.08.11]
섹션6) [Tip] 안드로이드 KeyboardAwareScrollView 이슈 수정 & 키보드 상태 커스텀 훅 만들기 수업을 추가하였습니다.
[2026.05.30]
강의자료) Expo 56 버전 기준 앱 최종 소스코드를 추가하였습니다.
섹션2) [1-1 New] 프로젝트 생성하기 수업을 추가하였습니다.
섹션3) [2-0 New] 프로젝트 초기화 수업을 추가하였습니다.
섹션3) [2-3 New] 벡터 아이콘 사용하기 수업을 추가하였습니다.
섹션6) [Note] react-navigation 관련 변경점 안내 수업을 추가하였습니다.
[2026.05.31]
섹션3) [2-1 New] SafeAreaView 안내 수업을 추가하였습니다.
학습 대상은
누구일까요?
자바스크립트/리액트 기초를 학습해 보신 분
단순 게시판이 아닌, 완성도 있는 커뮤니티앱을 만들고 싶은분
선수 지식,
필요할까요?
JavaScript 기초 지식이 필요해요. ES6 문법은 알고 있어야해요.
React 기본 Hooks(useState, useEffect)는 알고 있어야해요.
인프런인증
커리어인증
2,628
명
수강생
233
개
수강평
356
개
답변
4.9
점
강의 평점
6
개
강의
커뮤니티 서비스 프론트엔드 개발자로 시작하여 현재는 커머스 플랫폼 풀스택 개발자로 일하고 있습니다.
인프런에서는 완성도 높은 프로덕트를 만들기 위한 강의를 하고 있습니다.
✉ inkyo.dev@gmail.com
전체
87개 ∙ (8시간 36분)
해당 강의에서 제공:
전체
75개
4.9
75개의 수강평
수강평 3
∙
평균 평점 5.0
수정됨
5
✔️강의를 선택한 이유 디블리셔로 프론트쪽 공부하던 중 프로덕트(앱) 출시가 욕심이 났고 1인 개발자로 거듭나고 싶었습니다..! 언어 선택 고민하다가 리액트를 써봤어서(초급이지만) 리액트 네이티브로 만들기로 결정했습니다 ㅎㅎ 그렇게 네이티브 강의를 찾아 삼만리하던중 인프런에 새로운 강의 오픈! 할인 이벤트를 보고 수강을 결정했습니다. 리액트 네이티브 강의가 별로 없는데 강의 오픈해주셔서 감사합니다.😊 ✔️강의 장점 expo로 앱 개발 하는 가장 편하고 쉬운 방법을 알려주십니다. 편리한 라이브러리 사용법과 어떨때 이런 라이브러리를 쓰면 좋을지 잘 알려주십니다.! 프론트 뿐 아니라 백엔드 소스 제공을 해주셔서 실제로 디비 연동까지 확인해볼 수 있습니다. 강의를 수강하면 완전한 프로덕트를 볼 수 있을거 같아요..! ✔️강의를 추천하는 분 백엔드 프론트엔드에 대한 기본 지식이 있고 expo로 간단히 앱 만들어보실 분께 추천드립니다. 다른곳에서 네이티브 강의들을때 보다 확실히 expo가 엄청 간단히 앱을 만들 수 있더라구요..! But...!! 전 백엔드에 무지하고 리액트 초급에 개발자가 아니라 그런지...서버 연동부분부터 (5챕터부터) 엄청 버벅거리기 시작...하루종일 붙잡아도 해결이 되지 않아 우선 중도하차합니다😭 가끔 밥아저씨처럼 뚝딱 되는거 같은데 저는 이해가 어렵네요 ㅠㅠ... 조금 더 초급 버전의 여러 강의를 듣고 expo로 실제 앱을 만들어볼때 다시 듣기로 했습니다. 하지만 이건 제가 똥멍충이라 그런거고...강의 자체는 추천 드립니다!!👍
상세한 수강 후기 남겨주셔서 감사합니다!
강의 듣고 개인 앱 출시까지 완료 했습니다~ expo로 만드느라 제약이 좀 많고 라이브러리 충돌도 나긴 했지만 쉽게 만들 수 있는 도구는 맞습니다 만든 앱은 https://play.google.com/store/apps/details?id=com.badanang.CampWeather 입니다 Kyo님 덕분에 디자이너인데두 앱을 출시 할 수 있어서 너무 감사합니다 ㅠㅠ!
와 디자이너이신데 출시까지하셨다니 대단하시네요!! 저도 사용해볼게요! 어려움이 있으셨지만 끝까지 강의 수강해주셔서 감사드립니다 👍
수강평 1
∙
평균 평점 5.0
수정됨
5
회사에서 급하게 RN을 사용해야 하는 상황이었고, 마침 강의가 30% 할인 중이라 미리보기 강의를 들어봤습니다. 강사님이 코드를 신경 쓰시는 분이라는 느낌이 들어 수강을 결정했습니다. 공식 문서를 참고하면서 개발할 수도 있지만, 좀 빠르게 앱은 어떤식으로 개발하는지 궁금하였습니다. 총 3일 동안 강의를 완강했습니다. 강의 장점 배울 것이 정말 많습니다. 단순히 기능 구현에 그치지 않고, 강사님이 의도적으로 다양한 기능을 추가하면서 학습할 수 있도록 구성되어 있습니다. 실무에서 바로 활용할 수 있는 기술들을 다룹니다. (Form 다루는 방법 및 유효성 검사, react-query 사용법, 컴포넌트 분리 및 재사용성 고려, 일관성 있는 코드 스타일 등) 프로덕트 개발 과정을 직접 경험할 수 있습니다. 단순한 예제 수준이 아니라, 실무에서의 개발 흐름을 익힐 수 있었습니다. 컷 편집으로 불필요한 부분을 줄여 좋았습니다. 강의에서 제공하는 코드를 배우고, 그리고 코드를 개선하면서 자기것으로 만들면 분명 큰 도움이 될 것이라고 생각합니다. 추천 대상 React와 CSS에 대한 기본적인 이해가 있는 분 실전 개발 경험을 원하는 분 사수 없이 실무를 익혀야 하는 2년 차 이하 개발자 또는 취업 준비생 React 경험이 전혀 없는 분들에게는 다소 어려울 수도 있으므로, 기본 개념을 익힌 후 수강하는 것을 추천합니다.
빠르게 완강하셨는데 많은 도움이 된 것 같아서 좋네요. 기능들과 컴포넌트부터 코드 일관성, 심지어 편집까지 제가 많은 시간 동안 신경썼던 세세한 부분들을 알아주셔서 놀랐습니다. 좋은 수강평 남겨주셔서 감사합니다!
![[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?w=420)
