리액트 쉽게 설명하기 장인입니다.
'상태관리를 위해 객체를 부모 컴포넌트의 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 |
리액트가 어떻게 작동하는지 볼 수 있는 강의
리액트의 핵심만 잘 잡아서 설명 해주는 강의입니다.
따라하지 마시고 그냥 2시간 동안 영화본다는 생각으로 쭉 보세요.
어차피 본인 환경에서 하시려면 검색은 필수 입니다.
웹프레임워크가 매달마다 버전이 달라지기 때문입니다.
아쉬운점은 강의시 파일 정리가 아쉽습니다.
components, pages 등 폴더를 만들어서 파일 정리를 해주면 더 좋을 듯 합니다.
초보자가 보기에 좋은 강의 입니다.
전반적으로 훑어볼 수 있어서 좋았습니다.
앱 개발자입니다. 웹, 서버 개발 경험도 좀 있구요.
회사에서 갑자기 프론트엔드 개발 할 일이 생겨서 학습이 필요했습니다.
React, Vue 비교 중이여서, 빠르게 주요 구현 방식을 습득할 필요가 있었습니다.
이 목적에 딱 맞는 강의였습니다.
군더더기 없이 주요 내용을 들은 거 같습니다.
React가 계속 변화해나가던데, 변화의 주요점들도 추가로 강의해주시면 언제든 지갑을 열겠습니다.
감사합니다.
쉬운강의로 해석해주셔서 좋았습니다.
리액트의 핵심만 잘 잡아서 설명 해주는 강의 인정합니다.
쉽게 강의해주셔서 검색해보면서 심화과정을 진행해볼수 있을거같네요
와...진짜 대박입니다.
클래스 컴포넌트만 연습하다가 함수형 강의 보고 신세계를 맛봤습니다. 중요한부분만 콕찝어주시는 애플사마 존경합니다,
이렇게 좋은 강의인데
빡대가리라 뇌에 안 들어오네요 호호
ㅠㅠ
회사다니면서 보려다가 까먹고 안봐서 기간만료됨 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 한번만 연장찬스 주십시요....
강의가 총 몇 개가 있고 내가 몇 개를 수강했는지 알려주셈요
개이득 보는 강의임
프론트엔드는 이걸 기초로 구글 검색해가면서 만들고 백엔드는 책한권 사서 개념 잡고 구글검색으로 만들었음. 시키지도 않은 가게 예약 프로그램 만들어서 사장님한테 보너스 2백 받음. 강의료가 1원도 아깝지 않은 개이득.
저 IP 두개나 세개 뜰텐데 하나는 알바하는 가게에서 보는거고 두개는 집 PC랑 노트북일거에요~ 오해 ㄴㄴ
아직 안사고 리뷰보면서 고민중임?
사도 후회안함
유투브강의에 홀려 결제함 !!
유투브 강의 보고 며칠 고민하다 방금 회사에서 일하다 말구 바로 결제 때렸습니당 ㅎㅎ
출퇴근길에 폰으로 열씨미 한번 쭉 본 다음에 두번째 땐 따라해 보려구요
일단 유투브 강의 너무 깔쌈하고 좋아서 기대됩니다아ㅏㅏㅏㅏㅏ파이팅
제가 들었던 프로그래밍 강의중에 최고였습니다
정말 쉽고 바로 적용할 수 있게 가르쳐주십니다
이렇게 쉽게 알려주는 강의는 처음이고 귀에 쏙쏙 들어오는 강의는....
덕분에 리액트 단기간에 사용법 익히고
이제 프로젝트에 직접 적용해보려고 합니다
감사합니다 ㅠㅜ
와근데진심
여기만큼 쉽게 가르쳐 주는데가 없음 ...저같은 문송이도 쉽게 이해할 수 있슴다
리액트 입문강의로 강추입니다
많이 부족한 탓에 솔직히 이곳 저곳 무료,유료 강의 안가리고 많이 찾아 들어봤습니다만
여기만큼 제가 스스로 무언가를 해냈다는 뿌듯함 + 간단명료하지만 핵심만 빡대가리에 넣어주시는 설명 너무 좋습니다.
처음 결제하고 강의 시간이 짧아보여 금방 끝나겠네~.. 는 무슨 자잘한 숙제들과 응용문제들을 툭툭 던져주시는데
그거가지고 오래 붙들고 해결하고 다음강의로 넘어가고 하니 시간이 꽤 걸립디다. 정말 간단한 기능이지만 저에겐 어렵고 이해가 안가는 부분들을 직접 해결하니
세상 뿌듯하고 이렇게 재밌을수가없네요 ㅎㅎ
그리고 무엇보다 애플쌤이 질문에 답변을 잘해주셔서 그것도 좋았어요 (무작정 답을 알려주는것이아니라 힌트를 던져주고 직접 풀어봐 라는 식이여서 더 좋았음)
아직 많이 부족하지만 여러번 복습하고 혼자 만들어보면 좋은 결과물이 나올 것 같습니다 감사합니다 강사님~~!
좋아요 완강하고 나서 후기 덧붙임
이 분이 모든 개발 다 가르쳐주면 참 좋을 듯. 이게 바로 1타 강사의 강의력.
저는 프론트엔드 개발이라면 학을 떼는 코더입니다. (개발로 먹고사나 차마 개발자라고 못 말할 실력임). 프론트엔드 그 중에서도 자바스크립트 꼴도 보기 싫어서 다른 회사로 이직했더니 아뿔싸 닷넷과 리액트가 함께 기다리는 곳이지 뭡니까. 닷넷은 차라리 그렇다 쳐... 리액트라니... 리액트라니.... 리액트라니.... 정말 회사 때려칠 각오하고 유투브에서 강의 찾다가 이 분 강의 듣고 어라 왠지 프론트인데 그렇게 괴롭지 않네?... 어라 자바 공부할 때 느끼는 재미가 여기에도 있네?... 왜 뒷강의는 없지? 하며 흘러들어와 결국엔 완강까지 오고 말았습니다. 만연체라 죄송한데 제가 할말은 해야겠습니다. 수많은 인프런 강의 노xx강의 패ㅅㅌ캠퍼스 저도 모르는 사이에 이걸 다 결제해서 듣고 있었는데요 솔직히 말합니다 그 어느것 하나 저에게 남은게 없는 것 같습니다.... 물론 제가 빠가라 그런 것도 있지만 가르치는 분들이 가르치기 편하게 강의를 만든 것도 없잖아 있습니다. 근데 이분은 무협으로 치면 내공이라 해야 하나 뭐라 해야하지 ㄹㅇ 짬에서 나오는 바이브가 강의에서 다 느껴져요. 리액트 장인이 확실합니다. 농담아니고 이분은 물고기 잡아 주는게 아니라 낚시하는 법을 진짜 가르쳐주세요... 제가 수많은 사교육을 경험했지만 낚시하는 법을 이렇게 제대로 가르쳐주는 분은 이 분이 처음입니다... 덕분에 제가 프론트엔드로도 뭔가를 만들고 싶어졌고 문제의 회사 프로젝트도 읽어야 할 때 덜 막막해졌습니다^_ㅠ 유지보수 하라해도 여기서 배운걸 가지고 구글링 열심히 해서 어떻게 굴려 볼 수 있었습니다. 선생님은 이런걸 이가격에 파시고 심지어 진짜 핵심만 가르치고 앞으로도 뭘 배우면 좋을지 마지막에 알려주시면서 돈을 더 안받으시다니 자본주의 사회에서 있을 수 없는 일입니다. 구질구질하게 썼는데 요약하면 하나입니다. 리액트를 쉽게 설명하는 장인이십니다. 진짜 말한대로 쉽게 알려주고 진짜 본인이 만들어볼 수 있게 적절한 숙제를 주고 자극을 주십니다. 진짜 선생님은 얼마나 고수시길래 이게 가능합니까.... 뭔가 귀찮은 듯이 가르쳐 주는 말투이지만 이런 강의가 가능한걸 보면 사실 당신은 매우 부지런하고 인내심이 있을게 분명합니다... 추측한번 해봤습니다... 아무튼 선생님 정말 너무 잘 배우고 갑니다. 선생님이 개발말고도 수학이나 뭐 보고서 쓰는 법이나 뭐 ppt 만드는 법 사회생활하는법 이런거 알고 있으면 다 가르쳐 줬음 좋겠네요...ㅋㅋㅋㅋㅋ 이분은 정말 개발계의 1타 강사입니다. 확신합니다. 저는 타입스크립트도 배우러 가야겠습니다. 이분 파이썬 강좌도 궁금해서 결제했습니다. 선생님 자바는...? 혹시...? 안하십니까...? 제발 듣고 싶어요. sql 아름답게 짜는 법이라던가 프로시져 팁 이런거도 혹시 안가르쳐 주십니까? AWS로 실제 웹사이트 구동관리하는 법이라던지 도커 띄워보기 리눅스로 서버실제 열어보기 뭐 이런거... 아 이렇게 알려달라고 하면 선생님께선 혀를 차실 거 같습니다. 혼자 해보라고 말하실듯 ^^; 아무튼 정말 감사합니다. 리액트 완강 한번 하고 나니 너무 감격해서 후기를 구구절절 쓸 수 밖에 없었습니다. 여러분 꼭.... 꼭... 다른 강의 결제할 바엔 이 분 강의를 결제하세요.... ㄹㅇ 돈 몇백 다른 인강에다 써본 사람으로써 코딩애플 결제가 최고의 선택이었다 단언합니다.
진짜 돈받고 쓰는 후기 아님.. 말투가 너무 촌스럽고 호들갑을 떨어서 의심하실 수도 있는데 이 모든 후기의 말이 다 진실임을 다걸고 맹세합니다..
뭘 고민하십니까,
어서 결제하시지요.
눈물 좔좔 흘리게하는 사과쌤
그저 갓입니다 이런 강의는 아묻따 구매해야됨
이런 개쩌는 강의 나만 듣고 싶어서 추천하기 싫지만
배운 게 너무 많고 감사해서 리뷰를 안쓸수가 없네요
코딩이 즐거워지는 기적!! 코딩애플쌤 최고
제발 코딩애플 나만 듣게해주세요!
React 초심자라면 무적권 들으시면됩니다. 혹시라도 '이거 맞나?' '이게 나한테 맞을까?' 라고 생각하십니까?
이거 맞으니 생각을 멈추시고 그냥 들으세요..
들으세요
걍 들으세요 제발
경력있고 웹기술에 관심있는 개발자라면 강의 따라가기 쉽고 재미남.
*프런에서 리액트 강의 사놓고 보지도 않고 있다가, 얼떨결에 유튜브에서 리액트 약을 팔길래 홀린듯이 들어와
맛보기 강의에 만족하지 못해 결국엔 프리패스를 질렀네요.
원래 시스템플밍하다가 이직하고 나선 백엔드 일을 좀 했습니다.
어쩌다 프론트 하는 친구가 리액트 코드 짜놓은 것을 봐야했는데(팀장님이 디자인 수정하라고 시켜서.. ㅠ) 하나도 이해가 안가더군요.(다만, html, css, js 기초 지식은 있음).
근데 가끔 일손 부족할 땐 구현해놓은 리액트 코드보고 이것저것 수정하긴 했는데도 좀처럼 감이 안오던 찰나에 이 강의를 만나게 되었습니다.
어느정도 프로그래밍 좀 할줄알고, 웹 기초 살짝 있으시면 강의에서 숙제 내주는거 하는거 어렵진 않으실겁니다.
이제서야 리액트서 컴포넌트가 하는 역할이 뭔지, 상태 변환 어케 하는지에 대해서 조금은 익숙해진것 같아요.
다른 리액트 강의는 들어보질 않아서(아까운 내 돈... *프런...) 비교는 못하겠지만 숙제 내주는 부분이 꽤나 맘에 듭니다.
진짜 하게되요.
그리고 개발경력이 있는데 답보는건 좀 존심 상하는듯요. ㅋㅋㅋ
중급모듈 중간쯤 진행중인데 완강까지 얼른 달리고 싶습니다.
세번째 들으러옴
첨엔 통독->두번째 통독과 정독사이->이번에 정독
드디어 이번엔 나도 리액트 장인이 되는건가...!! 두근두두근