Inflearn brand logo image
Inflearn brand logo image

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급자를 위해 준비한
[웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • Expo 프레임워크

  • 기초 React.Native

  • 웹뷰와 React/Next 연동

  • 스마트폰 기능 및 권한 연동 (알람, 위치, 시스템 등)

  • 안정적인 하이브리드앱 설계 (마이크로프론트엔드)

웹 개발자 연봉 올리기 프로젝트
웹 개발 기술을 그대로 이용하여 '앱 개발자'로 성장하기

안녕하세요!
코드캠프 노원두입니다.

웹 개발자가 쉽게 역량을 키울 수 있도록 해주는 웹 개발자 필수 강의를 목표했습니다.
개발자는 역량을 계속해서 키워나가야 하는 숙제를 가지고 있습니다. 저 역시 같은 숙제를 매일 하고 있으며, 여러분의 시행착오를 조금이나마 줄여드릴 수 있도록 노력했습니다. 늘 잘 따라와주셔서 감사합니다.

9년차 풀스택 웹 개발자, 하이브리드앱 개발자,
부트캠프 대표강사로서 웹 개발자가 가진 기술로 쉽게 역량을 키울 수 있도록 연구했습니다.

하이브리드 앱 개발자로 쉽고 빠르게 성장할 수 있는 핵심 내용과 실무코드를 공개합니다.
그럼 강의에서 만나요!

크로스플랫폼 하이브리드
앱 개발이란?

크로스플랫폼 하이브리드 앱 개발이란 웹 코드로 다양한 운영체제(Android, iOS 등)에서 동작하는 앱을 만드는 기술이에요. 일반적으로 앱을 만들 때는 각각의 운영체제마다 다른 프로그래밍 언어와 환경에서 별도로 개발해야 하지만, 크로스플랫폼과 하이브리드앱 기술을 쓰면 웹에서 쓰는 React.js와 Next.js 같은 기술을 이용해서 한 번만 앱을 개발하면 여러 운영체제에서 모두 사용할 수 있어요.

대표적인 프레임워크로는 React.Native와 Flutter가 있지만 아쉽게도 이 기술들은 복잡한 환경 셋팅 및 추가적인 많은 학습을 필요로 하고 있어요.

그러나 Expo는 복잡한 환경 셋팅 없이 개발할 수 있는 매우 효율적인 프레임워크입니다.

Expo 프레임워크란
무엇인가요?

Expo(엑스포)는 React Native와 웹 기술을 이용해서 모바일 앱(Android, iOS)을 쉽고 빠르게 개발할 수 있게 도와주는 도구이자 서비스예요.

원래 React Native만으로 앱을 개발하려면 개발자가 스스로 복잡한 설정과 환경 구축을 해야 하는데, Expo는 미리 환경을 설정하고 필요한 기능을 준비해줘서, 개발자는 앱의 기능과 디자인에만 집중할 수 있어 매우 쉽게 하이브리드앱을 만들 수 있어요!

Expo 프레임워크는
왜 효율적인가요?

Expo가 효율적인 이유는 크게 3가지로 정리할 수 있어요.

1⃣ 웹 코드로 여러 플랫폼에서 사용 가능
Expo를 사용하면 한 번의 개발로 안드로이드와 아이폰에서 모두 실행되는 앱을 만들 수 있어 시간과 비용이 절약돼요.

2⃣ 간단하고 빠른 시작
Expo는 미리 만들어진 환경을 제공해서 복잡한 설정 없이도 곧바로 앱을 만들 수 있어요.

3⃣ 손쉬운 테스트와 공유

앱을 실제 스마트폰에서 쉽게 테스트하고 결과를 실시간으로 볼 수 있어요. 특히 친구나 동료에게 앱을 쉽게 공유해서 테스트해보게 할 수 있어요.

하이브리드앱 강의는
누가 듣는 것이 좋은가요?

실은 React와 Next를 한번이라도 학습한 분들이라면, 꼭 한 번은 들어야 하는 필수 강의가 될 수 있도록 만들었어요! 우리가 이미 알고 있는 기술로 손쉽게 성장할 수 있는 방법이니깐요.

웹 개발 지식을 그대로 활용해서 손쉽게 앱 개발을 배우고 싶은 분

개인 수익화를 위해 앱 개발에 대한 관심과 열정있는 분

연봉을 올리거나
이직을 희망하는 웹 개발자

이 강의에서는
어떤 내용을 배울 수 있나요?

이 강의는 단순한 웹뷰 내용만 다루는 강의가 아니에요! 훨씬 더 세심하고 핵심적인 내용들로 가득 채웠습니다. 모바일 기능을 사용하는 Device API부터 효율적으로 모바일 UI를 설계하는 법, 페이지 애니메이션 등 여러분이 앱 개발에 꼭 알아야 하는 모든 내용을 꼼꼼하게 담았습니다.

[강의 목표]

  • 웹 기술을 그대로 활용하여 IOS/AOS 앱 개발 할 수 있는 능력


  • Expo 프레임워크에 대한 전반 및 다양한 기기 사이즈에 대응 및 설계하는 능력

  • 웹과 앱의 데이터 연동 방법을 이해하고 활용하는 능력

  • 위치, 알람, 카메라 등 다양한 네이티브 기능을 활용할 수 있는 능력

  • 앱 로그인을 이해하고 보안을 강화하여 적용할 수 있는 능력

  • 확장성을 고려하고 메뉴간 도메인을 분리할 수 있는 능력

1. 하이브리드앱_Expo

2. 모바일 UI 설계

3. 디바이스 API 설계

4. 모바일 시스템 기능

5. 모바일 알람 기능

6. 앱 권한

7. 사진확대 및 핀치줌

8. 안드로이드 백버튼

9. 페이지이동 애니메이션

10. 앱 로그인

11. 목록 새로고침

12. 마이크로 프론트엔드

강의에서 다루는 세부적인 내용을 확인해보세요.
체계적이면서도 필수적인 내용들로 채웠습니다😀

크로스플랫폼과 하이브리드앱

  1. 리액트네이티브와 Expo

  2. 에뮬레이터와 시뮬레이터

  3. 리액트네이티브 태그들

  4. 웹뷰와 Next 연동

  5. 웹뷰 연결 실패 대응

모바일 UI 설계

  1. 모바일 UI 설계와 하이브리드앱 장점

  2. 모바일 UI 비율늘리기

  3. 모바일 레이아웃 헤더

  4. 로컬 헤더 및 옵션 심화

  5. 모바일 레이아웃 푸터

디바이스 API 설계

  1. 웹뷰 디버깅

  2. 디바이스와 웹뷰 데이터전달

  3. 디바이스 API

모바일 위치 및 시스템 기능

  1. 디바이스 시스템정보 API

  2. 디바이스 위치정보 API

  3. 디바이스 객체 룩업 리팩토링

모바일 알림 기능

  1. 알림 프로세스

  2. 스케줄 알림

  3. 알림 클릭

앱 권한

  1. 앱 권한 설정

  2. 앱 상태 감지

안드로이드 백버튼

  1. 안드로이드 백버튼

  2. useEffect와 메모리누수·커스텀훅



사진 확대 및 핀치줌

  1. 사진 원본 보기

  2. 핀치줌

페이지이동 애니메이션

  1. 페이지이동 애니메이션

  2. 페이지이동 애니메이션 (뒤로가기)

앱 로그인

  1. 앱 로그인

  2. 앱 로그인 토큰 탈취

목록 새로고침

  1. 풀 투 리프레시 (pull-to-refresh)

마이크로 프론트엔드

  1. 마이크로 프론트엔드 웹

  2. 마이크로 프론트엔드 앱 연결

스케줄 알람

안드로이드 백버튼 (더블클릭 종료)

페이지 이동 애니메이션

풀 투 리프레쉬 (pull-to-refresh)

무엇 하나 놓치지 않도록
최선을 다해 기획했어요!

이 강의는 Javacript와 React.js 또는 Next.js를 선수 지식으로 알고 있어야 해요! 그러나 걱정하지 마세요.
여러분이 어느 수준에 있던, 이 강의를 완강하기 위해서 필요한 핵심적인 Javascript와 Next.js의 내용을 별도로 제공하고 있어요! 각각 어떤 내용을 제공하는지 확인해보세요!

Javascript 추가 제공

  1. 템플릿 리터럴

  2. 객체와 대괄호 (접근·생성)

  3. 구조분해할당

  4. SetTimeout

  5. 삼항연산자

  6. 화살표함수와 리턴 생략

  7. 스프레드 연산자 / REST 파라미터

  8. Early-Exit

  9. addEventListner

  10. 옵셔널 체이닝

  11. JSON.stringify / JSON.parse

  12. switch

  13. 객체 키 삭제 및 조회

  14. Promise

  15. async / await

  16. shorthand-property

  17. 구조분해할당과 초기값 설정

  18. setInterval / clearInterval

  19. querySelctor

  20. accessToken / refreshToken

  21. HOF

Next.js 추가 제공

  1. 프래그먼트

  2. useState

  3. useEffect

  4. props

  5. children

  6. 조건부 렌더링

  7. usePathname

  8. use client

  9. 동적라우팅 / useParams

  10. Link

  11. prevState

  12. use server

  13. useRef

  14. 커스텀훅

  15. useRouter (router.push)

  16. useRouter (router.back)

  17. 앱 라우터 / 페이지 라우터

  18. 웹팩

혹시 노원두가
처음이신가요?

그동안 받아왔던 노원두님의 키워드와 수강평을 정리했습니다.
이 강의를 통해 노원두님과 함께 앱 개발자로 성장해보세요🚀

#친철한 강의
#꼼꼼한
#힘숨찐
#귀에 쏙쏙
#찐개발자
#멘토의 멘토


#원두콩
#좋아요좋아요

글쓴이: S S
어려운 용어를 축약적으로 쓰는 타 강의에 겁을 먹으신 분들은 꼭 노원두님의 하이퀄리티를 놓치지 마세요!

글쓴이: alopp
진짜 널 사랑해 노원두!
어지간한 것들 모두 진짜 농축되어 있어서 넘후 좋습니다.

글쓴이: 공백
진짜 좋은 강의인것 같습니다. 기초부터 부분부터 심화까지 부분 부분이 정밀하고 응축된 강의라 혼자서도 이해하기 좋아요!

글쓴이: 김동은
노원님은 가장 필요한 기술들을 커리큘럼으로 매번 개선하시고 실무 경험을 토대로한 예제들로 이해가 잘 되었습니다.

궁금한 점이
있으신가요?

Q. 선수 지식은 어느정도 필요한가요?

React.js 또는 Next.js 기초 지식이 있으신 분들이 듣기에 최적화된 강의입니다.
다만, 강사님마다 설명하는 스타일도 다르며 코드를 작성하는 법도 다를 수 있기 때문에, 더 효율적인 학습을 위해서 노원두님의 Javascript 뿐만 아니라 Next의 핵심내용까지 보충 영상으로 제공하고 있습니다. 강의 자체가 친철하고 체계적으로 설명하기 때문에 어려움 없이 학습할 수 있습니다.

Q. 컴퓨터·노트북 사양은 어떻게 되나요?

노원두님은 맥을 사용하고 하기 있기에 강의는 Mac을 기준으로 진행되었습니다.
하이브리드앱의 특성상 Mac과 아이폰을 가지고 있다면 Android/IOS 둘 모두 구현 가능하며 시뮬레이터를 통해 테스트 가능합니다. 만약 Window계열 컴퓨터와 Android폰을 가지고 있다면 테스트는 Android만 가능합니다. IOS까지 테스트 해보고 싶다면 Mac은 없어도 최소 IOS 공기계가 필요합니다.

Q. 실무에서 사용 가능한 내용들을 알려주시나요?

이 강의에 있는 내용과 실무 예제들은 노원두님이 직접 하이브리드앱으로 만들어 실서비스로 배포한 '솔로트립'을 기준으로 하고 있습니다. 현재 '솔로트립'은 잠시 업데이트 중으로 서비스를 운영하고 있지 않지만 곧 새로운 프로젝트를 도입해서 재오픈 예정입니다. 실서비스로 바로 사용할 수 있는 수준의 내용들로 전체 커리큘럼이 제작되었습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 기초 웹 개발을 가지고 손쉽게 앱 개발을 해보고 싶은 분

  • React/Next 경험자로 하이브리드앱 개발에 도전하고 싶은 분

  • 앱 개발자로 연봉을 올리고 싶은 웹 개발자

  • 하이브리드앱 개발 포트폴리오를 만들고 싶은 분

선수 지식,
필요할까요?

  • React.js 기초

  • Next.js 기초

  • 웹 개발 기초

안녕하세요
코드캠프입니다.

13,161

수강생

369

수강평

188

답변

4.8

강의 평점

10

강의

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

공동 지식공유자

커리큘럼

전체

96개 ∙ (33시간 23분)

해당 강의에서 제공:

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

수강평

전체

3개

4.7

3개의 수강평

  • doomco님의 프로필 이미지
    doomco

    수강평 28

    평균 평점 5.0

    5

    5% 수강 후 작성

    가성비있는강의라 느껴져서 구입부터해보았습니다.

    • 충실한 메기님의 프로필 이미지
      충실한 메기

      수강평 1

      평균 평점 5.0

      5

      10% 수강 후 작성

      • lgs4002님의 프로필 이미지
        lgs4002

        수강평 12

        평균 평점 4.3

        4

        18% 수강 후 작성

        코드캠프님의 다른 강의

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

        비슷한 강의

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

        ₩36,300

        25%

        ₩48,400