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₩
리액트 배울거면 무.적.권
자꾸 숙제를 내줘서 오기가 생기면서 강제실력향상...그러다보니 정말 스스로 수도코드를 하면서 접근하는 관점이 달라졌어요. 인프X 거기에 있는 강의들보다 몰입도가 더 높아요. 강의는 10분인데 구글링하고 생각해보고 이렇게 코딩작성해보고 저렇게도 해보고 안되면 방금 강의 2번 3번 다시듣고, 도저히 안되면 다음강의로 숙제해답 보고 따라쳐보고 며칠 후에 다시 지워서 처음부터 다시 코딩해보고... 무지성 따라치기보다 차라리 이렇게 스스로 생각을 기르게 하는 강의가 더 기억이 잘 남는 것 같습니다.
흡입력이 아주 좋습니다 강추!!
자기 주도 학습을 자연스럽게 유도 하시고 지루할 틈이 없는 템포
노량진 1타강사처럼 너무 잘 알려주시네요 일주일만에 다 들었습니다 강추합니다!
강의 다 좋은데
인터넷에 있는 여느 다른 강의들이랑은 다르게 내용들이 귀에 쏙쏙 박히고
스스로 개념을 찾아보거나 구현하는 과정도 있어서 정말 좋았어요
장점이자 단점은 진짜 지금 쓸데없는거 다 빼고 핵심으로 쓰이는 것만 알려주는것이 장점이자
단점으로 디테일이 부족해서 깊이가 얕다고 느낄 수도 있다고 생각합니다.
그리고 하나의 디테일 하나 더...
수강생이 영상 볼륨 조절해놓으면 다른 영상이나 다시 들어왔을 때 그 조절했었던 값으로 설정되어있게 가능한가요ㅜㅜ
강의를 다시 들으러 왔을 때나 다른 강의영상을 보는 순간 볼륨이 2칸으로 다시 돌아와버려서(아마 고정되게 구현되어 있나봅니다.)
일일이 영상 볼 때마다 볼륨에 마우스 갖다대는게 귀찮아여
패****프 봤었는데 뭔말인지 이해 못해서 접었다가
무료분 강의 너무 알기 쉽게 알려주셔서 고민 끝에 결제 했습니다.
성실하게 배워서 리액트를 돈버는데 꼭 써먹었으면 좋겠습니다.
감사합니다
혼자서 작업중인 빡대가리중 하나입니다.
쉽지는 않지만 제 수준에서 이해가 잘 되도록 가르쳐주시고,
능동적으로 참여하게끔 유도하셔서 뭔가 실력이 조금씩 늘어나는 느낌입니다.
게시판에 문의 올려도 빠른시간내에 답변주시고 도움을 많이 받았습니다.
리엑트 업그레이드 버전강의가 생기면 꼭 구입해서 듣고싶은 마음이 있습니다^^
듣지마세요
나만 들을거임
홀린듯이 공부하게 됨. ㅋ
처음에 git 배우러 들어 왔다가
홀린듯이 자바스크립트 수강 완료하고
리액트 수강 완료했음. 참고로 디자이너임.
이제 nodejs 배우려고 하는데
생각해 보니 이럴 거면 처음부터 그냥 패키지 끊을걸 후회됨
여러 강의 들어봤는데, 나랑 잘 맞음 ㅎㅎ
다른 사이트 강의도 구매해서 들었는데,
받아쓰기 형태가 많아서 직접하려니까 어려움이 많았음
youtube 알고리즘이 추천을 해서 영상 몇 개 보니 개념을 잘 잡아줘서
구매했는데 설명을 빠르고 간결하게
그리고 자극적(?)으로 잘함 ㅎㅎ
숙제도 맘에 들었음
센세
건강 보단 강의가 먼저 인 거 아시죠?
잠은 죽어서 자셔야겠네요
외국계 회사 인턴 들어갔어요!
비전공자인데 여기서 배운걸로 포트폴리오 만들고 외국계 회사 2군데 인턴 합격했어요.
단기 프로젝트 하고 있는데 여기서 배운내용들 진짜 핵심적이었구나 하고 느끼고 있어요.
프로젝트 하면서 강의 다시 돌려보게 되는 부분도 많아서 아마 재구매 할 것 같아요.
좋은 강의 감사합니다.
초보신가요? 그냥 들으세요. 눈높이 교육은 물론이고, 응용 능력까지 키워줍니다.
제가 여러 리액트 강의를 찾아서 들어봤지만 여기 만큼 핵심을 보다 쉽고 날카롭게 뇌리에 박아 넣어버리는 곳은 없습니다.
쓸데 없는 설명만 나열하고, 괜히 시간투자할 필요도 없는 프로젝트만 주구장창 만들어 내는 타 강의를 들을 바에 이거 들으세요.
시간과 돈을 아끼고, 단 두 개의 프로젝트를 통해서 향후 다른 프로젝트 만들 때에도 즉각 응용이 가능한 자신을 만나게 될 겁니다.
아 내돈
코딩 애플님 입벌리십쇼. 돈이 아깝지 않습니다.
한번도 못본사람은 있어도 한번만 본사람은 없다? === 코딩애플
그냥 어차피 다른거도 구매할거, 프리패스 무적권 사서 들으세요
강의하나 들으면, 다른거 100% 듣게 될거에요
인생 코딩선생님 감사합니다.
리액트 알러지 치유됨
빡대가리들 눈높이에 맞춘 최고의 강의
선생님 사랑해요! 항상 건강하세용!
솔직히 한국사람이라면
꼬X달리고 쌍남자라면 코딩애플 강의 돈주고 듣자.
감사합니다
재밌게 잘들었습니다
돌고 돌아 여기에 정착합니다.
비전공자임에도 불구하고 간단명료하게 설명해주셔서 개념 이해가 잘 되기도 하는데 내주시는 숙제로 동기부여와 원리이해까지 얻어갑니다.
설명이 맛있어요
다른 언어 알고 있는 상태로 가니까 JS 깊게 몰라도 금방 따라갈 수 있어서 좋네요
가끔 치는 개그 너무 꿀잼입니다 ㅋㅋㅋㅋㅋ
1년 프리패스 듣고있습니다.
후회가없는 선택인거같습니다.
혼자 독학하고있는데 든든한 선생님을 두고 학습하니까 무서울게없네요 (사실 에러랑 기능구현 막힐때 기타등등 무서운거많음)
아무튼 게시판에 질문남기면 답변도 너무 잘해주시고 강의 내용도 알차고 너무 감사합니다!
입벌리세요 센세...
1년 프리패스 두과자~