인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
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

468 students

Next.js
Thumbnail

This course is prepared for Basic 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 applications
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 the pure joy of creating applications.

If you have fun, you will learn longer.


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

We've got a coupon for a huge discount just for you!

Go check 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) that is often heard when approaching React.js, we will focus on Next.js, which supports server-side rendering (SSR), which creates the initial HTML on the server, sends it down, and then goes through a hydration process.

We will utilize Firebase authentication so that you can build quickly without spending time implementing various social logins. You can learn how to store/modify 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
Anyone who wants to learn


Unique features of this course
Check it out 💡

  • Let's start from scratch one by one so that you don't get tired of studying the theory.
  • If you have only encountered JavaScript, you will feel the charm of TypeScript .
  • As you study the front-end, you will develop the code step by step so that the back-end, which may seem overwhelming, can feel easy.
    • Even if the same code is repeated!
    • Even the parts that are easy to make typos in!
    • I will explain in the direction of programming first and then gradually improving it.
  • I left common mistakes that are made during programming as they are 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

Let's take a look at how to structure the most viewed view pages for your users. We'll cover the entire process of creating a common layout that is used across all pages, and adding GNBs.

Create a User, Message API

We will create both an API for storing/retrieving user information after signing up and an API for registering/modifying messages. We will cover the things to consider when providing an API from a server, and you can see how to structure and insert data into Firestore.

Creating an open graph image generator

When you share a post on social media, images and text are usually attached. In this article, we will cover how to use headless chrome that can be run on PlayWright and AWS Lambda to generate images based on input content without the user having to worry about it.

Vercel distribution

If you don't have a way to get user feedback when you build a service, you won't be able to learn more. To improve this, we'll cover how to create a continuous deployment environment using a GitHub account and Vercel deployment environment. .

Bonus: Ajv library

When creating a web API, it is difficult to check the input values submitted by the user every time. This is where the Ajv library and JSON SChema can help.

Bonus: React Query

We will implement loading of paged data using useEffect of React.js. Then, we will look at how this can be modified using React Query.


Expected Questions Q&A 💬

Q. Can I take the 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 creating actual services rather than theories or grammar of React.js, Node.js, and Next.js. It focuses on creating 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 a good idea to check out the difference between let and const, and maps in Arrays.


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,298

Students

35

Reviews

66

Answers

4.7

Rating

3

Courses

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

Curriculum

All

53 lectures ∙ (5hr 41min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!