강의 상세보기

현업에서 통하는 React+Typescript 올인원 패키지

  • 접수기간 2025-12-10 (수) ~ 2025-12-15 (월)
  • 학습기간 2026-01-01 (목) ~ 2026-01-31 (토)
  • 강사정경수
  • 총 학습시간20시간
  • 복습시간30일
  • 교재없음
  • 학습난이도초급
  • 강의 수20강
  • 정원500명
  • 정가311,700
  • 지원금289,870
  • 총 결제금액21,830

근로자카드 유의사항

  • 근로자카드 과정 구매 시, 지원금은 근로자카드 한도 내에서 자동 차감됩니다.
  • 근로자카드 과정 미수료 시, 고용노동부에서 규정한 패널티가 부여됨을 유의해주시기 바랍니다.
  • 2019.11.01부터 일부 과정에 한해 자비부담금이 발생할 수 있습니다. (근로자 직업능력개발훈련 지원규정에 따름)
  • 자비부담금이 발생한 경우 반드시 근로자카드로 결제하여 주시기 바랍니다.
  • 근로자카드 수료기준은 진도율 80% 이상 / 평가(중간, 최종) 합산 점수 60점 이상입니다.
  • 학습개요

    프론트엔드 개발자가 가장 많이 쓰는 React!

    다양한 기능을 구현하는 문법을 하나씩 학습하면서 현업에서 원하는 개발자가 될 수 있습니다.
    해커스HRD에서 프론트엔드 개발자의 꿈을 이룰 수 있습니다!

  • 학습목표

    1. React의 기초 내용에 대해 이해할 수 있다.
    2. React에 Typescript를 결합하여 실제 현업에서 자주 쓰이는 문법과 예제를 학습할 수 있다.

  • 학습대상

    1. 새로운 개발환경과 프로그래밍 언어를 배우고 싶은 분.
    2. HTML, CSS, javascript의 기본 지식이 있으며 실무에 많이 사용되는 최신 기술을 배우고자 하는 분.
    3. 최신 프론트엔드 기술에 대한 공부를 하고자 하는 타 개발 분야 개발자.

강사이력

現 해커스HRD 리액트 대표강사
前 앤노바랩스 수석연구원
前 엘씨케이티 수석연구원
前 (주)텔레웍스 안드로이드 앱, 인공지능 로봇 개발
前 나눔정보통신 기술연구소 차장
前 머큐리움 기술연구소 수석연구원 (본사 소프트웨어 개발 총괄)
강의목차
1강오리엔테이션
  • 리액트란?
  • 리액트의 특징 이해하기
  • 타입스크립트 소개
2강리액트 시작하기
  • 개발 환경 구축하기
  • JSX 이해하기
  • 컴포넌트와 Props
  • State와 생명주기
3강이벤트 관리하기
  • 이벤트 핸들링 이해하기
  • onClick 및 onChange 이벤트
  • 콤보박스 이벤트
  • 라디오 버튼 이벤트
4강컴포넌트 반복
  • 배열과 맵 이해하기
  • map( )함수 이해하기
  • To-do List 추가 기능 만들기
  • To-do List 삭제 기능 만들기
5강useState로 상태 관리
  • UseState 이해하기
  • UseState 기본 동작
  • UseState 응용 동작
6강useEffect로 생명 주기 관리
  • UseEffect 이해하기
  • useEffect 기본 동작
  • useEffect 응용 동작
7강useMemo와 useCallback
  • useMemo 이해하기
  • useCallback 이해하기
8강useRef로 DOM 접근하기
  • useRef 이해하기
  • useRef DOM 제어
  • useRef로 값 유지하기
9강컴포넌트 스타일링
  • 스타일드 컴포넌트란?
  • 스타일드 컴포넌트 설치 방법
  • 스타일드 컴포넌트 작성 방법
  • Props에 따른 조건부 스타일링
  • 스타일드 컴포넌트를 활용한 반응형 디자인
10강리액트 라우터 (1)
  • 리액트 라우터 이해하기
  • 프로젝트 생성 및 패키지 설치 방법
  • 라우터 적용 및 페이지 이동
  • Link로 페이지 이동
11강리액트 라우터 (2)
  • 데이터 전달을 위한 URL 파라미터
  • URL 파라미터 전달
  • useNavigate로 페이지 이동
12강리액트 라우터 (3)
  • 중첩 라우터란?
  • 중첩 라우터 기본 코드 작성 방법
  • 공통 레이아웃 컴포넌트 만들기
13강비동기 통신 - axios
  • 비동기 작업 이해하기
  • axios란?
  • async와 await
14강axios와 API 연동으로 뉴스 웹페이지 구현하기 (1)
  • 프로젝트 생성 및 패키지 설치 방법
  • Item 컴포넌트 만들기
  • List 컴포넌트 만들기
15강axios와 API 연동으로 뉴스 웹페이지 구현하기 (2)
  • 외부 데이터 연동하기
  • 카테고리 선택 UI 만들기
  • 카테고리와 axios API
16강타입스크립트 주요 문법 알아보기
  • 타입스크립트 적용을 위한 프로젝트 생성
  • 정적 타입 지정과 타입 추론
  • 인터페이스와 제네릭
17강리액트에서 타입스크립트 적용하기
  • 함수형 컴포넌트에 타입스크립트 활용
  • 이벤트 처리에 타입스크립트 적용
  • Hooks에 타입스크립트 적용
18강스프링 부트 백엔드 협업으로 로그인 기능 구현하기
  • 타입스크립트 프로젝트 생성 및 폴더 구성
  • 스웨거를 통한 API 확인
  • 페이지 이동을 위한 라우팅 설정
  • 로그인 페이지 만들기
  • 로그인 기능을 위한 서버 연결하기
19강스프이 부트 백엔드 협업으로 게시글 기능 구현하기
  • 홈 메뉴 및 게시글 목록 업데이트 기능
  • 게시글 보기 기능
  • 게시글 쓰기 기능
  • 상세 보기 및 댓글 추가 기능
20강전역 상태 관리 및 컴포넌트 최적화
  • 전역 상태 관리(Context API)란?
  • 전역 상태 관리를 활용한 사용자 정보 생성 및 변경
  • Headless 컴포넌트를 활용한 컴포넌트 모듈화
  • 빌드 및 배포 방법 검토
강의계획서
강의목차
강의목차
과정명 그래머 게이트웨이 베이직
근로자카드 판매가 49,010원
학습정원 500명
1일 수강 제한 1일 8차시만 수강 가능
학습기간 32H
학습방법 이러닝
강의목차
학습개요 실생활과 동떨어져 단지 시험을 위한 목적으로 문법용어를 익히는 것에 집중했던 기존의 영어문법강의를 벗어나 실생활에서 바로 사용할 수 있는 예문과 다양한 유형의 연습문제를 통해 말하기와 쓰기 능력을 기르는 것을 목적으로 한다. 본 강의를 통해 문법을 처음 시작하는 초보 학습자들이 영어의 기초를 탄탄하게 다질 수 있다.
학습목표 일상생활과 관련된 쉬운 주제와 에피소드를 통해 기초문법을 쉽게 이해할 수 있다. 영어에 대한 자신감을 회복하여 기본적인 영어 문장을 만들어 말할 수 있다. 학습한 문법 지식을 일상생활에 바로 적용하여 말할 수 있다.
학습대상 수능, 토익 등 그 동안의 영어시험에서 문법문제는 무조건 감으로 찍던 학습자 영어로 비즈니스 메일을 쓸 때마다 문법책 찾는 직장인 영어 기초가 부족하여 해외출장에서의 대화와 발표가 고민이었던 학습자
평가형식 진도율 80% 이상 / 평가(중간, 최종) 합산점수 60점 이상
평가비율
평가비율
구분 진도 시험(중간) 시험(최종)
반영율 - 10% 90%
필수기준 80% 이상 0점 이상 60점 이상
평가비율
구분 과제 토론 총점
반영율 - 10% 90%
필수기준 0점 이상 0점 이상 60점 이상
평가시작일
평가시작일
시험 기수 시작 1일 이후 진도율 80% 후
과제 기수 시작 0일 이후 진도율 0% 후
토론 기수 시작 0일 이후 진도율 0% 후
닫기

HRD-net에서 수강신청은 하셨나요?

  • 본 과정은 HRD-net에서 수강신청, 해커스 HRD에서 결제를 모두 완료하셔야 수강이 가능합니다.
  • 본 과정은 개강일 기준 재직 상태인 근로자만 수강이 가능합니다.
상단으로