Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

【한글자막】 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정

Name: 【한글자막】 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정
Rating: 4.5 (753 reviews)

기초부터 시작하여 JS 전문가 수준까지 담은 최신 JavaScript 강의! 한 강의로 해결하는 JavaScript 웹 개발 완벽 가이드.

Created byAcademind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, 웅진씽크빅 글로벌

Last updated 8/2024

Korean

What you'll learn

처음부터 시작하는 JavaScript - 초급부터 고급까지
최신 JavaScript 개발에서 알아야 할 모든 핵심 기능과 개념
JavaScript 전문가가 되고 JavaScript 관련 직무에 지원하는 데 필요한 모든 것
많은 예제를 통한 프로젝트 주도 학습
변수, 함수, 객체와 배열에 관한 모든 것
객체 지향 프로그래밍
프로토타입, JavaScript 엔진 & 내부에서 작동하는 방식에 대한 자세한 설명
JavaScript로 웹 페이지(= DOM) 조작하기
이벤트 처리, 비동기 코딩과 Http 요청
메타 프로그래밍, 성능 최적화, 메모리 누수 방지
테스트, 보안과 배포
그 외 더 많은 것들!

Course content

36 sections • 617 lectures • 51h 47m total length

소개1:50
Welcome to the course, amazing to have you on board of this JavaScript course! Let me walk you through the content of this complete JavaScript course and explain what you're going to learn!
JavaScript란 무엇인가?3:46
What is JavaScript and why do we use it? What's awesome about it and what's its role in modern web development? Let's take a closer and understand the importance of JavaScript!
JavaScript 사용해 보기9:08
Let's dig deeper into the core fundamentals of JavaScript and add it our first little web application!
온라인 학습 커뮤니티에 합류하세요0:32
JavaScript는 어떻게 실행되는가3:14
Let's have a look at how JavaScript is executed, what the browser's role is and how all these pieces fit together!
동적 vs 약형 언어3:28
JavaScript is a weakly typed language - but what does that mean? In this lecture, we'll explore the different kinds of programming languages and how JavaScript fits into the picture!
호스팅된 환경에서의 JavaScript 실행4:40
JavaScript is a versatile language. That's awesome - but what does it mean? Let's explore the concept of host environments and see how JavaScript fits into that picture!
강의 개요 - 어떤 내용이 있나요?6:00
We know what JavaScript is about - but what is this course about? This is obviously a very comprehensive JavaScript course, in this lecture, I'll walk you through the content of this course and what you can get out of it!
강의 최대 활용 방법2:36
Your success matters to me! In this lecture I'll explain how you can get the most out of this course and get the most value for your money.
강의 참고 자료 사용하기1:00
This course comes with tons of content and resources - here's how to use them!
JavaScript vs Java4:02
We got JavaScript and we got Java. What's the difference, how are they related? Or are they maybe not related at all? Let's find the answer!
JavaScript의 역사6:03
JavaScript is a modern programming language with a colorful past and many new features added over time. Let's find out how it changed and is managed today!
개발 환경 설정11:12
We're ready to go! Now let's set up a development environment that allows us to write code efficiently and progress quickly!
강의 과정 FAQ3:12
Got questions? Here are the answers!

모듈 소개1:17
프로젝트 설정4:25
버전 제어 & Git 더 보기1:06
웹사이트에 JavaScript 추가하기6:42
변수 & 상수 소개5:17
변수 선언 & 정의7:10
변수 & 연산자로 작업하기6:17
변수 & 연산
시작 코드 이해하기1:21
자료형: 숫자 & 문자열 (텍스트)6:00
상수 사용하기5:11
문자열 더 보기15:51
자료형 & 상수
함수 소개5:50
사용자 정의 함수 추가하기11:22
코드 스타일, 컨벤션 & 구문2:52
값 반환하기4:31
코드 순서의 (비)중요성4:34
전역 & 로컬 범위 소개5:31
“그림자(Shadow) 변수”1:12
“반환” 문장 더 보기2:24
함수를 “간접적으로” 실행하기11:10
“간접적” vs “직접적” 함수 실행 - 요약1:39
함수 & 스코프(Scope)
자료형 변환하기6:14
숫자 & 문자열 섞기0:42
함수로 코드 나누기5:49
모든 버튼들을 함수에 연결하기7:43
코드 주석 작업4:09
연산자 더 보기!6:39
코어 자료형 더 보기!4:31
배열 사용하기8:53
객체 생성하기6:02
객체 - 공통 구문 포착0:34
객체 데이터에 액세스하기2:51
Arrays & Objects
객체를 사용하는 재사용 가능한 함수 추가하기5:24
undefined, null & NaN6:20
“Typeof” 연산자3:11
"undefined", "null" & "NaN"
“defer” & “async”를 이용해 스크립트 올바르게 임포트하기14:37
JavaScript 임포트하기 - 요약0:09
마무리2:13
유용한 참고 자료 & 링크1:17

모듈 소개1:28
효율적인 개발 & 디버깅 - 개요3:18
IDE Look & Feel 구성하기2:25
단축키 사용하기4:12
자동 완성 & IDE 힌트로 작업하기4:34
IDE 확장 설치하기2:04
에디터 설정 수정하기2:15
다양한 IDE 뷰 활용하기1:41
도움말 찾기 & MDN으로 작업하기5:53
ECMAScript 표준0:29
“Google” 검색 올바르게 하는 법1:44
JavaScript 디버깅 - 개요3:17
오류 메시지! 당황하지 마세요!4:46
console.log() 사용해 “코드 안을” 들여다 보기3:49
크롬 개발자 도구 & 중단점을 사용해 디버깅 한 단계 끌어 올리기8:20
개발자 도구에서 직접 코드 변경 테스트하기2:05
VS 코드 내에서 직접 코드 디버깅하기4:55
마무리1:22
유용한 참고 자료 & 링크0:38

모듈 소개2:26
“if” 문 & 불리언 (비교) 연산자의 소개9:26
텍스트 비교 & 조건에서 불리언 사용하기1:49
“If” 문 사용하기7:23
“If”, “else”, “else-if”로 작업하기5:10
등식에서 객체 & 배열을 비교할 때 주의할 점!4:06
논리적인 AND과 OR 연산자9:10
연산자 우선 순위 이해하기7:20
If & 불리언 연산자 - 기초
True/false를 넘어서: “사실 같은”, “거짓 같은” 값들7:30
Coercion vs Conversion1:35
Falsy와 Truthy 값
더 큰 규모의 예시 프로젝트 설정하기 (“Monster Killer”)2:59
“공격” 함수 추가하기7:57
“if” 문장 이용해 승리 조건 확인하기9:17
“if” 문장 & “더 강한 공격” 기능 더 많이 추가하기7:41
“힐러” 기능을 추가할 시간!10:15
조건적인 보너스 생명 제어하기 (불리언 연산자 사용하지 않음!)5:59
“게임 리셋” 기능 추가하기6:00
사용자 입력 검증하기6:17
조건적 코드에서 전역 상수 식별자로 활용하기3:20
조건적 배틀 로그 추가하기16:37
삼차 연산자의 소개7:31
이론: 문장 vs 표현식1:40
논리적 연산자 “팁” & 축약어12:58
논리적 연산자 - 요약1:55
논리적 연산자 & 원리
“스위치-케이스” 문장으로 작업하기7:10
반복문 소개6:40
“For” 반복문7:38
“For-of” 반복문5:16
“For-in” 반복문6:49
“While” & “do-while” 반복문8:00
반복문 - 기초
“Break”로 반복문 제어하기8:11
“continue”로 반복 제어하기2:21
레이블 문장으로 더욱 제어하기6:26
Break & continue
“Try-catch”로 오류 처리하기 - 소개2:25
사용자 정의 오류 발생시키기5:16
“Try-catch”를 사용해 오류를 잡고 & 처리하기8:14
Error Handling
마무리3:21
유용한 참고 자료 & 링크0:31

모듈 소개1:43
ES5 vs ES6+ (“차세대 JS”) - JavaScript의 진화8:14
Var vs let & const - “블록 범위” 소개14:32
"Hoisting" 이해하기4:07
엄격 모드 & 읽기 좋은 코드5:46
“JavaScript 전문”
코드가 구문 분석 되고 & 컴파일링되는 법8:16
JavaScript 엔진 속으로 - 코드는 어떻게 실행되는가15:59
[파헤치기] JavaScript 언어 vs 브라우저 API2:14
원시 vs 참조 값19:24
가비지 콜렉션 & 메모리 관리12:00
마무리1:55
유용한 참고 자료 & 링크0:41

모듈 소개1:31
함수 지식 복습 - 이때까지 배운 내용들1:52
매개변수 vs 인자0:34
함수 vs 메서드5:46
함수는 객체다!2:47
함수 표현식: 변수에 함수 저장하기5:12
함수 표현식 vs 함수 선언2:47
익명 함수5:54
프로젝트 작업하기: 게임에 사용자의 선택 추가하기7:44
코드 게임 로직 구현하기7:20
화살표 함수 소개8:41
다양한 화살표 함수 구문1:47
함수 생성하기
사용자에게 메시지 출력하기3:53
함수 내의 기본 인자10:45
Rest 매개변수 소개 (“Rest 연산자”)8:57
함수 내에서 함수 생성하기3:04
콜백 함수 이해하기6:09
“bind()”로 작업하기8:39
함수 - 심화 내용
계산기 프로젝트에 bind() 추가하기3:46
call()과 apply()1:18
마무리2:10
유용한 참고 자료 & 링크0:29

모듈 소개1:48
“DOM”이란 무엇인가?6:00
문서와 윈도우 객체6:20
DOM과 생성 방식 이해하기7:07
노드 & 요소 - DOM 쿼리하기 개요5:55
DOM에서 요소 선택하기9:54
요약: 노드 쿼리 메서드2:36
DOM 프로퍼티 탐구 및 변경7:37
속성 vs 프로퍼티8:58
다수의 요소 선택하기 & 요약5:13
DOM의 기초
DOM 탐색 - 개요6:22
자식 노드 탐색하기9:15
부모노드 & 부모요소 사용하기5:01
형제 요소 선택하기4:05
DOM 탐색 vs 쿼리 메서드4:35
DOM 요소 스타일링하기12:18
JS로 요소 생성하기 - 개요2:42
코드에서 HTML을 통해 요소 추가하기7:42
createElement()를 통해 요소 추가하기5:42
DOM 요소 삽입하기8:15
DOM 노드 복제하기1:45
라이브 노드 리스트 vs 정적 노드 리스트4:55
요소 제거하기1:56
메서드 삽입 & 제거 요약2:38
요약: 삽입, 대체, 제거5:16
실습 프로젝트 설정2:16
모달과 “추가” 버튼 선택하기8:58
CSS 클래스 변경을 통한 모달 열기5:01
배경(Backdrop) 제어하기8:04
사용자 입력 페칭 및 검증8:06
JavaScript에서 영화 생성 & 입력 제거하기4:00
화면에 영화 항목 렌더링하기8:23
영화 요소 제거하기9:12
“Are you sure?” 대화 표시하기 & 숨기기7:08
구성 논리 시작하기4:29
앱 끝내기11:45
마무리1:55
유용한 참고 자료 & 링크0:22

모듈 소개1:08
“반복” 과 “유사 배열 객체”란 무엇인가?2:11
배열 생성하기8:55
배열에는 어떤 데이터를 저장할 수 있을까?3:47
push(), pop(), unshit(), shift() - 요소 추가 & 제거하기6:59
splice() 메서드5:37
범위 선택하기 & slice()로 복제 생성하기6:06
concat()으로 배열에 배열 추가하기2:23
indexOf() /& lastIndexOf()로 인덱스 회수하기3:47
탐색: find()와 findindex()5:20
이것도 포함되어 있을까?1:20
반복문 대안: forEach() 메서드4:24
map()으로 데이터 변환하기2:38
sort()ing과 reverse()ing4:15
filter()로 배열 필터링하기2:35
화살표 함수의 진가는 여기서 발휘된다!1:31
중요한 reduce() 메서드7:33
JavaScript에서 메서드 체인 형성하기1:28
배열 & 문자열 - split()과 join()4:21
분산 연산자 (…)10:31
배열 구조 분해 이해하기4:24
Maps & Sets - 개요4:16
Sets 작업하기7:20
Maps 작업하기9:30
Maps vs 객체3:41
WeakSet 이해하기4:50
WeakMap 이해하기2:51
마무리1:25
유용한 참고 자료 & 링크0:22

모듈 소개1:38
객체란 무엇인가?5:54
객체 & 원시 값0:56
객체 - 복습2:42
프로퍼티 추가, 수정 & 삭제6:46
특수 키 이름 & 대괄호 프로퍼티 액세스8:36
프로퍼티 유형 & 프로퍼티 순서3:55
프로퍼티 유형 & 프로퍼티 순서4:11
객체 프로퍼티
데모 앱 & 축약어 프로퍼티 구문9:22
객체에 기반해 요소 렌더링하기5:36
For-in 반복문 & 동적 프로퍼티 출력하기5:24
필터 기능 추가하기5:38
“체이닝(Chaining)” 이해하기 (프로퍼티 & 메서드 체이닝)1:51
객체 분산 연산자 (…)5:54
Object.assign() 이해하기2:08
객체 구조 분해6:13
프로퍼티 존재 확인하기2:42
“this” 소개5:52
메서드 축악어 구문1:07
“This” 키워드와 이상한 작동 방식5:41
call()과 apply()3:22
브라우저가 (가끔씩) “this”에 하는 작업2:32
“This”와 화살표 함수10:36
“This” - 요약2:14
"this"
획득자(Getters) & 설정자(Setters)7:05
마무리1:33
유용한 참고 자료 & 링크0:20

모듈 소개1:55
“객체 지향 프로그래밍” (OOP)란 무엇인가?3:17
OOP 코드로 시작하기12:10
첫 번째 클래스 정의 & 사용하기7:17
생성자 메서드로 작업하기4:51
필드 vs 프로퍼티2:19
다수의 클래스 사용하고 “연결”하기9:06
클래스 메서드 바인딩하고 “this”로 작업하기4:57
장바구니와 Shop 클래스 추가하기4:37
통신이 까다로울 수 있습니다!3:54
정적 메서드 & 프로퍼티7:51
첫 번째 요약 & 클래스 vs 객체 리터럴4:06
획득자(Getters) & 설정자(Setters)5:43
상속 소개2:34
상속 구현하기11:50
모든 곳에서 상속 사용하기6:51
메서드 덮어쓰기와 super() 생성자6:00
super() 생성자의 실행, 순서 & “this”6:46
메서드를 추가하는 다양한 방법5:51
Private 프로퍼티7:24
"Pseudo-Private" 프로퍼티0:55
“Instances” 연산자4:30
빌트인 클래스1:09
객체 설명자 이해하기7:35
클래스
마무리1:51
유용한 참고 자료 & 링크0:18

Requirements

사전 JavaScript 관련 지식은 필요하지 않습니다
기본 웹 개발 지식이 있으면 도움이 됩니다
HTML과 CSS에 대한 기본 지식이 있으면 학습에 도움이 됩니다 (필수는 아닙니다)

Description

기초부터 고급 스킬까지 한 강의로 해결하는 JavaScript 웹 개발 완벽 가이드!
최신 기술 업데이트 완료!
예제, 데모, 프로젝트, 과제, 퀴즈 등 학습에 도움이 되는 자료 포함!

JavaScript 완벽 가이드 (초급+고급 마스터 과정) 강의를 선택해야 하는 이유

JavaScript는 웹 개발자가 배워야 하는 가장 중요한 프로그래밍 언어입니다 - 이 강의는 JavaScript 개발자로서 알아야 할 모든 것을 다룹니다.

이 강의는 JavaScript의 가장 포괄적이고 현대적인 강의입니다 - 저의 모든 JavaScript 지식과 교육 경험을 기반으로 합니다. 언어의 핵심 기초부터 시작하는 완전한 가이드이자 JavaScript 언어와 환경에 대한 광범위한 참고자료를 제공하여 초보자는 물론 경험이 풍부한 JavaScript 개발자 모두 이 강의에서 많은 것을 얻을 수 있습니다!

중요한 지식과 유용한 콘텐츠로 가득 차 있기 때문에 방대한 강의입니다. 핵심적인 기초부터 고급 개념 그리고 JavaScript의 특수성, 성능 최적화 및 테스트와 같은 전문 주제에 이르기까지 모든 것을 다룹니다. 제 목표는 JavaScript 언어에 대해 항상 찾을 수 있는 자료를 만드는 것이었습니다. 이 자료는 학습에 사용할 수 있을 뿐만 아니라 중요한 주제를 다시 찾아볼 수 있는 자료로도 사용될 수 있습니다.

이 강의는 Udemy와 저의 YouTube 채널 Academind에서 1,500,000명 이상의 학생을 보유한 선생님으로서, 장기간 JavaScript 개발자로서의 경험을 기반으로 합니다. 풍부한 예제, 데모, 프로젝트, 과제, 퀴즈 그리고 물론 강의 영상으로 구성된 강의이며 가능한 한 최고의 JavaScript 학습 방법을 제공하려는 목표를 가지고 있습니다.

JavaScript 완벽 가이드 (초급+고급 마스터 과정) 강의의 커리큘럼

모든 기본 사항: 변수, 상수, 함수, 스크립트 로드 방법 등
배열 & 객체: 매우 중요한 이 자료구조들을 자세히 살펴보겠습니다
제어 구조: 조건문과 반복문에서 코드를 실행하는 방법 이해
내부 작동 방법 알아보기: JavaScript 엔진이 내부에서 작동하는 방식과 이것이 미치는 영향
핵심 개념 심층 분석: JavaScript 기능, 다양한 구문에 대한 특별한 사항
DOM으로 작업하기: JavaScript로 웹페이지를 동적으로 조작하는 방법(심층 분석과 다양한 사용 사례를 포함)
JavaScript의 이벤트: 다양한 이벤트(예: 드래그 앤 드롭)를 리스닝하고 적절한 코드를 실행하는 방법
클래스 & 객체 지향 프로그래밍: 클래스, 프로토타입, 'this' 키워드, 생성자 함수 등으로 작업하는 방법 알아보기
비동기와 동기 프로그래밍: 코드를 올바르게 실행하기 위한 콜백, 프로미스, async/await 및 기타 중요한 도구와 언어 기능을 살펴보겠습니다
Http 요청: JavaScript로 Http 요청을 보내는 방법
도구, 최적화와 브라우저 지원: 코드 분할, 작은 코드 생성 및 스크립트가 모든 브라우저에서 작동하는지 확인 - 이는 중요하므로 매우 자세하게 다룹니다
라이브러리와 프레임워크: Axios와 같은 라이브러리나 React.js와 같은 프레임워크 - 그들이 중요한 이유와 사용 방법
Node.js: 대부분의 강의에서는 (구문은 동일하기 때문에) 브라우저 측에 초점을 맞추지만 Node.js 전용 섹션에서 해당 JS 호스트 환경에 대한 모든 것을 배울 겁니다
보안 & 성능 최적화: 물론 보안도 중요하지만 성능도 중요하니 이 강의에서 모두 다룹니다!
자동 테스트: 수동 테스트는 힘든 작업이지만 신뢰할 수 없습니다. 이 강의에서 자동 테스트에 대해서 다룹니다.

강의를 듣기 위해 필요한 조건은 아래와 같습니다.

JavaScript 지식은 필요하지 않습니다 - 처음부터 배웁니다
기본 웹 개발 지식(예: 웹의 작동 방식) 외에는 프로그래밍 경험이 필요하지 않습니다.
기본 HTML 및 CSS 지식은 있으면 좋지만 필수는 아닙니다

강의를 듣고 JavaScript를 마스터해서 커리어를 발전시키세요!

강의에서 뵙겠습니다!

- Maximilian

강의를 들으시고 수업 내용에 관한 질문은 영어로 남겨 주셔야 강사님의 답변을 받으실 수 있습니다 :)

Who this course is for:

JavaScript 경험이 없거나 적은 초급 웹 개발 수강생
JavaScript에 대한 기본 사항은 알고 있지만 지식을 심화하려는 개발자
핵심 세부 사항에 대해 더 배우고 고급 개념에 대해 자세히 알아보려는 고급 JavaScript 개발자
JavaScript을 배우고 싶고 작동 방식에 관심이 있는 모든 분들

【한글자막】 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정

What you'll learn

Explore related topics

Course content

개요14 lectures • 1hr 1min

기초: 변수, 자료형, 연산 & 함수39 lectures • 3hr 19min

효율적인 개발 & 디버깅19 lectures • 59min

제어 구조로 작업하기 (if 문, 반복문, 오류 처리)38 lectures • 3hr 55min

백그라운드 & JavaScript의 특이한 과거 (ES3, ES5)부터 현재까지 (ES6+)12 lectures • 1hr 35min

함수 더 보기22 lectures • 1hr 41min

JavaScript에서 DOM으로 작업하기 (브라우저 HTML 코드)38 lectures • 3hr 44min

배열 & 반복 더 보기29 lectures • 2hr 5min

객체 더 보기27 lectures • 2hr

클래스 & 객체 지향 프로그래밍 (OOP)26 lectures • 2hr 16min

Requirements

Description

Who this course is for: