BEST
개발 · 프로그래밍

/

모바일 앱 개발

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

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

(5.0) 수강평 23개

수강생 774명

React NativeTypeScriptzustandreact-queryNestJS
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 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 디자인 기반 개발

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

feat

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

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

5. 소스코드 제공

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

⚡ ️참고 사항

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

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

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

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

  • React 기초 지식이 필요해요.

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

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

안녕하세요
Kyo입니다.

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

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

 

  • ✉ inkyo.dev@gmail.com

커리큘럼

전체

97개 ∙ (17시간 4분)

수업 자료

가 제공되는 강의입니다.

  • 디자인 자료 (Figma)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!