44,000원
지식공유자: 장기효(캡틴판교)
총 33개 수업 (3시간 20분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
초급
중급이상
지식공유자 답변이 제공되는 강의입니다
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
실무에서 가장 많이 사용되고 있는 리액트 프레임워크, 쉽고 빠르고 재밌게 배워보세요! 할 일 관리 앱을 만들면서 리액트의 동작 원리, 컴포넌트 설계, 리팩토링 방법을 배워봅니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
리액트
JavaScript
React
Vite
NPM
Node.js
Netlify
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
리액트 입문자
프론트엔드 개발자
취업준비생
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
자바스크립트
리액트 기초
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
인프런에서 8년째 지식을 공유하고 있습니다.
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳
커리큘럼
총 33 개
˙ 3시간 20분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
5 강
∙ 26분
섹션 1. 프로젝트 생성과 리액트 기초
6 강
∙ 26분
프로젝트 생성 안내
미리보기
04:41
프로젝트 생성
04:40
프로젝트 구조 안내
01:54
프로젝트의 NPM 설정 파일 및 관련 파일 안내
05:32
프로젝트 진입점과 컴포넌트 안내
06:35
컴포넌트와 jsx 소개
03:35
섹션 2. 컴포넌트 하나로 만드는 할 일 관리 앱
9 강
∙ 1시간 6분
헤더와 인풋 영역 마크업 및 코드 작성 팁
03:32
인풋 값을 상태로 제어하기
10:23
할 일 저장 기능 구현
07:12
로컬 스토리지 데이터 조회 함수 구현
06:26
할 일 목록을 화면에 표시하기
05:21
할 일 목록 삭제 기능 구현 및 문제점 분석
09:40
할 일 목록 문제점 수정 및 기능 구현
10:23
할 일 추가 기능 개선
10:02
중간 정리
03:10
섹션 3. 리팩토링으로 배우는 컴포넌트 설계와 상태 관리
11 강
∙ 1시간 8분
컴포넌트의 역할과 컴포넌트 트리
04:38
헤더 컴포넌트 생성 및 표시
08:59
인풋 컴포넌트 생성 및 표시
07:33
리스트 컴포넌트 생성 및 표시
09:21
현재 구조의 문제점 분석
04:29
상태를 올려서 프롭스로 내리기
06:22
PropType 관련 안내 및 린트 오류 해결
06:10
할 일 목록 컴포넌트 오동작 해결 및 정리
06:37
인풋 컴포넌트 리팩토링
09:39
리팩토링 정리
02:17
최종 코드 정리 및 브랜치 안내
02:13
섹션 4. 애플리케이션 배포 및 마무리
2 강
∙ 12분
깃 리포지토리 생성 및 소스 코드 업로드
04:41
사이트 배포와 마무리
08:13
강의 게시일 : 2024년 03월 04일
(마지막 업데이트일 : 2024년 03월 07일)
수강평
총 12개
수강생분들이 직접 작성하신 수강평입니다.
4.8
12개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
이번에 회사에서 React로 개발을 진행하게 되어서 예전 기억을 되살려보고자 수강하게되었습니다.
Vue3를 사용하다가 React를 보니까 jsx 라는 벽이 있는거 같네요 ㅠ
강의 준비를 잘 해주셔서 너무너무 좋았는데 앞서 다른 분 수강평처럼 저한테는 redux라던가.. 조금 더 난이도 있는 강의였으면 어땠을까 하는 아쉬움이 한켠 남아있네요
아무래도 실무에 바로 투입되어야 하는 입장에서 봤을때는 중급이라고 하기엔 아쉽지만 아예 리액트에 대한 개념이 없는 상태라면 너무너무 좋은 강의가 될 것 같습니다.!
좋은 강의 앞으로도 기대하겠습니다 ^^
2024-03-27
리액트의 기본 동작 원리를 이해하기에 좋았습니다. 어떻게 돌아가는지 그리고 컴포넌트를 어떻게 분리하면 좋을지에 대해서 간결하게 알 수 있었습니다.
강의를 다 듣고 난 뒤에는 코드가 왜 그렇게 짜여지는지. 컴포넌트 간에 데이터는 어떻게 주고 받는지 사고하는 과정이 머릿 속에 선명하게 돌아가고 그려집니다.
쉬운 구현으로 기초가 되는 뿌리부터 단단하게 잡고 가기에 좋은 강의라 생각합니다. 개념은 배웠는데 동작 원리와 컴포넌트가 어떻게 분리되는지에 대한 사고 과정에서 어려움을 겪고 계신 초급자분들이 보면 좋을 거 같아요! 처음에 이 강의를 봤으면 여기저기서 헤매지 않았을 텐데라는 생각이 들었습니다. 잘 배웠습니다! 감사합니다.🙇🏻♀️
2024-03-27
안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다.
1. 강의 완강한 입장에서 추천 대상
- 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민
- 리액트에 있는 package 같은 파일들의 의미를 모른다.
2. 좋았던 점
- 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다.
- 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다.
- 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다.
- 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다)
3. 아쉬운 점
- 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다.
전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다.
추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다.
[저만 4점이라서 추가적으로 코멘트 달자면]
1. 캡팡님의 강의력 Good
2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발
3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다
2024-03-18