자바스크립트 ES6 [입문부터 고급까지] 강의 기초 부터 실무 인강 알지오 평생교육원 추천강의

기초부터 차근차근 실무까지.
마지막 학습 보장!

자바스크립트 ES6 [입문부터 고급까지]

강의구성
(31강) 전체 : 11시간 56분|평균 : 23분5초

이용기간 / 강사
2개월 / 알지오 R&D [IT]

1:1 수강생 전용
GPT 및 최신 AI 기술을 활용한 맞춤형 답변 제공

증빙가능
수료증, 수강증, 학습진도

수강료
370,000원
185,000원

"5개월" 혜택!

수강 전 자주 묻는 질문

교재 없이? 초보자도 가능 한가요?

본 강의는 교재 없이도 동영상 강의만을 통해 충분히 학습할 수 있도록 구성되어 있습니다. 제공되는 실습 자료를 활용해 따라 하면서 학습하시면, 초보자도 이해하고 따라올 수 있게 설계된 강의입니다.

알지오의 강의특징은 무엇인가요?

저희 강의는 단순한 전문가 촬영본을 넘어섭니다. 전문 편집을 통해 필수 내용만을 선별하고, 불필요한 부분을 제거함으로써 학습 효율을 극대화합니다.

프로그램은 어떻게 구하나요?

알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.

자바스크립트 ES6 [입문부터 고급까지] 인강 평생교육원 교육 안내
자바스크립트 ES6 이 포함된 과정입니다.
처음 입문하시는 분들을 위한 기초부터 실무까지 다루고 있으며, 튜토리얼에 공개된 예시를 위주로 강사의 보충 설명과 실제 출력 등을 실습으로 자세히 설명합니다.
학습 이후에는 실습을 하면서 전문적으로 사용할 수 있게 됩니다.

단기 습득!

2년 연속 IT교육 인강부분 1위 알지오 (근거자료)

2003년부터 운영해온 수많은 데이터베이스를 기반으로

단기 습득할 강의

로 제공합니다!
늦지 않았습니다. 알지오에서 지금부터 시작하세요!

문법 및 유형, 제어 흐름 및 오류 처리
01.17분 종류별 변수 와 범위 기본함수 와 변환
var let const 선언 및 초기화 범위, 가변, 데이터 구조 및 유형, 리터럴

가변 호이스팅, 전역 변수 상수/데이터 형식 변환, 숫자와 '+' 연산자/문자열을 숫자로 변환, 단항 플러스(+) 연산
02.22분 배열, 부울, 문자열, RegExp, 제어 흐름 및 오류 처리
인용부호, 이스케이프, 템플릿 리터럴, Block 문, if... else

향상된 개체 리터럴, 객체 속성에 함수 호출/중첩된 객체, 정규표현식을 사용하여 문자열의 패턴, 여러 줄 문자열과 문자열 보간/문자열을 동적으로 생성, 포맷팅과 출력, 인용부호 문자열 안에서 사용, 문자열 내에서 경로/문자열을 여러 줄, 변수의 스코프와 변수 재선언에 관한 동작
03.22분 조건문, 예외 처리 문
권장사항, 사용자 함수 로 폼 전송, 스위치문, 예외 던지기, try...catch 구문, finally 블록

submit 이벤트, break Boolean/switch fruitType의 값에 따라 case, throw try...catch/try...catch 예외를 처리, catch 블록, try...catch...finally
루프 및 반복, 함수
04.21분 예외 처리 문 2, for while, break, continue, in
try...catch...finally 중첩 시도 ... catch, do...while

try...catch...finally, for 반복문을 사용하여 0부터 4/do...while 콘솔에 출력, 무한 루프주의 -> 브라우저 다운됨/label, 배열 a를 순회, 레이블, while (labelCancelLoops), 디버깅이나 객체의 속성을 확인
05.23분 for...of, 함수 정의, 호출, 기능 범위, 재귀
for...in과 for...of , 함수 표현식, 익명 함수, 재귀 팩토리얼, 기능 호이스팅, 범위 및 함수 스택Scope and the function stack

배열의 요소를 순회, for...in과 for...of 루프의 동작 차이/재귀 함수의 기본, 팩토리얼을 재귀적/호출 호이스팅, ReferenceError, 함수 내부에서 재귀 호출 등에서 함수, 각 노드
06.21분 범위 및 함수 스택, 중첩 함수와 클로저, 폐쇄, arguments, ES6, 화살표 함수
클로저의 특성, 변수 보존, Multiply-nested 함수, 이름 충돌, 나머지 매개 변수, 분리되지 않습니다

범위의 숫자를 역순, 두 숫자의 제곱, 클로저의 특성, 스코프/중첩된 함수, 익명의 함수 표현식을 사용하여 클로저/객체 리터럴과 클로저 팩토리 함수, 코드를 보호, 가변 인자, ES6부터 도입된 기본 매개변수
표현식 및 연산자, 숫자와 날짜, 텍스트 형식, 정규식
07.22분 실습으로 알아보는 연산자 의 모든것
평가 및 중첩, 할당 체인 방지, 단축 평가

객체를 생성하고 속성을 동적, 원시 값은 속성을 가질 수 없기 때문에/각각의 요소를 개별 변수에 할당, 변수 할당과 함께 할당된 값을 로깅/비교연산 및 산술 비트 논리, 시프트, AND
08.26분 연산자 의 모든것 2
논리 OR NOT, BigInt, 문자열, 삼항, 쉼표, 단항, 배열 요소 삭제, typeof, instanceof, 그룹화 연산자

BigInt, 자동 형 변환, 삼항 조건 연산자/이중 배열 인덱스를 반복, delete 연산자는 객체나 배열, typeof 연산자/in 연산자, 객체 지향, 이벤트 처리기, 연산자 우선순위
09.25분 숫자, Number Math Date 객체, 문자열, 국제화
10, 2, 8, 16 진수, 빅인트, 이스케이프 시퀀스, ES6 (ECMAScript 2015), String 객체

8, 16진수 리터럴, 지수 표기법, Math 객체/라디안 값, parameters, 현재 시간을 가져와서 12시간 형식/U+00A9, 원시 문자열, 문자열의 불변성, Intl.DateTimeFormat, Intl.Collator 로케일
인덱싱된 컬렉션
10.23분 정규식, 컬렉션 배열
정규식 만들기, 패턴 작성 및 사용, exec()와 함께 전역 검색 플래그 사용, 유니코드 정규식, 컬렉션 배열 만들고 채우기, 배열 반복

정규 표현식을 정의, 메타 문자(meta characters)를 이스케이프/lastIndex 속성, 정규 표현식을 만드는 두 가지 방법/exec, 배열 리터럴, Array.of, 배열이 동적으로 확장, 희소 배열, length
11.24분 인덱싱된 컬렉션
희소 비희소 배열 및 컬렉션 종류별 실습

forEach, concat, join, push/pop, shift, unshift, slice, splice/reverse, flat, sort, 배열을 순회, map, flatMap, filter, find, slice reverse, findIndex, every
12.19분 인덱싱된 컬렉션 2, 키 모음
배열 변환, 배열의 요소 그룹화, 희소 배열, 다차원 배열, 배열을 사용하여 다른 속성 저장, 객체로 작업하기, 오브젝트와 맵 비교, 설정, Array와 Set 간 변환

모든 요소 총합을 계산하는 reduce, 배열을 만들고 조작/희소 배열, 전개 연산자, 2차원 배열, ES6부터는 확산 연산자/키-값 쌍을 저장, , 패턴을 사용하면 Public 클래스, 객체를 배열로 변환하는 두 가지 방법
개체 및 클래스 작업
13.22분 개체
생성자 함수 사용, 개체 및 속성, 상속

조건에 따라 객체를 할당, 관련된 데이터와 논리적으로 그룹화/생성자 함수, 객체를 초기화, 프로토타입을 활용하면 코드 재사용성, 데이터를 논리적으로 그룹화/대괄호 표기법, 객체에 동적으로 속성을 추가, 프로토타입 체인, delete 연산자
14.26분 개체 2, 클래스 (ECMAScript 표준)
메서드 정의, 객체 참조에 this 사용, getter와 setter 정의, 객체 비교, 클래스 개요, 클래스 선언, 생성자

객체의 메서드 정의, 프로토타입 객체, 동적 추가/Getter와 setter 객체 참조, 날짜, ECMAScript 표준 클래스/new 키워드, 클래스 선언 호이스팅, 익명 클래스 생성자
15.24분 클래스 의 사용
인스턴스 메서드, 비공개 필드, 접근자 필드, 공용 필드, 정적 속성, 확장 및 상속, Why classes

클래스의 메서드, 인스턴스 새로운 함수, ECMAScript private/유효하지 않은 값 private 필드, redDifference, Web Components/간단한 카운터, 무작위 숫자, 정적 블록 초기화, alpha 값, 객체 참조
프라미스 사용, JavaScript 형식화된 배열, 이터레이터와 제너레이터
16.24분 체인, 오류 처리, 중첩, 캐치 후 연결
JavaScript에서 비동기 작업을 처리하는데 사용되는 Promise 주요 구성 요소

비동기 오디오, 모델링, Promise 체이닝/화살표 함수 간단, 프로미스 체이닝 비동기/JSON으로 파싱 await, 비동기 작업을 순차적, async/await then 블록
17.22분 구성, 콜백 API Promise 만들기, 타이밍, 레이아웃
비동기 작업 연속적으로 실행하고 결과를 다루는 방법들, 데이터 뷰

비동기 유용한 패턴, then 비동기 함수, 한 번에 연결하여 실행/setTimeout, wait, 마이크로태스크 큐에 등록/Promise, 작업 대기열 vs. 마이크로태스크, TypedArray 동작 방식
18.25분 형식화된 배열 2, 이터레이터와 제너레이터, 이터러블, 내장 이터러블, 고급 발전기
예제실습, 버퍼에서 텍스트 읽기, 복잡한 데이터 구조 작업, 반복기, 제너레이터 함수, 피보나치 수열

새로운 ArrayBuffer, int32View는 buffer, 32비트 부동 소수점 지수/Uint8Array, String.fromCharCode UTF-16/제너레이터 함수, Symbol.iterator, 피보나치 수열의 다음 값, 초기값
메타 프로그래밍, JavaScript 모듈 ECMAScript
19.24분 프록시, 반사, 모듈 기능 내보내기, 기능 감지
취소 가능한 프록시, 속성 정의, import maps, 모듈 패키지, HTML에 모듈 적용

Proxy 객체, 취소된 프록시, 복잡한 패턴 대신에 더 간단하게/성공과 실패 로직, 모듈 코드 구성, ECMAScript Import Maps/Bare module names, 브라우저가 Import Maps를 지원, 모듈을 베어 이름으로
20.24분 JavaScript 모듈 2
내보내기 비교, 가져오기 및 내보내기 이름 바꾸기, 모듈 객체 만들기, 모듈 및 클래스, 모듈 집계, 동적 모듈 로딩, 순환 가져오기, 동형 모듈 작성

00:00] ECMAScript Modules, 익명 함수, import, export/모듈에서 한꺼번에, 클래스를 해당 모듈, 객체 지향적인 프로그래밍/JSON HEX, 스코프로 import, 모듈 간에 순환 종속성, 비동기적인 상황, fetch사용 가능한지 확인
그래픽
21.23분 그림그리고 반복적으로 움직이는 에니메이션 제작
2D 캔버스 기본 사항, 캔버스에 이미지 그리기, 루프와 애니메이션

2D 렌더링, 캔버스에 여러 개의 사각형, 역삼각형, 원 그리기/캔버스에 부채꼴, 텍스트, aria-label 속성을 Canvas text 로 설정/HTML 문서의 파싱이 완료된 후 실행, 다음 리프레시 호출, 애니메이션 반복
22.23분 캔버스 에 그리기, WebGL
캔버스에 색상별 그림그리기, WebGL 라이브러리, 3D 회전 큐브

라디안 값, 마우스 버튼이 눌렸는지 여부, 위치 정보 이벤트/요소와 클리어, 프레임마다 호출되어 캔버스에 그림/3D 씬, WebGL 라이브러리, 원근 투영 카메라, 렌더러의 DOM, 그래픽을 웹 페이지, 상자 형태의 기하체, 람버트 재질을 생성
브라우저: 문서, 이벤트, 인터페이스
23.23분 브라우저 환경, 스펙, DOM 트리
DOM, BOM, getElementsBy*, 실제 사용되는 코드로 실습

00:00] 전역 함수, DOM, 브라우저를 다른 URL로 리다이렉트/모든 자식 노드의 속성, 테이블의 첫 번째 행의 두 번째 셀, elem 이라는 id를 가진 요소의 배경색/모든 ul 요소의 마지막 li 요소, href 속성의 값이 "zip"으로 끝나는, 조상 요소, 출력 없다면 NULL
24.25분 DOM 요소의 여러가지
nodeName, tagName, innerHTML, outerHTML, textContent

객체 노드 타입, 태그 이름과 노드 이름, 웹 페이지의 내용을 동적으로/원래의 참조, textContent, innerHTML, hidden 과 DOM 속성/요소를 깜박이게, HTML 요소에 메소드, DOM 개체 표준 비표준
25.23분 DOM 요소의 여러가지 2, 문서 수정
속성-특성 동기화, DOM 속성 형식화, 비표준 속성, 데이터 세트, 삽입인접HTML/텍스트/요소

속성과 프로퍼티 상호작용/href HTML, 동적으로 채우는 방법/data- dataset, 클래스 할당, 메서드를 사용하여 요소를 생성
종류별 이벤트, 브라우저
26.19분 동적 리스트 및 달력
시간이 가는 컬러 시계, 목록에 HTML 삽입

ul에 동적으로 li 리스트를 생성하고 웹 페이지에 삽입/리스트의 첫 번째 항목을 제거/달력을 생성하는 함수
27.23분 브라우저 이벤트
Event 객체, 객체 핸들러, 이벤트 위임

클릭 이벤트, 이벤트에 연결, 이벤트 리스너가 등록된 순서/클릭 이벤트에 관한 정보, 객체 이벤트 핸들러 할당, 사용자 정의 클래스 객체/이벤트 핸들러 클래스 메소드로, 요소의 배경색을 바꾸고 클릭 알림창, 테이블 클릭, 버튼속성 값 동작을 수행
28.25분 카운터, 팝업 메뉴, 갤러리 기능, 사용자 지정 이벤트
클릭 이벤트 로 인한 실제 필요한 기능들, 메뉴를 3단까지 숨기고 나오, 웹페이지 보안

클릭 이벤트 value 증가, 숨김 모양 클릭해서 나오게, id를 가진 폼의 표시 여부/트리 구조 자식 항목, 브라우저 오른쪽 클릭 방지, 링크 클릭시 팝업경고 후 링크이동 않되게/이미지 갤러리, 버블링 이벤트, use strict 모드 이벤트, 클릭하면 해당 요소 사라지게
UI 이벤트, 양식, 컨트롤, DOM
29.26분 마우스 이동 및 드래그 앤 드롭
마우스 클릭과 드래그에대한 기능을 활용한 예제실습

마우스 오버 아웃 이벤트, 시간 간격마다 구분선을 추가/시간과 이벤트 정보를 기록, 이벤트에 대한 처리를 담당/드래그 해서 축구공 이동, 슬라이드 바 드래그 앤 드롭
30.25분 포인터, 키보드 이벤트
멀티 터치, 양식 속성 및 메서드

이벤트를 감지하여 이벤트 정보를 로그로 기록, 요소의 포인터 이벤트가 발생할 때마다 이벤트 정보를 로그로 출력/전화번호 입력에 유효한 키인지 확인, 스크롤 시 상단 화살표를 자동으로 숨김/입력 필드 이름을 변경하고, 변경된 이름으로 요소에 접근
31.25분 이벤트 초점/흐림, DOMContentLoaded
변경, 입력, 잘라내기, 복사, 붙여넣기, 엄격 모드 strict mode

입력 필드에서 이벤트를 처리하여 이메일 유효성 검사, 사용자가 특정 셀을 편집할 수 있는 기능/입력 값이 변경될 때마다 업데이트, 입력 필드 련된 이벤트를 처리/form 에서 입력 값들을 기반으로 계산을 수행, DOM이 로드되었을 때 실행되는 함수를 정의

강의목록 다운로드 1:1 강의 질문&답변

강좌설명

강의목록

수강생 리얼후기!

자바스크립트 ES6 [입문부터 고급까지] 연관학과

강좌설명

강의목록

수강생 리얼후기!

연관학과 (자바스크립트 ES6 [입문부터 고급까지])