강의

멘토링

로드맵

BEST
Programming

/

Mobile Application Development

[リニューアル] グルメマップアプリ作り (React Native & NestJS)

React Nativeを使って自分だけのグルメ記録アプリを開発し、リリースする過程を学ぶことになります。デザインからフロント・バックエンド開発、デプロイまで全過程を準備しました。

  • Kyo
실습 중심
클론코딩
프로젝트
React Native
TypeScript
NestJS
react-query
zustand

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

こんなことが学べます

  • React Native

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

[中級] グルメマップアプリ作成 with React Native & NestJS

講義リニューアルのお知らせ

2025年8月24日にリニューアルが完了した講義です。

講義紹介

新技術を使って自分だけのグルメマップサービスを作ってみましょう!フロントエンドおよびバックエンド開発、デザイン、デプロイまで全工程を準備しました。Figmaで構築されたデザインシステムをベースにアプリを開発します。

React Nativeでアプリを開発してApp Store/Play Storeの両方にリリースするまで、様々なノウハウをお教えします。技術スタックはReact Native、TypeScript、NestJS、react-query、zustandを使用します。

フロントエンド/バックエンドの両方を開発し、最初から最後まで一つのサービスを完成させます。
講義時間はフロントエンド12時間 + バックエンド3時間で構成されており、すべての授業別ソースコードを提供します。

* この講義はReact Native CLIを使用する中級講義です。この点にご注意の上、受講申請をお願いします。(Expoを利用した開発はアバターコミュニティアプリ作成講義をご参考ください。)

扱う内容

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

  • サーバー状態 & グローバル状態管理

  • JWTベース認証

  • カカオログイン / Appleログイン


  • 共通コンポーネント開発

  • 合成コンポーネントパターン

  • カスタムフックパターン

  • Suspense、ErrorBoundary

  • アプリ配布

  • Google Maps API、Kakao Map API連携

  • マーカー表示およびクラスタリング

  • 無限スクロール


  • カレンダー実装


  • ダークモード

  • 画像アップロード

  • アプリ権限の取り扱い

  • 日付関数の扱い方

  • ライブラリを修正する

  • WebView


  • NestJS & TypeORM

  • PostgreSQL

📚 講義技術スタック

フロントエンドはReact Native(CLI)、TypeScriptをベースにTanStack Query(React Query)を積極的に活用し、グローバル状態管理ツールとしてはZustandを使用します。バックエンドはNestJS、TypeORM、PostgresQLスタックを使用して開発します。その他にもGoogle API、Kakao APIなどの様々なAPIを連携して一緒に開発します。

⭐ ️主要実装機能

会員登録/ログイン/ソーシャルログイン

地図/位置連動

無限スクロール/お気に入り

場所検索/登録

カレンダー機能

設定とダークモード

⚠ 詳細な実装事項はカリキュラムをご確認ください!

💫 この講義の差別化ポイント

1. Android、iOS同時開発

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

2. コンポーネント設計 & カスタムフック

単純な実装やライブラリの使用よりも、合成コンポーネントパターン、カスタムフックパターンなどの再利用性と柔軟性を考慮して開発する方法を学びましょう。

3. Figmaデザインベース開発

Figmaで構築されたデザインシステムとすべての画面のデザインを提供し、どのコンポーネントや画面を実装するかを簡単に確認できます。

4. ライブラリの使用を最小限に抑える

ライブラリの使用を最小限に抑え、ほとんどの機能を直接実装してみながら実装能力と問題解決能力を身につけます。約20個のカスタムフックと約40個のコンポーネント、各種ユーティリティ関数を直接実装します。

5. ソースコード提供

完成されたバックエンドソースコードだけでなく、プロジェクトの開始から終了まで進行されるすべての授業に対するソースコードを提供します。その他にも、ブログ、記事などサービスを開発し理解するのに必要な資料を提供します。

必要な前提知識

ReactNative CLIを使用する中級以上(専門性を高める)難易度の講義です。入門・初級者には合わない可能性があります。この点にご注意の上、受講申請をお願いします。(Expoを利用した開発はアバターコミュニティアプリ作成講義をご参考ください。)

  • JavaScript/CSSの知識が必要です。map、filterなどのES6文法は説明しません。

  • Reactの知識が必要です。stateとprops、基本的なHooks(useState、useEffect)などについては説明しません。


参考事項

  • 講義はReactNative CLIで進行されます。Expoは使用しません。

  • 講義の開発環境はMac OSです。(Windowsユーザーの方はAndroid開発のみ可能です。iOSアプリ開発にはMac環境が必要です。)

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


* 2025年8月24日にリニューアルが完了した講義です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 自分だけのアプリをリリースしたい方

  • JavaScript/React基礎を学習されたことがある方

  • 実際に運営されている特別なポートフォリオを持ちたい方

  • 一つのアプリを完成度高く作りたい方

  • JavaScriptでフロントエンド・バックエンド両方を開発したい方

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

  • Reactの知識が必要です。

  • JavaScript/CSSの知識が必要です。

  • Node.js、Express経験があると良いです。(バックエンド開発時)

こんにちは
です。

1,905

受講生

141

受講レビュー

323

回答

4.9

講座評価

3

講座

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

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

 

  • inkyo.dev@gmail.com

カリキュラム

全体

118件 ∙ (14時間 59分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

86件

4.9

86件の受講レビュー

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    受講レビュー 1

    平均評価 5.0

    5

    82% 受講後に作成

    I have completed three RN lectures by various instructors, but I felt that Instructor Kyo's lecture was the best. (I am a backend developer, so I did not take the NestJS server-side part of this lecture.) 1. Project composition that allows you to experience various requirements You can follow the project from beginning to end and use various and realistic requirements, components, and libraries, so even if you only take this lecture, you can gain enough information to create the app you want. It is a lecture that allows you to develop an app with complex and diverse functions that does not feel like a toy project, but is actually serviceable. (The overall lecture quality is relatively and absolutely the highest among all the RN lectures I have taken.) 2. The instructor's ability to explain is excellent I think that knowing something well and doing it well and the ability to teach it to someone are separate abilities. What I felt while taking the lecture was that Instructor Kyo is not only highly skilled in RN, but also has the ability to explain it well to others in an easy-to-understand way. Thanks to this, I was able to complete the lecture easily. 3. Pleasant lecture environment (4K) Usually, other lectures are uploaded in 1K, but this lecture was filmed in 4K video, so I was able to take the lecture while feeling like my eyes were being purified. Just looking at the fact that they consider not only the lecture content but also the lecture environment, I think the overall lecture quality cannot be anything but good. What was especially good - Lecture video quality (4K) - Bonus lecture content (direct modification of libraries, image optimization, etc.) - The level of the app developed together in the lecture (an app that reflects complex and realistic requirements of the product level) I listened to it after work, so it took a long time, but it was a really fun and informative lecture. Thank you! If you make another RN lecture on a more difficult topic, I will definitely take it!

    • koy
      知識共有者

      In this lecture, the goal was to create a complete app that could be serviced, rather than a simple project that was just created as you said. The lecture time was long, but I think the lecture was a good fit for me. Thank you for leaving such a detailed review :)

  • kms920106님의 프로필 이미지
    kms920106

    受講レビュー 24

    平均評価 4.6

    5

    99% 受講後に作成

    If you introduce a really good person to your best friend for a blind date, I want to introduce this course to my best friend without fail. Advantages 1) They answer questions faster than AI 2) The lecture chapters are uploaded to GitHub, so it's really easy to refer to 3) The voice is gentle....(Should I say it's a bit like Sung Si-kyung..ㄷㄷ) 4) The refactoring process is also included

    • koy
      知識共有者

      Thank you for posting many questions/shared posts in the community and even writing a review 🙂 I'm glad you wanted to introduce this lecture👍👍 Please let me know if you have any questions in the future!!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    It was great being able to build an app from start to finish with React Native. I got to experience both frontend and backend, and completing the actual deployment was sufficient for gaining real-world experience. Using the latest technologies like React Query, Zustand, NestJS, and TypeORM helped me learn the tech stack, and practical features such as Kakao/Apple Login, Map API, and infinite scroll were covered thoroughly. The code was well-structured and the explanations were clear, which made it easy to follow along. I believe it's a highly comprehensive course because I could personally go through the entire process up to releasing on the App Store/Play Store.

    • koy
      知識共有者

      You've completed all the lessons! Thank you for saying it was a high-quality course.

  • lody님의 프로필 이미지
    lody

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    12% 受講後に作成

    I've been developing apps natively, but I wanted to learn React Native in depth, so I decided to take this course. To be honest, at first I was worried, thinking, "It covers everything from the client to the server, what if it's just long and not very good?" But it's much more systematically structured than I thought, and I'm gaining really useful knowledge in every lecture. The best thing is that I can learn the overall service flow at once. From designing with Figma, to configuring the screen with React Native, to linking with the NestJS backend, the process is shown step by step, so every moment I realized, "This is how it's connected." I also liked that it covers deployment to AWS. React Native was unfamiliar, but I'm following it with interest because it covers a variety of features that can be used right away, not just at the example level. In the middle, it points out the unique parts of RN in detail, so even I, who used to do native development, was able to get through it without much difficulty. I'm so satisfied with the course that I'm already curious about other courses like "Creating an Avatar Community App." Highly recommended for those who want to create a mobile app properly! I was able to follow the course content sufficiently without any questions. I hope you will continue to create such dense lectures in the future. Thank you!

    • koy
      知識共有者

      Thank you for the great review!

  • swi81387993님의 프로필 이미지
    swi81387993

    受講レビュー 2

    平均評価 5.0

    5

    24% 受講後に作成

    I'm just a regular person who has learned JAVA, JS, and CSS as hobbies. I've always had a dream of "creating my own app with my own hands!" but as a non-major, I couldn't easily take on the challenge, but now I finally have the opportunity. I became interested in React Native, which allows cross-platform app development, so after studying the basics of React separately, I took Kyo's course. To start with the conclusion, I think I made a really good decision to take this course! At first, it wasn't easy because it was an intermediate course, but as I learned, there were many moments where I thought, "Wow, there was also this function?" and it was really helpful because I could learn how to actually use things that I only knew as concepts. In particular, it was great to learn how to use existing functions more efficiently, and I felt that I was getting more and more familiar with it as I followed along while reviewing. Thanks to this, I gained confidence in React Native, and now I have a growing expectation that I will be able to create my own app! I'm a non-major, and I took on the challenge with just the basics of React, so I think others can definitely follow along. Thank you for the great lecture! 😊 Fighting! 🚀

    • koy
      知識共有者

      Thank you for the great review!

期間限定セール、あと5日日で終了

¥58

24%

¥11,914

Kyoの他の講座

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

似ている講座

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