Thumbnail
NEW 개발 · 프로그래밍 프론트엔드
리액트 : 프론트엔드 개발자로 가는 마지막 단계
35명이 수강하고 있어요.
156,200원

월 31,240원

5개월 할부 시
지식공유자: 코딩알려주는누나
총 86개 수업 (11시간 50분)
수강기한: 무제한
수료증: 발급
난이도:  입문-초급-중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[프론트엔드] 강의입니다.

프론트엔드 개발자가 되고 싶은 분들에게 필수 과정인 리액트를 배우고 포트폴리오 프로젝트까지 만들 수 있어요.

✍️
이런 걸
배워요!
React (router, lifecycle, state ...)
Redux (redux middleware)
API
axios
Restful Route

누나의 유머와 사랑이 가득해요😄
지루할 틈이 없는 꿀잼 리액트 강의!

제 강의에 오신분들 환영합니다!

안녕하세요, 코딩알려주는 누나에요!

드디어 자바스크립트 강의에 이은 리액트 강의가 나왔습니다.
프론트엔드 개발자를 준비하시는 분들👨‍💻 또는 제일 Hot한🔥 프레임 워크인 리액트를 배워보고 싶으신 분들을 위해 나온 강의입니다.

많은 회사들이 리액트를 사용합니다. 그만큼 프론트엔드 개발자에게 리액트는 필수조건이 되었는데요. 자바스크립트를 넘어선 심화 과정인 만큼 그 내용도 절대 쉽지 않습니다.
하지만 여러분들이 의지와 노력만 들고 오시면 나머지는 제가 가이드 해드리겠습니다😉

잠깐! 이 강의는 기본적으로 자바스크립트 대한 이해가 필요합니다.
만약 자바스크립트를 모르시는 분은 <자바 스크립트 : 기초부터 실전까지 올인원> 강의를 확인해 주세요!


무엇을 배우나요? ✨

리액트
리액트 개발자가 되기 위한 필수 리액트 컨셉들을 다양한 예제와 함께 배웁니다.

 

Redux
리액트 뿐만 아니라 리액트와 함께 배워야 하는 핵심 컨셉인 리덕스를 배웁니다.

 

Axios
API 를 호출하는 가장 유명한 방법인 Axios를 배웁니다.

 

리액트 라이브러리
리액트 개발할때 많이 쓰이는 다양한 리액트 라이브러리들을 배우고, 스스로 사용하는 법을 배웁니다. 

 

스스로 해결하는 능력
다앙한 과제들을 통해 스스로 개발해나가는 능력을 키웁니다.

 

5개의 프로젝트
넷플릭스, 쇼핑몰, 가위바위보 게임 등 리액트의 핵심 컨셉을 담은 프로젝트를 진행합니다 .


직접 만들며 배워보는
5가지 핵심 프로젝트!

첫 번째 프로젝트: 가위바위보 게임

두 번째 프로젝트: 날씨앱 만들기

세 번째 프로젝트: 쇼핑몰 웹사이트 만들기

네번째 프로젝트: 연락처 페이지 만들기

마지막 프로젝트: 넷플릭스 만들기

 

이런 분들에게 추천드려요!

  • 지루한 코딩 강의가 싫으신 분 : 개발자만 알아들을 수 있는 어려운 설명은 NO! 아무것도 몰라도 알아들을 수 있는 강의 찾으시는 분들
  • 프론트엔드 개발자가 되고싶으신 분: HTML/CSS 자바스크립트는 알지만 프론트엔드 개발자가 되기위해 무엇이 필요한지 모르겠는 분들
  • 만들면서 배우고 싶으신 분: 일방적으로 듣기만 듣는 강의가 아닌 실제 해 볼 수 있는 다양한 문제와 과제를 통해 직접 만들면서 배우는 걸 즐기시는 분들

강의가 끝난 후,
이런 모습을 기대할 수 있어요.

리액트를 이용한 프로젝트를 스스로 만들 수 있음

실제 개발에서 쓰이는 Redux까지 사용 가능

5개의 프로젝트를 통한 실전 개발 능력 UP!


지식공유자
코딩 알려주는 누나
✒️

  • 🚀 해외 부트캠프 강사로 2년간 근무하면서 100명이 넘는 문과 학생들을 가르친 경험을 토대로 여러분들에게 최적의 티칭 방법으로 지식을 전달합니다.
  • 🧐 웹 개발자로 4년간 근무했으며 단국대학교 컴퓨터 공학과 수석 졸업을 했습니다.
  • 코딩 알려주는 누나 유튜브 채널을 운영하며 코딩을 배우고 싶은 분들을 위한 무료 클래스와 정보들을 나누고 있습니다.

평균 별점 5.0★의 리뷰가 증명해요.

입사 3개월 차 초급 개발자 입니다. 강의 잘 듣고 있습니다. 중급 고급까지 열심히 달리겠습니다.

너무 재밌어요, 지루한 수업이 이렇게 재미나게 되다니 초보자 보면 바로바로 이해가 됩니다 ㅎㅎ

완강까지 쉽고 빠르게 공부할 수 있었습니다 : )

입사 초급 개발자인데 너무 재미있게 수료했어요.

자바스크립트 : 기초부터 실전까지 올인원 강의에 남겨주신 수강평입니다 💌


예상 질문 Q&A 💬

Q. 강의를 보다가 질문이 생겼습니다! 

누나가 운영하는 슬랙 채널에서 언제든 편하게 와서 질문하시면 됩니다! 

Q. 1:1개인 코칭도 수강료에 포함이 되어있나요?

A. 해당 수강료에는 개인 코칭의 가격이 포함되어 있지 않습니다 😣 하지만 수강 중 질문이 있으시다면 언제든지 슬랙 커뮤니티를 이용해 주세요! 여러분의 동료들 또는 이 누나가 답변을 달아드립니다!👨🏿‍🤝‍👨🏿

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
자바스크립트에 기본 지식이 있는 사람
프론트엔드 개발자를 희망하는 사람
멋진 포트폴리오를 만들고 싶은 사람
📚
선수 지식,
필요한가요?
자바스크립트

안녕하세요
코딩알려주는누나 입니다.
코딩알려주는누나의 썸네일
커리큘럼 총 86 개 ˙ 11시간 54분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 1. 리액트 기초
섹션 2. 2. 첫번째 프로젝트: 가위바위보 게임
1. 게임 소개 05:45
2. 박스 만들기 09:17
3. 아이템 선택하기 07:00
4. 유저가 선택한 아이템 보여주기 08:21
5. 컴퓨터는 아이템을 랜덤하게 선택하기 11:15
6. 게임의 승자를 가리자 13:52
섹션 3. 3.클래스 컴포넌트
클래스 컴포넌트: 옛날 방식이지만 중요한 것 15:24
섹션 4. 4. 리액트 Lifecycle
1. 클래스 컴포넌트 lifecycle 16:03
2. 함수형 컴포넌트 lifecycle 10:29
섹션 5. 5. 두번째 프로젝트: 날씨앱 만들기
1. 프로젝트 소개 08:21
2. 프로젝트에서 해야할 일 03:28
3. 현재 위치 가져오기 07:17
4. 현재위치 기반 날씨 가져오기 06:09
5. UI 만들기 16:37
6. 날씨데이터 보여주기 10:54
7. 버튼 보여주기 05:42
8. 도시별 날씨 가져오기 20:42
9. 로딩 스피너 12:14
섹션 6. 6. 라우터: 멀티 웹페이지를 만드는 법
1. 라우터란? : 여러 웹페이지를 만드는 지름길 12:42
2. Link, Navigate : 페이지 사이를 이동하는 법 04:52
3. Restful Route 10:07
4. useParams: URL의 파라미터값을 읽어오자 03:53
5. useSearchParams :url 쿼리값을 읽어보자 05:55
6. Redirect : 페이지를 보호하는 법 09:46
섹션 7. 7. 세번째 프로젝트: 쇼핑몰 웹사이트 만들기
1. 프로젝트 소개 03:47
2. 라우터 세팅 11:00
3. 상단 메뉴 만들기 19:22
4. Json Server 소개 12:29
5. API 부르기 06:55
6. 리액트 부트스트랩 08:40
7. Form 과 Submit 13:54
8. useNavigate로 홈페이지로 돌아가자 03:42
9. Private Route 08:41
10. 상품 디테일 페이지 만들기 09:43
11. 상품 검색하기 07:46
12. 상품 검색하기 2탄 07:22
13. 배포하기 12:29
섹션 8. 8. Redux: 게임 체인져
1. redux는 왜 필요한가? 02:03
2. redux 개념 소개 13:58
3. redux를 셋업하자 14:47
4. redux 적용하기 10:47
5. useSelector : 리덕스의 진정한 묘미 03:30
6. Payload : 함수의 매개변수와 같은 것 05:33
섹션 9. 9. 네번째 프로젝트: 연락처 페이지 만들기 (Redux ver.)
1. 프로젝트 소개 01:18
2. 프로젝트 분석 01:40
3. 왼쪽 UI 디자인 06:33
4. 오른쪽 UI 디자인 07:02
5. 리덕스 기본 세팅 05:42
6. Form에서 값 읽어오기 06:21
7. 연락처 추가 08:17
8. 연락처 보여주기 04:06
섹션 10. 10. 리덕스 미들웨어
1. redux middleware 소개 07:25
2. 리덕스 세팅 05:06
3. 리덕스 미들웨어 적용하기 09:03
4. combineReducer : reducer 여러개를 합치자! 15:46
5. 리덕스 유용한 툴 소개 : Devtool 03:36
6. 총 정리 04:59
섹션 11. 11. 마지막 프로젝트: 넷플릭스 만들기
1. 프로젝트 소개 05:10
2. API문서 06:21
3. 프로젝트 시작 08:53
4. 라우터 세팅 04:03
5. 리덕스 세팅 05:20
6.상단메뉴 만들기 09:33
7. url 들고오기 06:15
8. axios 14:36
9. 환경변수 07:49
10. Promise : API 여러개를 동시에 부르는 법 08:34
11. reducer 만들기 05:51
12. 배너 조건부 렌더링 06:38
13. 배너 만들기 12:19
14. 슬라이드 만들기 07:19
15. 로딩 09:39
16. 영화 카드 만들기 07:51
17. 카드 디테일 06:54
18. 장르 보여주기 09:42
19. 마지막 과제 04:18
20. 네번째 포트폴리오 프로젝트
섹션 12. 다음 여정
우리의 다음 여정 04:25
강의 게시일 : 2022년 06월 15일 (마지막 업데이트일 : 2022년 06월 15일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스