Thumbnail
개발 · 프로그래밍 프론트엔드

라인 파이낸셜 출신 개발자와 리액트로 실무 서비스 제작하기 대시보드

34명이 수강하고 있어요.
324,500원

월 64,900원

5개월 할부 시
지식공유자: 스터디파이
총 69개 수업 (19시간 48분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

강의를 모두 듣고 나면, 스스로 하나의 웹서비스를 개발할 수 있는 역량을 갖게 됩니다.

✍️
이런 걸
배워요!
리액트의 특징과 원리를 배울 수 있습니다.
리액트 활용을 위한 7가지 필수 기술 스택을 배우고, 실무에서 자주 쓰이는 6가지 필수 기능을 구현해봅니다.

7년차 개발자와 함께, 제대로 배우는 
프론트엔드 웹 개발의 대세 리액트! 

프론트엔드 취업시장 점유율 압도적 1위, 리액트 

리액트는 국내외 수많은 기업들이 가장 많이 사용하고 있는 프레임워크입니다.
대세 기술 스택으로 프론트엔드 개발을 배우고 싶다면 지금, 리액트를 시작하세요!

그런데, 정작 기업들은 이렇게 말합니다.

리액트를 다루는 시중의 많은 강의들이 ‘사용법', ‘기능' 위주의 껍데기 구현에만 치우친 탓입니다. 

리액트를 원리부터 제대로 이해하지 못한 상태로 개발을 하게 되면, 정작 리액트의 장점을 살리기 어렵고 겉보기에만 구현된 서비스를 만들게 됩니다. 

스터디파이가 생각하는 좋은 리액트 개발자는? 

  • 첫째, 리액트의 장점과 원리를 제대로 이해하고 자유자재로 활용할 수 있어야 합니다. 
  • 둘째, 서비스에 대해 고민하는 개발자입니다. 그 고민을 바탕으로 서비스의 구조, 리액트의 구조를 세울 수 있어야 진짜 실력 있는 프론트엔드 개발자가 됩니다. 


실력 있는 리액트 개발자
되기 위한 학습 방법!

1.

리액트의 라이브러리를 다각도로 이해하고 활용하는 7년차 프론트엔드 개발자가 여러분의 개발 사수가 되어드립니다. JSX의 기본 문법부터 리액트의 특징과 서비스 구조까지 함께 살펴보며 각 라이브러리의 원리를 세세하게 짚어드릴게요. 7년간 프론트엔드 개발자로서 리액트를 활용한 경험과 노하우를 온전히 커리큘럼에 녹여냈습니다. 

본 강의는 단순히 코드를 따라 치고 기계적으로 생산하는 코더가 아니라 주체적으로 고민을 해결하는 프론트엔드 개발자를 양성하는 리액트 마스터 과정입니다. 

2.

페이스북 클론 코딩한다고 페이스북 만들 수 있나요? 
본 강의에서는 껍데기 기능만 구현하는 클론 코딩은 진행하지 않습니다. 대신, 실무와 동일하게 서비스 가이드, 디자인 가이드가 주어진 상황에서 요구사항을 분석하고 서비스를 설계하는 ‘리얼 프론트엔드 개발’을 경험할 수 있습니다! 

프로 프론트엔드 개발자가 다양한 요구에 어떻게 대응하고 웹 서비스를 설계해야 하는지 고민하는 게 진짜 프론트엔드 개발의 핵심 역량이기 때문이죠.  

이게 끝이 아닙니다
본 강의에서는 실무에서 리액트 개발자들이 웹서비스를 개발하기 위한 필수 기능인 ‘서비스 제작'과 ‘어드민 제작' 두 가지 실습을 모두 진행합니다. 

강의를 모두 듣고 나면, 스스로 하나의 웹 서비스를 개발할 수 있는 역량을 갖게 됩니다.

3.

리액트를 활용한 개발 실무에서 꼭 필요한 리액트 라이브러리 7가지를 함께 다룹니다. 
Recoil과 Redux의 사용법을 배우고, 컴포넌트 스타일링, Sass의 기초 문법 그리고 SWR, Axios, 리액트 라우터 등 커리큘럼 전반에 걸쳐 함께 배울 수 있습니다. 

심화 프로젝트를 통해서 프론트엔드 개발 실무에서 가장 많이 쓰이는 6가지 기능을 구현해 봅니다. 
라우팅, 폼 컨트롤, 빌더 페이지, 커스텀 훅스, 글로벌 상태 관리, 스타일드 컴포넌트 기능을 직접 제작하며, 리액트 개발에서 꼭 필요한 핵심 필수 기능을 모두 배울 수 있습니다. 


수업은 이렇게 진행됩니다.

이 강의를 모두 듣고 나면?


라인파이낸셜 등을 거친 7년차 프론트엔드 개발자, 유동균 님을 소개합니다.


이런 분들께 추천합니다!

보너스, 수강생에게만 드리는 혜택 🎁

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
JS를 배우고 난 후, 프론트엔드 분야에서 가장 많이 쓰이는 라이브러리 리액트를 배워서 프론트엔드 개발자가 되고 싶은 분
리액트로 개발을 시작했지만, 라이브러리의 원리나 강점을 제대로 이해하지 못해서 막막한 상태에서 시니어 개발자에게 원리부터 제대로 배우고 싶은 분
지금은 백엔드 개발을 하고싶지만 리액트를 배워서 풀스택 개발자로 스킬업하고 싶은 분
📚
선수 지식,
필요할까요?
JS에 대한 기초 지식이 있는 분들을 위한 강의입니다.

안녕하세요
스터디파이 입니다.
스터디파이의 썸네일
커리큘럼 총 69 개 ˙ 19시간 48분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. Chapter 02 JSX
2-1. JSX란? 미리보기 11:37 2-2. JSX에서 Javascript 사용하기 미리보기 07:11 2-3. JSX에서의 조건문 미리보기 08:36
2-4. JSX에서의 반복문 04:47
2-5. JSX 스타일링 09:10
2-6. JSX로 구구단 출력하기 08:02
섹션 2. Chapter 03 컴포넌트
3-1. 컴포넌트란? 08:39
3-2. Props 06:40
3-3. State 10:05
3-4. 클래스형 컴포넌트 vs 함수형 컴포넌트 06:51
3-5. 스터디파이 강의 컴포넌트 만들기 10:21
섹션 3. Chapter 04 LifeCycle과 Hooks
4-1. Hooks 종류 25:28
4-2. React 렌더링 과정 16:45
4-3. 아코디언 컴포넌트 만들기 07:47
섹션 4. Chapter 05 이벤트 핸들링
5-1. 이벤트 연결하기 06:58
5-2. 이벤트 종류 08:08
5-3. Form 08:37
5-4. 설문조사 만들기 17:51
섹션 5. Chapter 06 React 환경 설정
6-1. Node.js, Vs code 설치 08:04
6-2. create-react-app 프로젝트 생성 03:22
6-3. create-react-app 구조 소개 10:35
6-4. eslint, prettier 설정 09:58
섹션 6. Chapter 07 React 메모장 만들기
7-1. 메모장 프로젝트 소개 및 설계 04:19
7-2. 기본 컴포넌트 구현하기 16:27
7-3. 메모 수정 기능 및 메모 선택 기능 구현 31:34
7-4. 메모 추가 기능 구현 11:37
7-5. 메모 삭제 기능 구현 23:07
7-6. localStorage로 데이터 보관하기 33:06
섹션 7. Chapter 08 React 심화 프로젝트 소개
8-1. SurveyPie 소개 02:33
8-2. SurveyPie와 Admin 소개 05:49
섹션 8. Chapter 09 SurveyPie 설계
9-1. 요구사항 분석 19:11
9-2. 컴포넌트 구조 설계 12:29
9-3. 데이터 정의 02:42
9-4. 프로젝트 세팅 및 환경설정 08:49
9-5. 기본 컴포넌트 구현 31:57
섹션 9. Chapter 10 SurveyPie 라우터 적용
10-1. react-router 02:10
10-2. react-router 적용 15:40
10-3. 라우터로 스텝 구분하기 24:32
섹션 10. Chapter 11 SurveyPie 컴포넌트 스타일링
11-1. styled-components 09:31
11-2. 질문 유형 별, 컴포넌트 만들기 34:14
11-3. 스타일 변수 만들기 27:12
11-4. 나머지 컴포넌트 스타일링 하기 23:41
섹션 11. Chapter 12 SurveyPie 전역 상태 관리
12-1. 전역 상태 관리란? 02:44
12-2. Recoil이란? 14:30
12-3. Recoil로 데이터 관리하기 19:52
12-4. Custom hook 만들기 13:18
섹션 12. Chapter 13 SurveyPie API 연동
13-1. Axios 설치 12:42
13-2. Recoil의 Selector로 API 연동 32:12
13-3. 설문 답변 저장하기 19:25
섹션 13. Chapter 14 SurveyPie 그 외 나머지 기능 구현
14-1. 응답 완료 페이지 구현 26:22
14-2. 답변 유효성 검사 구현하기 25:48
14-3. 프로그래스 바 구현 33:12
섹션 14. Chapter 15 Admin 설계
15-1. 요구사항 분석 11:16
15-2. 컴포넌트 구조 설계 17:24
15-3. 프로젝트 세팅 03:55
15-4. Ant Design 설치 16:37
15-5. 라우터 적용 10:25
섹션 15. Chapter 16 Admin 리스트 페이지 구현
16-1. useSWR을 이용하여 API 연동 10:58
16-2. 설문 리스트 컴포넌트 구현 37:03
섹션 16. Chapter 17 Admin 빌더 페이지 구현
17-1. 질문 미리보기 영역 구현 24:13
17-2. 질문 추가, 삭제 기능 구현 47:22
17-3. Redux로 데이터 관리 53:51
17-4. Redux에서 API 연동 53:27
17-5. 옵션 영역 구현 01:14:08
17-6. 저장 기능 구현 18:37
17-7. 새로운 설문 생성 기능 구현 40:39
섹션 17. Chapter 18 전체 학습 정리
18-1. SurveyPie 서비스 정리 01:48
강의 게시일 : 2023년 05월 25일 (마지막 업데이트일 : 2023년 05월 25일)
수강평
수강생분들이 직접 작성하신 수강평입니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️