Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Mobile Application Development

Creating an Avatar Community App (React Native Expo)

We develop an avatar-based community app with React Native. You'll learn to build a comprehensive community app, covering post creation, comments/replies, likes, voting, avatar generation, etc.

(4.9) 43 reviews

402 learners

  • koy
앱개발
커뮤니티앱
React Native
TypeScript
expo
react-hook-form
react-query

Reviews from Early Learners

What you will learn!

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[초중급] 아바타 커뮤니티앱 만들기 with React Native

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)를 활용해 앱을 쉽게 빌드 및 배포가 가능합니다.

(* CLI를 이용한 개발은 맛집 지도앱 만들기 강의를 참고해주세요.)

📖다루는 내용

  • 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&A

Q. 수강 대상이 어떻게 되나요?

  • 선수 지식으로 리액트네이티브는 필요하지 않지만 자바스크립트 ES6 지식이 있으신 분, 리액트를 경험해 보신 적 있는 분들을 수강 대상으로 하고 있습니다.

Q. 타입스크립트는 필수인가요?

  • 리액트네이티브에서는 기본적으로 프로젝트가 타입스크립트로 세팅되어 있으므로, 강의는 타입스크립트로 진행됩니다. 다만 복잡한 타입은 사용하지 않으므로 타입스크립트 지식이 필수는 아닙니다.

Recommended for
these people

Who is this course right for?

  • Someone who has studied JavaScript/React basics

  • Wants to build a polished community app, not a simple board.

Need to know before starting?

  • Basic JavaScript knowledge is required. ES6 syntax must be known.

  • You need to know React basic Hooks (useState, useEffect).

Hello
This is

1,756

Learners

122

Reviews

309

Answers

4.9

Rating

3

Courses

커뮤니티 서비스 프론트엔드 개발자로 시작하여 현재는 모빌리티 서비스 풀스택 개발자로 일하고 있습니다.

인프런에서는 완성도 높은 프로덕트를 만들기 위한 강의를 하고 있습니다.

 

  • inkyo.dev@gmail.com

Curriculum

All

80 lectures ∙ (8hr 25min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

43 reviews

4.9

43 reviews

  • chotg님의 프로필 이미지
    chotg

    Reviews 1

    Average Rating 5.0

    Edited

    5

    100% enrolled

    I urgently needed to use RN at work, and the lecture was 30% off, so I listened to the preview lecture. I decided to take the course because I felt that the instructor was someone who cared about the code. I can refer to the official documentation and develop, but I was curious about how to quickly develop apps. I completed the course in a total of 3 days. Advantages of the course There is so much to learn. Rather than simply implementing functions, the instructor intentionally adds various functions so that you can learn. Covers techniques that can be applied directly to real-world practice. (How to handle forms and validation, how to use react-query, component separation and reusability considerations, consistent code style, etc.) You can experience the product development process directly. It's not just a simple example level, but I was able to learn the development flow in the field. It was nice to reduce unnecessary parts with cut editing. I think it will be a great help if you learn the code provided in the lecture and improve the code to make it your own. Recommended for Those with a basic understanding of React and CSS Those who want practical development experience Developers with less than 2 years of experience or job seekers who need to learn practical skills without a mentor It may be a little difficult for those who have no React experience at all, so it is recommended to take the course after learning the basic concepts.

    • koy
      Instructor

      I'm glad that you completed the course quickly and found it helpful. I was surprised that you noticed the detailed aspects that I spent a lot of time on, from the functions and components to code consistency and even editing. Thank you for leaving a great review!

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    Reviews 3

    Average Rating 5.0

    Edited

    5

    47% enrolled

    ✔️Reason for Choosing the Course While studying front-end as a publisher, I became ambitious to release a product (app) and wanted to become a solo developer! After contemplating which language to choose, I decided to use React Native because I had some experience with React (albeit beginner-level) 😊😊. I searched far and wide for a Native course, and then a new course opened on Inflearn! I decided to take the course after seeing the discount event. Thank you for opening a React Native course; there aren't many available. 😊 ✔️Advantages of the Course It teaches the easiest and most convenient way to develop apps with Expo. It explains the usage of convenient libraries and when it's good to use them! It provides not only front-end but also back-end source code, so you can actually check the database integration. It seems like you can see a complete product if you take the course! ✔️Who I Recommend the Course To I recommend it to those who have basic knowledge of back-end and front-end and want to easily create an app with Expo. Expo definitely allows you to create apps much more easily than taking Native courses elsewhere! But...!! Since I'm ignorant about the back-end, a beginner in React, and not a developer... I started to struggle a lot from the server integration part (from Chapter 5)... I can't solve it even if I spend all day on it, so I'm quitting midway for now 😭. Sometimes it seems like it's done in a snap like Bob Ross, but it's hard for me to understand 😭😭... I decided to listen to more beginner-level courses and listen again when I actually try to create an app with Expo. However, this is because I'm stupid... I recommend the course itself!! 👍

    • koy
      Instructor

      Thank you for leaving such a detailed review!

    • I completed the course and even released my personal app~ There were quite a few constraints because I built it with Expo, and I did encounter library conflicts, but it is indeed a tool that makes it easy to build. The app I made is https://play.google.com/store/apps/details?id=com.badanang.CampWeather. Thanks to Kyo, even though I'm a designer, I was able to release an app, I'm so grateful 😭😭!

    • koy
      Instructor

      Wow, you're a designer and you even launched it, that's amazing!! I'll try it too! Thank you for completing the course until the end, even though there were difficulties 👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    Reviews 2

    Average Rating 5.0

    5

    34% enrolled

    I'm a non-major student currently taking and learning from the lectures, and honestly, I'm learning so much by following along... Moreover, I'm so grateful to the instructor for giving immediate feedback whenever I get stuck, to the point where I admire them... I will continue to learn and improve... Dreaming of becoming a solo developer with a non-major background... 😭😭

    • koy
      Instructor

      Thank you for the great review. I'll be cheering you on!

  • msw1231238118님의 프로필 이미지
    msw1231238118

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    To take this course, you need to have basic React knowledge. With the assumption that you have basic React knowledge, the course was easy to understand and not too difficult to follow along. It was a great help for getting started with RN + Expo.

    • koy
      Instructor

      You've taken all the classes! Thank you for the great review.

  • yeongjinyu679614님의 프로필 이미지
    yeongjinyu679614

    Reviews 2

    Average Rating 5.0

    5

    29% enrolled

    $59.40

    koy's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!