강의

멘토링

커뮤니티

Programming

/

Front-end

React start with Next.js

New to React? You need to think about how to learn React's basic concepts solidly yet quickly. Start with Next.js and JavaScript with minimal knowledge. Let's develop by selecting only the essential examples needed for practical development. Todo examples are so important that you need to develop them twice. Once focusing on components, then focusing on routing that handles browser paths! Use Zustand for login! You can handle global state with really minimal code.

(4.9) 7 reviews

108 learners

  • zk202308a5410
react19
next.js15
신입프론트엔드
웹개발
네카라쿠배
JavaScript
React
Web Application
Ajax

What you will gain after the course

  • How to compose components and components

  • Component state and props

  • React application that integrates with API server

  • Routing handling using Next.js

  • Managing State with Zustand

Get started with React easily!

New to studying React?

  • You must be able to properly utilize component props and state.

  • You need to know how to handle asynchronous processing through communication with the server.

  • You should be able to handle global state of the application, such as login.


Starting with JavaScript first.. using a framework with minimal configuration

  • If you're not familiar with TypeScript, it's perfectly fine to start with JavaScript first.

  • If React becomes complex with multiple libraries and configurations, start with a framework like Next.js.

  • Next.js supports both client components that run in the browser and server components that run on the server.

  • For beginners, it's recommended to learn client components first and then study server components afterward.


Learn through examples!

  • "Seeing once is better than hearing a hundred times" and "doing once is better than seeing a hundred times."

  • You can learn a lot just by modifying simple examples in various ways.

  • You need to learn know-how, not just knowledge, through examples.

Learn practical examples you need in real work!

  • Next.js provides routing functionality that displays specific components based on the path by default.

  • Handle Todo data by communicating with an API server and processing it as JSON data.

  • React 19에서

    Try using useActionState() to handle tags.

  • Can you create your own custom hooks?

  • Handle global state management simply using Zustand


Get started with Easygoing React easily!

  • It's fine to start with JavaScript at first.

  • It's okay to start without a design at first.

  • You can start with a completed structure at first.

Learning Content

  • Let's learn what components are.

  • We'll learn about component properties/state and more.

  • Let's create a feature that integrates with external services.

  • State management using Zustand is the current trend these days

Section (1) Development Environment

Setting up and running a development environment using Next.js

Using Next.js allows you to start development with all the basic project configurations already completed.

Section (2) Components! Components! Components!

Write the desired functionality as a component.

How should we divide components?

How should components communicate with each other?

Let's also learn the basic JavaScript syntax needed for implementation.

We'll apply design to the first Todo example using AI.

Section (3) Container and Presentation

What if multiple components need to communicate to produce a result?

  • Component State

  • Component Properties

  • JavaScript Arrays and filter

  • Destructuring assignment

  • Spread operator

Section (4) Todo with Routing Handling

To create more realistic examples, you need 'Routing' that creates screens matching the browser's address bar.


  • Next.js provides routing by default.

  • Next.js also provides layouts by default.

  • Get into the habit of using the Fetch API.

  • You should know the reasons why you must use only this.


Section (5) Let's utilize Zustand.

Zustand is the most popular global state management library in the field. You can manage global state with just a few lines of code.

  • You can also store the results in local storage.

  • It's simpler to use than other libraries.

This is a course for React beginners.

This is an introductory course for those who want to learn React.

  • You need to know how to declare variables in JavaScript.

  • You need to learn about control statements and loop statements.

  • You need to know about functions and arrays.

  • You should have experience handling events using HTML and JS in a browser.

Recommended for
these people

Who is this course right for?

  • People who want to try React for the first time

  • A person starting Next.js for the first time

  • Someone who wants to quickly learn React concepts

  • Someone who wants to understand the structure and roles of frontend and backend

  • Someone who wants to apply Zustand to React

Need to know before starting?

  • JavaScript Fundamentals (Variables, Control Statements, Arrays, Functions)

Hello
This is

2,134

Learners

150

Reviews

270

Answers

4.8

Rating

5

Courses

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

Curriculum

All

37 lectures ∙ (8hr 7min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

7 reviews

4.9

7 reviews

  • 123ddd님의 프로필 이미지
    123ddd

    Reviews 5

    Average Rating 5.0

    5

    32% enrolled

    • c01님의 프로필 이미지
      c01

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      After taking the course, I've gained some confidence in React.js. I think I understand why we use (), {}, state, set, arrow functions, basic hook functions, and so on.

      • codingbeer님의 프로필 이미지
        codingbeer

        Reviews 11

        Average Rating 4.2

        Edited

        5

        100% enrolled

        Simple core concept lectures are great.

        • zk202308a5410
          Instructor

          It's been a long time. 😭😭

      • moomgyucha8486님의 프로필 이미지
        moomgyucha8486

        Reviews 2

        Average Rating 5.0

        5

        32% enrolled

        • wtkim님의 프로필 이미지
          wtkim

          Reviews 27

          Average Rating 4.9

          5

          32% enrolled

          $15.40

          zk202308a5410's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!