BEST

프론트엔드

프로젝트로 배우는 React.js

Name: 프로젝트로 배우는 React.js
Price: 33000 KRW

블로그 프로젝트를 통해 리액트 기초를 배울수 있습니다

(4.7) 수강평 35개

수강생 343명

코지 코더

react

리액트

프론트엔드

front-end

react.js

React Redux ES6

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

이런 걸 배울 수 있어요

리액트 기초
리액트 훅스
리덕스
리덕스 툴킷

하루 10분 ⏰
리액트 입문, 효율적으로 해보세요!

블로그를 만들며 배우는 리액트 🖥️

프런트엔드 프레임워크 하면 가장 먼저 떠오르는 React.js! 이 강의는 인기 프론트엔드 프레임워크 React.js의 설치부터 함께 시작하는 입문 강의입니다.

시작과 동시에 간단한 블로그 만들기 프로젝트를 시작하게 됩니다. 프로젝트를 만들어 나가면서 필요한 리액트 기능을 배우고, 프로젝트 실습을 통해 개념을 바로 적용해봅니다. 블로그를 만들면서 페이지 생성, 삭제, 검색 등 다양한 기능을 구현해봅니다. 각 영상은 대부분 10분 미만의 짧은 영상으로 만들었습니다.

블로그를 만들면서
실용적인 기능 위주로 학습!

10분 내외의
짧은 영상들로 구성!

입문부터 활용까지,
개념부터 실습까지 한 번에!

예상 질문 Q & A 💬

Q. React.js를 전혀 몰라도 들어도 될까요?

네! React.js 기초 강좌이기 때문에 모르셔도 기초부터 배우실수 있습니다. 이 강좌가 끝내시면 React.js로 프로젝트를 혼자 하실 정도의 기본은 배우게 됩니다. 하지만 HTML, CSS, Javascript (ES6+) 기초는 아시는 분이 듣는 걸 추천합니다. 강의 중간중간에 es6+ 관련된 설명도 들어있습니다. 😊

강의 자료 소개 📜

각 영상이 끝날 때의 소스 코드를 github에 브랜치로 만들어 올려두었습니다. 에러로 막혔을 때 github에서 소스 코드를 비교하실 수 있어요. 😁 찾기 쉽도록 수업 영상 번호를 브랜치 이름으로 올려두었어요.

Link: https://github.com/kossiecoder/react-redux-basic

이런 분들께
추천드려요

학습 대상은
누구일까요?

리액트 기초를 배우고 싶으신 분
리액트로 웹앱을 만들어 보고 싶으신 분

선수 지식,
필요할까요?

html
css
javascript

안녕하세요
입니다.

1,288

명

수강생

133

개

수강평

개

답변

4.8

점

강의 평점

개

강의

커리큘럼

전체

88개 ∙ (9시간 5분)

섹션 1. 강좌 소개 및 개발 환경 세팅

3개 ∙ (12분)

섹션 2. 리액트 기초

7개 ∙ (32분)

섹션 3. 블로그 포스트 생성 폼 만들기

6개 ∙ (26분)

11. 10 Input State 바인딩
08:46
12. 11 Textarea State 바인딩
03:48
13. json-server 설치시
14. 12 json-server 설치
03:49
15. 13 DB에 데이터 저장
06:54
16. 14 db 실행 명령어 스크립트에 넣기
02:48

섹션 4. React Router로 페이지 추가하기

10개 ∙ (56분)

섹션 5. 블로그 리스트

13개 ∙ (1시간 13분)

섹션 6. 블로그 디테일 페이지

5개 ∙ (27분)

섹션 7. 블로그 수정 페이지

6개 ∙ (37분)

섹션 8. 블로그 리스 페이지 수정

5개 ∙ (18분)

섹션 9. Pagination

11개 ∙ (1시간 14분)

섹션 10. 검색 기능

2개 ∙ (18분)

섹션 11. Form Validation

1개 ∙ (9분)

섹션 12. Toast Notification

10개 ∙ (1시간 38분)

섹션 13. Auth

3개 ∙ (18분)

섹션 14. Error Handling

5개 ∙ (27분)

섹션 15. React Router 업그레이드

1개 ∙ (15분)

강의 게시일:

마지막 업데이트일:

수강평

전체

35개

4.7

35개의 수강평

foxball
수강평 32
∙
평균 평점 4.8
5
57% 수강 후 작성
인프런 리액트 강좌들은 평점,인기순으로 거의다 듣고있는 사람입니다. 인프런 강좌들을 많이듣다보니 수강평을 무시못하겠더라고요. 저역시 수강평을 참고하여 강좌를 구독하는 사람중 한명이니까요. 수강평 쓰는거 별로 좋아하지는 않는대요. 코지코더님 수강평에 아무도 글이 없어서 한번써봅니다. 짧게 쓸께요~^^ 30%할인해서 3만원 대에 구독중이지만.... 이강좌를 금액으로 평가하면, 30만원도 아깝지 않네요 강사님 말투가 약간 서툴고, 기계적인 말투가 아니라서 오히려 그게 더 장점일 수 도있지만, 별것도아닌 유튜브에 다나와있는 기초적인 강좌를 10만원넘게 받아먹는 돈충이 강사들보다, 훨씬 몇백배 도움되니, 들어보세요.
- 코지 코더
  지식공유자
  수강평 남겨주셔서 감사합니다 ^^
빡파송송계란
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
급하게 리액트 공부 해야하는 상황에서 딱 리액트에만 집중할 수 있도록 알려주십니다! 원래 리뷰 잘 안쓰는데 안쓸 수 없게만드 셨습니다. 진짜 군더더기 없이 리액트에 집중해서 기본 CRUD를 만들수 있게되네요 더 많은 강의 만들어주시면 좋겠습니다! 감사해요! 다음에도 리액트 강의 나오면 무조건 구매할 것 같습니다! 너무 만족스럽습니다
- 코지 코더
  지식공유자
  수강평 남겨주셔서 감사합니다 ^^
Sue Kim
수강평 2
∙
평균 평점 5.0
5
11% 수강 후 작성
와 지금까지 들은 강의 중에서 젤 돈이 안아깝네요. 아직 초반이긴 하지만 프로젝트를 하면서 바로바로 적용을 하니 이해하기 쉬웠어요. 베리굿ㅋ
- 코지 코더
  지식공유자
  수강평 남겨주셔서 감사합니다 ^^
박현욱
수강평 5
∙
평균 평점 5.0
5
100% 수강 후 작성
천천히 설명 해주셔서 이해 하기 좋습니다.
- 코지 코더
  지식공유자
  수강평 남겨주셔서 감사합니다 ^^
rth634
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성
영상 끊기는 부분.. 중복되는 부분이 해결된다면 깔끔하고 좋은 강의 였습니다.. 1.5 완강 했습니다.
- 코지 코더
  지식공유자
  영상 만들고 확인을 한다고 했는데 반복 되는 부분이 있었네요 죄송합니다 반복 재생 되는 부분들은 모두 수정하였습니다. 강좌 만들때 제가 처음 공부할때 헷갈리는 부분들을 최대한 자세히 설명하여 처음 리액트 접하시는 분들께 도움 되도록 만들려고 노력하였습니다. 반복 재생 된 부분에 대해서는 다시한번 죄송하다는 말씀드리고 즐거운 코딩 하시기 바랍니다.

₩33,000

코지 코더님의 다른 강의

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

프로젝트로 배우는 Vue.js 3

코지 코더

Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다.

Basic

Vue.js, Vuex, 웹앱

프로젝트로 배우는 Vue.js 3

코지 코더

비슷한 강의

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

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

수코딩

리액트 19의 최신 기능을 타입스크립트(TypeScript)와 함께 배우는 리액트 완성 강의! 기초부터 상태관리(Context, Redux Toolkit, Zustand), API 통신(Fetch, Axios), 최신 훅(use, useActionState, useOptimistic 등), 실전 프로젝트까지 차근차근 익혀 실무에 바로 적용할 수 있는 리액트 앱을 만들 수 있습니다.

Beginner

React, react-router, redux-toolkit

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

수코딩

리액트 훅(React Hook)으로 만드는 웹앱

최광성

모던 프론트엔드 프레임워크 중 가장 인기있는 React(리액트), 하지만 배우기가 어렵습니다. 이를 해결하기 위해 훅(Hook)이 나왔습니다. 본 강의는 훅을 이용해 React를 쉽게 배울 수 있도록 도와드립니다.

Basic

React, 웹앱

리액트 훅(React Hook)으로 만드는 웹앱

최광성

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

Basic

TypeScript, ES6, JavaScript

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

Beginner

TypeScript, JavaScript, ES6

공식문서로 배우는 실전 타입스크립트

어쩔코딩

코드로 배우는 React 19 with 스프링부트 API서버

구멍가게코딩단

스프링 부트(Spring Boot ver3.4.x)로 제작되는 API 서버와 React 19 (with TypeScript) 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

Intermediate

React, TypeScript, Spring Boot

코드로 배우는 React 19 with 스프링부트 API서버

구멍가게코딩단

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

Basic

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

Basic

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

Basic

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

누구보다 빠르게 해보는 ChatGPT 클론코딩

Neo

ChatGPT를 클론코딩하며 처음부터 끝까지 직접 구현해보는 풀스택 실습 강의입니다. Spring Boot 서버와 React 프론트엔드까지! 단순히 코드만 따라 치는 강의가 아니라, 실제 서비스 배포를 통해 완성도 높은 AI 챗봇 서비스를 구축할 수 있도록 안내합니다.

Basic

JavaScript, React, Java

누구보다 빠르게 해보는 ChatGPT 클론코딩

Neo

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

Basic

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기

영넨

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기는 JWT 기반 인증 및 소셜 로그인(Kakao/Google)을 포함한 실전형 로그인 시스템을 직접 구현하며 프론트엔드와 백엔드 인증 흐름을 깊이 이해할 수 있도록 설계된 강의입니다. 프론트엔드는 React.js, 백엔드는 Spring Boot를 기반으로 구성되며, 실제 서비스 환경에서 사용되는 Access Token + Refresh Token 방식, HttpOnly Cookie, Redux를 활용한 사용자 상태 관리, Role 기반 권한 처리, 소셜 로그인 연동까지 하나씩 따라하며 익힐 수 있습니다.

Basic

React, Node.js, REST API

Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기

영넨