강의

멘토링

로드맵

BEST
Programming

/

Front-end

Learn Front-End DO IT Coding While Making (Next.js, Typescript)

You can create a service that is not just cool on the outside, but one that allows you to meet users and get feedback. You can gain confidence in web development.

(4.5) 22 reviews

470 learners

  • totuworld
Next.js

Reviews from Early Learners

What you will learn!

  • How to use Next.js

  • Managing Data with Firebase's Firestore

  • Using Firebase Authentication

  • Web API Design and Utilization

Learn by creating your own application
The Joy of Programming 🚀

I want to be a developer, but
Where should I start learning?

I don't know what to learn, but I'm overwhelmed by the huge front-end roadmap.
If you're tired of studying algorithms , try experiencing the pure joy of creating applications.

If you have fun, you can learn longer.


Students and job seekers may find the price burdensome, so please check out the latest posts on my blog first.

We have a coupon for a huge discount just for you!

Check out the coupon🎟️👉 https://medium.com/@totuworld


From setting up the development environment
Up to application deployment🏃

This lecture covers the entire process of building and deploying an anonymous question service (Blahx2) from scratch. Instead of the client-side rendering (CSR) often heard when learning React.js, we'll focus on Next.js, which supports server-side rendering (SSR), which generates the initial HTML on the server, then performs a hydration process.

We'll leverage Firebase Authentication to quickly build your app without spending time implementing various social logins. You'll also learn how to store and update data in a NoSQL manner and handle pagination using Firebase Firestore.


I recommend this to these people.

The fun of programming
The person you are looking for

Implementing practical functions
Anyone who wants to try it

The latest trend technology
Those who want to learn


Unique features of this course
Check it out 💡

  • I'm going to start from scratch one by one so that I don't get tired of studying the theory.
  • If you've only ever been exposed to JavaScript, you'll find TypeScript fascinating .
  • As you study the front-end, you will develop the code step by step so that the back-end can feel easy to understand.
    • Even if the same code is repeated!
    • Even the parts that are easy to make typos in!
    • First, I will explain in the direction of programming and then gradually improving it.
  • I left common mistakes made in programming as they were and tried to fix them later.
    • You can get a sneak peek at how debugging is done in the field .

What you'll learn ✨

메인 페이지 뷰 작업

Creating a main and user homepage

We'll explore how to structure the most-viewed pages for your users. We'll cover the entire process of creating a common layout for each page and adding GNBs.

Create a user messaging API

We'll build APIs for storing and retrieving user information after signup, as well as APIs for registering and modifying messages. We'll cover considerations for providing APIs from a server, and you'll learn how to structure and store data in Firestore.

Creating an open graph image generator

When you share a post on social media, images and text are automatically added. This article covers how to use PlayWright and headless Chrome, which can run on AWS Lambda, to generate images based solely on input, without the user having to worry about it.

Vercel distribution

Even if you create a service, you can't learn much without a way to receive user feedback. To improve this, we'll cover how to create a continuous deployment environment using a GitHub account and the Vercel deployment environment.

Bonus: Ajv Library

When building a web API, it can be difficult to validate user-submitted input every time. This is where the Ajv library and JSON Schema can help.

Bonus: React Query

We'll implement paginated data loading using React.js' useEffect. We'll also explore how this can be modified using React Query.


Expected Questions Q&A 💬

Q. Can I take this course even if I am not majoring in computer engineering (non-major)?

A. Yes, you can. However, it will be easier to understand if you know JavaScript syntax.

Q. What level of content is covered in the class?

A. This course focuses on building actual services rather than the theory or syntax of React.js, Node.js, and Next.js. It focuses on building and presents keywords for further learning.

Q. Is there anything I need to prepare before the lecture?

A. If you have never worked with JavaScript before, it would be good to check out the difference between let and const, and map of Array.


Introducing the Knowledge Sharer ✒️

I work as a front-end programmer at Elegant Brothers .
I believe that ordinary people can come together and do extraordinary things.


Recommended for
these people

Who is this course right for?

  • For those who are just starting out with programming and are scared

  • Anyone who wants to create a service that anyone can use, other than a TODO list

  • People who have front-end knowledge but are at a loss when it comes to handling the back-end

Need to know before starting?

  • JavaScript Basics

Hello
This is

2,344

Learners

36

Reviews

66

Answers

4.7

Rating

3

Courses

우아한형제들에서 프론트엔드 프로그래머로 일하고 있습니다. 평범한 사람들이 모여서 비범한 일을 할 수 있다고 믿습니다.
- 현) 우아한형제들, 프론트엔드 프로그래머
- 전) 야놀자, 백엔드 프로그래머
- 전) ArasoPandan, 백엔드 프로그래머
- 전) MobiDIX, 모바일 게임 클라이언트 프로그래머

Curriculum

All

53 lectures ∙ (5hr 41min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

22 reviews

4.5

22 reviews

  • xiu15님의 프로필 이미지
    xiu15

    Reviews 3

    Average Rating 4.7

    5

    45% enrolled

    Tôi sẽ chỉ nghe đoạn giữa và để nó ở đây. Những người tìm việc muốn có được công việc ở vị trí front-end hãy lắng nghe. Lý do là 1. Không cho ăn bằng thìa Trong bài giảng này, khi bạn hỏi một xạ thủ giỏi về điều gì đó mà anh ta không biết, anh ta sẽ giải thích một cách tóm tắt và hiển thị màn hình dài 5 phút => Khi tôi trở lại chỗ ngồi, google những gì tôi vừa thấy và tra cứu thêm Tài liệu, tôi cảm thấy như mình hiểu được những gì được trình bày trong bài giảng. Nhưng thực sự không phải là tôi không thể theo kịp. Nếu bạn không hiểu như tôi, bạn có thể bỏ qua và xem bài giảng, trừ khi bạn là loại người hay chỉ ra mọi điều. Tôi đã thêm một mẫu thiết kế OOP ngay từ đầu, đọc Tài liệu Firebase và Luân xa. Để có được việc làm, bạn cần nhìn vào bức tranh tổng thể và tự học. 2. Thư viện Chakra không xác định Đây là lần đầu tiên tôi sử dụng charka. Họ không nói chi tiết cho tôi cách sử dụng cái này mà chỉ chỉ cho tôi cách sử dụng nó. Tuy nhiên, sẽ không sao nếu bạn cảm thấy như đang làm việc tại một công ty, tự mình tra cứu Docs, tìm hiểu một chút rồi làm theo. Trên thực tế, việc giảng dạy chi tiết về thư viện tạo kiểu không phải là một bài giảng về giao diện người dùng. 3. Tái cấu trúc Sau khi theo dõi bài giảng và viết một số đoạn mã, nếu nó hơi phức tạp hoặc cảm thấy cần phải sử dụng lại thì tốt hơn hết bạn nên di chuyển đoạn mã đó và viết lại. 4. Phiếu giảm giá mới Người hướng dẫn cũng đăng bài trên Medium, và nếu bạn tìm các bài đăng ở đó thì có vẻ như không có gì bí mật khi đăng những phiếu giảm giá với tỷ lệ chiết khấu cao. 5. Rất khuyến khích Có thể vì tôi không phải là một giảng viên có tay nghề cao nên trong bài giảng không có nội dung nào có thể lướt qua được, và có vẻ như đã phải suy nghĩ rất nhiều trong việc biên tập và sáng tác. Và mặc dù thời gian khóa học 3 tháng có vẻ dài nhưng tôi cảm thấy hơi áp lực và nói: "Ồ, tôi phải tham gia lớp học." và quay lại. Tôi nghĩ khóa học này là hoàn hảo cho Phát triển theo hướng thời hạn. 6. Hỏi đáp Tôi đã hỏi rất nhiều câu hỏi, nhưng bạn giải thích nó rất rõ ràng. Cảm ơn bạn đã đăng một bài giảng tuyệt vời!

    • totuworld
      Instructor

      Cảm ơn Chu Chu rất nhiều. Tôi đã cười rất nhiều và được tiếp thêm nhiều sức mạnh khi đọc bài viết. Tôi rất vui vì dường như bạn đã đạt được phương pháp học tập mà tôi dự định rất tốt. Tôi không biết bạn sẽ ở đâu và làm gì, nhưng tôi sẽ luôn ủng hộ bạn.

  • mihykim1368님의 프로필 이미지
    mihykim1368

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    Tôi rất thích nghe nó nhờ tốc độ mã hóa nhanh chóng. Ngay trước khi tôi tham gia khóa học này Tương tự như vậy, tôi đã tham gia một khóa học khác trong đó người hướng dẫn đã viết mã trực tiếp trên dòng công nghệ mới nhất. Bài giảng được giảng viên thực hiện một cách ngẫu hứng nên sinh viên khó theo kịp. Tôi thích bài giảng này vì nó dễ theo thứ tự hơn nhiều. Tôi nghĩ bạn đã chuẩn bị rất nhiều cho mỗi bài giảng. Sau khi thấy Thunder Client được sử dụng trong buổi giảng, tôi đã cài đặt ngay tiện ích mở rộng. Thật tiện lợi vì bạn có thể gửi yêu cầu từ VS Code ngay cả khi bạn chưa cài đặt Postman. Khi viết bình luận, anh đưa ra một mẹo đơn giản là nếu bạn viết theo kiểu JS Doc, chẳng hạn như '/** */' thay vì '//', nội dung bình luận sẽ hiển thị khi bạn di chuột vào trình soạn thảo Tôi thực sự thích điều này. Lần tới khi bạn phát hành một khóa học khác, vui lòng chuyển tiếp nhiều hơn những khóa học này. + Trong số các bài đánh giá bài giảng, có những ý kiến ​​​​tiêu cực về việc học Chakra-ui. Tôi nghĩ hơi khác một chút. Chakra UI được đánh giá là một thư viện UI được xây dựng tốt và được nhiều nhà phát triển tham khảo khi thiết kế các thành phần. Dường như không có nhiều khác biệt trong cách sử dụng so với các thư viện giao diện người dùng khác. Đối với những người đã sử dụng thư viện UI cho đến nay, hầu như sẽ không có đường cong học tập. Đối với những người chưa sử dụng thư viện UI cho đến bây giờ, tôi nghĩ đây sẽ là cơ hội tốt để trải nghiệm thư viện UI được thiết kế tốt. Tôi muốn giới thiệu khóa học này cho những người xung quanh vì đây là khóa học cơ bản, nơi bạn có thể học được những lời khuyên thú vị và thiết thực. Cảm ơn bạn vì bài giảng tuyệt vời.

    • Tôi cũng thường xuyên sử dụng Material UI và cách sử dụng cũng rất giống nhau. Tôi không biết công ty sẽ sử dụng giao diện người dùng nào trong tương lai, nhưng thật tuyệt khi thử một thư viện giao diện người dùng khác.

  • eosbps4078님의 프로필 이미지
    eosbps4078

    Reviews 4

    Average Rating 4.8

    4

    23% enrolled

    Khi đánh giá khách quan, so sánh với mức giá 1. Thiếu phần giải thích về mã khi viết firebase và API. 2. Bất tiện khi học một framework UI khác với người không sử dụng Chakra UI Cá nhân tôi muốn được hoàn tiền sau khi chỉ nghe phần đầu tiên, nhưng tôi đã lấy những phần không cần thiết và vượt quá tiêu chí hoàn tiền nên không thể tiến hành hoàn tiền. Cá nhân tôi chẳng học được gì cả và tôi cảm thấy mình đang lãng phí tiền bạc vì không học được gì thêm. Người hướng dẫn cố gắng tử tế nhất có thể, nhưng theo quan điểm của tôi, tôi không học được gì vì tôi chỉ nghe kiểu giải thích này chứ không phải là lời giải thích thân thiện về mã. Và mặc dù 3 tháng là thời gian đủ để nghe hết nhưng so với các bài giảng khác thì 3 tháng có vẻ ngắn vì có thể có những phần bạn muốn kiểm tra lại sau một thời gian. Chi phí của khóa học không hề thấp. Tuy nhiên, vì bạn đã tạo ra khóa học một cách chân thành nên tôi sẽ để lại đánh giá 4 điểm.

    • totuworld
      Instructor

      Xin chào, Mã hóa Nadu. Cảm ơn bạn đã chỉ ra. Hãy nghĩ về cách chúng ta có thể khắc phục nó.

  • sorayeon님의 프로필 이미지
    sorayeon

    Reviews 81

    Average Rating 5.0

    5

    100% enrolled

    Tôi đã nghe nó trên đường đi làm và nó hoàn toàn có ý nghĩa. Tôi sẽ viết mã nó khi tôi có thời gian. Cảm ơn bạn rất nhiều vì bài giảng tuyệt vời.

    • endymion님의 프로필 이미지
      endymion

      Reviews 14

      Average Rating 5.0

      5

      100% enrolled

      Tôi thật bướng bỉnh~ Tôi đã có thể học tập dễ dàng, nhanh chóng, gọn gàng và vui vẻ trong khi tạo ra một dịch vụ thực tế. Tôi cảm thấy sảng khoái haha Tôi đã có thể học được rất nhiều. Cảm ơn bạn~

      • totuworld
        Instructor

        endymion, bạn đã hoàn thành khóa học! Xin chúc mừng 🎉🎉🎉 Tôi rất cảm động vì bạn đã để lại những lời khuyên hữu ích cho người khác và thậm chí còn để lại bài đánh giá về lớp học.

    $77.00

    totuworld's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!