강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
Programming

/

Mobile Application Development

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

Đây là khóa học giúp bạn phát triển ứng dụng di động có thể cung cấp dịch vụ trên Android và IOS bằng cách tận dụng phát triển web.

(4.3) 4 đánh giá

84 học viên

실습 중심
React
Next.js
expo
React Native

Dịch cái này sang tiếng Việt

  • Khung Expo

  • React Native cơ bản

  • Liên kết WebView với React/Next

  • Liên kết chức năng và quyền của điện thoại thông minh (báo thức, vị trí, hệ thống, v.v.)

  • Thiết kế ứng dụng lai ổn định (Micro Frontend)

⭐ Dự án tăng lương cho lập trình viên web ⭐
Trở thành một 'nhà phát triển ứng dụng' bằng cách sử dụng các kỹ năng phát triển web như hiện tại

Xin chào!
Đây là Noh Won-du của Code Camp.

Mục tiêu là cung cấp các khóa học thiết yếu dành cho nhà phát triển web giúp các nhà phát triển web dễ dàng phát triển năng lực của mình.
Các nhà phát triển có nhiệm vụ liên tục phát triển năng lực của mình. Tôi cũng làm cùng một bài tập về nhà mỗi ngày và cố gắng giảm bớt thời gian thử nghiệm và sai sót. Cảm ơn bạn đã luôn theo dõi.

9 năm kinh nghiệm làm nhà phát triển web full-stack, nhà phát triển ứng dụng lai,
Với tư cách là giảng viên đại diện của trại huấn luyện , tôi đã nghiên cứu cách phát triển kỹ năng của các nhà phát triển web một cách dễ dàng .

Chúng tôi tiết lộ nội dung cốt lõi và mã thực tế có thể giúp bạn phát triển dễ dàng và nhanh chóng với tư cách là nhà phát triển ứng dụng lai.
Vậy thì gặp lại bạn ở lớp nhé!

Kết hợp đa nền tảng
Phát triển ứng dụng là gì?

Phát triển ứng dụng lai đa nền tảng là công nghệ tạo ra các ứng dụng chạy trên nhiều hệ điều hành khác nhau (Android, iOS, v.v.) bằng cách sử dụng mã web . Thông thường, khi tạo một ứng dụng, bạn phải phát triển riêng biệt trên các ngôn ngữ lập trình và môi trường khác nhau cho từng hệ điều hành, nhưng với công nghệ ứng dụng đa nền tảng và ứng dụng lai , bạn có thể phát triển ứng dụng một lần và sử dụng trên mọi hệ điều hành bằng các công nghệ như React.js và Next.js được sử dụng trên web.

Các khuôn khổ tiêu biểu bao gồm React.Native và Flutter, nhưng thật không may, những công nghệ này đòi hỏi cài đặt môi trường phức tạp và nhiều kiến ​​thức bổ sung.

Tuy nhiên, Expo là một khuôn khổ rất hiệu quả cho phép phát triển mà không cần cài đặt môi trường phức tạp.

Khung Expo là gì?
Đó là gì?

Triển lãm

Expo là một công cụ và dịch vụ giúp bạn phát triển ứng dụng di động (Android, iOS) một cách dễ dàng và nhanh chóng bằng công nghệ React Native và web.

Ban đầu, nếu bạn muốn phát triển một ứng dụng chỉ sử dụng React Native, các nhà phát triển phải tạo các thiết lập phức tạp và tự xây dựng môi trường. Tuy nhiên, Expo thiết lập môi trường trước và chuẩn bị các chức năng cần thiết để các nhà phát triển chỉ cần tập trung vào chức năng và thiết kế của ứng dụng, giúp việc tạo ứng dụng lai trở nên rất dễ dàng!

Khung Expo
Tại sao nó lại hiệu quả?

Có ba lý do chính giải thích tại sao Expo lại hiệu quả.

1⃣ Có sẵn trên nhiều nền tảng với mã web
Expo giúp bạn tiết kiệm thời gian và tiền bạc bằng cách cho phép bạn xây dựng các ứng dụng chạy trên cả Android và iPhone chỉ bằng một lần phát triển.

2⃣ Bắt đầu đơn giản và nhanh chóng
Expo cung cấp một môi trường dựng sẵn để bạn có thể xây dựng ứng dụng ngay mà không cần bất kỳ thiết lập phức tạp nào.

3⃣ Dễ dàng kiểm tra và chia sẻ
Bạn có thể dễ dàng kiểm tra ứng dụng của mình trên điện thoại thông minh thực tế và xem kết quả theo thời gian thực. Đặc biệt, bạn có thể dễ dàng chia sẻ ứng dụng với bạn bè hoặc đồng nghiệp để dùng thử.

Bài giảng ứng dụng lai
Ai sẽ được hưởng lợi khi lắng nghe?

Trên thực tế, tôi đã tạo ra bài giảng này để bất kỳ ai đã từng học React hoặc Next đều phải tham gia ! Bởi vì đây là cách dễ dàng để phát triển với công nghệ mà chúng ta đã biết.

Dành cho những ai muốn học phát triển ứng dụng một cách dễ dàng bằng cách sử dụng kiến ​​thức phát triển web của họ

Bất kỳ ai có hứng thú và đam mê phát triển ứng dụng để kiếm tiền cá nhân

Tăng lương của bạn hoặc
Nhà phát triển web đang tìm kiếm sự thay đổi nghề nghiệp

Trong bài giảng này
Tôi có thể học được gì?

Bài giảng này không chỉ nói về nội dung webview đơn giản! Nó chứa nhiều nội dung chi tiết và cụ thể hơn. Sách này trình bày mọi thứ bạn cần biết về phát triển ứng dụng, từ API thiết bị sử dụng các tính năng di động đến thiết kế giao diện người dùng di động hiệu quả và hoạt ảnh trang.

[Mục tiêu của khóa học]

  • Khả năng phát triển ứng dụng IOS/AOS bằng công nghệ web


  • Khả năng thiết kế và hỗ trợ nhiều kích cỡ thiết bị khác nhau và toàn bộ khuôn khổ Expo.

  • Khả năng hiểu và tận dụng các phương pháp liên kết dữ liệu giữa web và ứng dụng

  • Khả năng sử dụng nhiều tính năng gốc như vị trí, báo động và camera

  • Khả năng hiểu đăng nhập ứng dụng và áp dụng nó để tăng cường bảo mật

  • Khả năng xem xét khả năng mở rộng và phân tách các miền giữa các menu

1. Ứng dụng lai_Expo

2. Thiết kế giao diện người dùng di động

3. Thiết kế API thiết bị

4. Chức năng của hệ thống di động

5. Chức năng báo động di động

6. Quyền ứng dụng

7. Phóng to ảnh và thu nhỏ bằng cách chụm ngón tay

8. Nút Quay lại của Android

9. Hoạt ảnh chuyển trang

10. Đăng nhập ứng dụng

11. Làm mới danh sách

12. Giao diện vi mô

Hãy xem nội dung chi tiết được trình bày trong bài giảng.
Nó chứa đầy nội dung có hệ thống nhưng thiết yếu 😀

Ứng dụng đa nền tảng và ứng dụng lai

  1. React Native và Expo

  2. Trình giả lập và Trình mô phỏng

  3. Thẻ React Native

  4. Tích hợp WebView và Next

  5. Phản hồi lỗi kết nối WebView

Thiết kế giao diện người dùng di động

  1. Ưu điểm của thiết kế UI di động và ứng dụng lai

  2. Tăng tỷ lệ UI trên thiết bị di động

  3. Tiêu đề bố cục di động

  4. Tiêu đề cục bộ và Tùy chọn Đi sâu

  5. Bố cục di động Chân trang

Thiết kế API thiết bị

  1. Gỡ lỗi WebView

  2. Chuyển dữ liệu thiết bị và WebView

  3. API thiết bị

Tính năng định vị di động và hệ thống

  1. API thông tin hệ thống thiết bị

  2. API vị trí thiết bị

  3. Tái cấu trúc tìm kiếm đối tượng thiết bị

Tính năng thông báo trên thiết bị di động

  1. Quy trình thông báo

  2. Lịch trình thông báo

  3. Nhấp vào thông báo

Quyền ứng dụng

  1. Thiết lập quyền ứng dụng

  2. Phát hiện trạng thái ứng dụng

nút quay lại android

  1. nút quay lại android

  2. useEffect và rò rỉ bộ nhớ/móc tùy chỉnh



Phóng to và thu nhỏ ảnh

  1. Xem ảnh gốc

  2. Phóng to thu nhỏ

Hoạt ảnh chuyển trang

  1. Hoạt ảnh chuyển trang

  2. Hoạt ảnh chuyển trang (quay lại)

Đăng nhập ứng dụng

  1. Đăng nhập ứng dụng

  2. Đánh cắp mã thông báo đăng nhập ứng dụng

Làm mới danh sách

  1. kéo để làm mới

Micro Frontend

  1. Micro Frontend Web

  2. Kết nối các ứng dụng Micro Frontend

Lịch báo thức

Nút quay lại Android (nhấp đúp để thoát)

Hoạt ảnh chuyển trang

kéo để làm mới

Để bạn không bỏ lỡ bất cứ điều gì
Tôi đã lên kế hoạch hết sức mình!

Khóa học này yêu cầu bạn phải có kiến ​​thức trước về Javascript và React.js hoặc Next.js! Nhưng đừng lo lắng.
Bất kể trình độ của bạn, chúng tôi đều cung cấp nội dung riêng về Javascript cốt lõi và Next.js mà bạn cần để hoàn thành khóa học này! Hãy xem mỗi loại có gì đặc biệt nhé!

jjj
nn

Cung cấp Javascript bổ sung

  1. Mẫu chữ

  2. Đối tượng và dấu ngoặc (truy cập/tạo)

  3. Phân bổ phân hủy cấu trúc

  4. Đặt thời gian chờ

  5. Toán tử ba ngôi

  6. Các hàm mũi tên và bỏ qua trả về

  7. Toán tử Spread / Tham số REST

  8. Thoát sớm

  9. thêmEventListener

  10. Chuỗi tùy chọn

  11. JSON.stringify / JSON.parse

  12. công tắc

  13. Xóa và lấy lại khóa đối tượng

  14. Hứa

  15. không đồng bộ / chờ đợi

  16. thuộc tính viết tắt

  17. Phân tích và khởi tạo phân bổ cấu trúc

  18. thiết lập Khoảng thời gian / xóa Khoảng thời gian

  19. truy vấnSelecttor

  20. accessToken / làm mớiToken

  21. Hội đồng quản trị

Đã thêm hỗ trợ cho Next.js

  1. Mảnh vỡ

  2. sử dụngState

  3. sử dụngHiệu ứng

  4. đạo cụ

  5. những đứa trẻ

  6. Kết xuất có điều kiện

  7. sử dụngPathname

  8. sử dụng khách hàng

  9. Định tuyến động / useParams

  10. Liên kết

  11. trướcTrạng thái

  12. sử dụng máy chủ

  13. sử dụngRef

  14. Móc tùy chỉnh

  15. sử dụngRouter(router.push)

  16. sử dụngRouter(router.back)

  17. Bộ định tuyến ứng dụng / Bộ định tuyến trang

  18. Gói Webpack

Có lẽ nào, Noh Won-du
Đây có phải là lần đầu tiên của bạn không?

Tôi đã sắp xếp các từ khóa và bài đánh giá khóa học mà tôi nhận được từ Giáo sư Noh Won-du.
Phát triển như một nhà phát triển ứng dụng với Noh Won-du thông qua khóa học này 🚀

#Bài giảng thân thiện
#tỉ mỉ
#Hít thở mạnh
#Vừa vặn với tai
#nhà phát triển thực sự
#Người cố vấn của người cố vấn

#hạt cà phê
#ThíchThích

⭐ ⭐ ⭐ ⭐ ⭐ Tác giả: SS
Nếu bạn sợ những bài giảng khác sử dụng các thuật ngữ khó một cách ngắn gọn, đừng bỏ lỡ các bài giảng chất lượng cao của Noh Won-du!

⭐ ⭐ ⭐ ⭐ ⭐ Tác giả: alopp
Em thực sự yêu anh, Noh Won-du!
Thật tuyệt vời vì mọi thứ đều rất cô đọng.

⭐ ⭐ ⭐ ⭐ ⭐ Tác giả: blank
Có vẻ như đây là một bài giảng thực sự hay. Từ cơ bản đến nâng cao, mỗi phần đều được trình bày chi tiết và cô đọng để bạn có thể tự mình hiểu dễ dàng!

⭐ ⭐ ⭐ ⭐ ⭐ Tác giả: Kim Dong-eun
Thầy Noh Won luôn cải thiện chương trình giảng dạy bằng cách cung cấp những kỹ năng cần thiết nhất, cùng các ví dụ dựa trên kinh nghiệm thực tế giúp học viên dễ hiểu.

Hình ảnh giới thiệu của Nowondu

Tôi có một câu hỏi
Bạn có nó không?

H. Người chơi cần có bao nhiêu kiến ​​thức?

Khóa học này được tối ưu hóa cho những người có kiến ​​thức cơ bản về React.js hoặc Next.js.
Tuy nhiên, vì mỗi giảng viên có phong cách giải thích khác nhau và có thể có phương pháp viết mã khác nhau nên chúng tôi cung cấp các video bổ sung không chỉ đề cập đến Javascript của Noh Won-du mà còn cả nội dung cốt lõi của Next để việc học hiệu quả hơn. Vì bài giảng rất thân thiện và giải thích có hệ thống nên bạn có thể học mà không gặp khó khăn gì.

H. Thông số kỹ thuật của máy tính/máy tính xách tay là gì?

Vì ông Noh Won-du sử dụng máy Mac nên bài giảng được tiến hành trên máy Mac .
Do bản chất của ứng dụng lai, nếu bạn có máy Mac và iPhone, bạn có thể triển khai cả Android/IOS và thử nghiệm chúng thông qua trình mô phỏng. Nếu bạn có máy tính Windows và điện thoại Android, việc kiểm tra chỉ khả dụng trên Android. Nếu bạn muốn thử nghiệm iOS, bạn sẽ cần ít nhất một thiết bị iOS, ngay cả khi bạn không có máy Mac.

H. Bạn có thể cho tôi biết một số điều thực tế có thể áp dụng trong thực tế không?

Nội dung và các ví dụ thực tế trong bài giảng này dựa trên 'Solo Trip', được Noh Won-du tạo ra dưới dạng ứng dụng kết hợp và phân phối như một dịch vụ thực tế. Hiện tại, 'Solo Trip' đang tạm thời đóng cửa để cập nhật, nhưng sẽ sớm mở lại với một dự án mới. Toàn bộ chương trình giảng dạy đã được xây dựng với nội dung có thể sử dụng ngay trong các dịch vụ thực tế.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Dành cho những ai muốn dễ dàng phát triển ứng dụng bằng kiến thức phát triển web cơ bản

  • Dành cho những bạn có kinh nghiệm React/Next và muốn thử sức với việc phát triển ứng dụng hybrid.

  • Lập trình viên web muốn tăng lương với tư cách là nhà phát triển ứng dụng.

  • Dành cho những ai muốn xây dựng portfolio phát triển ứng dụng hybrid

Cần biết trước khi bắt đầu?

  • Cơ bản về React.js

  • Cơ bản về Next.js

  • Cơ bản về phát triển web

Xin chào
Đây là

13,497

Học viên

384

Đánh giá

200

Trả lời

4.8

Xếp hạng

12

Các khóa học

"Try anything, Try everything!"

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

Đồng giảng viên

Chương trình giảng dạy

Tất cả

96 bài giảng ∙ (33giờ 23phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

4 đánh giá

4.3

4 đánh giá

  • ymyj33님의 프로필 이미지
    ymyj33

    Đánh giá 2

    ∙

    Đánh giá trung bình 4.0

    4

    100% đã tham gia

    꼼꼼한 강의였습니다.

    • lgs4002님의 프로필 이미지
      lgs4002

      Đánh giá 13

      ∙

      Đánh giá trung bình 4.3

      Đã chỉnh sửa

      3

      49% đã tham gia

      필요부분은 다 봤는데 살짝 아쉬웠습니다.

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

        Đánh giá 1

        ∙

        Đánh giá trung bình 5.0

        5

        10% đã tham gia

        • doomco님의 프로필 이미지
          doomco

          Đánh giá 28

          ∙

          Đánh giá trung bình 5.0

          5

          5% đã tham gia

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

          1.016.403 ₫

          Khóa học khác của codecamp

          Hãy khám phá các khóa học khác của giảng viên!

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)Course Thumbnail

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

          코드캠프

          10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

          Intermediate

          Intermediate

          React, Next.js, cursor

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)Course Thumbnail

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

          코드캠프

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

          코드캠프

          수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

          Beginner

          Beginner

          React, Next.js, GraphQL

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

          코드캠프

          [코드캠프] 강력한 CSSCourse Thumbnail

          [코드캠프] 강력한 CSS

          코드캠프

          CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까요?

          Basic

          Basic

          HTML/CSS

          [코드캠프] 강력한 CSSCourse Thumbnail

          [코드캠프] 강력한 CSS

          코드캠프

          [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

          코드캠프

          코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

          Beginner

          Beginner

          NestJS, Node.js, JavaScript

          [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

          코드캠프

          [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기Course Thumbnail

          [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

          코드캠프

          최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

          Beginner

          Beginner

          HTML/CSS, JavaScript, vanilla-javascript

          [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기Course Thumbnail

          [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

          코드캠프

          [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습Course Thumbnail

          [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

          코드캠프

          너무나 어렵게만 느껴지는 알고리즘... 수학과 친하지 않은 수강생이라도 이 강의 하나로 알고리즘 기초를 한 번에 끝낼 수 있을 거예요! 알고리즘을 푸는 데 필요한 기초 개념을 차근차근 배우고, 더 나아가 문제에 적용하는 코드캠프의 노하우까지 싹 다 알려드릴게요 :)

          Basic

          Basic

          JavaScript

          [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습Course Thumbnail

          [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

          코드캠프

          [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

          코드캠프

          1년간 300여명의 개발자를 배출한 ‘진짜’ 부트캠프의 고농축 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [인프런X코드캠프]가 준비했습니다 :)

          Beginner

          Beginner

          React, Next.js, GraphQL

          [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

          코드캠프

          [코드캠프] 훈훈한 JavascriptCourse Thumbnail

          [코드캠프] 훈훈한 Javascript

          코드캠프

          다른 언어도 많은데.. 왜 자바스크립트여야 하냐구요? 자바스크립트는 전세계에서 가장 많이 쓰는 언어로, 비전공자도 빠르게 배울 수 있고 이해하기 쉬운 구조를 가지고 있어요. 게다가 구글, 페이팔, 아마존 등 유명 기업들도 활용하고 있다니! 더 이상의 고민이 필요한가요?

          Beginner

          Beginner

          JavaScript

          [코드캠프] 훈훈한 JavascriptCourse Thumbnail

          [코드캠프] 훈훈한 Javascript

          코드캠프

          [코드캠프] 시작은 프리캠프Course Thumbnail

          [코드캠프] 시작은 프리캠프

          코드캠프

          코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

          Beginner

          Beginner

          HTML/CSS, JavaScript

          [코드캠프] 시작은 프리캠프Course Thumbnail

          [코드캠프] 시작은 프리캠프

          코드캠프

          Khóa học tương tự

          Khám phá các khóa học khác trong cùng lĩnh vực!

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

          코드캠프

          수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

          Beginner

          Beginner

          React, Next.js, GraphQL

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스Course Thumbnail

          [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

          코드캠프

          Colini 웹개발 가이드Course Thumbnail

          Colini 웹개발 가이드

          싸플

          웹 개발 처음 시작하시는 분들을 위한 완전 기초 강의! HTML, CSS, Javascript, React 등 웹개발 기초를 쌓아보자!

          Beginner

          Beginner

          HTML/CSS, JavaScript, React

          Colini 웹개발 가이드Course Thumbnail

          Colini 웹개발 가이드

          싸플

          따라하며 배우는 리액트 A-Z[19버전 반영]Course Thumbnail

          따라하며 배우는 리액트 A-Z[19버전 반영]

          John Ahn

          이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

          Basic

          Basic

          React, Next.js, TypeScript

          따라하며 배우는 리액트 A-Z[19버전 반영]Course Thumbnail

          따라하며 배우는 리액트 A-Z[19버전 반영]

          John Ahn

          비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

          딩코딩코

          코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

          Beginner

          Beginner

          Flutter, Next.js, cursor

          비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

          딩코딩코

          iOS/Android 앱 개발을 위한 실전 React Native - BasicCourse Thumbnail

          iOS/Android 앱 개발을 위한 실전 React Native - Basic

          Wintho

          Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

          Basic

          Basic

          React Native, React, ES6

          iOS/Android 앱 개발을 위한 실전 React Native - BasicCourse Thumbnail

          iOS/Android 앱 개발을 위한 실전 React Native - Basic

          Wintho

          이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]Course Thumbnail

          이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

          nhcodingstudio

          이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

          Basic

          Basic

          HTML/CSS, JavaScript, React

          이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]Course Thumbnail

          이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

          nhcodingstudio

          따라하며 배우는 웹 게임Course Thumbnail

          따라하며 배우는 웹 게임

          John Ahn

          이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

          Intermediate

          Intermediate

          React

          따라하며 배우는 웹 게임Course Thumbnail

          따라하며 배우는 웹 게임

          John Ahn

          iOS/Android 앱 개발을 위한 실전 React Native - IntermediateCourse Thumbnail

          iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

          Wintho

          React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드 내용까지 함께 배우면서, 서버 연동/ 로그인/ 데이터 송수신/ 공공API 활용 등이 가능한 하나의 완벽한 앱을 개발할 수 있도록 제작된 강의입니다.

          Intermediate

          Intermediate

          React Native, Redux, Firebase

          iOS/Android 앱 개발을 위한 실전 React Native - IntermediateCourse Thumbnail

          iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

          Wintho

          [리뉴얼] React로 NodeBird SNS 만들기Course Thumbnail

          [리뉴얼] React로 NodeBird SNS 만들기

          제로초(조현영)

          리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

          Intermediate

          Intermediate

          React, Redux, Node.js

          [리뉴얼] React로 NodeBird SNS 만들기Course Thumbnail

          [리뉴얼] React로 NodeBird SNS 만들기

          제로초(조현영)

          너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어Course Thumbnail

          너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

          제주코딩베이스캠프

          프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

          Basic

          Basic

          Firebase, React

          너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어Course Thumbnail

          너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

          제주코딩베이스캠프

          [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Course Thumbnail

          [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

          닭강정

          React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

          Basic

          Basic

          React, Electron, GUI

          [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Course Thumbnail

          [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

          닭강정

          바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기Course Thumbnail

          바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

          ludgi

          Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

          Basic

          Basic

          Next.js, FastAPI, whisper

          바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기Course Thumbnail

          바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

          ludgi

          타입스크립트 코리아 : React with TypeScript 세미나Course Thumbnail

          타입스크립트 코리아 : React with TypeScript 세미나

          이웅재

          타입스크립트와 리액트 관련 강좌입니다.

          Intermediate

          Intermediate

          React, TypeScript

          타입스크립트 코리아 : React with TypeScript 세미나Course Thumbnail

          타입스크립트 코리아 : React with TypeScript 세미나

          이웅재

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)Course Thumbnail

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

          코드캠프

          10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

          Intermediate

          Intermediate

          React, Next.js, cursor

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)Course Thumbnail

          개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

          코드캠프

          공식문서로 배우는 실전 타입스크립트Course Thumbnail

          공식문서로 배우는 실전 타입스크립트

          어쩔코딩

          타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

          Beginner

          Beginner

          TypeScript, JavaScript, ES6

          공식문서로 배우는 실전 타입스크립트Course Thumbnail

          공식문서로 배우는 실전 타입스크립트

          어쩔코딩

          비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)Course Thumbnail

          비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

          체험코딩

          이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

          Beginner

          Beginner

          Firebase, Next.js, vercel

          비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)Course Thumbnail

          비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

          체험코딩

          찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

          찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

          ludgi

          찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

          Intermediate

          Intermediate

          Next.js, React, GraphQL

          찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

          찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

          ludgi