인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST

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

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

초급자를 위해 준비한
[모바일 앱 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

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

강의 소개

리액트네이티브로 아바타 기반의 커뮤니티앱을 제작합니다. 글 작성/댓글뿐만 아니라 대댓글, 좋아요, 투표, 아바타 시스템, 다국어 설정, 푸시 알림 등의 다양한 기능이 있는 커뮤니티 앱을 완성도 있게 만드는 방법을 알려드립니다.

React Native (Expo), TypeScript, react-query(tanstack query)를 이용하여 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. 타입스크립트는 필수인가요?

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 자바스크립트/리액트 기초를 학습해 보신 분

  • 단순 게시판이 아닌, 완성도 있는 커뮤니티앱을 만들고 싶은분

선수 지식,
필요할까요?

  • JavaScript 기초 지식이 필요해요. ES6 문법은 알고 있어야해요.

  • React 기본 Hooks(useState, useEffect)는 알고 있어야해요.

안녕하세요
Kyo입니다.

1,516

수강생

78

수강평

286

답변

5.0

강의 평점

2

강의

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

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

 

  • inkyo.dev@gmail.com

커리큘럼

전체

78개 ∙ (8시간 18분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

25개

5.0

25개의 수강평

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    수강평 2

    평균 평점 5.0

    5

    34% 수강 후 작성

    Tôi là một học viên không chuyên đang liên tục nghe giảng và học hỏi,,, Thật lòng mà nói, tôi học được rất nhiều điều khi làm theo hướng dẫn... Đặc biệt, tôi vô cùng kính trọng giảng viên vì đã phản hồi ngay lập tức mỗi khi tôi gặp khó khăn... Tôi sẽ tiếp tục học hỏi và cố gắng hơn nữa... Với ước mơ trở thành một nhà phát triển độc lập không chuyên,,,😭😭

    • koy
      지식공유자

      Cảm ơn bạn vì những đánh giá tốt về khóa học. Chúc bạn mọi điều tốt đẹp!

  • justindev님의 프로필 이미지
    justindev

    수강평 4

    평균 평점 5.0

    5

    31% 수강 후 작성

    Tôi rất vui vì được học cách triển khai code cùng Figma và tạo ra code tốt hơn thông qua refactoring.

    • thrillcho7140님의 프로필 이미지
      thrillcho7140

      수강평 1

      평균 평점 5.0

      수정됨

      5

      100% 수강 후 작성

      Công ty đột ngột cần sử dụng RN, và may mắn là khóa học đang giảm giá 30%, nên tôi đã nghe thử bài giảng xem trước. Tôi cảm thấy giảng viên là người quan tâm đến code nên đã quyết định đăng ký. Tôi có thể tham khảo tài liệu chính thức để phát triển, nhưng tôi tò mò muốn biết cách phát triển ứng dụng một cách nhanh chóng. Tôi đã hoàn thành khóa học trong tổng cộng 3 ngày. Ưu điểm của khóa học Có rất nhiều điều để học. Không chỉ dừng lại ở việc hiện thực hóa chức năng đơn thuần, giảng viên còn cố ý thêm nhiều chức năng khác nhau để có thể học tập. Xử lý các kỹ thuật có thể được sử dụng ngay trong thực tế. (Cách xử lý Form và kiểm tra tính hợp lệ, cách sử dụng react-query, phân tách component và xem xét khả năng tái sử dụng, kiểu code nhất quán, v.v.) Bạn có thể trực tiếp trải nghiệm quá trình phát triển sản phẩm. Không chỉ là mức độ ví dụ đơn giản, bạn có thể làm quen với quy trình phát triển trong thực tế. Việc cắt chỉnh sửa để giảm bớt những phần không cần thiết rất tốt. Tôi nghĩ rằng nếu bạn học code được cung cấp trong bài giảng, và cải thiện code để biến nó thành của mình, chắc chắn nó sẽ giúp ích rất nhiều. Đối tượng được đề xuất Những người có kiến thức cơ bản về React và CSS Những người muốn có kinh nghiệm phát triển thực tế Các nhà phát triển dưới 2 năm kinh nghiệm hoặc sinh viên đang chuẩn bị tìm việc làm, những người cần học thực tế mà không có người hướng dẫn Vì có thể hơi khó đối với những người chưa có kinh nghiệm React, nên tôi khuyên bạn nên học các khái niệm cơ bản trước khi tham gia khóa học.

      • koy
        지식공유자

        Bạn đã hoàn thành khóa học một cách nhanh chóng và có vẻ như nó đã giúp ích được nhiều cho bạn, tôi rất vui vì điều đó. Tôi rất ngạc nhiên khi bạn nhận ra những chi tiết mà tôi đã dành rất nhiều thời gian để quan tâm, từ các chức năng và thành phần đến tính nhất quán của mã và thậm chí cả việc chỉnh sửa. Cảm ơn bạn đã để lại một bài đánh giá tốt!

    • thdwngusl7542님의 프로필 이미지
      thdwngusl7542

      수강평 3

      평균 평점 5.0

      수정됨

      5

      47% 수강 후 작성

      ✔️ Lý do chọn khóa học Trong quá trình học Front-end với vai trò là Deblisher, tôi đã nảy sinh tham vọng phát hành sản phẩm (ứng dụng) và muốn trở thành nhà phát triển độc lập..! Sau khi cân nhắc lựa chọn ngôn ngữ, vì đã từng sử dụng React (dù chỉ ở mức sơ cấp), tôi quyết định tạo ứng dụng bằng React Native 😊😊. Trong quá trình tìm kiếm các khóa học Native, tôi đã thấy khóa học mới khai giảng trên Inflearn! Sau khi xem sự kiện giảm giá, tôi đã quyết định tham gia. Vì không có nhiều khóa học React Native nên cảm ơn bạn đã mở khóa học này.😊 ✔️ Ưu điểm của khóa học Khóa học hướng dẫn cách phát triển ứng dụng bằng expo một cách dễ dàng và tiện lợi nhất. Bạn sẽ được hướng dẫn cách sử dụng các thư viện tiện lợi và khi nào nên sử dụng những thư viện này.! Ngoài Front-end, khóa học còn cung cấp source code Back-end, giúp bạn có thể kiểm tra việc kết nối với Database. Tôi cảm thấy rằng nếu tham gia khóa học này, bạn sẽ có thể tạo ra một sản phẩm hoàn chỉnh..! ✔️ Khóa học này dành cho ai Khóa học này phù hợp với những người có kiến thức cơ bản về Back-end và Front-end và muốn tạo ứng dụng đơn giản bằng expo. So với các khóa học Native khác, expo giúp tạo ứng dụng một cách đơn giản hơn rất nhiều..! Nhưng...!! Vì tôi không có kiến thức về Back-end, chỉ là người mới bắt đầu với React và không phải là nhà phát triển nên tôi bắt đầu gặp khó khăn từ phần kết nối Server (từ chương 5)... Dù dành cả ngày để tìm hiểu nhưng vẫn không giải quyết được nên tôi tạm dừng giữa chừng 😭. Đôi khi tôi thấy mọi thứ diễn ra nhanh chóng như chú Bob Ross nhưng tôi lại khó hiểu 😭😭... Tôi quyết định sẽ học thêm một vài khóa học sơ cấp hơn và sẽ nghe lại khóa học này khi tôi tạo ứng dụng thực tế bằng expo. Tuy nhiên, đây là do tôi quá kém cỏi... Bản thân khóa học rất đáng để giới thiệu!! 👍

      • koy
        지식공유자

        Cảm ơn bạn đã để lại đánh giá chi tiết về khóa học!

    • tkrhd02103607님의 프로필 이미지
      tkrhd02103607

      수강평 1

      평균 평점 5.0

      5

      31% 수강 후 작성

      • koy
        지식공유자

        Cảm ơn đánh giá tốt!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    연관 로드맵

    강의가 포함된 로드맵으로 학습해 보세요!

    월 ₩312,705

    5개월 할부 시

    ₩74,800