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

(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계 대시보드

(4.6)
10개의 수강평 ∙  219명의 수강생
156,200원

월 31,240원

5개월 할부 시
지식공유자: 코딩알려주는누나
총 114개 수업 (16시간 32분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드] 강의입니다.

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

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

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
자바스크립트에 기본 지식이 있는 사람
프론트엔드 개발자를 희망하는 사람
멋진 포트폴리오를 만들고 싶은 사람
📚
선수 지식,
필요할까요?
자바스크립트

안녕하세요
코딩알려주는누나 입니다.
코딩알려주는누나의 썸네일
커리큘럼 총 114 개 ˙ 16시간 32분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 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
보너스 트랙 : 최신 리덕스를 사용하자 - redux toolkit 미리보기 18:42
보너스 트랙2 : createAsnycThunk 25:16
섹션 11. 11. (✨2024년 최신 업데이트)리액트 쿼리
1. 왜 리액트 쿼리를 써야하는가? 06:36
2. 프로젝트 세팅 06:46
3. 리액트 쿼리를 사용해보자! 14:59
4. 캐시: 유저경험의 신세계 12:19
5. api의 상태 : 리액트 쿼리만의 특별한 점 05:06
6. staleTime : api 호출 통제 08:37
7. 기타 옵션들 08:44
8. 디테일 데이터 불러오는 법 03:37
9. 커스텀 훅 만들기 06:56
10. 쿼리를 여러개 부르는 법 : useQueries 06:24
섹션 12. 마지막 프로젝트 들어가시기 전에
섹션 13. 12. (✨2024최신 업데이트) Netflix 만들기
1. 프로젝트 소개 05:10
2. Api 문서 소개 08:54
3. Route 구성하기: nested route와 Outlet 21:39
4. AppLayout 만들기 05:18
5. axios 세팅 07:34
6. Banner 만들기: hook hook hook..! 12:46
7. 배너 디자인하기 15:09
8. 영화 슬라이드 만들기 11:06
9. 영화 카드 만들기 11:28
10. 코드 구조 리팩토링 : 실제 회사에선 어떻게 구성을 할까? 10:16
11. 장르 가져오기 08:36
12. 장르 보여주기 04:11
13. 키워드로 영화 찾기 20:53
14. 페이지네이션 10:45
15. 마지막 프로젝트
섹션 14. 12.(구 버전) 넷플릭스 만들기
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. 네번째 포트폴리오 프로젝트
섹션 15. 다음 여정
우리의 다음 여정 04:25
강의 게시일 : 2022년 06월 15일 (마지막 업데이트일 : 2024년 03월 13일)
수강평 총 10개
수강생분들이 직접 작성하신 수강평입니다.
4.6
10개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
성동원 thumbnail
5
백엔드 개발만 하다가 프론트 개발에 관심이 생겨 듣는 사람입니다. 프로젝트를 통해 학습을 한다는 점에서 많은 도움이 되는 것 같습니다.
2024-03-07
연어와아아앙 thumbnail
5
몇 백만원하는 3개월 부트 캠프보다 훨씬 좋고 기초탄탄하게 잡아줘요. 그리고 Redux 이해 못 했던거 여기서 개념 다 잡았어요. \(❁´◡`❁)/ 아쉬운 점은 딱히 없는데 정말 굳이~~ 뽑자면 1. styled-components가 아닌 CSS 2. redux 업데이트 및 권장사항 (진짜 상관 없음.. 공식문서 찾아본 결과 문제 없다고 했음! 코드 짱 잘 돌아감.. 그냥 거슬림 정도..?!) 3. [쌩초보 기준] 모두 알려주는 강의가 아님 → 나머지 기능 본인이 만들어야 함(좀 많음) → 답지 깃허브 참고 못함 (특히, 초보 경우! class 작성/Hook/강의 내용과 180도 다른 코드) 저는 제 방식대로(함수형 버전&추천 라이브러리 사용 안 하고 원래 쓰던 라이브러리 사용&모바일 반응형& 개인 포트폴리오) 기능 다 만들기는 했는데.. 쌩초보자분은 질문 많이 하시거나 파워 구글링 또는 열정가득해서 맨땅에 헤딩 하시는 분이면 추천..! ✨단, 이런 경우 다른 강의 보세요. (리액트 쌩초보 기준)✨ 1. 나는 처음 부터 같이 따라 하면서 할려고 했는데?! 2. 난 답지 보면서 분석해야 이해가는데?!
2022-06-30
지식공유자 코딩알려주는누나
안녕하세요 마지막 과제를 제외하고는 각 프로젝트 마다 전체 완성프로젝트 깃허브 링크가 있어서 코드 참고 가능합니다!!
2022-12-22
김동규 thumbnail
4
리덕스 강의를 보고 있는데 현재 하는거랑 좀 다른거 같아요...강의에 나온대로 했는데 안되서 찾아보니까 준비하시는 동안 바뀐거 같아요
2022-07-02
지식공유자 코딩알려주는누나
안녕하세요! redux toolkit 강의도 같이 업데이트 했습니다!
2022-07-04
Yun hyunwook thumbnail
5
레알루 너모 좋아요~~
2022-07-10
김혜린 thumbnail
5
쉽게 잘 알려주셔서 너무 좋습니다~
2024-02-22