채널톡 아이콘
BEST

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

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

Thumbnail

중급자를 위해 준비한
[모바일 앱 개발, 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

  • 앱 배포 및 CodePush

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

안녕하세요
Kyo입니다.

1,280

수강생

54

수강평

272

답변

5.0

강의 평점

2

강의

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

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

 

  • inkyo.dev@gmail.com

커리큘럼

전체

101개 ∙ (17시간 9분)

해당 강의에서 제공:

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

수강평

전체

45개

5.0

45개의 수강평

  • 강프로그래머

    수강평 24

    평균 평점 4.6

    5

    99% 수강 후 작성

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

    • Kyo
      지식공유자

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

  • Ryan Kim

    수강평 1

    평균 평점 5.0

    5

    82% 수강 후 작성

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

    • Kyo
      지식공유자

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

  • HyeJung

    수강평 3

    평균 평점 5.0

    5

    100% 수강 후 작성

    강의 들으면서 질문 많이 했었는데 하나하나 다 답변해주셔서 너무 감사했습니다!! React Native 강의 들으러왔다가 더 많은 것을 얻고 간 것 같아서 너무 좋네요 ㅎ 강의 넘어갈때마다 매번 감탄하면서 들었어요 감사하다는 말을 질문글에 매번 남기기도 그랬었는데 이렇게 강의평에 남기게되네용 타입스크립트에 대한 지식이 부족했었는데 강의 들으면서 부족한 지식도 조금씩 더 채워지는 기분이었어요!! 타입스크립트 공부도 했으니까 이 강의 다시 한 번 제대로 들어보려고 합니다 다시 잘 부탁드려요!

    • Kyo
      지식공유자

      모든 강의를 수강하셨네요! 강의시간이 긴편인데 수고많으셨고 감사드려요. 저도 좋은 수강평 써주셔서 감탄했습니다 :)

  • 이용민

    수강평 2

    평균 평점 5.0

    5

    78% 수강 후 작성

    React는 다룰 줄 알지만 React-Native를 어떻게 시작해야 할지 모르겠다면 이 강의를 강력하게 추천드립니다 섹션을 반 이상 수강하니 어떤 방식으로 React-Native를 사용해야 할지 감이 잡히는 것 같습니다 React-Native 관련된 내용 이외에도 함수 관리를 위한 코드 패턴이나 컴파운드 컴포넌트 패턴과 같이 컴포넌트 설계와 관련된 내용도 다뤄주시는 점이 정말 좋았습니다 그리고 서버 강의와 AWS, 특히, 이미지쪽을 다뤄주신 점에서 강의 구성하실 때 어떤 부분들이 필요한지 고민을 많이 하셨다는게 느껴졌습니다 굳이 아쉬운 점을 찾자면, 개인적으로는 앱에서 많이 사용되는 기능인 인앱 결제나 푸시 알림 정도는 다뤄졌으면 어땠을까 하는 점 정도가 있겠네요 거의 완강 직전인 이 시점에 React-Native는 서드파티 라이브러리에 많이 의존적이니 공식 문서를 정말 자세히 봐야겠다라는 결론이 나는 것 같아서 약간은 허무하긴 하지만 그럼에도 정말 많은 인사이트를 얻어 갑니다 키워드를 알지 못하면 지식을 알 길이 없다고 생각을 하는데, 많은 키워드를 얻어 가는 강의였습니다 감사합니다

    • Kyo
      지식공유자

      상세한 후기 감사드립니다. 구현 외에도 많은 부분을 담으려다보니 강의가 조금 길어지긴 했지만, 그럼에도 곧 완강이시고 많은 키워드와 인사이트 얻으셨다고 해주셔서 좋네요!

  • 성장하는 앨리스

    수강평 2

    평균 평점 5.0

    5

    25% 수강 후 작성

    강의 설명도 좋고 퀄리티가 대박이고 오류가 생겨 질문을 남기면 강사님께서 바로바로 답변해주셔서 너무너무 좋습니다 잘 학습해보겠습니다 👍👍👍

    • Kyo
      지식공유자

      오타 제보도 해주시고 이렇게 수강평도 남겨주셔서 감사합니다 :) 설명과 퀄리티도 좋다고 해주셔서 좋네요!! 앞으로도 막히는 부분 있다면 언제든 알려주세요 👍👍

비슷한 강의

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

월 ₩17,600

5개월 할부 시

₩88,000