강의

멘토링

로드맵

NEW
개발 · 프로그래밍

/

웹 개발

React start with Next.js

React 시작은 Next.js 프레임워크로 시작하세요! 실무에서 개발에 필요한 필수적인 예제들만 간추려 개발해 봅시다. Todo 예제는 너무나 중요하므로 2번 개발해야 합니다. 한번은 컴포넌트 중심으로 다음에는 브라우저의 경로에 맞게 처리되는 라우팅 중심으로! 로그인은 zustand를 이용하세요! 정말 적은 양의 코드로 전역 상태를 처리할 수 있습니다.

30명 이 수강하고 있어요.

예제중심
react19
next.js15
신입프론트엔드
웹개발
JavaScriptReactNext.jsAjax웹앱

이런 걸 배울 수 있어요

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

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

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

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

React 이제 프레임워크로 시작하세요!

React는 라이브러리에서 프레임워크를 사용하는 단계로 넘어가고 있습니다.


처음 시작부터 Next.js 를 배워두세요!

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

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


예제를 통해서 배우세요!

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

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

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


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의 개념을 학습하고자 하는 사람

선수 지식,
필요할까요?

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

안녕하세요
입니다.

1,968

수강생

129

수강평

263

답변

4.8

강의 평점

5

강의

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

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

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

커리큘럼

전체

37개 ∙ (8시간 7분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩9,900

50%

₩19,800

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

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

비슷한 강의

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