55,000원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
리액트
NextJS
타입스크립트
정적 사이트 자동 배포
도커
리액트 기초 개념부터 중급 기술까지
직접 앱을 만들어보며 배울 수 있어요!
따라하며 배우는
리액트 A-Z
.png)
이 강의를 통해서 리액트 기초부터 중급까지의 기술을 익히실수 있습니다.
리액트를 처음 접하는 사람들도 이 강의 하나로 리액트를 위해 필요한 대부분의 지식을 습득하실수 있습니다.
하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다. 프론트엔드 개발자가 되기 위해 필수처럼 생각되는 리액트를 배워서 취업에 많은 도움이 되었으면 좋겠습니다.
이 강의만의
장점을 확인하세요.
구조적 이해를 돕는
도표 중심의
쉽고 자세한 설명
직접 소스 코드를
작성하면서
자연스러운 반복 학습
실제 애플리케이션을
만들어볼 수 있는
실습 중심 강의
자바스크립트 기초를 뗀
초보 개발자라면
누구나 OK!
1-2. 도표를 통한 시각적 설명 + 직접 코드 작성의 2단계!
도표를 통해서 시각적으로 봤을 때 그냥 설명을 듣기만 했을 때보다 이해가 더 잘 되기 때문입니다. 또한 이렇게 도표를 통해서 학습한 후 소스 코드를 작성하므로 자연스럽게 복습하는 효과가 나타난다고 생각합니다.
3. 따라하며 배우세요, 실습 중심 강의.
먼저 필요한 개념을 익힌 후에 실습을 통해 개념을 더욱 확실하게 해줍니다.
4. 자바스크립트 기초를 알고 있는 학습자에게 적합합니다.
자바스크립트의 기초를 알고 계시면 이 강의를 듣는데 어려움 없이 들으실 수 있습니다.
다음 내용을 학습합니다.
섹션 1) 리액트의 개념에 대해서 배우게 됩니다.
섹션 2-3) To-Do 앱을 만들며 리액트 기초 개념을 배우며 사용해 봅니다.
섹션 4-5) 넷플릭스 앱을 만들며 리액트의 좀 더 심화적인 개념을 배우고 사용해 봅니다.
섹션 6-7) 리액트 테스트에 대해서 기초적인 부분은 배우며 실습으로 간단한 버튼 앱을 만들어 봅니다.
섹션 8) NextJS 와 Typescript에 대해서 알아보며 이 둘을 이용한 블로그 앱을 만들어봅니다. 
섹션 9) 리액트의 새로운 버전인 리액트 18버전에서 새로나온 기능과 API에 대해서 알아봅니다.
섹션 10) 리액트의 대표적인 상태관리 라이브러리인 리덕스에 대해서 알아봅니다.
섹션 11) 도커로 리액트를 실행하는 법에 대해서 알아봅니다.
예상 질문 Q&A 💬
Q. 비전공자도 들을 수 있는 강의인가요?
A. 기초부터 자세하게 강의하기 때문에 비전공자도 들을수 있습니다.
Q. 왜 리액트를 배워야 하나요?
A. 프론트엔드 개발자로서 가장 많이 사용되는 라이브러리 이기에 리액트를 배우는게 취업에 많은 도움이 된다고 생각됩니다.
Q. 강의를 듣기 전 준비해야 할 것이 있나요?
A. 기초적인 자바스크립트 개념을 알고 들으면 좋습니다.
지식공유자의
다른 강의가 궁금하다면?
누적 수강생 32,000+명, 따라하며 배우는 웹 개발 시리즈 📖
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
리액트를 처음 배우는 분
프론트엔드 개발자가 되고 싶은 분
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
자바스크립트
안녕하세요
John Ahn 입니다.
John Ahn 입니다.
안녕하세요.
즐겁게 개발하고 있는 개발자입니다.
앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.
- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발
커리큘럼
총 127 개
˙ 18시간 21분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
3 강
강의 도표 자료(Draw IO) (추천)
강의 도표 자료 PDF
강의 소스 코드
섹션 1. 리액트란
5 강
∙ 30분
리액트는 프레임워크가 아닌 라이브러리
미리보기
05:05
리액트 컴포넌트
미리보기
02:43
브라우저가 그려지는 원리와 가상돔
08:25
리액트 설치를 위해서 필요한 것들(Node.js & Visual Studio Code)
05:55
Create React App 을 이용해서 리액트 설치하기
08:50
섹션 2. 간단한 To-Do 앱 만들며 리액트 익히기
13 강
∙ 1시간 35분
Create React App으로 실행된 리액트의 기본 구조 살펴보기
06:14
React App 실행해보기
03:29
SPA란?
08:41
To-Do 앱 소개 및 JSX 알아보기
07:13
To-Do 앱 만들기 시작
11:25
할 일 목록 UI 만들기(JSX, CSS 작성)
06:47
Map 메소드를 사용한 할 일 목록 나열
07:20
JSX Key 속성 이해하기
06:13
Filter 메소드를 사용해서 할 일 목록 지우기
05:26
React State 란?
05:30
할 일 목록 추가하기
13:32
전개 연산자(Spread Operator)
미리보기
04:03
마무리 된 일 표시하기(조건부 삼항 연산자)
09:52
섹션 3. To-Do 앱 최적화 하기
20 강
∙ 2시간 33분
React Hooks란 무엇인가?
미리보기
16:00
To-Do 앱을 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기
10:19
state와 props
미리보기
03:22
할 일 목록 부분을 위한 컴포넌트 생성하기(컴포넌트 분리하기)
08:21
구조 분해 할당(Destructuring)
07:10
Form 부분을 위한 컴포넌트 생성하기
03:46
[참조] 리액트 모듈 설치 시 나는 종속성(dependency) 에러 해결 방법
TailWindCss소개
11:44
TailWindCss로 Todo 앱 스타일링 해주기
16:43
react-beautiful-dnd react 18 버전에서 나는 에러 해결 방법
Drag and Drop 기능 추가하기
24:12
리액트 불변성 지키기
07:42
List 컴포넌트 생성하기
05:10
React.memo 를 이용한 렌더링 최적화
05:49
useCallback 을 이용한 함수 최적화
07:22
useMemo를 이용한 결과 값 최적화
02:39
리액트 확장 프로그램 추가하기
02:13
할 일 리스트 모두 지우기 버튼 생성
01:36
할 일 목록을 수정하는 기능 추가하기
11:06
localStorage에 todoData 값 담기
08:20
섹션 4. Netflix 앱 만들기 시작
9 강
∙ 1시간 25분
만들게 될 Netfilx 애플리케이션 소개
01:09
Create-React-App으로 리액트 설치하기
01:54
The Movie DB API Key 생성하기
04:39
The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기
11:17
넷플릭스 애플리케이션 전체 구조 생성하기
03:42
네비게이션 바 컴포넌트 생성하기
16:23
이미지 배너 생성하기
24:42
Styled Component에 대해서
06:26
Styled Component를 이용한 비디오 배너 생성하기
15:46
섹션 5. Netflix 앱 완성하기
15 강
∙ 2시간 57분
영화 나열을 위한 Row 컴포넌트 생성하기
19:54
슬라이드 기능 추가하기
06:13
Styled Component를 이용해서 Footer 생성하기
16:20
영화 자세히 보기 클릭 시 모달 생성하기
08:12
Movie 모달 UI 생성하기
09:41
React Router Dom
08:22
React Router Dom APIs
08:57
Netflix 앱에 React Router Dom 적용하기
13:37
useLocation을 이용한 검색 페이지 구현하기
17:17
검색 페이지 UI 구현하기
07:40
useDebounce Custom Hooks 만들기
13:32
useParams를 이용한 영화 상세 페이지 구현하기
09:04
모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성
14:29
swiper 모듈을 이용한 터치 슬라이드 구현하기
14:12
github를 이용해서 배포하기
09:59
섹션 6. React TDD 기본
8 강
∙ 46분
테스트 주도 개발(TDD)란 무엇인가?
02:15
React Testing Library란?
05:18
Jest란?
01:59
Jest 파일 구조 및 사용법
04:18
React Testing Library 주요 API
06:32
쿼리 함수에 대해서
06:28
Create react app으로 리액트 설치 및 Prettier 설정하기
07:23
ESLint 설치 및 설정하기
12:13
섹션 7. React TDD 를 이용한 간단한 앱 생성 및 배포
10 강
∙ 50분
TDD를 이용해서 만들 앱 소개
01:35
앱 만들기 시작
04:55
플러스, 마이너스 버튼 생성
04:27
플러스, 마이너스 버튼 기능 넣기(fire event)
04:42
on/off 버튼 만들기(toHaveStyle)
03:46
on/off 버튼 클릭 시 버튼 disabled
04:21
Github Action을 이용한 AWS S3로 앱 자동 배포하기
08:15
앱 배포를 위한 AWS S3 버킷 생성하기
04:01
AWS S3 버킷 설정 및 애플리케이션 배포하기
04:06
S3로 앱 자동 배포를 위한 yml 파일 완성하기
10:26
섹션 8. Next.js와 TypeScript
19 강
∙ 3시간 52분
Next.js 란
08:19
Next.js 기본 파일 구조
03:18
Pre-rendering
미리보기
05:42
Data Fetching
12:53
TypeScript 란?
04:14
Next.js와 TypeScript 만들 앱 소개
01:11
메인 페이지 UI 만들기(마크다운 파일 생성)
11:49
마크다운 파일을 데이터로 추출하기
17:58
TypeScript Type
05:03
Typescript 추가 제공 타입
13:22
Type annotation, Type inference
05:21
Type assertion
04:10
getStaticProps를 이용한 포스트 리스트 나열
08:52
포스트 자세히 보기 페이지로 이동(file system 기반의 라우팅)
06:41
포스트 데이터를 가져와서 보여주기(remark)
20:47
블로그앱 스타일링
03:22
Nextjs 13
47:55
nextjs 13 소스 코드
Server Action
51:57
섹션 9. 리액트 Version 18
3 강
∙ 18분
Automatic batching
05:14
Suspense on the server
05:56
Transition
07:36
섹션 10. 리덕스
9 강
∙ 2시간 11분
리덕스란?
08:26
미들웨어 없이 리덕스 카운터 앱 만들기
17:25
combineReducers
미리보기
11:22
Redux Provider
미리보기
06:46
useSelector & useDispatch
07:08
리덕스 미들웨어
06:26
Redux Thunk
20:01
Redux Toolkit
11:06
Redux Toolkit APIs
43:10
섹션 11. 도커를 이용한 리액트 실행
13 강
∙ 1시간 17분
챕터 설명
02:20
도커를 사용하는 이유
04:51
도커란 무엇인가
02:26
윈도우에서 도커 설치하기
04:03
맥에서 도커 설치하기
03:26
도커를 사용할 때의 흐름 감잡기
04:59
도커 이미지로 도커 컨테이너 만들기
06:06
도커 이미지 생성하는 순서
02:55
도커 파일 만들기
09:05
도커파일로 도커 이미지 만들기
09:28
리액트를 위한 도커 파일 작성하기
13:38
생성한 이미지로 어플리케이션 실행 시 접근이 안 되는 이유 (포트 맵핑)
04:05
EC2 에서 도커 설치 및 실행
09:56
강의 게시일 : 2022년 07월 12일
(마지막 업데이트일 : 2023년 10월 31일)
수강평
총 69개
수강생분들이 직접 작성하신 수강평입니다.
4.7
69개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
1. 강의 자료 - 5점
탐나는 GIF 자료들이 많은데, PDF에 GIF가 담기지 않는 점, diagram앱에서 export시 페이지 분할되는 부분의 사진이 잘리는 점은 아쉽습니다 ㅠ
인프런에 문서 관련 표준이나 가이드라인도 있으면 좋을 것 같네요. 어떤 강사분은 한글 파일로 하시는 것도 본 적 있어서..
그래도 강의자료 퀄리티가 만점이라 5점
2. 강의 전달력 - 5점
목소리 좋다는 평은 처음 남겨봅니다. 듣기 편해요.
리액트는 예전에 책으로 보거나 독학했을 때는 어려웠는데,
어려운 건 중요한 걸 더 알려주고, 그림판으로 대충 그리는게 아닌 제대로된 다이어그램이나 자료와 함께 친절하게 강의해주셔서 덕분에 잘 배웠습니다.
이거 듣다가 지인한테 다른 강의도 3개 추천 받았었는데 비교해보니 리액트 배우기에는, 프론트엔드 입문자에게는 이게 최고인 것 같습니다.
3. 강의 구성 - 리액트~TDD는 5점, 8강부터 4점
리액트와 테스트, 배포, 자동화까지는 엄청 잘 알려주셨는데, 타입스크립트, Next.js, 리덕스는 그만큼은 자세히 알려주지 않아 아쉽습니다! 강의가 부족한 게 아니라 후반 파트는 입문까지만 알려주셔서 그렇습니다. 중급 강좌도 있으면 좋을 것 같습니다~
4. 총평
만점짜리 강의입니다. 퀄리티에 비해 가격이 다소 저렴한 편입니다.
2022-08-27
React 부분과 달리 Nextjs, Typescript, Redux 부분이 살짝 아쉽다는 생각이 들었습니다. 좋은 강의였습니다.
2022-08-24
배너 만들기에 css 파일 없고 코드도 없는데 질문사항에 검색해도 안나옴
2023-02-28
1. 장점
교재 및 소스가 제공되어 복습하기 좋습니다.
(제가 이 강의를 신청한 이유입니다.)
2.단점
강의가 교재 읽기 같은 부분이 있어서, 전달력이 떨어집니다.
코드 설명할 때, 타이핑하면서 코드를 단순히 읽는 경우가 많습니다. (집중 안됨, 복습시 시간낭비)
3.건의 사항
단순 코드 타이핑, 코드 읽기 시간은 줄여 주시고, 소스에 대한 설명 시간을 늘여 주셨으면 좋겠습니다.
drawo io 는 읽기 불편하고, 보안때문에 회사에서 접속도 되지 않습니다.
2023-08-02
john ahn님의 강의는 대단하다고 생각합니다. 저렴한 강의 비용에 교재까지 손수 만들어 제공해주시고, contents들도 알찹니다. 타강의에 비해 내용도 풍부한데 가격도 착한 이런 강의를 두고 어떻게 다른 리액트 강의를 듣겠습니까
2022-07-12
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
