강의

멘토링

커뮤니티

개발 · 프로그래밍

/

프론트엔드

React start with Next.js

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

(4.9) 수강평 9개

수강생 114명

난이도 입문

수강기한 무제한

  • 구멍가게코딩단
react19
react19
next.js15
next.js15
신입프론트엔드
신입프론트엔드
웹개발
웹개발
네카라쿠배
네카라쿠배
react19
react19
next.js15
next.js15
신입프론트엔드
신입프론트엔드
웹개발
웹개발
네카라쿠배
네카라쿠배

먼저 경험한 수강생들의 후기

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

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

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

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

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

  • Zustand 로 상태관리하기

React, Next.js로
빠른 웹앱 개발 시작하세요!

실무 필수 기능만 모아 빠르게 완성합니다.


React가 처음이라 막막하신가요?
Next.js와 JavaScript로 기본부터 탄탄히,
실무 예제 중심의 학습으로 튼튼한 개발 기초를 다져보세요.


React 시작하기
Next.js로 React 핵심만 빠르게 배우는 실전 강의

JavaScript, React, Next.js 16, App Router, React 19, Zustand
실무 필수 예제 중심으로 컴포넌트, 상태 관리, 라우팅을 완벽 마스터합니다.



강의에서 배운 내용을 바탕으로 Todo 리스트로그인 기능을 갖춘
실제 서비스 수준의 웹 애플리케이션을 직접 완성합니다.



JSONPlaceholder API 연동, Zustand를 활용한 전역 상태 관리, Next.js 라우팅 실습
프론트엔드 개발의 전체 과정을 경험하며 실력을 향상시킵니다.

React와 Next.js
입문자를 위한 커리큘럼

Section 1 - React와 Next.js 시작하기

본 강의는 React 입문자를 위해 Next.js 프레임워크를 사용하여 프로젝트를 시작하는 방법을 안내합니다. JavaScript 기본 지식과 웹 개발 기초를 바탕으로 React의 핵심 개념인 컴포넌트, Props, State를 학습하고, 실제 개발에 필요한 필수 예제를 다룹니다.

Section 2 - 컴포넌트 심층 학습

함수형 컴포넌트의 생성 및 제어, 반복문 활용, Props와 State를 통한 데이터 관리 방법을 상세히 배웁니다. 또한, 컴포넌트 간의 통신 방식과 컨테이너/프리젠테이션 컴포넌트 패턴을 이해하며, 실제 카운터 컴포넌트 분리 연습을 통해 컴포넌트 설계 능력을 향상시킵니다.

Section 3 - 단일 페이지 Todo 애플리케이션 구현

React의 배열 처리 기능(전개 연산자, filter)을 활용하여 Todo 목록을 관리하는 애플리케이션을 개발합니다. Todo 항목의 등록, 삭제, 수정 기능을 구현하고, 화면 디자인을 개선하여 사용자 친화적인 UI를 완성합니다. 이 섹션에서는 컴포넌트 기반 개발의 실질적인 적용을 경험합니다.

Section 4 - 외부 API 연동 Todo 애플리케이션

비동기 통신 개념을 이해하고 Fetch API를 사용하여 외부 RESTful API와 연동하는 방법을 학습합니다. 동적 경로 처리, Link 컴포넌트 활용, POST, PUT, DELETE 메서드를 이용한 데이터 CRUD 작업 구현을 통해 실시간 데이터 처리 능력을 강화합니다.

Section 5 - Zustand를 활용한 전역 상태 관리

경량 전역 상태 관리 라이브러리인 Zustand를 사용하여 로그인 상태와 같은 전역 데이터를 효율적으로 관리하는 방법을 배웁니다. 스토어 생성, Persist 기능을 활용한 로컬 스토리지 연동, 의존성 없는 컴포넌트 구조 설계 및 로그아웃 기능을 구현하여 애플리케이션의 상태 관리 역량을 높입니다.

React와 Next.js, 어디서부터 시작해야 할지 막막하신가요?
이 강의는 바로 이런 분들을 위해 만들었어요.


✔️ React와 Next.js를 처음 접하는 입문자

  • 이론만으로는 부족했던 React 기본 개념을 Next.js와 함께 확실히 잡고 싶은 분

  • 최소한의 지식으로 빠르게 React 프로젝트를 시작하고 싶은 분

  • 컴포넌트 구조, Props, State 등 핵심 원리를 쉽고 명확하게 배우고 싶은 분

✔️ 실무 중심의 웹 개발 경험을 쌓고 싶은 학습자

  • 실무에서 자주 사용되는 필수 예제들만 모아 집중적으로 학습하고 싶은 분

  • Todo 리스트, 로그인 등 실제 서비스에서 필요한 기능을 직접 구현해보고 싶은 분

  • API 연동 및 Zustand를 활용한 상태 관리까지 경험하고 싶은 분

✔️ 프론트엔드 개발자로 나아가고 싶은 분

  • Next.js의 라우팅 시스템을 이해하고 동적 경로 설정을 다룰 수 있게 되는 분

  • 컴포넌트 분리, 재사용 등 클린 코드 작성을 위한 설계 원칙을 배우는 분

  • Tailwind CSS를 활용하여 매력적인 UI를 직접 디자인하고 구현하는 경험을 쌓는 분


더 이상 React 학습의 어려움으로 망설이지 마세요.
이 강의를 통해 Next.js와 함께 탄탄한 실력을 갖춘 프론트엔드 개발자로 성장할 수 있습니다.

수강 전 참고 사항


실습 환경

  • 운영체제: Windows, macOS, Linux 모두 가능합니다.

  • 필수 설치 프로그램: Node.js (최신 LTS 버전 권장), VS Code 또는 다른 코드 에디터

  • 권장 사양: 원활한 개발 환경을 위해 SSD 저장 공간 및 8GB 이상의 RAM을 권장합니다.

선수 지식 및 유의사항

  • JavaScript 기본 문법 (변수, 함수, 객체, 배열)에 대한 이해가 필요합니다.

  • 웹 개발 기초 지식이 있으면 학습에 도움이 됩니다.

  • React 프레임워크 경험이 없어도 시작할 수 있습니다.

  • Next.js 15 버전과 App Router를 기준으로 학습합니다.

학습 자료

  • 강의 슬라이드 PDF 파일이 제공될 예정입니다.

  • 실습 예제를 통해 직접 코드를 작성하고 실행해 볼 수 있습니다.

  • JSONPlaceholder를 활용한 API 연동 실습이 포함됩니다.


이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

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

안녕하세요
입니다.

2,186

수강생

159

수강평

287

답변

4.8

강의 평점

5

강의

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

커리큘럼

전체

37개 ∙ (8시간 6분)

해당 강의에서 제공:

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

수강평

전체

9개

4.9

9개의 수강평

  • 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% 수강 후 작성

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

          수강평 28

          평균 평점 4.9

          5

          32% 수강 후 작성

          ₩19,800

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

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

          비슷한 강의

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