강의

멘토링

커뮤니티

개발 · 프로그래밍

/

프론트엔드

React start with Next.js

React 가 처음이라면? React의 기본 개념을 튼튼히 하면서도 빠르게 배울 수 있는 방법을 고민해야 합니다. Next.js와 JavaScript로 최소한의 지식으로 시작해 보세요. 실무에서 개발에 필요한 필수적인 예제들만 간추려 개발해 봅시다. Todo 예제는 너무나 중요하므로 2번 개발해야 합니다. 한번은 컴포넌트 중심으로 다음에는 브라우저의 경로에 맞게 처리되는 라우팅 중심으로! 로그인은 Zustand를 이용하세요! 정말 적은 양의 코드로 전역 상태를 처리할 수 있습니다.

(4.9) 수강평 7개

수강생 106명

react19
next.js15
신입프론트엔드
웹개발
네카라쿠배
JavaScriptReact웹앱Ajax

수강 후 이런걸 얻을 수 있어요

  • 컴포넌트와 컴포넌트를 구성하는 방법

  • 컴포넌트의 상태(state)와 속성(props)

  • API 서버와 연동하는 리액트 어플리케이션

  • Next.js를 이용한 라우팅 처리

  • Zustand 로 상태관리하기

React 쉽게 시작하세요!

React를 처음 공부한다면?

  • 컴포넌트의 props와 state 제대로 활용할 수 있어야 합니다.

  • 서버와의 통신을 통해서 비동기처리하는 방법을 알아야 합니다.

  • 로그인과 같이 애플리케이션의 전역상태를 처리할 수 있어야 합니다.


처음 시작은 JavaScript로.. 프레임워크를 이용해서 최소한의 설정으로

  • TypeScript에 익숙하지 않다면 우선은 JavaScript에서 시작해도 괜찮습니다. 

  • React로 여러 라이브러리와 설정이 복잡하다면 Next.js와 같이 프레임워크로 시작하세요. 

  • Next.js는 브라우저에서 동작하는 클라이언트 컴포넌트와 서버에서 동작하는 서버 컴포넌트 모두를 지원합니다.

  • 처음 학습하는 분들은 클라이언트 컴포넌트를 우선적으로 학습하고 이후에 서버 컴포넌트를 학습하는 것이 좋습니다.


예제를 통해서 배우세요!

  • '백문이 불여일견'이고 '백견이 불여일타'입니다.

  • 간단한 예제를 여러 방식으로 변형하는 것만으로도 많은 공부가 됩니다.

  • 지식이 아닌 노하우를 예제를 통해서 학습해야 합니다.

실무에서 필요한 예제를 배우세요!

  • Next.js는 기본적으로 경로에 따라 특정 컴포넌트를 보여주는 라우팅 기능을 제공합니다. 

  • Todo 데이터는 API 서버와 통신하고 JSON 데이터로 처리해 보세요. 

  • React 19에서 <form>태그를 처리하는 useActionState()를 이용해 보세요. 

  • 자신만의 커스텀 훅을 만들 수 있나요?

  • 전역 상태 관리는 Zustand를 이용해서 간단히 처리하세요


Easygoing React 쉽게 시작하세요!

  • 처음엔 JavaScript로 시작하셔도 괜찮습니다.

  • 처음엔 디자인 없이 시작하셔도 괜찮습니다.

  • 처음엔 완성된 구조에서 시작하셔도 괜찮습니다.

학습 내용

  • 컴포넌트가 무엇인지 알아봅니다. 

  • 컴포넌트의  속성/상태 등에 대해서 알아봅니다.

  • 외부 서비스와 연동하는 기능을 만들어 봅니다.

  • 상태 관리는 Zustand를 이용하는게 요즘 트렌드

섹션 (1) 개발 환경 

Next.js를 이용하는 개발 환경 설정과 실행 

Next.js를 이용하면 프로젝트의 기본 설정이 모두 완성된 상태에서 개발이 가능해 집니다.

섹션 (2) 컴포넌트! 컴포넌트! 컴포넌트!

컴포넌트로 원하는 기능을 작성해 봅니다.

컴포넌트를 어떻게 나눠야 할까?

컴포넌트간에 통신은 어떻게 해야할까?

구현하는데 필요한 기초적인 JavaScript 문법도 같이 학습합시다.

첫 Todo 예제에 AI를 이용해서 디자인을 적용합니다.

섹션 (3) 컨테이너와 프리젠테이션

여러 개의 컴포넌트가 통신하면서 결과를 만들어야 한다면?

  • 컴포넌트의 상태

  • 컴포넌트의 속성

  • JavaScript의 배열과 filter

  • 구조 분해 할당

  • 전개 연산자

섹션 (4) 라우팅 처리되는 Todo

좀 더 현실적인 예제를 만들려면 브라우저의 주소창에 맞는 화면을 만드는 '라우팅(Routing)'이 필요합니다.


  • Next.js는 라우팅을 기본으로 제공합니다.

  • Next.js는 레이아웃도 기본으로 제공합니다.

  • Fetch API를 이용하는 습관을 들이세요.

  • <Link>만 이용해야 하는 이유를 알아두세요.


섹션 (5) Zustand를 활용해 봅시다. 

Zustand는 현장에서 가장 인기있는 전역 상태 관리 라이브러리입니다.  몇 줄의 코드 만으로 전역 상태를 관리할 수 있습니다.

  • 로컬스토리지에 결과를 보관할 수도 있습니다.

  • 다른 라이브러리보다도 사용방법이 간단합니다.

React 입문자를 위한 강의입니다.

React를 배우고 싶은 분들을 위한 입문용 강의입니다.

  • JavaScript의 변수를 선언할 줄 알아야 합니다.

  • 제어문과 반복문에 대해서 알아야 합니다.

  • 함수와 배열에 대하서 알아야 합니다.

  • 브라우저에서 HTML과 JS를 이용해서 이벤트 처리를 해 본 적이 있어야 합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React를 처음 해보고 싶은 사람

  • Next.js를 처음 시작하는 사람

  • 빠르게 React의 개념을 학습하고자 하는 사람

  • 프론트엔드와 백엔드의 구조와 역할을 알고 싶은 사람

  • Zustand를 React에 적용하고 싶은 사람

선수 지식,
필요할까요?

  • JavaScript 기초 지식(변수, 제어문, 배열, 함수)

안녕하세요
입니다.

2,130

수강생

149

수강평

270

답변

4.8

강의 평점

5

강의

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

커리큘럼

전체

37개 ∙ (8시간 7분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

7개

4.9

7개의 수강평

  • Seungdae Yang님의 프로필 이미지
    Seungdae Yang

    수강평 5

    평균 평점 5.0

    5

    32% 수강 후 작성

    • 체스님의 프로필 이미지
      체스

      수강평 1

      평균 평점 5.0

      5

      100% 수강 후 작성

      강의를 듣고 나니 React.js에 어느 정도 자신감이 생겼습니다. (), {}, state, set, 화살표함수, 훅의 기본기능 ...등을 왜 쓰는지 알 거 같습니다.

      • Codingbear님의 프로필 이미지
        Codingbear

        수강평 11

        평균 평점 4.2

        수정됨

        5

        100% 수강 후 작성

        심플한 핵심 개념 강의 좋습니다.

        • 구멍가게코딩단
          지식공유자

          오랜만에 뵙습니다. ㅠㅠ

      • 차문규님의 프로필 이미지
        차문규

        수강평 2

        평균 평점 5.0

        5

        32% 수강 후 작성

        • 개탱이피스님의 프로필 이미지
          개탱이피스

          수강평 27

          평균 평점 4.9

          5

          32% 수강 후 작성

          2025 블랙 프라이데이 깜짝 연장 할인 중 (1일 남음)

          ₩14,850

          25%

          ₩19,800

          구멍가게코딩단님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!