강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

모바일 앱 개발

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

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

(4.9) 수강평 92개

수강생 1,402명

  • Kyo
실습 중심
클론코딩
프로젝트
React NativeTypeScriptNestJSreact-queryzustand

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • React Native

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

[중급] 맛집 지도앱 만들기 with React Native & NestJS

강의 리뉴얼 안내

2025년 8월 24일 리뉴얼이 완료된 강의입니다.

강의 소개

신 기술을 사용하여 나만의 맛집 지도 서비스를 만들어보세요! 프론트 및 백엔드 개발, 디자인, 배포까지 전 과정을 준비했어요. 피그마로 구축된 디자인시스템을 기반으로 앱을 개발합니다.

리액트네이티브로 앱을 개발하여 앱스토어/플레이스토어 모두 출시하기까지, 다양한 노하우를 알려드려요. 기술스택은 React Native, TypeScript, NestJS, react-query, zustand를 사용합니다.

프론트엔드/백엔드 모두 개발하여 처음부터 끝까지 하나의 서비스를 완성하게 됩니다.
강의 시간은 프론트엔드 12시간 + 백엔드 3시간으로 구성되어 있으며, 모든 수업별 소스코드를 제공합니다.

* 이 강의는 React Native CLI를 사용하는 중급 강의입니다. 이 점 유의하여 수강신청 해주세요. (Expo를 이용한 개발은 아바타 커뮤니티앱 만들기 강의를 참고해주세요.)

다루는 내용

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

  • 서버 상태 & 전역 상태 관리

  • JWT 기반 인증

  • 카카오 로그인 / 애플 로그인


  • 공통 컴포넌트 개발

  • 합성 컴포넌트 패턴

  • 커스텀 훅 패턴

  • Suspense, ErrorBoundary

  • 앱 배포

  • 구글맵 API, 카카오맵 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. 컴포넌트 설계 & 커스텀훅

단순 구현이나 라이브러리 사용보다는, 합성 컴포넌트 패턴, 커스텀 훅 패턴 등의 재사용성과 유연성을 고려하여 개발하는 방법을 배워요.

3. Figma 디자인 기반 개발

피그마로 구축된 디자인시스템과 모든 화면에 대한 디자인을 제공하여 어떤 컴포넌트, 화면을 구현할지 쉽게 확인할 수 있습니다.

4. 라이브러리 사용 최소화

라이브러리 사용을 최소화하고, 대부분의 기능을 직접 구현해보면서 구현 능력과 문제 해결 능력을 키워요. 약 20개의 커스텀훅과 약 40개의 컴포넌트, 각종 유틸함수를 직접 구현합니다.

5. 소스코드 제공

완성되어 있는 백엔드 소스코드뿐만 아니라, 프로젝트 시작부터 끝까지 진행되는 모든 수업에 대한 소스코드를 제공합니다. 그 밖에도 블로그, 아티클 등 서비스를 개발하고 이해하는데 필요한 자료들을 제공합니다.

필요한 선수 지식

ReactNative CLI를 사용하는 중급 이상(전문성을 높이는) 난이도 강의입니다. 입문/초급자에게는 맞지 않을 수 있어요. 이 점 유의하여 수강신청 해주세요. (Expo를 이용한 개발은 아바타 커뮤니티앱 만들기 강의를 참고해주세요.)

  • JavaScript/CSS 지식이 필요해요. map, filter 등 ES6 문법을 설명하지 않아요.

  • React 지식이 필요해요. state와 props, 기본 Hooks(useState, useEffect)등을 설명하지 않아요.


참고 사항

  • 강의는 ReactNative CLI로 진행됩니다. Expo를 사용하지 않아요.

  • 강의 개발환경은 Mac OS 입니다. (Window 사용자는 Android 개발만 가능합니다. iOS 앱개발을 위해서는 Mac 환경이 필요합니다.)

  • 이 강의는 3840 × 2160 (4K) 해상도로 제작되어 높은 해상도를 선택하면 더 좋은 화질로 수강하실 수 있습니다.


* 2025년 8월 24일 리뉴얼이 완료된 강의입니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 나만의 앱을 출시하고 싶은 분

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

  • 실제 운영되는 특별한 포트폴리오를 가지고 싶은 분

  • 하나의 앱을 완성도 있게 만들고 싶은 분

  • 자바스크립트로 프론트/백엔드 모두 개발하고 싶은 분

선수 지식,
필요할까요?

  • React 지식이 필요해요.

  • JavaScript/CSS 지식이 필요해요.

  • Node.js, Express 경험이 있으면 좋아요. (백엔드 개발시)

안녕하세요
입니다.

2,041

수강생

155

수강평

333

답변

4.9

강의 평점

3

강의

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

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

 

  • inkyo.dev@gmail.com

커리큘럼

전체

118개 ∙ (14시간 59분)

해당 강의에서 제공:

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

수강평

전체

92개

4.9

92개의 수강평

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    수강평 1

    평균 평점 5.0

    5

    82% 수강 후 작성

    いろいろな講師が作ったRN講義を3つほど頑強していましたが、京講師の講義が一番素晴らしいと感じました。 (私はバックエンド開発者なので、このコースのNestJSサーバーサイド部分は受講していません。) 1. さまざまな要件を体験できるプロジェクト構成 最初から最後までプロジェクトに従い、さまざまで現実的な要件、コンポーネント、ライブラリを試すことができ、この講義だけを受講しても、私が望むアプリを作るのに十分な情報を得ることができる講義です。トイプロジェクトとは感じられず、実際にサービスしてもらえるほどのレベルの複雑で多様な機能を持つアプリを開発してみることができる講義です。 (全体的な講義クオリティが聞いたRN講義中に相対的、絶対的にすべて高い) 2. 講師様の説明する能力に優れる 何かについてよく知っていてよくすることと、誰かにそれを教える能力は別個の能力だと思います。講義を受講しながら感じたことは、京講師はRNに対する熟練度が高いだけでなく、それを他人に理解しやすくよく説明する能力も持っていると感じました。おかげで簡単に講義を頑張ることができました。 3. 快適な受講環境(4K) 通常、他の講義は1Kでアップロードされますが、この講義は4K映像で撮影していただき、講義を受講する間、本当に目を浄化する気分を感じながら受講できました。講義内容だけでなく、こんな講義受講環境まで考慮していただく点だけ見ても、全体的な講義クオリティが良いしかないという気がします。 特に良かったこと - 講義映像品質(4K) - ボーナスレクチャーの内容(ライブラリ直接修正、画像最適化など) - 講義で一緒に開発していくアプリのレベル(プロダクトレベルの複雑で現実的な要件が反映されたアプリ) 退勤後は立ち寄ってから長くかかりましたが、本当に面白くてお得な講義でした。ありがとうございます! もっと難しい話題でRN講義また作りたいなら無条件受講する意思があります!

    • koy
      지식공유자

      この講義では、おっしゃったように作って終わる単純なプロジェクトではなく、サービス可能なほどの完成度のあるアプリを作ってみることが目標でした。 それだけ講義時間が長くなりましたが、それでも講義がうまく合っているようでいいですね。

  • kms920106님의 프로필 이미지
    kms920106

    수강평 24

    평균 평점 4.6

    5

    99% 수강 후 작성

    もし、一番親しい友達に紹介するなら、本当に良い人として紹介したいし、一番親しい友達に RN は絶対にこの講義を紹介したいです 長所 1) 質問すると AI よりも早く答えてくれます 2) 講義の各章が GitHub にアップロードされているので、参照するのがとても簡単です 3) 声が優しくて... (少しソン・シギョンに似ているかな... ㄷㄷ) 4) リファクタリング プロセスも含まれています

    • koy
      지식공유자

      コミュニティに質問/共有記事をたくさん書いてくれましたが、こうして受講評まで作成していただきありがとうございます🙂 紹介させていただきたい講義だといいですね👍👍 これからも詰まっている部分があれば、いつでも教えてください!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    수강평 1

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    React Nativeでアプリを最初から最後まで作ることができてよかったです。フロントエンドとバックエンドの両方を経験し、実際のデプロイまで完了できたので実践的な感覚を身につけるのに十分でした。 React Query, Zustand, NestJS, TypeORMなど最新技術を使って技術スタックの勉強にもなり、Kakao/Appleログイン、地図API、無限スクロールのような実践的な機能も漏れなく扱われていました。 コードもよく整理されており説明も明確でついていきやすかったです。App Store/Play Storeでのリリースまで全過程を直接体験できたので完成度の高い講義だと思います。

    • koy
      지식공유자

      全ての授業を受講されましたね!完成度の高い講義だとおっしゃってくださってありがとうございます。

  • lody님의 프로필 이미지
    lody

    수강평 1

    평균 평점 5.0

    수정됨

    5

    12% 수강 후 작성

    私は元々ネイティブでアプリ開発をしてきましたが、今回RNを深く学びたいと思い受講しました。 実は最初、「クライアントとサーバーまで全部扱うなんて、時間だけ長くて大したことなかったらどうしよう?」という心配もあったんです。 でも、思ったよりはるかに体系的に構成されていて、毎回講義を受けるたびに本当に役に立つ知識を得ています。 一番良かった点は、サービス全体の流れを一度に把握できることです。Figmaでデザインを作成するところから、React Nativeで画面を構成し、NestJSバックエンドまで連動する過程を順を追って見せてくれるので、毎瞬間「こうやって繋がるんだ」という気づきがありました。 AWSにデプロイする部分まで扱っている点も良かったです。 React Nativeは不慣れでしたが、例レベルではなく、実際にすぐに使えるような機能を多様に扱っているので、興味深くついていけています。 時々RNだけで遭遇する特殊な部分を詳しく解説してくれるので、ネイティブ開発をしていた私も特に苦労することなく乗り越えることができました。 本当に満足して受講しているので、もうすでに「アバターコミュニティアプリ作り」のような他の講義も気になっています。 モバイルアプリをきちんと作ってみたい方に強くおすすめします! 私は特に質問がなくても講義の内容に十分ついていくことができました。 今後もこのように密度の高い講義をたくさん作ってくだされば嬉しいです。 ありがとうございました!

    • koy
      지식공유자

      良い受講後記をありがとうございます!

  • swi81387993님의 프로필 이미지
    swi81387993

    수강평 2

    평균 평점 5.0

    5

    24% 수강 후 작성

    JAVA, JS, CSS程度を趣味で学んだことのある一般人です。 以前から「自分の手で直接アプリを作ってみたい!」という夢があったのですが、非専攻者なのでなかなか挑戦できずにいたところ、ようやく機会を得ることができました。 クロスプラットフォームアプリ開発が可能だというReact Nativeに興味が湧き、Reactの基礎だけを別途勉強した後、Kyoさんの講義を受けることになりました。 結論から言うと、この講義を受けて本当に良かったと思っています! 最初は中級の講義なので簡単ではありませんでしたが、学んでいくうちに「え、こんな機能もあったんだ?」と思う瞬間が多く、単に概念だけを知っていたことを実際にどのように活用するのかを学ぶことができて本当に有益でした。 特にもともと知っていた機能もより効率的に使用する方法を学ぶことができて良かったし、復習しながらついていくうちにだんだん慣れていくのを感じました。 おかげでReact Nativeに対する自信もつき、今では自分だけのアプリを直接作ってみることができるという期待感が大きくなりました! 非専攻者の私もReactの基礎だけを掴んで挑戦したので、他の方も十分にできると思います。 良い講義をありがとうございます!😊 ファイ팅! 🚀

    • koy
      지식공유자

      良いレビューをありがとうございます!

지식공유자의 깜짝할인 중 (7일 남음)

₩9,353

24%

₩99,000

Kyo님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

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

연관 로드맵

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