Thumbnail
개발 · 프로그래밍 프론트엔드

만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링 대시보드

(4.8)
13개의 수강평 ∙  186명의 수강생

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분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 프로젝트 생성과 리액트 기초
프로젝트 생성 안내 미리보기 04:41
프로젝트 생성 04:40
프로젝트 구조 안내 01:54
프로젝트의 NPM 설정 파일 및 관련 파일 안내 05:32
프로젝트 진입점과 컴포넌트 안내 06:35
컴포넌트와 jsx 소개 03:35
섹션 2. 컴포넌트 하나로 만드는 할 일 관리 앱
헤더와 인풋 영역 마크업 및 코드 작성 팁 03:32
인풋 값을 상태로 제어하기 10:23
할 일 저장 기능 구현 07:12
로컬 스토리지 데이터 조회 함수 구현 06:26
할 일 목록을 화면에 표시하기 05:21
할 일 목록 삭제 기능 구현 및 문제점 분석 09:40
할 일 목록 문제점 수정 및 기능 구현 10:23
할 일 추가 기능 개선 10:02
중간 정리 03:10
섹션 3. 리팩토링으로 배우는 컴포넌트 설계와 상태 관리
컴포넌트의 역할과 컴포넌트 트리 04:38
헤더 컴포넌트 생성 및 표시 08:59
인풋 컴포넌트 생성 및 표시 07:33
리스트 컴포넌트 생성 및 표시 09:21
현재 구조의 문제점 분석 04:29
상태를 올려서 프롭스로 내리기 06:22
PropType 관련 안내 및 린트 오류 해결 06:10
할 일 목록 컴포넌트 오동작 해결 및 정리 06:37
인풋 컴포넌트 리팩토링 09:39
리팩토링 정리 02:17
최종 코드 정리 및 브랜치 안내 02:13
섹션 4. 애플리케이션 배포 및 마무리
깃 리포지토리 생성 및 소스 코드 업로드 04:41
사이트 배포와 마무리 08:13
강의 게시일 : 2024년 03월 04일 (마지막 업데이트일 : 2024년 03월 07일)
수강평 총 13개
수강생분들이 직접 작성하신 수강평입니다.
4.8
13개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
딘두 thumbnail
4
이번에 회사에서 React로 개발을 진행하게 되어서 예전 기억을 되살려보고자 수강하게되었습니다. Vue3를 사용하다가 React를 보니까 jsx 라는 벽이 있는거 같네요 ㅠ 강의 준비를 잘 해주셔서 너무너무 좋았는데 앞서 다른 분 수강평처럼 저한테는 redux라던가.. 조금 더 난이도 있는 강의였으면 어땠을까 하는 아쉬움이 한켠 남아있네요 아무래도 실무에 바로 투입되어야 하는 입장에서 봤을때는 중급이라고 하기엔 아쉽지만 아예 리액트에 대한 개념이 없는 상태라면 너무너무 좋은 강의가 될 것 같습니다.! 좋은 강의 앞으로도 기대하겠습니다 ^^
2024-03-27
Graham thumbnail
5
이미 다 알고 있었긴 했지만, vue 강의에서도 너무 잘 설명하셔서 복습차원에서 믿고 수강했습니다. 중고급강좌도 기다리겠습니다. 감사합니다!
2024-04-17
콩팬더 thumbnail
5
프론트엔드 개발이 완전 처음이라면 너무 듣기 좋은 강의 인거 같습니다! 이해하기 쉽게 설명을 너무 잘해주셔용!!
2024-05-02
봉붕 thumbnail
5
2024-05-17
yjh thumbnail
4
안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다. 1. 강의 완강한 입장에서 추천 대상 - 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민 - 리액트에 있는 package 같은 파일들의 의미를 모른다. 2. 좋았던 점 - 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다. - 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다. - 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다. - 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다) 3. 아쉬운 점 - 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다. 전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다. 추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다. [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다
2024-03-18
지식공유자 장기효(캡틴판교)
안녕하세요 yjh님, 진솔한 수강평 남겨주셔서 감사해요 :) 저도 사실 요 강의 설계할 때 적절한 난이도 찾기가 좀 어려웠었는데 말씀하신 것처럼 중급 레벨의 강의는 아닌 것 같아요. 강의 소개 페이지에 안내된 것처럼 초급, 그리고 초급에 가까운 초중급으로 봐주시는게 좋을 것 같습니다. 강의에서 다루는 내용이 리액트 공식 문서에는 Intermediate(중급)으로 나와 있어서 딱 무슨 레벨이다라고 정의하긴 어려운 것 같아요 :) https://react.dev/learn/managing-state 그래도 말씀해 주신 것처럼 저도 이제서야 첫 리액트 강의를 낸거니까요. 이후에 좀 더 난이도 높은 강의들을 준비해 볼게요. 기대 많이해 주세요 감사합니다 :)
2024-03-18
yjh
[저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다
2024-03-20
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!