강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Mobile Application Development

アバターコミュニティアプリ作成 (React Native Expo)

React Nativeでアバターベースのコミュニティアプリを開発します。投稿作成だけでなく、コメント/返信、いいね、投票、アバター生成など、完成度の高いコミュニティアプリを構築する過程を学びます。

（4.9）受講レビュー 44件

受講生 421名

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

学習した受講者のレビュー

こんなことが学べます

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[初中級] アバターコミュニティアプリ作成 with React Native

Group 604 (1)

React Native, TypeScript, react-query, react-hook-form, expo

講義紹介

React Nativeでアバターベースのコミュニティアプリを制作します。投稿作成/コメントだけでなく、返信、いいね、投票、アバターシステム、多言語設定、プッシュ通知など、様々な機能を持つコミュニティアプリを完成度高く作る方法をお教えします。

React Native (Expo), TypeScript, react-query(tanstack query), react-hook-formを使用してiOS、Androidアプリを同時に開発します。フロントアプリ開発に集中できるよう、Figmaデザインシステムを含むすべてのプロダクトデザインを提供し、バックエンドソースコードも提供いたします。

Group 605

この講義ではReact Native Expoを使用します。

React Nativeでアプリを開発する方法には、Expoで開発する方法とCLIで開発する方法があります。最近React Nativeの公式ドキュメントでも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でフォームを扱う




🔥 開発技術スタック

stack

講義では React Native(Expo)、TypeScript、React Query(TanStack Query)、React Hook Form、dayjs、i18n などの技術を使用して開発します。Reactの経験さえあれば、すべて使ったことがなくても大丈夫です！

React Queryを使用してサーバーデータを取得し、キャッシュし、更新する方法、React Hook Formを使用してどんなに複雑なフォームでも簡単に扱う方法、dayjsで日付を簡単に扱う方法、i18nを活用して多言語サポートを簡単に適用する方法をお教えします。

⚡️️主要実装機能

会員登録/ログイン

フィード無限スクロール/検索

投稿作成/投票添付

いいね/コメント/返信 + プッシュ通知

プロフィール/アバターカスタム

設定/多言語

[[SPAN_1]]⚠[[/SPAN_2]] 詳細な実装事項は[[SPAN_2]]カリキュラム[[/SPAN_2]]をご確認ください！

⭐️ この講義の差別化ポイント

1. Android、iOS同時開発


2つのプラットフォームを一緒に開発しながら、様々なプラットフォーム/画面に応じて再利用可能な共通コンポーネントを開発します。プラットフォーム間の違いと対応方法もお教えします。

2. Figmaデザインシステム提供

デザインは悩む必要がありません！カラー/コンポーネント/スクリーン/イメージが含まれたすべてのプロダクトデザインを提供します。

3. 集中度の高い構成、授業別ソースコード提供

  • 不要な内容を削減し、核心のみを盛り込んで、授業あたり平均7.5分、最大16分の短くて集中しやすい構成で学習効率を高めるよう制作しました。

  • 完成されたバックエンドソースコードだけでなく、プロジェクトの開始から終了まで進行されるすべての授業について、進行される授業と同じソースコードを提供します。授業ごとに添付資料をご確認ください。

[[SPAN_1]]❗[[/SPAN_2]][[SPAN_2]]️参考事項[[/SPAN_2]]

  • 講義はReactNative Expoを利用して進行されます。


  • この講義はWindows/Macユーザー共に受講していただくことができ、Android/iOS両方の動作を確認しながら進めます。（iOSアプリ開発時にはMac環境が必要）


  • この講義は3840 × 2160（4K）解像度で制作されており、高解像度を選択するとより良い画質で受講していただけます。

  • 講義で使用される画像（アバター）は著作権登録されている著作物ですので、個人練習用途でのみご使用ください。

🙋‍♂ Q&A

Q. 受講対象はどのようになりますか？

  • 事前知識としてReact Nativeは必要ありませんが、JavaScript ES6の知識をお持ちの方、Reactを経験したことがある方を受講対象としています。

Q. TypeScriptは必須ですか？

  • React Nativeでは基本的にプロジェクトがTypeScriptで設定されているため、講義はTypeScriptで進行されます。ただし、複雑な型は使用しないため、TypeScriptの知識が必須というわけではありません。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • JavaScript/Reactの基礎を学習してみた方

  • 単なる掲示板ではなく、完成度の高いコミュニティアプリを作りたい方

前提知識、
必要でしょうか？

  • JavaScriptの基礎知識が必要です。 ES6の文法は知っておく必要があります。

  • Reactの基本Hooks(useState, useEffect)は知っておくべきです。

こんにちは
です。

1,814

受講生

133

受講レビュー

309

回答

4.9

講座評価

3

講座

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

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

 

  • ✉ inkyo.dev@gmail.com

カリキュラム

全体

80件 ∙ (8時間 25分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

44件

4.9

44件の受講レビュー

  • 사당동님의 프로필 이미지
    사당동

    受講レビュー 1

    ∙

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    회사에서 급하게 RN을 사용해야 하는 상황이었고, 마침 강의가 30% 할인 중이라 미리보기 강의를 들어봤습니다. 강사님이 코드를 신경 쓰시는 분이라는 느낌이 들어 수강을 결정했습니다. 공식 문서를 참고하면서 개발할 수도 있지만, 좀 빠르게 앱은 어떤식으로 개발하는지 궁금하였습니다. 총 3일 동안 강의를 완강했습니다. 강의 장점 배울 것이 정말 많습니다. 단순히 기능 구현에 그치지 않고, 강사님이 의도적으로 다양한 기능을 추가하면서 학습할 수 있도록 구성되어 있습니다. 실무에서 바로 활용할 수 있는 기술들을 다룹니다. (Form 다루는 방법 및 유효성 검사, react-query 사용법, 컴포넌트 분리 및 재사용성 고려, 일관성 있는 코드 스타일 등) 프로덕트 개발 과정을 직접 경험할 수 있습니다. 단순한 예제 수준이 아니라, 실무에서의 개발 흐름을 익힐 수 있었습니다. 컷 편집으로 불필요한 부분을 줄여 좋았습니다. 강의에서 제공하는 코드를 배우고, 그리고 코드를 개선하면서 자기것으로 만들면 분명 큰 도움이 될 것이라고 생각합니다. 추천 대상 React와 CSS에 대한 기본적인 이해가 있는 분 실전 개발 경험을 원하는 분 사수 없이 실무를 익혀야 하는 2년 차 이하 개발자 또는 취업 준비생 React 경험이 전혀 없는 분들에게는 다소 어려울 수도 있으므로, 기본 개념을 익힌 후 수강하는 것을 추천합니다.

    • Kyo
      知識共有者

      빠르게 완강하셨는데 많은 도움이 된 것 같아서 좋네요. 기능들과 컴포넌트부터 코드 일관성, 심지어 편집까지 제가 많은 시간 동안 신경썼던 세세한 부분들을 알아주셔서 놀랐습니다. 좋은 수강평 남겨주셔서 감사합니다!

  • 주현님의 프로필 이미지
    주현

    受講レビュー 3

    ∙

    平均評価 5.0

    修正済み

    5

    47% 受講後に作成

    ✔️강의를 선택한 이유 디블리셔로 프론트쪽 공부하던 중 프로덕트(앱) 출시가 욕심이 났고 1인 개발자로 거듭나고 싶었습니다..! 언어 선택 고민하다가 리액트를 써봤어서(초급이지만) 리액트 네이티브로 만들기로 결정했습니다 ㅎㅎ 그렇게 네이티브 강의를 찾아 삼만리하던중 인프런에 새로운 강의 오픈! 할인 이벤트를 보고 수강을 결정했습니다. 리액트 네이티브 강의가 별로 없는데 강의 오픈해주셔서 감사합니다.😊 ✔️강의 장점 expo로 앱 개발 하는 가장 편하고 쉬운 방법을 알려주십니다. 편리한 라이브러리 사용법과 어떨때 이런 라이브러리를 쓰면 좋을지 잘 알려주십니다.! 프론트 뿐 아니라 백엔드 소스 제공을 해주셔서 실제로 디비 연동까지 확인해볼 수 있습니다. 강의를 수강하면 완전한 프로덕트를 볼 수 있을거 같아요..! ✔️강의를 추천하는 분 백엔드 프론트엔드에 대한 기본 지식이 있고 expo로 간단히 앱 만들어보실 분께 추천드립니다. 다른곳에서 네이티브 강의들을때 보다 확실히 expo가 엄청 간단히 앱을 만들 수 있더라구요..! But...!! 전 백엔드에 무지하고 리액트 초급에 개발자가 아니라 그런지...서버 연동부분부터 (5챕터부터) 엄청 버벅거리기 시작...하루종일 붙잡아도 해결이 되지 않아 우선 중도하차합니다😭 가끔 밥아저씨처럼 뚝딱 되는거 같은데 저는 이해가 어렵네요 ㅠㅠ... 조금 더 초급 버전의 여러 강의를 듣고 expo로 실제 앱을 만들어볼때 다시 듣기로 했습니다. 하지만 이건 제가 똥멍충이라 그런거고...강의 자체는 추천 드립니다!!👍

    • Kyo
      知識共有者

      상세한 수강 후기 남겨주셔서 감사합니다!

    • 주현

      강의 듣고 개인 앱 출시까지 완료 했습니다~ expo로 만드느라 제약이 좀 많고 라이브러리 충돌도 나긴 했지만 쉽게 만들 수 있는 도구는 맞습니다 만든 앱은 https://play.google.com/store/apps/details?id=com.badanang.CampWeather 입니다 Kyo님 덕분에 디자이너인데두 앱을 출시 할 수 있어서 너무 감사합니다 ㅠㅠ!

    • Kyo
      知識共有者

      와 디자이너이신데 출시까지하셨다니 대단하시네요!! 저도 사용해볼게요! 어려움이 있으셨지만 끝까지 강의 수강해주셔서 감사드립니다 👍

  • ksw님의 프로필 이미지
    ksw

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    34% 受講後に作成

    현재 계속해서 강의듣고, 배우는 중인 비전공 수강자인데요,,, 솔직히 따라하면서 정말 많은걸 배우고 있어요... 더욱이 막히는 부분이 있으면 바로바로 피드백주시는 강사님께 너무 존경스러울정도로 감사합니다... 계속 배우고, 정진하겠습니다... 비전공 1인개발자를 꿈꾸며,,,ㅠㅠ

    • Kyo
      知識共有者

      좋은 수강후기 감사드립니다. 응원하겠습니다!

  • suzie6087님의 프로필 이미지
    suzie6087

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    30% 受講後に作成

    • Sun Woong Moon님의 프로필 이미지
      Sun Woong Moon

      受講レビュー 1

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      강의를 수강하기 위해선 리액트 기본 지식이 있어야 하네요. 리액트 기본 지식이 있다는 전제하에 강의는 이해하기 쉽고 따라가는데 크게 힘들지 않았습니다. RN + Expo 입문하는데 큰 도움이 되었습니다.

      • Kyo
        知識共有者

        모든 수업을 수강하셨네요! 좋은 수강후기 감사드립니다.

    ￥9,036

    Kyoの他の講座

    知識共有者の他の講座を見てみましょう！

    [리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)Course Thumbnail

    [리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

    Kyo

    리액트 네이티브를 이용해서 나만의 맛집 기록앱을 개발하고 출시하는 과정을 배우게 됩니다. 디자인부터 프론트 및 백엔드 개발, 배포까지 전 과정을 준비했어요.

    Intermediate

    Intermediate

    React Native, TypeScript, NestJS

    [리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)Course Thumbnail

    [리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

    Kyo

    자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)Course Thumbnail

    자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)

    Kyo

    자바스크립트로 스택, 큐, 연결 리스트, 정렬, DFS/BFS 등 핵심 자료구조와 알고리즘을 직접 구현하며 학습합니다. 자주 출제되는 문제 유형을 함께 풀이하며, 코딩 테스트와 면접에 꼭 필요한 문제 해결 능력까지 키울 수 있습니다.

    Basic

    Basic

    JavaScript, 알고리즘, data-structure

    자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)Course Thumbnail

    자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)

    Kyo

    似ている講座

    同じ分野の他の講座を見てみましょう！

    iOS/Android 앱 개발을 위한 실전 React Native - BasicCourse Thumbnail

    iOS/Android 앱 개발을 위한 실전 React Native - Basic

    Wintho

    Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

    Basic

    Basic

    React Native, React, ES6

    iOS/Android 앱 개발을 위한 실전 React Native - BasicCourse Thumbnail

    iOS/Android 앱 개발을 위한 실전 React Native - Basic

    Wintho

    React Native with Expo: 제로초에게 제대로 배우기Course Thumbnail

    React Native with Expo: 제로초에게 제대로 배우기

    제로초(조현영)

    웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

    Basic

    Basic

    React, React Native, 하이브리드 앱

    React Native with Expo: 제로초에게 제대로 배우기Course Thumbnail

    React Native with Expo: 제로초에게 제대로 배우기

    제로초(조현영)

    React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)Course Thumbnail

    React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

    장기효(캡틴판교)

    실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

    Basic

    Basic

    React, TypeScript, Vue.js

    React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)Course Thumbnail

    React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

    장기효(캡틴판교)

    Next + React Query로 SNS 서비스 만들기Course Thumbnail

    Next + React Query로 SNS 서비스 만들기

    제로초(조현영)

    리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

    Intermediate

    Intermediate

    Next.js, React, react-query

    Next + React Query로 SNS 서비스 만들기Course Thumbnail

    Next + React Query로 SNS 서비스 만들기

    제로초(조현영)

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)Course Thumbnail

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

    John Ahn

    이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

    Basic

    Basic

    클론코딩, Node.js, React

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)Course Thumbnail

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

    John Ahn

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기Course Thumbnail

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

    Neo

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 ReactNative로 나만의 게시판을 만들어보세요!

    Basic

    Basic

    JavaScript, React Native, Kotlin

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기Course Thumbnail

    누구보다 빠르게 배우는 Springboot + ReactNative RestAPI 게시판 만들기

    Neo

    @시코 - TypeScript 제대로 배우기(초중급)Course Thumbnail

    @시코 - TypeScript 제대로 배우기(초중급)

    시니어코딩

    깊이있는 수업으로 최고의 웹 개발자가 되기 위한 타입스크립트 강좌입니다. 완강 했을 때 타입스크립트의 본질을 꿰뚫을 수 있어, 다음으로 배우게 될 리액트와 넥스트, 네스트 등의 고수가 될 수 있습니다.

    Basic

    Basic

    TypeScript, React, JavaScript

    @시코 - TypeScript 제대로 배우기(초중급)Course Thumbnail

    @시코 - TypeScript 제대로 배우기(초중급)

    시니어코딩

    Next.js App router 기반 Chat GPT 만들기Course Thumbnail

    Next.js App router 기반 Chat GPT 만들기

    코딩먹방

    Nextjs 14 버전 App router 과 vercel 의 ai/sdk 를 활용하여 chat gpt와 같은 ai chatbot 서비스를 만들어봅니다.

    Basic

    Basic

    Next.js, ChatGPT, React

    Next.js App router 기반 Chat GPT 만들기Course Thumbnail

    Next.js App router 기반 Chat GPT 만들기

    코딩먹방

    따라하며 배우는 타입스크립트 A-ZCourse Thumbnail

    따라하며 배우는 타입스크립트 A-Z

    John Ahn

    이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

    Basic

    Basic

    TypeScript, JavaScript

    따라하며 배우는 타입스크립트 A-ZCourse Thumbnail

    따라하며 배우는 타입스크립트 A-Z

    John Ahn

    한 입 크기로 잘라먹는 타입스크립트(TypeScript)Course Thumbnail

    한 입 크기로 잘라먹는 타입스크립트(TypeScript)

    이정환 Winterlood

    문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

    Basic

    Basic

    TypeScript

    한 입 크기로 잘라먹는 타입스크립트(TypeScript)Course Thumbnail

    한 입 크기로 잘라먹는 타입스크립트(TypeScript)

    이정환 Winterlood

    공식문서로 배우는 실전 타입스크립트Course Thumbnail

    공식문서로 배우는 실전 타입스크립트

    어쩔코딩

    타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

    Beginner

    Beginner

    TypeScript, JavaScript, ES6

    공식문서로 배우는 실전 타입스크립트Course Thumbnail

    공식문서로 배우는 실전 타입스크립트

    어쩔코딩