연락처 정보
 기간 21 시간

코스 개요

모던 프론트엔드 애플리케이션 개발

  • React, Angular, Vue.js의 개요 및 유사점
  • 선언적 렌더링
  • 컴포넌트 - 커스텀 HTML 태그 정의
  • create-react-app을 통한 React 프로젝트 초기화

모던 JavaScript

  • node.js와 npm을 활용한 개발
  • JavaScript 버전
  • 모듈 작업
  • 함수 및 화살표 함수
  • 클래스
  • JavaScript 함수형 프로그래밍 (map, filter 등)

TypeScript

  • 정적 타입 vs 동적 타입
  • 변수, 함수, 클래스의 타입 선언
  • 기본 데이터 타입
  • 튜플, 객체
  • 인터페이스
  • 제네릭

React 템플릿 언어

  • JavaScript 기반 템플릿 언어: JSX
  • 요소 속성 설정
  • 요소 반복
  • if / else
  • 이벤트 처리
  • CSS 클래스 및 스타일

React에서의 상태 관리

  • 애플리케이션 상태 설정 및 변경
  • state hook 및 setState 사용
  • 입력 요소의 내용을 상태에 캡처하기

컴포넌트: 모던 웹 애플리케이션의 빌딩 블록

  • React에서 커스텀 HTML 태그 정의
  • state, props & events
  • 컴포넌트 간 데이터 흐름
  • 함수형 컴포넌트와 클래스형 컴포넌트
  • 함수형 컴포넌트에서 hooks 사용
  • 컴포넌트 라이프사이클 이벤트 (mount, update, unmount)
  • 라이브러리에서 사전 정의된 컴포넌트 포함

Redux를 활용한 상태 관리

  • Redux 기초: 순수 함수, 리듀서, 불변 데이터를 통한 상태 관리
  • React에서 reducer hook 사용
  • React 애플리케이션에 Redux 통합
  • 프리젠테이션 컴포넌트와 컨테이너 컴포넌트
  • Redux 생태계
  • Thunk를 활용한 비동기 이벤트 처리
  • REST API에서 데이터 가져오기

개발자 도구 및 테스트

  • React 개발자 도구
  • Redux 개발자 도구
  • Jest를 활용한 JavaScript 테스트
  • 리듀서 테스트
  • React 컴포넌트 테스트

React Router

  • 클라이언트 사이드 라우팅
  • 현재 브라우저 라우트에 따라 다른 뷰 표시

React를 활용한 애플리케이션 개발

  • React Native 간단 개요
  • Progressive Web Apps(PWA)를 통한 설치 가능한 모바일 및 데스크톱 애플리케이션 생성
  • Progressive Web Apps와 네이티브 앱 비교

요건

  • HTML 기초 지식
  • JavaScript 사용 경험

참가자 수


참가자별 가격

회원 평가 (7)

예정된 코스

관련 카테고리