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₩
좋아요
유튜브처럼 강의가 딱 10분 언저리로 딱딱 끊어져서 쭈욱 집중해서 강의를 들을 수 있었습니다.
react를 독학 후 몇년이 지나서 기억이 안나 다시봤는데
정말로 핵심만 알려주셔서 좋았습니다.
그리고 이상한 라이브러리나 이런것들 다른 강의나 글들보면 줄줄 나오는데 그런게 없어서 좋았습니다.
덕분에 강의 시간도 10분내외 고 라이프 사이클 등 기억이 모호해진 부분을 다시 잡을 수 있는 강의였습니다.
커리어 전환을 위해 플젝을 진행중이였는데
앞날이 깜깜했던 프론트앤드 개발에 엔진을 달아주는 강의였습니다.
만족도 최상입니다
정말 쉽게 알려주고 루즈하지 않네요. 과제들도 딱 알려준 수준에서 과하지 않게 해볼 만하고
질문 게시판도 장식 아니고 적극적인 소통이 일어나고 있는 것 같아서 좋네요ㅎㅎ
기본기 전혀없는 빡머가리 수강생 완강하고 갑니다
원래는 유튜브에서 클론코딩식으로 하는 리액트 강의를 듣다가 집중도 이해도 어렵더라구요 그래서 큰맘먹고 유료강의를 등록했습니다.
강의 시간도 10분 언저리라 그런가 지루할틈없이 끊고맺음 너무좋았구요 과제도 해결하기 어려운 부분들 게시판에서 보고 참고했는데 애플코딩님이 바로 바로 댓글달면서 소통 해주셔서 좋더라구요 그래서 회사에서 프로젝트하면서 react로 작업해봤는데 하면서 헷갈렸던 부분들 정리가 부족한 부분들 있고해서 강의 한번씩 다시 재탕하고나니까 굳굳!!
돈이 아깝지않습니다 !!
훌륭한 강의입니다.
강사님이 핵심 있는 내용만 밀도에 있게 가르쳐 주십니다.
강의력은 두 말 할 필요 없이 최강이고 강의 중간 중간에 주시는 숙제가 많이 어렵진 않지만
많은 도움이 됩니다.
good
저와 비슷한 수준의 코딩능력분들이 보면 좋습니다.
일단 저는 안드로이드, ios 출시 경험이 있는 취미로 개발하고 있는 사람압니다.
웹 개발을 시작하면서 제일 어려웠던 점은 앱과 다르게 리액트라는 라이브러리가 껴있고
작동원리를 이해하는 것에 어려움이 있었습니다.
useState, useEffect 이런 부분은 앱에서도 많이 사용하는 기법이기 때문에 익숙했습니다. 하지만
usememo, memo, hook 이런 부분에서 도움이 많이 되었으며 작동원리인 서버사이드랜더링, 클라이언트 랜더링 부분에서도 많이 도움 되었습니다.
리액트가 웹에서 어떻게 작동되는지 원리에 대해 모르시는 분 추천드립니다.
만일 css, html. 자바스크립트 기본 개념도 안되어있으시다면 비추천합니다.
혼란만 가중될 뿐입니다.
알기 쉽게 요점만 딱 알려주고 숙제도 계속 내주셔서 공부하는데 도움이 많이 되었습니다.
강의 들으면서 굳이 알 필요 없는 부분은 알 필요 없다고 딱 정해주시고, 계속 강의 내용에 맞는 숙제랑 응용문제 보면서 생각해서 코드를 짜니 꼭 코딩애플님이 숙제검사 하실때 직접 풀어주시는 내용 따라갈 필요 없이 공부할 수 있어서 좋았습니다. 배운 내용 토대로 제 방식으로 코딩해서 성공하면 코딩애플님 풀이도 같이 보면서 저렇게도 할 수 있구나 비교하면서 계속 생각할 수 있는 방식으로 수업이 짜여 있어서 이 강의 다 보면 내가 혼자서 해볼만 하겠구나 했어요.
백점짜리 강의입니다.
3번 우려냈습니다. 강의는 별 5개중 당연 5개 입니다.
비전공자 아무것도 몰랐는데 유튜브로 입문했습니다.
1회차 : 아 겁나 어렵네 (강의 끄면 ㄹㅇ 머릿속에서 클린업함수 가동됨, 리액트말고 js 기본부터, 심화, next순으로 순차적으로 밟아나감)
2회차 : 이거였구나 이해 되기 시작함, 그래도 아직 뇌 속에서 클린업함수 가동됨
3회차 : ㅋㅋㅋ아 설명 잘하네ㅋㅋㅋㅋ 이거구나 강의 숙제 하나하나 도움없이 풀어봄,, 1시간 걸리는 것도 ㄹㅇ 있음
유튜브 그리고 꿀잼임ㅋㅋㅋㅋㅋ
코딩애플 형 감사해요
취업에 도움 많이 됐습니다.
리액트는 실제로 써본적이 없는 자바 개발자인데
이번에 들어가고싶은 회사에서 리액트로 테스트로 미니프로젝트 해보라고해서 호다닥 이거 듣고 제출했습니다.
개쩔더군여 감사용