강의

멘토링

로드맵

Programming

/

Mobile Application Development

Hybrid App with Expo Framework to Increase Web Developer's Salary

This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

(4.3) 4 reviews

85 learners

실습 중심
React
Next.js
expo
React Native

What you will learn!

  • Expo framework

  • Basic React Native

  • Webview and React/Next integration

  • Smartphone Function and Permission Integration (Alarm, Location, System, etc.)

  • Designing a Stable Hybrid App (Micro Frontend)

Web Developer Salary Increase Project
Grow into an 'app developer' by utilizing web development skills as is

hello!
This is Code Camp's Noh Won-du.

The goal is to provide essential web developer courses that will help web developers easily develop their capabilities.
Developers have homework to continuously develop their capabilities. I also do the same homework every day, and I tried to reduce your trial and error even a little. Thank you for always following along.

9 years of experience as a full-stack web developer, hybrid app developer,
As a representative instructor of the boot camp , I have researched how to easily develop the skills of web developers .

We reveal the core contents and practical code that can help you grow easily and quickly as a hybrid app developer.
Then see you in class!

Cross-platform hybrid
What is app development?

Cross-platform hybrid app development is a technology that creates apps that run on various operating systems (Android, iOS, etc.) using web code . Normally, when creating an app, you have to develop it separately in different programming languages and environments for each operating system, but with cross-platform and hybrid app technology, you can use React.js and Next.js , which are used on the web, by developing the app only once and using them on various operating systems.

Representative frameworks include React.Native and Flutter, but unfortunately, these technologies require complex environment settings and a lot of additional learning.

However, Expo is a very efficient framework that allows development without complex environment settings.

What is the Expo framework?
What is it?

Expo is a tool and service that helps you develop mobile apps (Android, iOS) easily and quickly using React Native and web technologies.

Originally, if you wanted to develop an app using only React Native, developers had to create complex settings and build the environment themselves. However, Expo sets up the environment in advance and prepares the necessary functions, so developers can focus only on the app's functions and design, making it very easy to create a hybrid app!

The Expo framework
Why is it efficient?

There are three main reasons why Expo is effective.

1⃣ Available on multiple platforms with web code
Expo saves you time and money by allowing you to build apps that run on both Android and iPhone with a single development.

2⃣ Simple and quick start
Expo provides a pre-built environment so you can build apps right away without any complicated setup.

3⃣ Easy testing and sharing

You can easily test your app on an actual smartphone and see the results in real time. In particular, you can easily share the app with your friends or colleagues to test it too.

Hybrid app lecture
Who would benefit from listening?

In fact, I made it so that it would be a must-take lecture for anyone who has ever learned React or Next ! It is a way to easily grow with the technologies we already know.

For those who want to learn app development easily by utilizing their web development knowledge

Anyone with an interest and passion for app development for personal monetization

Raise your salary or
Web developer looking for a career change

In this lecture
What can I learn?

This course is not just about covering simple webview content! It is filled with much more detailed and essential content . It covers everything you need to know for app development, from Device APIs that use mobile features to efficient mobile UI design, page animations, and more.

[Course Objectives]

  • Ability to develop IOS/AOS apps using web technology as is


  • Ability to design for and support a wide range of device sizes and the overall Expo framework.

  • Ability to understand and leverage data linking methods between the web and apps

  • Ability to utilize a variety of native features such as location, alarms, and cameras

  • Ability to understand app login and apply it to enhance security

  • Ability to consider scalability and separate domains between menus

1. Hybrid App_Expo

2. Mobile UI Design

3. Device API design

4. Mobile System Functions

5. Mobile alarm function

6. App Permissions

7. Photo enlargement and pinch zoom

8. Android Back Button

9. Page transition animation

10. App Login

11. Refresh the list

12. Micro Frontend

Check out the detailed content covered in the lecture.
It's filled with systematic yet essential content 😀

Cross-platform and hybrid apps

  1. React Native and Expo

  2. Emulators and Simulators

  3. React Native Tags

  4. WebView and Next integration

  5. Responding to WebView connection failure

Mobile UI Design

  1. Mobile UI Design and Hybrid App Advantages

  2. Increase mobile UI ratio

  3. Mobile layout header

  4. Local Header and Options Deep Dive

  5. Mobile Layout Footer

Device API Design

  1. Debugging WebView

  2. Device and WebView Data Transfer

  3. Device API

Mobile Location and System Features

  1. Device System Information API

  2. Device Location API

  3. Refactoring device object lookups

Mobile notification feature

  1. Notification Process

  2. Schedule Notification

  3. Click on the notification

App Permissions

  1. Setting app permissions

  2. Detect app status

android back button

  1. android back button

  2. useEffect and memory leaks/custom hooks



Zoom in and pinch out photos

  1. View original photo

  2. Pinch zoom

Page transition animation

  1. Page transition animation

  2. Page transition animation (back)

App Login

  1. App Login

  2. Stealing app login tokens

Refresh list

  1. pull-to-refresh

Micro Frontend

  1. Micro Frontend Web

  2. Connecting Micro Frontend Apps

Schedule Alarm

Android back button (double click to exit)

Page transition animation

pull-to-refresh

So that you don't miss anything
I planned it with all my might!

This course requires prior knowledge of Javascript and React.js or Next.js! But don't worry.
Regardless of your level, we provide separate content on core Javascript and Next.js that you need to complete this course! Check out what each content provides!

Provides additional Javascript

  1. Template Literals

  2. Objects and brackets (access/creation)

  3. Structural decomposition allocation

  4. SetTimeout

  5. Ternary operator

  6. Arrow functions and return omission

  7. Spread Operator / REST Parameters

  8. Early-Exit

  9. addEventListener

  10. Optional Chaining

  11. JSON.stringify / JSON.parse

  12. switch

  13. Delete and retrieve object keys

  14. Promise

  15. async / await

  16. shorthand-property

  17. Decomposition and initialization of structure allocation

  18. setInterval / clearInterval

  19. querySelctor

  20. accessToken / refreshToken

  21. HOF

Added support for Next.js

  1. Fragment

  2. useState

  3. useEffect

  4. props

  5. children

  6. Conditional Rendering

  7. usePathname

  8. use client

  9. Dynamic routing / useParams

  10. Link

  11. prevState

  12. use server

  13. useRef

  14. Custom Hook

  15. useRouter(router.push)

  16. useRouter(router.back)

  17. App Router / Page Router

  18. Webpack

By any chance, Noh Won-du
Is this your first time?

I have organized the keywords and course reviews I have received from Professor Noh Won-du.
Grow as an app developer with Noh Won-du through this course 🚀

#Friendly lecture
#scrupulous
#Strong breath
#Fit in the ears
#real developer
#Mentor's mentor


#coffeebeans
#LikeLike

Author: SS
If you are afraid of other lectures that use difficult terms in a concise manner, don't miss Noh Won-du's high quality lectures!

Author: alopp
I really love you, Noh Won-du!
It's really great because everything is really concentrated.

Author: blank
It seems like a really good lecture. It's a detailed and condensed lecture from the basics to advanced levels, so it's easy to understand on your own!

Author: Kim Dong-eun
Mr. Noh Won always improves the curriculum by providing the most necessary skills, and examples based on practical experience make it easy to understand.

I have a question
Do you have it?

Q. How much player knowledge is required?

This course is optimized for those with basic knowledge of React.js or Next.js.
However, since each instructor has a different style of explanation and may have different methods of writing code, we provide supplementary videos of not only Noh Won-du's Javascript but also the core content of Next for more efficient learning. Since the lecture itself is friendly and systematic, you can learn without difficulty.

Q. What are the computer/laptop specifications?

Since Mr. Noh Won-du uses a Mac , the lecture was conducted based on Mac .
Due to the nature of hybrid apps, if you have a Mac and an iPhone, you can implement both Android/IOS and test them through a simulator. If you have a Windows computer and an Android phone, you can only test Android. If you want to test IOS, you don't need a Mac, but you need at least an IOS operating system.

Q. Can you tell me some practical things that can be used in practice?

The content and practical examples in this lecture are based on 'Solo Trip', which was developed by Noh Won-du as a hybrid app and distributed as a real service. 'Solo Trip' is currently being updated and is not in service, but it will be reopened soon by introducing a new project. The entire curriculum has been created with content that can be used as a real service right away.

Recommended for
these people

Who is this course right for?

  • For those who want to easily develop apps with basic web development skills.

  • Anyone with React/Next experience who wants to try developing hybrid apps

  • A web developer who wants to increase their salary by becoming an app developer.

  • For those who want to create a hybrid app development portfolio.

Need to know before starting?

  • React.js Basics

  • Next.js Basics

  • Web Development Basics

Hello
This is

15,121

Learners

400

Reviews

210

Answers

4.8

Rating

14

Courses

"Try anything, Try everything!"

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

Curriculum

All

96 lectures ∙ (33hr 23min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

4 reviews

4.3

4 reviews

  • ymyj331341님의 프로필 이미지
    ymyj331341

    Reviews 2

    Average Rating 4.0

    4

    100% enrolled

    It was a thorough lecture.

    • lgs4002님의 프로필 이미지
      lgs4002

      Reviews 13

      Average Rating 4.3

      Edited

      3

      49% enrolled

      I've seen all the necessary parts, but it was slightly disappointing.

      • dnjstl3213509님의 프로필 이미지
        dnjstl3213509

        Reviews 1

        Average Rating 5.0

        5

        10% enrolled

        • doomco07님의 프로필 이미지
          doomco07

          Reviews 28

          Average Rating 5.0

          5

          5% enrolled

          It felt like a cost-effective course, so I started by purchasing it.

          Limited time deal

          $28.60

          23%

          $37.40

          codecamp's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!