인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

모바일 앱 개발

맛집 지도앱 만들기 (React Native + NestJS)

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

(5.0) 수강평 51개

수강생 1,205명

중급자를 위해 준비한
[모바일 앱 개발, React Native] 강의입니다.

이런 걸 배울 수 있어요

  • React Native

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

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

강의 소개

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

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

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

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

다루는 내용

  • React Navigation v6


    (Stack, Drawer, BottomTab)

  • TypeScript

  • ReactQuery v5

  • Zustand

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

  • JWT 기반 인증

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


  • 공통 컴포넌트 개발

  • 합성 컴포넌트 패턴

  • 커스텀 훅 패턴

  • Suspense, ErrorBoundary

  • 앱 배포

  • 구글맵 API, 카카오맵 API 연동

  • 마커 표시 및 클러스터링

  • 인피니트 스크롤링


  • 캘린더 구현


  • 다크모드

  • 갤러리 연동

  • 앱 권한 다루기

  • 날짜 함수 다루기

  • 라이브러리 수정하기

  • WebView


  • NestJS & TypeORM

  • PostgreSQL

  • AWS (EC2, RDS, S3)

📚강의 기술스택

프론트엔드는 React Native(CLI), TypeScript를 바탕으로 React Query(TanStack Query)를 적극적으로 활용하며, 전역 상태관리 도구로는 Zustand를 사용합니다. 백엔드는 NestJS, TypeORM, PostgresQL 스택을 사용하여 개발합니다.

️주요 구현 기능

회원가입/로그인/소셜로그인

지도/위치 연동

무한스크롤/즐겨찾기/검색

장소 검색/등록

캘린더 기능

설정 및 다크모드

세부 구현 사항은 커리큘럼을 확인해주세요!

💫 이 강의의 차별점

1. Android, iOS 동시 개발

두 플랫폼을 함께 개발하며, 여러 플랫폼/화면에 따라 재사용가능한 공통 컴포넌트를 개발해요. 플랫폼간의 차이점과 대응 방법 또한 알려드려요.

2. 컴포넌트 설계 & 커스텀훅

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

3. Figma 디자인 기반 개발

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

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

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

5. 소스코드 제공

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

️참고 사항

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

  • 중급 이상(전문성을 높이는) 난이도 강의입니다. 입문/초급자에게는 맞지 않을 수 있어요.

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

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

  • 이 강의는 윈도우/맥 사용자 모두 수강하실 수 있으며 Android/iOS 모두 동작을 확인하며 진행해요. 다만 iOS 앱개발을 위해서는 맥 환경이 필요합니다.

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

  • React 지식이 필요해요.

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

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

안녕하세요
입니다.

1,482

수강생

72

수강평

281

답변

5.0

강의 평점

2

강의

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

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

 

  • inkyo.dev@gmail.com

커리큘럼

전체

101개 ∙ (17시간 9분)

해당 강의에서 제공:

수업자료
  • 1. 디자인 자료 (Figma)

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

수강평

전체

51개

5.0

51개의 수강평

  • 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 :)

  • daycoding님의 프로필 이미지
    daycoding

    수강평 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!!

  • hyejung01073211님의 프로필 이미지
    hyejung01073211

    수강평 3

    평균 평점 5.0

    5

    100% 수강 후 작성

    I had a lot of questions while listening to the lecture, and I was so grateful that you answered them all one by one!! I came to listen to the React Native lecture, but I feel like I gained more, so it's great. I was amazed every time I listened to the lecture. I used to leave a thank you message in the question section every time, but I'm leaving a review like this. I didn't have enough knowledge about TypeScript, but I felt like my lack of knowledge was gradually being filled while listening to the lecture!! I also studied TypeScript, so I'm going to listen to this lecture properly again. Please take good care of me again!

    • koy
      지식공유자

      You took all the lectures! The lectures were long, but thank you for your hard work. I was also impressed by your good review :)

  • vbn02135251님의 프로필 이미지
    vbn02135251

    수강평 2

    평균 평점 5.0

    5

    78% 수강 후 작성

    If you know how to use React but don't know how to start with React-Native, I highly recommend this course. After taking more than half of the sections, I think I have a feel for how to use React-Native. In addition to React-Native-related content, I really liked that it also covered component design-related content such as code patterns for function management and compound component patterns. And since it covered server lectures and AWS, especially images, I felt that you put a lot of thought into what parts were needed when organizing the lecture. If I had to find something to be sorry about, I would say that I wish it had covered in-app payments and push notifications, which are features that are often used in apps. At this point, when I'm almost done with the course, I think I have to read the official documentation very carefully because React-Native relies heavily on third-party libraries, so it's a bit disappointing, but I still gained a lot of insight. I think that you can't know knowledge without knowing keywords, but this was a lecture that gave me a lot of keywords. Thank you.

    • koy
      지식공유자

      Thank you for the detailed review. I tried to cover a lot of things other than implementation, so the lecture became a bit long, but I'm glad that you finished it soon and gained a lot of keywords and insights!

  • sweetysks238945님의 프로필 이미지
    sweetysks238945

    수강평 2

    평균 평점 5.0

    5

    25% 수강 후 작성

    The lecture explanation is good and the quality is great. If there is an error and you leave a question, the instructor will answer it right away. I will study hard. 👍👍👍

    • koy
      지식공유자

      Thank you for reporting typos and leaving a review :) I'm glad you said the explanations and quality were good!! If you have any questions in the future, please let me know anytime👍👍

Kyo님의 다른 강의

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

비슷한 강의

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

연관 로드맵

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