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₩
우선 리액트만 재대로 하고 싶어서
사설업체서 비싼 돈주고 강의듣고 했는데 확실히 코딩애플 이거저것 좀 듣다보니까 내 눈높이에 가장 알맞게 설명해주시는 분같음.
강의가 너무 재밌어요
의지박약으로 강의 잘 못 듣는 사람인데..
컨포넌트 설명 하실 때 패륜, 불륜 안된다는 말에 빵 터졌어요
강의 정말 쉽고 재밌게 해주시고,
실제로 강의 들으면 스스로 코드 짜게 돼서 넘 좋아요
국비 듣는 중인데 국비 안 듣고 이거 듣는 중
쓰앵님 적게 일하고 많이 버세요
감사합니다 온라인 스승님
쵝오
리액트 기초 교과서
유익한 강의였습니다!
ㄳ
돈 많이 버세요 ㄳ
완강했어여
너무재밌어서 숙제 바로바로하면서 4일만에 강의 완강햇네요ㅎㅎ 너무 유익했어요!!
이 시대의 영웅
코딩사과 만세
처음입니다 ㅎㅎ 이렇게 재밌게 코딩 배운거 ㅋㅋㅌㅌ
코딩 강의 결제 해놓고 맨날 못듣거나, 미뤄서 못들어서 날린 돈이 참 많았는데요,,,
코딩애플님 강의는 재밌어서 후루룩 듣고 실력도 많이 향상되었어요. 유튜브 강의 보고 영업 당했는데, 다른 강의랑 비슷할 수도 있겠다고 결제 좀 미뤘거든요,,, 걍 그때 결제 할껄,,, 그럼 실력 2주 전에 향상됐을텐데... 후회되네요
뭐 여튼 개그가 섞여있고 편한 동네 오라버니한테 과외받는 느낌입니다! 완전 추천인데 저만 코딩왕 되고 싶으니까 다들 옆집 인프땡 가세요.
그리고 슨생님 부자되시고 만수무강 무병장수하세요. 부족할 때마다 찾아오겠습니다.
코애딩플 만세!
그럼 20000 코딩하러,,,
ps. 제가 모여봐요 동물의 숲에서 제일 좋아하는 주민이 애플이거든요?? 코딩 애플님도 애플이 한번 검색해보세요 졸귀임!
리액트 시작은 코딩애플로
다른 강의들도 들어봤는데 이렇게 쉽게 가르쳐주는 강의는 찾지 못했습니다. Redux-Saga도 있으면 코딩애플로 듣고싶네요
좋아요
bbbbbbb
강의가 그냥 재밌음
열심히 듣게 되는 퀄리티입니다
전설적인
백엔드개발자지만 회사에서 풀스택을 원해서 수강하게 되었습니다. 프론트엔드는 노베이스 상태였는데 이 강의 하나로 많은 것을 얻을 수 있었습니다. 입문자에게 강력 추천하는 강의입니다.
역시 명강의 입니다
검색을 해도, 주변사람한테 물어봐도 역시 입문은 코딩애플이였어요...! 공백시간에 최대한 빠르게 완강하겠습니다......!
애플 선생님..
강의 너무 재밌어요..
특히 마지막 강의 "React 강의 나가는 말" 너무 잘 읽었습니다.
리액트로 토이 프로젝트 몇 개 만들어보고 Next.js도 수강하려구요!
강의 들으니까 이것저것 만들어보고 싶은 게 생기네요
좋은 강의 만들어 주셔서 감사합니다♥︎
너무 유익함 ㄹㅇ
리액트로 프로젝트를 했는데 정작 학교 강의에서는 이해하기 힘들고 따라가기 힘들었는데 코딩애플님 강의로 금방 배웠고 다시 보고 복습도하고 너무 좋았습니다.
강의 결제해서 후회한 적 한 번도 없던 거 같습니다. 리액트 외에도 작년에 html css 할 때도 미리 듣고 학교 수업 들으니 확실히 수월했습니다. 감사합니다!
진화
말하는감자에서 코딩하는감자로 진화중입니다
다른 인강 듣다가 ..
다른 사이트에서 100시간짜리 강의 50시간 정도 들었는데도 머리에 남는게 없어서
그냥 바로 결제해버렸는데 재밌어서 4일만에 완강해씀다
저도 말하는 감자였는데 코딩하는 감자가 되어가고있네요
웹 개발 넘 재밌네요
빡대가리식 정리가 아주 꿀잼입니다
귀에 쏙쏙들어와서 앞으로도 다른 강의는 여기서 듣고싶네요
다른 인강 듣다가 ..
재밌어서 4일만에 완강해씀다
저도 말하는 감자였는데 코딩하는 감자가 되어가고있네요
웹 개발 넘 재밌네요
빡대가리식 정리가 아주 꿀잼입니다
귀에 쏙쏙들어와서 앞으로도 다른 강의는 여기서 듣고싶네요
엄청난 설명실력에 감탄합니다 .
저는 남이 찰떡같이 말해주면 개떡같이 알아 듣는 스탈인데 이상하게 애플교수님께서 말씀하시는 거는 개떡같이 말씀하셔도 찰떡같이 들립니다.
말씀하시는 어투, 악센트, 단어선택 너무 완벽합니다.
중간중간 웃음 포인트도 진짜 많아서 강의가 지루하지 않습니다 ㅋㅋㅋㅋㅋㅋ
리엑트를 새로 배우고 싶은 분들이라면 적극 추천드립니다
사과쌤 맛있게 꼭꼭 씹어먹었습니다.
빡머가리 상대로 아주 쉽게 알려줌.
본인도 빡머가리이지만 상당히 이해가 잘 됨.