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

/

모바일 앱 개발

아바타 커뮤니티앱 만들기 (React Native)

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

(5.0) 수강평 8개

수강생 160명

React NativeTypeScriptreact-queryReactJavaScript
Thumbnail

초급자를 위해 준비한
[모바일 앱 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[초중급] 아바타 커뮤니티앱 만들기 with React Native

Group 604 (1)

강의 소개

리액트네이티브로 아바타 기반의 커뮤니티앱을 제작합니다. 글 작성/댓글뿐만 아니라 대댓글, 좋아요, 투표, 아바타 시스템, 다국어 설정, 푸시 알림 등의 다양한 기능이 있는 커뮤니티 앱을 완성도 있게 만드는 방법을 알려드립니다.

React Native (Expo), TypeScript, react-query(tanstack query)를 이용하여 iOS, Android 앱을 동시에 개발합니다. 프론트 앱 개발에만 집중할 수 있도록 피그마 디자인 시스템을 포함한 모든 프로덕트 디자인을 제공해 드리며 백엔드 소스코드도 제공해 드립니다.

Group 605

이 강의에서는 React Native Expo를 사용합니다.

리액트네이티브로 앱을 개발하는 방식에는 Expo로 개발하는 방법과 CLI로 개발하는 방법이 있습니다. 최근 리액트네이티브 공식 문서에서도 Expo를 통한 개발을 권장하고 있는데요.

Expo는 CLI에 비해 환경설정과 개발을 정말 간편하게 할 수 있습니다. 시뮬레이터/실제기기 테스트도 간편하고, 라이브러리 사용 또한 간편하여 Expo를 이용하면 쉽게 React Native 개발을 시작할 수 있습니다. 또한 EAS(Expo Application Services)를 활용해 앱을 쉽게 빌드 및 배포가 가능합니다.

(* CLI를 이용한 개발은 맛집 지도앱 만들기 강의를 참고해주세요.)

📖 다루는 내용

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


  • JWT 기반 인증


  • 공통 컴포넌트 개발


  • 커스텀 훅 패턴


  • 프로필/아바타 기능

  • 다국어 설정 (i18n)

  • 푸시 알림 (Push Notifications)

  • 앱 빌드 및 배포 (EAS)


  • 글작성/수정/삭제

  • 댓글/대댓글 작성하기

  • 투표 첨부, 투표 참여하기

  • 이미지 업로드

  • 좋아요/조회수 기능

  • 낙관적 업데이트 (Optimistic Update)

  • 무한스크롤 (Infinite Scroll)


  • SVG 사용하기

  • 폰트 적용하기

  • dayjs로 날짜 다루기

  • React Hook Form으로 폼 다루기




🔥 개발 기술스택

stack

강의에서는 React Native(Expo), TypeScript, React Query(TanStack Query), React Hook Form, dayjs, i18n 등의 기술을 사용하여 개발합니다. 모두 사용해보지 않았어도 괜찮아요!

React Query를 사용하여 서버 데이터를 가져오고, 캐싱하고, 업데이트 하는 방법, React Hook Form을 사용하여 아무리 복잡한 폼이라도 쉽게 다루는 방법, dayjs로 날짜를 쉽게 다루는 방법, i18n를 활용하여 다국어 지원을 쉽게 적용하는 방법을 알려드려요.

⚡ ️️주요 구현 기능

회원가입/로그인

피드 무한스크롤/검색

글작성/투표 첨부

좋아요/댓글/대댓글 + 푸시알림

프로필/아바타 커스텀

설정/다국어

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

⭐️ 이 강의의 차별점

1. Android, iOS 동시 개발


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

2. Figma 디자인 시스템 제공

디자인은 고민할 필요 없어요! 색상/컴포넌트/스크린/이미지가 포함된 모든 프로덕트 디자인을 제공해요.

3. 집중도 높은 구성, 수업별 소스코드 제공

  • 불필요한 내용을 줄이고 핵심만 담아, 수업당 평균 7.5분, 최대 16분의 짧고 집중하기 쉬운 구성으로 학습 효율을 높이도록 제작했습니다.

  • 완성되어 있는 백엔드 소스코드뿐만 아니라 프로젝트 시작부터 끝까지 진행되는 모든 수업에 대해, 진행되는 수업과 동일한 소스코드를 제공합니다. 수업 별로 첨부자료를 확인해 주세요.

❗ ️참고 사항

  • 강의는 ReactNative Expo를 이용하여 진행됩니다.


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


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

  • 강의에서 사용되는 이미지(아바타)는 저작권 등록이 되어있는 저작물로, 개인 연습 용도로만 사용해 주세요.

🙋‍♂ Q&A

Q. 수강 대상이 어떻게 되나요?

  • 선수 지식으로 리액트네이티브는 필요하지 않지만 자바스크립트 ES6 지식이 있으신 분, 리액트를 간단히 경험해 보신 적 있는 분들을 수강 대상으로 하고 있습니다.

Q. 타입스크립트는 필수인가요?

  • 리액트네이티브에서는 기본적으로 프로젝트가 타입스크립트로 세팅되어 있으므로, 강의는 타입스크립트로 진행됩니다. 다만 복잡한 타입은 사용하지 않으므로 타입스크립트 지식이 필수는 아닙니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

  • 단순 게시판이 아닌, 완성도 있는 커뮤니티앱을 만들고 싶은분

선수 지식,
필요할까요?

  • JavaScript 기초 지식이 필요해요. ES6 문법은 알고 있어야해요.

  • React 기본 Hooks(useState, useEffect)는 알고 있어야해요.

안녕하세요
Kyo입니다.

1,265

명

수강생

51

개

수강평

269

개

답변

5.0

점

강의 평점

2

개

강의

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

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

 

  • ✉ inkyo.dev@gmail.com

커리큘럼

전체

77개 ∙ (8시간 18분)

해당 강의에서 제공:

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

수강평

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