BEST
개발 · 프로그래밍

/

모바일 앱 개발

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

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

(5.0) 수강평 17개

수강생 615명

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)

강의 게시일: 2024년 03월 25일
마지막 업데이트일: 2024년 08월 10일

수강평

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