React 리액트 기초부터 쇼핑몰 프로젝트까지!
리액트 쉽게 설명하기 장인입니다.
'상태관리를 위해 객체를 부모 컴포넌트의 state로부터 props로 받아와서 리턴해주세요' 같은
변태 개발자용어 쓰면서 리액트 어렵게 설명하는 나쁜 사람들이 많아서 준비한
7살도 이해가능한 React 코스입니다.
쓸데없는 Todo App, tic tac toe 예제보다는
어디가서 자랑할 수 있는 블로그, 쇼핑몰 프로젝트 제작과 함께 처음부터 차근차근 알려드립니다.
역시 이번 강의도 혼자 리액트로 코딩할 수 있는 사람을 만드는게 목표기 때문에
- 코드 따라적기만 하고 끝내는 강의가 아니라
- 혼자 코딩할 때 도움이 많이되는 문법의 용도와 원리를 많이 설명해드리며
- 많은 DIY 과제가 여러분을 기다리고 있습니다. 혼자 구현해보라는건 혼자해봅시다.
(1인 1계정 사용 부탁드립니다. IP 다보임)
[배울 내용]
- 최근 업데이트된 리액트 18버전으로 진행
- 리액트 프로젝트 생성, 관리, 빌드하는 법
- 컴포넌트, props, state를 이용한 모던 웹개발
- JSX for 반복문, 이벤트 핸들러 등 UI기능구현법
- 라우터로 페이지 나누기
- Redux와 context API로 state 관리하기
- Ajax 등으로 서버 API 통신하는 법
- 자주 사용하는 외부 라이브러리 (Bootstrap, Styled component, SASS)
- 자주 필요한 JavaScript ES6 문법들
- lazy loading 등 간단한 성능개선법
- 서버프로젝트와 리액트 연동
[필요한 사전 지식]
- HTML/CSS 기초
- JavaScript 기초 (var let const, function, if else, for, [], {} 자료 다루기)
- JavaScript가 처음이라면 JavaScript 기초 강의 선행 추천드립니다.
[업데이트 사항]
- 리액트 18버전내용 추가
커리큘럼
| Part 1 : 블로그 제작 & 기초 문법 | |||
| React 배우기 전에 쓰는 이유부터 알아야 | 무료 | 00:03:00 | |
| 리액트 React 설치와 개발환경 셋팅 | 무료 | 00:08:00 | |
| 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 | 무료 | 00:11:00 | |
| 중요한 데이터는 변수말고 state에 담습니다 | 무료 | 00:12:00 | |
| 버튼에 기능개발을 해보자 & 리액트 state변경하는 법 | 무료 | 00:13:00 | |
| array, object state 변경하는 법 | 무료 | 00:11:00 | |
| Component : 많은 div들을 한 단어로 줄이고 싶으면 | 00:10:00 | ||
| 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) | 00:10:00 | ||
| map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 | 00:12:00 | ||
| 자식이 부모의 state 가져다쓰고 싶을 때는 props | 00:09:00 | ||
| props를 응용한 상세페이지 만들기 | 00:12:00 | ||
| input 1 : 사용자가 입력한 글 다루기 | 00:11:00 | ||
| input 다루기 2 : 블로그 글발행 기능 만들기 | 00:08:00 | ||
| class를 이용한 옛날 React 문법 | 00:06:00 | ||
| 만든 리액트 사이트 build & Github Pages로 배포해보기 | 무료 | 00:05:00 | |
| Part 2 : 쇼핑몰 프로젝트 | |||
| 새로운 프로젝트 생성 & Bootstrap 사용하기 | 00:08:00 | ||
| 이미지 넣는 법 & public 폴더 이용하기 | 00:12:00 | ||
| 코드 길어지면 import export 하면 됩니다 | 00:15:00 | ||
| 저번시간 숙제 해설 (Card 컴포넌트 만들기) | 00:12:00 | ||
| 리액트 라우터 1 : 셋팅이랑 기본 라우팅 | 00:12:00 | ||
| 리액트 라우터 2 : navigate, nested routes, outlet | 00:13:00 | ||
| 리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 | 00:11:00 | ||
| styled-components | 00:11:00 | ||
| Lifecycle과 useEffect 1 | 00:13:00 | ||
| Lifecycle과 useEffect 2 | 00:11:00 | ||
| 리액트에서 서버와 통신하려면 ajax 1 | 00:10:00 | ||
| 리액트에서 서버와 통신하려면 ajax 2 : post, fetch | 00:11:00 | ||
| 리액트에서 탭 UI 만들기 | 00:13:00 | ||
| 멋있게 전환 애니메이션 주는 법 (transition) | 00:13:00 | ||
| props 싫으면 Context API 써도 됩니다 | 00:13:00 | ||
| 장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 | 00:10:00 | ||
| Redux 2 : store에 state 보관하고 쓰는 법 | 00:10:00 | ||
| Redux 3 : store의 state 변경하는 법 | 00:14:00 | ||
| Redux 4 : state가 object/array일 경우 변경하는 법 | 00:13:00 | ||
| Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제 | 00:13:00 | ||
| 리액트에서 자주쓰는 if문 작성패턴 5개 | 무료 | 00:05:00 | |
| localStorage로 만드는 최근 본 상품 기능 1 | 00:13:00 | ||
| localStorage로 만드는 최근 본 상품 기능 2 | 00:10:00 | ||
| 실시간 데이터가 중요하면 react-query | 00:12:00 | ||
| 성능개선 1 : 개발자도구 & lazy import | 00:12:00 | ||
| 성능개선 2 : 재렌더링 막는 memo, useMemo | 00:08:00 | ||
| 성능개선 3 : useTransition, useDeferredValue | 00:10:00 | ||
| Progressive Web App 만들려면 | 00:09:00 | ||
| state 변경함수 사용할 때 주의점 : async | 무료 | 00:05:00 | |
| custom hook으로 코드 재사용하기 | 00:11:00 | ||
| Node+Express 서버와 React 연동하려면 | 무료 | 00:10:00 | |
| React 강의 나가는 말 | 00:05:00 | ||
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
Next.js로 웹서비스 만들기
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사용해서 만든 …
신청하기160,000₩75,000₩
지루할 틈이 없는 강의
리액트라는 것을 재밌고 지루하지않게 배웠습니다.
중요한것들을 재밌게 잘 알려주셔서 머릿속에 쏙쏙 잘 들어왔고 가격도 너무 착해서 좋았습니다
완전 만족합니다 다른 강의도 구매해서 들을 예정입니다
여러 React 강의와 책을 봤는데 제일 이해하기 쉬웠습니다.
무엇보다 어려운 내용을 쉽게 설명해주셔서 좋았습니다. 책으로 어렵게 쓰여지고 이해도 안되는 내용들을 실제로 어떻게 쓰이는지 개념적으로 쉽게 이해하면서 적용할 수 있었습니다. 가격 대비 정말 좋은 강의라 생각합니다. 저는 강의 내용을 보고 제 나름대로 구현하면서 진도를 나갔습니다. 그러다보니 막히는 부분도 많았습니다. 삽질을 엄청하다가 해결이 안되서 질문 올리고 다음 강의를 보면 제가 삽질했던 내용을 전부 설명하고 계시더군요... 삽질을 하니 더욱 강의 내용이 와닿고 빠르게 흡수할 수 있던 것 같습니다. 강력 추천드립니다.
그동안 엄청 헤맸던 리액트 개념을 단숨에 해결했습니다
저는 비전공자로서 코딩을 시작하면서 엄청 헤맸고
여러 가지 시행착오를 많이 겪은 케이스입니다
그래서 온갖 강의와 책을 섭렵했는데요
처음부터 별 설명없이 어려운 단어 첨 들어보는 단어 써 가며
추상적인 개념 알려주는 (자기는 다 알고 늬들은 알아서 따라와라) 식의 강의들
자세한 듯 하면서도 페이지 분량이나 배치 문제인지
상세한 설명 필요한 부분을 스리슬쩍 건너뛰는 책들 등등
그러다 드디어 유튜브를 통해 이 강의를 만났는데
이제야 리액트가 좀 살 거 같아요 ㅠㅠ
다른 강의는 '아 이거 다 따라하고 나면 나 혼자서는 힘들겠다' 싶은데
이 강의는 만들면서 바로 응용해보게 돼요
흔히 광고에서 말하는 '물고기를 낚아주는 게 아니라 물고기를 잡는 법을 알려주는' 수업이고
'잡는 방법을 알려준다는게 이런거구나' 하는 느낌이 온다고 해야 하나
또 영상아래 설명도 너무 잘 되어 있어서
설명만 읽어봐도 머리에 뭘 넣어야 하는지 포인트가 잡혀요
시간 절약도 되고 복습할 때도 엄청 편합니다
그리고 많은 분들이 강사님 설명 실력 극찬하시는데
진짜로 원리만 딱딱 알려주시고 군더더기 없고
심지어 재밌습니다 ㅋㅋ 저 강사님 유튜브 강의 다 듣고 반해서 넘어온 케이스인데
정말 기대를 저버리지 않으시더라고요 듣고 있으면 뭔가 원리가 머릿속에 흘러 들어오면서
동시에 빵빵 터지고 있는 제 자신을 발견.. ㅎㅎ
그리고 아 어려운 부분 빼주시는 것도 너무 좋았어요
이 부분이 진짜 선생님의 중요한 역할이라고 생각하는데
괜히 있어보이려고 초보 입장에서 어려운 내용 넣고 강의 비싸게 받는 곳을 많이 봐서요
기본개념도 제대로 안 잡혀 있는 상태에서 윗단계 내용 들으면
이제 막 배운 기본개념조차 헷갈리게 되는 경우가 많은데
이 수업은 그런 걱정 안하셔도 됩니다
저는 지금 완강이 얼마 안 남았는데 오늘 교재 설명 보다가
'갓 태어난 밤비 다리처럼 흔들흔들하는' 표현 보고 빵 터졌어요 ㅋㅋ
이 강의 듣기 전 제 리액트 실력이라 ㅎㅎ
여러분 이 수업 고민하고 계시다면 절대 고민하지 마세여
저 리액트 배울려고 30만원대 강의 듣고 3만원짜리 책도 사서 봤는데
8만원인 이 강의에서 훨씬 더 많은 걸 배우고 익혔답니다 (놀랍게도)
얼른 리액트로 취업하고나서 나머지 노드나 뷰 같은 강의도 여기 강의로 섭렵할 예정이에요 ㅎㅎ
좋은 강의 만들어주셔서 너무 감사합니다 강사님 >_< 건강 조심하세요오
감사합니다! 너무 좋은 강의인 것 같아요.
리액트, 뷰, 앵귤러, 노드.js같은게 있는 건 알았고
언젠가는 배워야지라는 생각을 하기는 했지만 그게 이렇게 빨리 오게 될 줄은 몰랐습니다.
미니프로젝트를 진행하고 있는데 이전에 사용해본 적 없는 js를 이용하라고 해서,
부랴부랴 리액트, 뷰를 필요한 부분만 찾아서 만들고 있는데 뷰는 그나마 괜찮았는데
리액트는 JSX가 이해가 안되서 모르는 부분이 너무 많았는데..
너무 설명을 재밌고 잘해주셔서 신선하면서도 이해가 잘되네요. 모르겠는 부분은 그냥 넘어갔었는데
그런 부분들을 하나하나 설명해주셔서 잘 듣고 있습니다!
이 강의를 듣고 이제 모든 개발교육은 코딩애플로 결정!
리액트 배우려고 타사 온라인 강의 몇십만원들여서 사서 들어봤지만,
코딩애플 교육이 ㄹㅇ최고임. 다른거 듣지마세요. 진짜 쉽게 잘 가르쳐주십니다.
앞으로도 개발교육은 코딩애플에서만 들을거임.
처음 끝 복습에 다 좋은 강의
리액트 강의를 다른곳에서 들었습니다.
강의가 좀 자세히 알려주고 길다보니 중간에 멈추고 듣고 멈추고 그러다보니 앞에 내용을 잊어버리는 경우가 많았습니다.
그래서 진도가 계속 더뎠습니다.
그런데 이 강의를 듣고난후 순간적으로 전체적인 내용이 정리되면서 내가 웹페이지를 어떻게 만들어야하는지 방향을 알 수가 있습니다.
강의가 쉽고 간결하며 특히 한호흡으로 알려주기 위해 많은 노력을 기울인 강의입니다.
리액트 강의가 처음이 아닌분들 중 전체적인 그림이 안그려지시는 분들에게 정말 큰 도움이 될 강의입니다.
배달의 민족에도 리뷰 써 본 적이 없습니다.
완강 후 리뷰 남깁니다. 기초적인 것들을 이 이상 실전적으로 배울 수 있을까 싶습니다. 스프링을 사용해 개발을 해오다가 프론트엔드에도 관심이 생겨 책이나 강의를 들었지만 풀리지 않는 궁금증이 있었고 이 강의를 통해 해결하였습니다. 혹시 수강생이 처음 리액트를 접한다면 이 강의를 무조건 추천하고 싶습니다. 차후에도 필요한 강좌가 있다면 무조건 코딩애플에서 들을 계획입니다. 합리적인 가격에 강의해주셔서 진심으로 감사드립니다.
좋은 강의 입니다.
리액트 기초부터 알기 쉬운 표현으로 스킵없이 차근차근 잘 알려주는 강의입니다. 리액트 처음 시작할 때 듣기 좋은 강의인거 같습니다
좋아요 좋아요
코딩애플 노드듣고 듣는중인데 노드는 그래도 서버쪽이라 약간 헤매고 있는데, 리액트는 그래도 html css javascript를 다뤘다보니 좀 더 수월하네요.
인기유튜버꺼 리액트도 돈내고 들은적있는데, 화려하기만하지 별의 별 역사부터 개념부터 하나하나 자바스크립트 리팩토링까지 리액트가 엄청어려운건줄알았습니다.
코딩애플에서 듣는 리액트도 막 엄청 쉬운건 아니지만, 들으면서 확실히 전에 들었던 곳보다 훨~~~씬 나아서 전에 들은 곳한테 화딱지가 자꾸 나네요.. 뭘그리 어렵게 가르쳤던지 아오 개패고싶습니다 진심.
뭔가 친절하고 비즈니스적인 매너를 겸비한 곳은 걸러야된다는 생각이 드네요.( 알맹이가 너무 꾸려서)
속살만 딱딱 잘 발라주는 코딩애플이 짱입니다요
다른 강의 들보다 훨씬 좋았습니다
알아듣기 쉽게 설명해주시고 그러면서 기본적인 내용들을 빠뜨리지 않았던 수업이었습니다.
너무나 유용한 개발방법이나 로직같은 이럴때는 이거! 이런 느낌으로 딱딱 알려주셔서 이것만 들어도 리액트 다른 강의는 필요없을거 같습니다.
따로 심화 기능이나 라이브러리만 추가로 사용할 때 해당 DOC을 찾아보면 되는 상태까지 만들어준다고 보면될 거 같네요 이강의!
정말로 강추강추강추입니다!
코딩애플 선생님
사랑해요 저랑 사귀어주실수 있나요?
충격받았어요.
강의 몇개 안들었지만 리뷰 빨리쓰고싶어서 남깁니다.
다른강의들은 보통 영상하나만 올리고 혼자 공부할려면 그 영상을 다시재생해서 어디인제 찾아보든가 해야하는데
코딩애플은 영상밑에 친절하게 혼자 공부할수있도록 정리를 해주신거에요.. 감동먹었습니다 복습도 진짜 잘되고요
숙제를 내주셔서 혼자 해결할 수 있는 능력을 길러주십니다. 다른 강의들은 생각없이 따라치게되서 흥미도 금방잃고 공부하기 싫었는데
코딩애플은 전혀 지루하지 않아요. 숙제푸는 맛도 재밌습니다. 최고!!
오늘 바로 프리패스로 듣는중
유튜브에서 보고 이거다 싶어서 바로 지름 ㅎㅎ
지루할 틈이 없습니다.
다른 강의들은 보다가 졸려서 포기했는 데 코딩애플강의는 집중력떨어질때쯤 강의 다 끝나있어서 좋았습니다.
리엑트 강의 걍 이거 하세요!!??
잼있고, 쉽고, 빠르게 ,중요한내용들 쏙쏙 머리에 잘들어옵니당. 모르거나, 이해 안가는부분들 게시판에 애쁠쌤에게 여쮜보면 빠른답변으로 또다시 도움도 받구 암튼 이거 증말!!증말 강추!!!!??? 듣기시루시면 저희만 보구 배워야즁 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그냥 최곱니다
더이상 뭐 말이 필요할까요? 최곱니다!
강의 최고
리액트 강의 다른 것도 많이 들어봤었는데, 포기하고 싶을 정도였..
다른 강사들은 자기 지식 뽐내기 하는 느낌이었고, 실용적이지도 않았음.
배운 걸 써먹으려고 하면 막막해진다고 해야할까?
근데 애플쌤 강의는 이해 완전 잘 돼요. 그리고 실용적이라 최고 좋음.
최신 문법 사용하셔서 더 더 좋아요.
왜 이제서야 여길 알게 된거죠
리액트 강의 전전하면서 느낀건 처음듣는 초보를 위한 강의가 맞나였습니다. 뭔가 설명하기 귀찮은건 넘겨버리고 설명도 강사 눈높이에서 하는 느낌이라 귀에도 들어오지 않고 전전하다가 유튜브에 리액트 검색하고 애플쌤을 알게되었습니다. 쉽고, 재밌게 설명해주시는 걸 보곤 망설임 없이 결제하게 되었네요 ㅎㅎ 리액트 듣고 js/ type script도 여기서 들을 예정입니다. 한가지 부탁드리고 싶은게 있다면..백엔드쪽 강의도 열어주셨으면 하는 마음이 듭니다..spring boot 라던지...
최고로 쉽게 이해되면서 도움되는 강의였습니다.
제목 그대로 입니다. 이해 안되는 거, 도움 필요한 부분은 몇 번씩 다시 반복하면서 읽어보았습니다. 많은 도움이 되었고요.
강의 상단 또는 하단에 Github 링크를 상시공유해주시면 좋겠습니다.
나무보다 숲을 보는 강의
큰 틀을 제시하고 필요한 부분은 수강생들이 채워나가도록 하는 명강의입니다