강의

멘토링

로드맵

Inflearn brand logo image
BEST
개발 · 프로그래밍

/

모바일 앱 개발

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

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

(4.9) 수강평 82개

수강생 1,313명

  • 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 경험이 있으면 좋아요. (백엔드 개발시)

안녕하세요
입니다.

1,817

수강생

133

수강평

309

답변

4.9

강의 평점

3

강의

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

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

 

  • inkyo.dev@gmail.com

커리큘럼

전체

202개 ∙ (29시간 42분)

해당 강의에서 제공:

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

수강평

전체

82개

4.9

82개의 수강평

  • Ryan Kim님의 프로필 이미지
    Ryan Kim

    수강평 1

    평균 평점 5.0

    5

    82% 수강 후 작성

    여러 강사님이 만드신 RN 강의를 세 개 정도 완강했는데, Kyo 강사님 강의가 가장 훌륭하다고 느꼈습니다. (저는 백엔드 개발자라서 이 강좌의 NestJS 서버사이드 부분은 수강하지 않았습니다.) 1. 다양한 요구사항을 경험해 볼 수 있는 프로젝트 구성 처음부터 끝까지 프로젝트를 따라가면서 다양하고 현실적인 요구사항, 컴포넌트, 라이브러리들을 사용해 볼 수 있어서, 이 강의만 수강하더라도 내가 원하는 앱을 만들기에 충분한 정보를 얻을 수 있는 강의 입니다. 토이 프로젝트라고 느껴지지 않고, 실제 서비스해도 될 정도의 수준의 복잡하고 다양한 기능을 가진 앱을 개발해 볼 수 있는 강의입니다. (전체적인 강의 퀄리티가 들어본 RN 강의중에 상대적, 절대적으로 모두 높음) 2. 강사님의 설명하는 능력이 뛰어남 어떤 것에 대해 잘 알고 있고 잘 하는 것과, 누군가에게 그것을 가르치는 능력은 별개의 능력이라고 생각합니다. 강의를 수강하면서 느낀 점은 Kyo 강사님은 RN에 대한 숙련도가 높으실 뿐만 아니라, 그것을 다른 사람에게 이해하기 쉽게 잘 설명하는 능력도 가지고 있다고 느꼈습니다. 덕분에 쉽게 강의를 완강 할 수 있었습니다. 3. 쾌적한 수강 환경 (4K) 보통 다른 강의들은 1K 로 업로드 되는데, 이 강의는 4K 영상으로 촬영해 주셔서 강의를 수강하는 내내 정말 눈 정화하는 기분을 느끼면서 수강할 수 있었습니다. 강의 내용 뿐만 아니라 이런 강의 수강 환경까지 고려해주시는 점만 봐도, 전체적인 강의 퀄리티가 좋을 수 밖에 없다는 생각이 듭니다. 특히 더 좋았던 점들 - 강의 영상 품질 (4K) - 보너스 강의 내용 (라이브러리 직접 수정, 이미지 최적화, 등) - 강의에서 같이 개발해 나가는 앱의 수준 (프로덕트 레벨의 복잡하고 현실적인 요구사항이 반영된 앱) 퇴근 후 짬내서 들어서 오래 걸렸지만 정말 재미있고 유익한 강의였습니다. 감사합니다! 더 어려운 주제로 RN 강의 또 만드신다면 무조건 수강할 의사 있습니다!

    • Kyo
      지식공유자

      이 강의에서는 말씀하신것처럼 만들고 끝나는 단순 프로젝트보다는, 서비스 가능할정도의 완성도있는 앱을 만들어보는게 목표였는데요. 그만큼 강의시간이 길어지긴했지만 그래도 강의가 잘 맞으신것같아 좋네요. 정말 상세한 후기 남겨주셔서 감사드립니다 :)

  • 강프로그래머님의 프로필 이미지
    강프로그래머

    수강평 24

    평균 평점 4.6

    5

    99% 수강 후 작성

    제일 친한 친구에게 소개팅은 정말 괜찮은 사람으로 소개해준다면 제일 친한 친구에게 RN은 무조건 이 강의를 소개시켜주고싶네요 장점 1) 질문하면 AI보다 더 빠르게 답변해주신다 2) 강의 챕터마다 깃헙에 올라와 있어서 참고하기가 너무 편하다 3) 목소리가 나긋하다....(살짝 성시경이라고 해야되나..ㄷㄷ) 4) 리팩토링 과정도 포함되어 있다

    • Kyo
      지식공유자

      커뮤니티에 질문/공유글을 많이써주셨었는데 이렇게 수강평까지 작성해주셔서 감사합니다 🙂 소개시켜주고싶은 강의라니 좋네요👍👍 앞으로도 막히는부분 있다면 언제든 알려주세요!!

  • 이종문님의 프로필 이미지
    이종문

    수강평 1

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    React Native로 앱을 처음부터 끝까지 만들어볼 수 있어서 좋았습니다. 프론트와 백엔드를 모두 경험했고, 실제 배포까지 완료할 수 있어 실전 감각을 익히기에 충분했습니다. React Query, Zustand, NestJS, TypeORM 등 최신 기술들을 사용해서 기술 스택 공부에도 도움이 됐고, 카카오/애플 로그인, 지도 API, 무한 스크롤 같은 실용적인 기능들도 빠짐없이 다뤄졌습니다. 코드도 잘 정리돼 있고 설명도 명확해서 따라가기 쉬웠습니다. 앱스토어/플레이스토어 출시까지 전 과정을 직접 해볼 수 있어서 완성도 높은 강의라고 생각합니다.

    • Kyo
      지식공유자

      모든 수업을 수강하셨네요! 완성도 높은 강의라고 해주셔서 감사드립니다.

  • dubu777님의 프로필 이미지
    dubu777

    수강평 2

    평균 평점 3.5

    5

    91% 수강 후 작성

    질문 하나하나 정말 친절하게 대답 해주십니다.. 이때까지 들어 봤던 강의중에 가장 친절하고 세세한 강의였어요 감사합니다!

    • Kyo
      지식공유자

      가장 친절하고 세세한 강의라고 해주셔서 정말 큰 힘이 됩니다. 후기 감사합니다!

  • 박정환님의 프로필 이미지
    박정환

    수강평 1

    평균 평점 5.0

    수정됨

    5

    12% 수강 후 작성

    저는 원래 네이티브로 앱 개발을 해 왔는데, 이번에 RN을 심도 있게 배우고 싶어서 듣게 됐어요. 사실 처음엔 “클라이언트랑 서버까지 다 다룬다는데, 시간만 길고 별로면 어쩌지?” 하는 걱정도 있었거든요. 그런데 생각보다 훨씬 체계적으로 구성이 잘 되어 있어서, 매 강의마다 정말 쓸모 있는 지식들을 얻고 있습니다. 가장 좋았던 점은 전체적인 서비스 흐름을 한 번에 익힐 수 있다는 거예요. Figma로 디자인 잡는 부분부터, React Native로 화면 구성하고, NestJS 백엔드까지 연동하는 과정을 차근차근 보여주니까, 매 순간 “이게 이렇게 연결되는구나” 하는 깨달음이 있었습니다. AWS에 배포하는 부분까지 다룬다는 점도 좋았고요. 리액트 네이티브가 낯설긴 했지만, 예제 수준이 아니라 실제로 바로 써먹을 만한 기능들을 다양하게 다뤄서 흥미롭게 따라가고 있어요. 중간중간 RN에서만 마주치는 특이한 부분들을 자세히 짚어주어서, 네이티브 개발을 하던 저도 별 어려움 없이 넘어갈 수 있었습니다. 정말 만족스럽게 듣고 있어서 벌써부터 “아바타 커뮤니티앱 만들기” 같은 다른 강의들도 궁금해지네요. 모바일 앱을 제대로 만들어보고 싶은 분께 강력 추천합니다! 저는 별다른 질문 없이도 강의 내용을 충분히 따라갈 수 있었어요. 앞으로도 이렇게 밀도 높은 강의 많이 만들어주시면 좋겠습니다. 감사합니다!

    • Kyo
      지식공유자

      좋은 수강후기 감사드립니다!

월 ₩19,800

5개월 할부 시

₩99,000

Kyo님의 다른 강의

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

비슷한 강의

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

연관 로드맵

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