Byte Degree : React Programming

본 프로그램은 실제 React 개발팀의 실무 프로세스에 맞춘 온라인 실무 자격 인증 과정입니다. 모든 수강생이 실제 실무에 투입 가능한 개발자로 성장할 수 있도록, 우아한 형제들, Studio XID 등 국내 IT 기업 현직자가 직접 출제한 실무 프로젝트와 코드 리뷰, 커리어 솔루션까지 전 과정이 엄격하게 관리됩니다.

  • #프론트엔드
  • #JavaScript
  • #React
  • #Redux
  • #TypeScript
난이도
중급
총 시간
12주

1기 모집이 마감되었습니다.
다음 기수 모짐 알림 신청하고,
바이트 디그리의 다양한 혜택을 최저가로 경험하세요.

일정 및 기간

2020.5.11 - 2020. 8. 2
(총 12주)

수강 방법

강의 및 과제 제출
전 과정 온라인 진행

담당 및 문의

바이트디그리 운영팀
bytedegree@fastcampus.co.kr

당신에게 필요한 React 개발 스킬
온라인 1:1 관리 프로그램으로 끝까지 완성해보세요.

React 개발 실무에서 필요한 상태관리, 커스텀 Hook,
TypeScript 프로젝트 경험, 코드리뷰까지
탄탄한 강의와 프로젝트로 실력을 다지고 실무 자격 인증서까지 가져갑니다.

기업이 원하는 React 스킬셋을 익혀
채용 시장에서 원하는 개발자로 성장하세요.

대다수 프론트엔드 개발자 채용공고에서
React와 TypeScript 경험자 우대

해외 교육 플랫폼 U사 선정,
2020년 가장 인기 있는 기술 Top5 중 2위 React

자유도가 높지만 제대로 활용하는 사람을 찾기 힘든 React,
채용 시장에서 필요한 3가지 요소를 모두 가져갑니다.

실무 프로젝트와 1:1 코드리뷰, 이를 통한 협업 경험, 실무 인증서까지

React 잘 사용하는 개발자로 만들어주는 3가지 코스 특징

Git&Github 사용법을 몰라도 걱정마세요.

원활한 코드리뷰 진행이 가능하도록, Git과 Github 활용법을 익힐 수 있는 영상 강의를 제공합니다.

Byte Degree 학습 Point ① 프로젝트

차별화된 4가지 프로젝트로 나만의 웹 포트폴리오를 완성합니다.

Part 1. JavaScript 문법

JavaScript부터 비동기처리까지 React 활용파트를 위해 꼭 필요한 개념들을 정리합니다. 특히 비동기처리는 계산량이 많은 경우나 서버에서 데이터를 읽어와야 하는 경우, 파일을 읽어와야 하는 경우, 작업예약 등 실무에 꼭 필요한 필수개념입니다.

  • 미니 Project ① 검색어 자동완성 사이트 구현하기

    우리가 사용하는 다양한 검색창에 검색어를 입력할 때, 검색어 입력란 하단에 검색어 자동완성란을 보신 적이 있으신가요? Oogle 검색 서비스의 프론트엔드 개발자가 되어 사이트에 검색어 자동완성 기능을 추가해보세요! array를 비롯한 다양한 자료형을 가공해보기도 하고, async&await를 활용한 비동기 처리를 경험해 볼 수 있습니다.



    주요 스킬셋
    ✔ 배열 처리의 이해
    ✔ string 자료형 가공
    ✔ mock API를 활용한 비동기처리 실습

    강사: 이웅재 감수자: 박예준 출제자: 박예준

Part 2. React Component와 Styling

React를 한번도 사용해보지 않았던 사람들을 위해 기초부터 차근차근 알려주며, 컴포넌트를 스타일링하는 다양한 방법을 배웁니다. 모던한 React 개발방식인 함수형 컴포넌트 기반의 개발방식뿐만 아니라 이전에 사용되던 클래스형 컴포넌트도 학습합니다. 또한 React 컴포넌트를 스타일링하는 다양한 방법까지 익힐 수 있습니다.

  • 미니 Project ② 나의 소비패턴 기록 서비스 구현하기

    오늘의 날짜 표시, 지출 등록 및 삭제, 지출의 총합 표시 등의 기능을 갖는 ‘나의 소비패턴 기록 서비스’를 구현해보세요. 컴포넌트 스타일링과 컴포넌트를 조합해 애플리케이션을 만드는 방법, 그리고 배열 렌더링, 상태관리, 커스텀 Hooks 등 리액트 기초파트에서 배웠던 모든 내용을 모두 활용해봅니다.



    주요 스킬셋
    ✔ 버튼 컴포넌트 제작
    ✔ Dialog 컴포넌트 제작 (추가로 트랜지션 구현)
    ✔ 배열 랜더링
    ✔ ContextAPI와 useReducer를 사용한 상태관리
    ✔ Immer를 사용한 더 쉬운 상태관리
    ✔ 커스텀 Hooks 만들기

    강사: 김민준(Velopert) 감수자: 안도형 출제자: 안도형

Part 3. API 연동 및 Router와 Redux(모던리액트)

실제 상용가능한 서비스를 위해 API 서버연동에 대해 학습하며, 규모가 크고 복잡한 프로젝트에서 자주 활용되는 상태관리 라이브러리 Redux에 대해 학습합니다. 컴포넌트에서 나아가 실제 서버를 연동하고, 복잡한 로직을 단순화하는 방법, 재사용성을 높이는 방법 등을 고민합니다.

  • 미니 Project ③ 리액트로 댓글서비스 구현하기

    앞 파트에서 다뤘던 등록, 삭제, 수정 기능과 페이지네이션 등 부가적인 로직들을 활용하여 댓글서비스를 구현해봅니다. 또한 댓글 기능이 구현된 서버 API와 연동하여 실습을 진행하므로 실무에서 필수적으로 알아야하는 내용들을 경험합니다.


    주요 스킬셋
    ✔ Redux를 활용한 상태관리
    ✔ Redux 미들웨어 Redux thunk 활용

    강사: 김민준(Velopert) 감수자: 이웅재 출제자: 박준영

Part 4. TypeScript와 React

JavaScript보다 큰 규모에서도 효율적으로 오류를 확인할 수 있는 TypeScript를 배웁니다. TypeScript는 엄격한 규칙이 적용되어 허들이 높은 편이지만, 타입 지정을 통해 사소한 실수를 방지하고 함수에 어떤 파라미터를 넣어야 하는지 IDE 상에서 미리 확인할 수 있는 등의 장점이 있어 현업에서는 이미 활발하게 사용되고 있습니다.

  • 최종 Project 나의 독서 기록 사이트 구현하기

    프론트엔드에서의 상태관리"와 "Http 통신에서의 비동기 작업"은 복잡한 웹서비스를 만드는 기본입니다. 주어진 API 를 바탕으로 간단해보이지만, 정리가 잘 된 비동기 로직을 만들어보세요. 또한 타입스크립트에서 any 를 쓰지않고, 정확한 타이핑과 타입 추론을 통해 컴파일 타임과 런타임의 타입에 대해 꼼꼼히 비교해보세요.


    주요 스킬셋
    ✔ 로그인 로그아웃을 통해 인증 과정을 정확히 처리합니다.
    ✔ 책 추가하기, 책 수정하기, 책 삭제하기, 책 목록 보기 작업을 통해 서버에서 데이터를 받아 클라이언트에 보여주는 흐름을 정확히 관리하고, 상태를 처리해보세요

    강사: 고재도 감수자: 이웅재 출제자: 이웅재

부록 Git & Github
코드리뷰를 위해 기본적인 Git 사용법을 익히기 위한 부록 강의입니다. 실무에서 버전관리나 협업을 위해 알고있어야하는 git에 대해 학습하며, git과 github을 활용하여 코드리뷰를 진행할 수 있습니다. 미니프로젝트/최종프로젝트 과제를 감수자(혹은 리뷰어)가 github에서 fork하면, 수강생은 과제를 수행한 후 PR(Pull Request)을 보내 리뷰어가 코드리뷰 및 댓글작성을 진행합니다.

강사: 진유림

원활한 수강을 위해, 선수지식을 꼭 확인하세요!

  • HTML/CSS/JavaScript 기초 지식

    HTML/CSS 프로그래밍 경험이 있으며, JavaScript 기초 개념(변수, 반복문, 조건문, 객체와 클래스 등)을 알고 있는 분

  • JavaScript 활용 경험

    JavaScript로 Ajax연동은 자유자재로 사용 가능하며, JavaScript로 ‘ToDo List’ 구현이 가능하신 분

잠깐! 본 과정이 나에게는 너무 어려운가요?

탄탄한 프론트엔드 개발 기초가 필요한 분들을 위해
HTML / CSS / JavaScript for Beginner 코스를 준비했습니다.
전문 강사진이 감수한 프리미엄 커리큘럼으로
필수 프론트엔드 개발 지식을 다져보세요!

Byte Degree 학습 Point ② 실무 강사진

현업 프론트엔드 개발자에게 직접 배웁니다.

학습부터 프로젝트까지 체계적인 진행을 위해, 수강생에게는 커리큘럼 내 정가 65 만원 상당의 강의가 제공됩니다.

이웅재 강사님
JavaScript 문법 Part.

현) Studio XID, Inc. 프론트엔드 개발자
Youtube 채널 'Mark Lee' 운영 (자세히보기)
[개발 경력]
- Studio XID 프로토파이 개발 (2016 ~)
-VTouch 수석 엔지니어 (2014 ~)
-창업 및 스타트업 운영 (2010 ~)

[Project]
- ProtoPie 개발 (https://www.protopie.io)
- Real Estate Development Service in LA
- Virtual Touch Solution & Demo System (http://vtouch.io/)

[기타]
- 한국 타입스크립트 유저 그룹 오거나이저
- Microsoft Most Valuable Professional (자세히보기)
- AWS Certified Developer
김민준(Veloper) 강사님
React Component와 Styling Part.
API 연동 및 Router와 Redux Part.


현) Laftel Inc, Frontend Engineer
https://velopert.com 블로그 운영중
고재도 강사님
TypeScript Part.

현) 카카오계열사, 소프트웨어 엔지니어
[주요 경력]
- 실리콘벨리 스타트업 B사, 소프트웨어 엔지니어
- 전 국내 Top 통신사, 플랫폼 엔지니어
- 다수의 프론트앤드 서적 집필
진유림 강사님
Git & Github Part.

현) ZEPL, Software Engineer
[주요 경력]
- SMARTSTUDY/Artistic Software Engineer
- 레진엔터테인먼트/Software Engineer
Byte Degree 학습 Point ③ 1:1 코드리뷰

실제 현업 Pull Request 방식으로 진행되는 1:1 코드리뷰로
개발 실력과 협업 경험을 동시에 가져갑니다.

철저한 검증과 1:1 Review 시스템으로, 현직자가 나만을 위한 심층 평가보고서를 제공합니다.
독학으로는 알 수 없는 실무에서 발생 가능한 문제, 실수, 유지보수의 문제까지 실무자의 피드백으로 좋은 개발 습관을 기릅니다.

공부하다가 모르는 것은 어떡하죠?

사소한 질문 하나도 그냥 넘어가지 않도록, 전담 스터디 코치가 함께합니다.
모르는 것이 있다면 언제든 질문하고 해결하세요.
온라인 강의, 학습 진도, 미니 프로젝트까지 언제 어디서나 1:1로 깊이 있게 코칭해드립니다.

Byte Degree 학습 Point ④ 전문 감수진

실무에 가장 필요한 역량을 가져가도록
각 분야 전문가들이 커리큘럼 감수에 참여했습니다.

총 감수자는 누구인가요?
바이트 디그리의 전체 커리큘럼과 프로젝트를 감수하는 역할입니다. 모든 교육 과정이 실무에 필요한 내용으로만 이루어졌는지 철저하게 검토합니다.

파트 감수자는 누구인가요?
각 커리큘럼 파트가 실무에 적합한 내용과 프로젝트로 구성되었는지 감수하는 역할입니다. 더불어, 파트별 실습 프로젝트 설계와 학습 단계별 프로젝트 출제 및 해설지 제공을 진행합니다.

바이트 디그리 수강생을 위한 8가지 특별 구성

Byte Degree 인증서는 3가지 조건
모두 충족한 수강생에게만 발급됩니다.

블록체인 기술을 활용한 인증서 발급

위변조가 불가능한 블록체인 기술로 유일무이한 나만의 실무 자격 인증서와 시리얼 넘버가 생성됩니다.
발급받은 바이트 디그리 인증서는 인쇄가 가능하며 웹사이트 상에서 영구 보관되어 언제든 필요할 때 여러분의 실무 자격 인증서를 꺼내볼 수 있습니다.

React 실무 스킬 학습을 위한 국내 유일 프로그램 Byte Degree

자세한 프로그램 구성을 확인하세요.

빠른 React 실력 향상, Byte Degree로 시작하세요.

전 세계가 주목하는 온라인 실무 인증 과정

해외에서는 이미 활성화 되고 있는 온라인 직무 능력 인증 과정. 온라인으로 필요한 실무 능력을 단기간에 학습하고 검증합니다. 시간이 흐를수록 더 많은 교육 기관들이 동참하고 있으며, 기업들도 실무 능력을 검증할 수 있는 인증서를 요구하는 추세입니다.
(*출처: http://www.bloter.net/archives/236871)

1기 모집이 마감되었습니다.
다음 기수 모짐 알림 신청하고,
바이트 디그리의 다양한 혜택을 최저가로 경험하세요.

FAQ