63강
강의 내용을 요약한 학습노트
동영상 강의 제공
초보, 중급 모두에게 필요한 강의
JS에 대한 기초 지식이 있는 분들을 위한 강의입니다.
수강생 후기 4
프론트엔드 취업시장 점유율 압도적 1위, 리액트
리액트는 국내외 수많은 기업들이 가장 많이 사용하고 있는 프레임워크입니다.
대세 기술 스택으로 프론트엔드 개발을 배우고 싶다면
지금, 리액트를 시작하세요!
그런데,
정작 기업들은 이렇게 말합니다.
리액트를 다루는 시중의 많은 강의들이 ‘사용법', ‘기능' 위주의 껍데기 구현에만 치우친 탓입니다.
리액트를 원리부터 제대로 이해하지 못한 상태로 개발을 하게 되면, 정작 리액트의 장점을 살리기 어렵고 겉보기에만 구현된 서비스를 만들게 됩니다.
스터디파이가 생각하는 좋은 리액트 개발자는?
첫째, 리액트의 장점과 원리를 제대로 이해하고 자유자재로 활용할 수 있어야 합니다.
둘째, 서비스에 대해 고민하는 개발자입니다. 그 고민을 바탕으로 서비스의 구조, 리액트의 구조를 세울 수 있어야 진짜 실력 있는 프론트엔드 개발자가 됩니다.
스터디파이가 제안합니다.
실력 있는 리액트 개발자가 되기 위한 학습 방법!
1.
리액트의 라이브러리를 다각도로 이해하고 활용하는 7년 차 프론트엔드 개발자가 여러분의 개발 사수가 되어드립니다.
JSX의 기본 문법부터 리액트의 특징과 서비스 구조까지 함께 살펴보며 각 라이브러리의 원리를 세세하게 짚어드릴게요.
7년간 프론트엔드 개발자로서 리액트를 활용한 강사님만의 경험과 노하우를 온전히 커리큘럼에 녹여냈습니다.
본 강의는 단순히 코드를 따라 치고 기계적으로 생산하는 코더가 아니라 주체적으로 고민을 해결하는 프론트엔드 개발자를 양성하는 리액트 마스터 과정입니다.
2.
페이스북 클론 코딩한다고 페이스북 만들 수 있나요?
본 강의에서는 껍데기 기능만 구현하는 클론 코딩은 진행하지 않습니다.
대신, 실무와 동일하게 서비스 가이드, 디자인 가이드가 주어진 상황에서 요구사항을 분석하고 서비스를 설계하는 ‘리얼 프론트엔드 개발’을 경험할 수 있습니다!
프로프론트엔드 개발자가 다양한 요구에 어떻게 대응하고 웹 서비스를 설계해야 하는지 고민하는 게 진짜 프론트엔드 개발의 핵심 역량이기 때문이죠.
이게 끝이 아닙니다
본 강의에서는 실무에서 리액트 개발자들이 웹서비스를 개발하기 위한 필수 기능인 ‘서비스 제작'과 ‘어드민 제작' 두 가지 실습을 모두 진행합니다.
강의를 모두 듣고 나면, 스스로 하나의 웹서비스를 개발할 수 있는 역량을 갖게 됩니다.
3.
리액트를 활용한 개발 실무에서 꼭 필요한 리액트 라이브러리 7가지를 함께 다룹니다.
Recoil과 Redux의 사용법을 배우고, 컴포넌트 스타일링, Sass의 기초 문법 그리고 SWR, Axios, 리액트 라우터 등 커리큘럼 전반에 걸쳐 함께 배울 수 있습니다.
심화 프로젝트를 통해서 프론트엔드 개발 실무에서 가장 많이 쓰이는 6가지 기능을 구현해 봅니다.
라우팅, 폼 컨트롤, 빌더 페이지, 커스텀 훅스, 글로벌 상태 관리, 스타일드 컴포넌트 기능을 직접 제작하며, 리액트 개발에서 꼭 필요한 핵심 필수 기능을 모두 배울 수 있습니다.
수업은 이렇게 진행됩니다.
이 강의를 모두 듣고나면?
7년차 개발자이자 라인 파이낸셜의 프론트엔드 개발자,
유동균 강사님을 소개합니다.
이런 분들께 추천합니다!
본 강의 수강생에게만 드리는 혜택
커리큘럼
63강
-
Chapter 01 React 소개 -
1-1. React란?
-
1-2. React의 특징
-
-
Chapter 02 JSX -
2-1. JSX란?
-
2-2. JSX에서 Javascript 사용하기
-
2-3. JSX에서의 조건문
-
2-4. JSX에서의 반복문
-
2-5. JSX 스타일링
-
2-6. JSX로 구구단 출력하기
-
-
Chapter 03 컴포넌트 -
3-1. 컴포넌트란?
-
3-2. Props
-
3-3. State
-
3-4. 클래스형 컴포넌트 vs 함수형 컴포넌트
-
3-5. 스터디파이 강의 컴포넌트 만들기
-
-
Chapter 04 LifeCycle과 Hooks -
4-1. Hooks 종류
-
4-2. React 렌더링 과정
-
4-3. 아코디언 컴포넌트 만들기
-
-
Chapter 05 이벤트 핸들링 -
5-1. 이벤트 연결하기
-
5-2. 이벤트 종류
-
5-3. Form
-
5-4. 설문조사 만들기
-
-
Chapter 06 React 환경 설정 -
6-1. Node.js, Vs code 설치
-
6-2. create-react-app 프로젝트 생성
-
6-3. create-react-app 구조 소개
-
6-4. eslint, prettier 설정
-
-
Chapter 07 React 메모장 만들기 -
7-1. 메모장 프로젝트 소개 및 설계
-
7-2. 기본 컴포넌트 구현하기
-
7-3. 메모 수정 기능 및 메모 선택 기능 구현
-
7-4. 메모 추가 기능 구현
-
7-5. 메모 삭제 기능 구현
-
7-6. localStorage로 데이터 보관하기
-
-
Chapter 08 React 심화 프로젝트 소개 -
8-1. SurveyPie 소개
-
8-2. SurveyPie와 Admin 소개
-
-
Chapter 09 SurveyPie 설계 -
9-1. 요구사항 분석
-
9-2. 컴포넌트 구조 설계
-
9-3. 데이터 정의
-
9-4. 프로젝트 세팅 및 환경설정
-
9-5. 기본 컴포넌트 구현
-
-
Chapter 10 SurveyPie 라우터 적용 -
10-1. react-router
-
10-2. react-router 적용
-
10-3. 라우터로 스텝 구분하기
-
-
Chapter 11 SurveyPie 컴포넌트 스타일링 -
11-1. styled-components
-
11-2. 질문 유형 별, 컴포넌트 만들기
-
11-3. 스타일 변수 만들기
-
11-4. 나머지 컴포넌트 스타일링 하기
-
-
Chapter 12 SurveyPie 전역 상태 관리 -
12-1. 전역 상태 관리란?
-
12-2. Recoil이란?
-
12-3. Recoil로 데이터 관리하기
-
12-4. Custom hook 만들기
-
-
Chapter 13 SurveyPie API 연동 -
13-1. Axios 설치
-
13-2. Recoil의 Selector로 API 연동
-
13-3. 설문 답변 저장하기
-
-
Chapter 14 SurveyPie 그 외 나머지 기능 구현 -
14-1. 응답 완료 페이지 구현
-
14-2. 답변 유효성 검사 구현하기
-
14-3. 프로그래스 바 구현
-
-
Chapter 15 Admin 설계 -
15-1. 요구사항 분석
-
15-2. 컴포넌트 구조 설계
-
15-3. 프로젝트 세팅
-
15-4. Ant Design 설치
-
15-5. 라우터 적용
-
-
Chapter 16 Admin 리스트 페이지 구현 -
16-1. useSWR을 이용하여 API 연동
-
16-2. 설문 리스트 컴포넌트 구현
-
-
Chapter 17 Admin 빌더 페이지 구현 -
17-1. 질문 미리보기 영역 구현
-
17-2. 질문 추가, 삭제 기능 구현
-
17-3. Redux로 데이터 관리
-
17-4. Redux에서 API 연동
-
17-5. 옵션 영역 구현
-
17-6. 저장 기능 구현
-
17-7. 새로운 설문 생성 기능 구현
-
-
Chapter 18 전체 학습 정리 -
18-1. SurveyPie 서비스 정리
-
패키지 선택
- 기본패키지
- 수강기간 2024. 10. 03 ~ 2025. 10. 03 [365일]
-
구성
- 동영상 강의 12개월 무제한 수강권 (학습 6개월+복습 6개월)
- 강의 내용을 요약한 학습노트
- 리액트 학습에 유용한 사이트 리스트
12개월 할부
월 27,083원
FAQ
- 강의를 듣다가 모르는 내용이 나오면 누구에게 질문할 수 있나요?
- 커뮤니티 '질문게시판'에 질문을 올리시면 학습 조교가 24시간 안에 답변해드립니다. 물론 수강생끼리 자유로운 질의응답도 가능합니다.
- 신용카드 무이자 할부 가능 기간은 어떻게되나요?
- 이니시스에서 사용가능한 모든 신용카드에 대해서 12개월 무이자 할부 혜택을 드리고 있습니다.
- 강의 정가는 어떻게 되나요?
- 동영상 강의 수강권: 50만원(학습기간 6개월 + 복습기간 6개월 무료 추가 제공)/ 온라인 코칭권 : 6만 원(1회당)
- 학습노트는 무엇이고, 어떻게 받을 수 있나요?
- 학습노트는 강의의 중요 내용, 학습을 위한 참고자료, 팁 등을 정리한 PDF 파일로 '내 강의실'에서 다운로드 받으실 수 있습니다.학습 노트 및 학습 자료는 강의가 모두 오픈된 이후 공개됩니다.
- 회사 제출을 위한 증빙서류 발급이 가능한가요?
- 네 가능합니다. 스터디파이 직인이 찍힌 수료증, 영수증, 수강확인증 등의 증빙서류는 스터디파이 고객센터 (https://studypie.channel.io) 에서 신청하실 수 있습니다. 일반적으로 증빙 서류에는 수강생명, 강의명, 수강 기간, 수강률(선택), 결제액 등이 포함됩니다.
- 2개 이상의 카드로 금액을 분할하여 결제할 수 있나요?
- 네 가능합니다. 2개 이상의 카드로 분할하여 결제하거나, 카드 + 가상계좌(혹은 계좌이체) 형식으로도 결제가 가능하십니다. 분할 결제를 원하시는 분은 스터디파이 고객센터 (https://studypie.channel.io) 로 문의해 주세요.
유의사항
- 결제 전 학습 기간을 다시 한 번 확인해주세요.
- 복습기간은 무료로 제공되는 기간으로 환불금 산정시 제외됩니다.
- 동영상 콘텐츠는 구매 후 7일 이내 이용하지 않은 부분 대해서 전액 환불을 보장합니다. 하단의 취소/환불정책을 확인해주세요.
- 카드사 포인트/ 선불/ 기프트카드로 결제하면 환불이 불가능하기 때문에 결제수단으로 사용하실 수 없습니다.
- 환불, 환급은 결제한 수단과 동일한 방식으로 진행됩니다.
- 환급액이 5만원을 초과할 경우, 환급액을 기준으로 제세 공과금 22%를 차감한 뒤 지급합니다.
- 코칭 가능 기간 도중에 환급조건을 만족하더라도, 환급은 코칭 가능 기간 종료 이후에 진행됩니다.
- 환급 신청은 코칭 가능 기간 종료일로부터 반드시 60일 이내에 신청해주셔야 환급액이 지급됩니다.
- 취소/환불약관 보러가기
- 환급액은 [개인정보 수집 이용 및 제 3자 제공에 동의] 에 동의를 해주셔야 받으실 수 있습니다. (단, 환급이 있는 패키지에 경우에 한함.)
- 자주 물어보는 질문 FAQ
- 신청 및 기타 문의는 고객센터로 문의 주세요.