Thumbnail
개발 · 프로그래밍 프로그래밍 언어

진짜! 자바스크립트(Javascript) - 기초부터 고급까지 대시보드

(4.9)
8개의 수강평 ∙  128명의 수강생
99,000원

월 19,800원

5개월 할부 시
지식공유자: 코딩맥스 CodingMax
총 245개 수업 (35시간 30분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

입문자를 위해 준비한
[프로그래밍 언어, 웹 개발] 강의입니다.

🌟 자바스크립트의 기초부터 고급까지, 진짜! 자바스크립트 강의에서 시작하세요! 🌟

✍️
이런 걸
배워요!
프로그래밍의 기본 원리와 코드를 분류해서 이해하는 방법
수업 환경을 준비하고 설정하는 방법
데이터의 기본 타입, 그리고 객체 타입에 대한 깊은 이해
연산자와 제어문을 활용한 로직 구현 방법
V8 자바스크립트 엔진의 동작 방식
클로저, 스코프 체인, 그리고 this 바인딩과 같은 핵심 자바스크립트 개념
프로토타입과 ES6의 class 키워드를 중심으로 한 객체지향 프로그래밍
오류를 처리하는 방법과 비동기 프로그래밍 패턴
Generator, Iterable, Iterator와 같은 고급 프로그래밍 패턴
모듈화된 코드 구조를 설계하고 구현하는 방법

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
한 번 배워서 다양한 분야에서 사용할 수 있는 프로그래밍 언어를 배우고 싶은 사람
자바스크립트를 처음 배우는 사람
기본적인 프로그래밍 원리와 구조를 알고 싶은 사람
기본 개념을 넘어, 더 심층적인 자바스크립트의 동작 원리와 고급 기법을 학습하고 싶은 사람
객체지향, 클로저, 비동기 프로그래밍과 같은 실무에서 활용도가 높은 주제를 깊게 탐구하고자 하는 사람
한 강좌로 자바스크립트의 기초부터 고급까지 정리하고 싶은 사람

안녕하세요
코딩맥스 CodingMax 입니다.
코딩맥스 CodingMax의 썸네일

안녕하세요. 유튜브에서 즐거운 코딩 경험 - 코딩맥스(CodingMax) 채널을 운영하고 있는 코딩맥스입니다. 삶을 살아 가면서 새로운 지식을 배우고 나누는 것을 좋아 합니다. 😊

 

📺 https://www.youtube.com/@coding-max

 

항상 유익하고 알찬 내용으로 찾아 뵐게요!

커리큘럼 총 245 개 ˙ 35시간 30분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 진짜! 자바스크립트
섹션 3. 수업 강의 자료
🎁 예제 코드와 강의 슬라이드(2023년 11월 01일 버전)
수업 노트 표시 안내 📕
섹션 8. 선택 제어문
섹션 11. [추가섹션] 숫자의 표현과 2진수 비트 연산
2진수, 8진수, 16진수 숫자 표현 14:16
다양한 비트 연산과 응용 30:02
2의 보수는 무엇이고 왜 필요할까?📕 16:38
Big Endian과 Little Endian은 무엇일까? 07:46
섹션 12. [추가섹션] 문자열 메서드와 유니코드
문자열의 다양한 메서드 1편 10:02
문자열의 다양한 메서드 2편 12:39
자바스크립트 문자 인코딩과 유니코드(Unicode)📕 30:16
섹션 13. [추가섹션] 배열 메서드와 선언형 프로그래밍(리스트 연산)
리스트 연산은 왜 중요할까? 07:37
생성 연산자📕 16:17
순회 연산자📕 08:40
검색 연산자 15:14
문자열 변환 연산자📕 04:21
복사, 정렬, 역순 연산자 11:25
map, filter, reduce 연산자 10:56
ES2023에 추가된 배열 연산자 10:35
섹션 14. V8 자바스크립트 엔진
프로세스 메모리 레이아웃 📕 10:41
V8은 undefined, null 그리고 string 을 어떻게 관리할까? 08:42
V8은 number 타입을 어떻게 관리할까? 10:20
V8은 자바스크립트 객체를 어떻게 관리할까? 13:07
V8은 GC(Garbadge Collection)을 어떻게 실행할까? 09:23
섹션 15. 실행 컨텍스트(Execution Context)와 렉시컬 스코프
실행 컨텍스트(Execution Context)와 렉시컬 스코프(Lexical Scope) 14:04
전역(Global) 실행 컨텍스트 - 제일 먼저 생성되는 실행 컨텍스트 11:47
함수 실행 컨텍스트 1편 - 함수 실행 컨텍스트 생성 시점과 상위 스코프 13:00
함수 실행 컨텍스트 2편 - 다시 보는 함수 스코프와 블록 스코프📕 14:43
eval 함수 실행 컨텍스트 05:45
섹션 16. 다양한 함수 종류
이름이 있는 일반 함수 11:43
함수 표현식과 익명함수 그리고 함수 일급 객체 16:07
함수 일급 객체와 지연 실행의 중요성 17:52
콜백(Callback) 함수와 제어의 역전 그리고 콜백 지옥(Callback Hell) 19:43
즉시 실행 함수(IIFE) 15:55
화살표 함수(arrow function) - 1편, 소개 및 일반함수와의 비교 10:57
화살표 함수(arrow function) - 2편, this 바인딩 17:04
템플릿 리터럴 태그 함수(Template Literals Tag Function) 15:12
재귀 함수(Recursive Function) 17:57
섹션 17. 실행 컨텍스트(Execution Context)와 this 바인딩
일반 함수의 this 바인딩 12:14
일반 함수가 객체 메서드로 사용될 때의 this 바인딩 04:23
개발자의 명시적 this 바인딩 - apply, bind, call 사용하기 08:35
생성자 함수의 this 바인딩 02:17
화살표 함수의 this 바인딩 03:27
콜백(callback) 함수와 this 바인딩📕 17:22
중첩 객체 메서드의 this 바인딩 06:17
섹션 18. 실행 컨텍스트(Execution Context)와 함수 호출 스택(Call Stack)
실행 컨텍스트와 함수 호출 스택 1편 08:02
실행 컨텍스트와 함수 호출 스택 2편 05:54
재귀함수가 느린 이유 08:28
재귀함수의 실행 속도를 개선하는 방법 08:15
섹션 19. 스코프 체인(Scope Chain)
스코프 체인과 참조 오류(Scope Chaining and Reference Error) 09:54
스코프 체이닝(Scope Chaining)은 언제 실행될까? 와 관련된 중요한 문제와 해결법📕 09:41
섹션 20. 클로저(Closure)
클로저(Closure)는 무엇일까? 06:08
클로저와 클로저 스코프(Closure and Closure Scope) 1편 08:01
클로저와 클로저 스코프(Closure and Closure Scope) 2편 10:16
클로저의 표현 방법과 파라미터 05:34
클로저의 활용 예제 1편 03:28
클로저의 활용 예제 2편 04:08
클로저의 활용 예제 3편 06:33
클로저의 활용 예제 4편 07:11
생성자 함수와 클로저 04:17
섹션 21. ES5 시절의 OOP - 객체와 프로토타입(Objects and Prototype)
생성자 함수와 객체 10:30
객체와 프로토타입 07:45
프로토타입 체인 06:35
생성자 함수의 프로토타입 07:23
Object.create와 프로토타입 02:57
생성자 함수로 객체를 만들 때, new 연산자는 왜 필요할까? 14:37
동적으로 변경 가능한 객체의 프로토타입 속성 05:04
프로토타입 체인과 객체의 다단계 상속 13:18
생성자 함수의 다단계 상속 21:20
instanceof 연산자 04:56
typeof 연산자 강화 12:13
다단계 상속 객체와 Mixin 객체의 차이점 08:16
기본 내장(Built-in) 객체의 확장과 주의할 점 08:24
섹션 22. ES6 이후 시대의 OOP - class 키워드 중심의 객체지향 프로그래밍
class 키워드와 메서드 축약 표현 08:37
인스턴스 속성과 메서드 02:58
정적(타입) 속성과 정적(타입) 메서드 03:39
다단계 상속 11:23
Private 속성과 메서드 06:01
속성 접근자 Getter/Setter - 1편 07:06
속성 접근자 Getter/Setter - 2편 05:08
OOP 핵심 개념: 추상화(Abstraction) 03:32
OOP 핵심 개념: 캡슐화(Encapsulation) 06:30
OOP 핵심 개념: 다형성(Polymorphism) 14:15
객체의 관계: is-a(inheritance) 관계 04:20
객체의 관계: 연관(Association) 관계 04:51
객체의 관계: has-a(Composition) 관계 03:52
객체의 관계: 집약(Aggregation) 관계 06:13
객체의 관계: 실체화(Realization) 관계 04:05
객체의 관계: 의존(Dependency) 관계 04:05
객체의 관계: 사용 사례 05:33
섹션 23. ES6 이후 시대의 OOP - 자주 사용하는 디자인 패턴
Template Method 디자인 패턴 12:47
Singleton 디자인 패턴 05:59
Builder 디자인 패턴 08:38
Delegate 디자인 패턴 06:15
Factory 디자인 패턴 08:34
Observer 디자인 패턴 12:56
Command 디자인 패턴 15:02
섹션 24. ES6 이후 시대의 OOP - 객체가 갖춰야할 기본 기능
Comparable - 객체는 객체를 비교하는 방법을 제공하면 좋다. 09:32
Codable - 객체는 자기 자신을 직렬화하거나 역직렬화하는 방법을 제공하면 좋다. 06:10
Copyable - 객체는 자기 자신을 복사하는 방법을 제공하면 좋다. 📕 05:09
섹션 25. 객체 속성, Immutable 그리고 Mixin
속성 설명자란?(Property Descriptor) 05:58
Object.defineProperty 로 속성의 특성 변경하기 06:31
Object.defineProperty 로 새로운 속성 만들기 07:20
변경이 불가능한 객체 만들기(Immutable Object) - Object.freeze 05:05
객체를 봉인하기(Sealed Object) - Object.seal 03:06
객체의 확장 막기 - Object.preventExtensions 02:23
DeepFreeze와 DeepSeal이 필요한 이유 16:53
in 연산자: 객체 속성의 열거와 속성 존재 유무의 차이점 03:58
Mixin: 객체의 수평적 확장 11:47
Mixin: in 연산자와 Duck Typing 12:07
섹션 26. 오류 처리(Error Handling)
오류(Error) 처리는 왜 중요할까? 07:00
오류를 처리하는 시점: 전처리 05:18
오류를 처리하는 시점: 후처리 03:12
Error 객체 📕 07:32
Throwable과 Uncaught Error 의 의미 04:21
try - catch - finally 로 던져진 오류(Error or Exception)를 잡아서 처리하기 11:17
사용자 정의 오류(Custom Error) 사용하기 08:13
오류 전파를 활용한 오류 처리 15:34
오류 다시 던지기(re-throw)는 어떻게 활용하면 좋을까? 05:05
[Value, Error] 튜플을 활용한 오류 처리 06:32
Result<Value, Error> 타입 구현 및 오류 처리 10:50
Result 타입에 flatMap 을 구현해서 메서드 체인의 사이드 이펙트 관리하기 📕 14:06
Result 타입과 모나드(Monad) 📕 10:09
섹션 27. 비동기 프로그래밍
동기와 비동기(Sync and Async) 14:34
Blocking은 언제 문제가 될까? 14:19
자바스크립트는 Single Thread?! 07:28
setTimeout() 과 setInterval() 함수 06:28
setTimeout 함수는 어떻게 실행 될까? 16:20
콜백 함수는 언제 문제가 될까? 04:08
콜백 함수를 Promise로 변경하기 06:07
Promise 만들기 02:34
Promise의 then, catch, finally 메서드 08:12
Promise의 executor는 언제, 어디서, 어떻게 실행될까? 07:17
Promise의 executor 실행 과정 이해하기 06:39
Promise의 3가지 상태 10:17
Promise 메서드 체이닝 11:03
Task Queue의 우선순위 📕 06:17
Promise 기반의 fetch 함수와 네트워크 API 요청 13:28
Promise 의 정적 메서드를 사용한 비동기 작업의 병렬 실행 18:28
Promise의 정적 메서드와 fetch 함수 03:41
async와 await 키워드 20:52
async와 await 키워드를 사용한 네트워크 API 요청 11:48
섹션 28. BigInt
console.log(9999_9999_9999_9999); 는 어떻게 출력될까? 03:13
BigInt 사용하기 04:33
BigInt 를 사용할 때 주의할 점 02:42
섹션 29. Symbol
심볼(Symbol)이란? 06:37
심볼과 객체 속성 07:46
Symbol.toStringTag 02:48
Symbol.hasInstance 05:53
Symbol.isConcatSpreadable 03:51
Symbol.match 03:17
Symbol.replace 02:57
Symbol.search 02:22
Symbol.toPrimitive 09:57
Symbol.species, Symbol.unscopables 05:11
심볼과 객체 메서드 03:34
섹션 30. Iterable과 Iterator
Iterable과 Iterator 디자인 패턴 15:33
Symbol.iterator 란? 05:20
사용자 정의 객체(Custom Object)를 Iterable 로 만들기 10:00
Iterable과 Iterator를 나눠서 구현하는게 왜 좋을까? 07:35
Symbol.asyncIterator 란? 06:14
Symbol.asyncIterator 를 사용한 네트워크 API 요청 06:24
섹션 31. Generator
👉 알림 📢
제너레이터(Generator)란? 10:46
yield 키워드는 어떻게 사용할까? 11:14
제너레이터 실행 과정 10:51
Iterator의 return과 throw 메서드 10:28
제너레이터의 실행 Pause와 Resume 기능은 무엇을 좋게 할까? 11:10
yield* 는 왜 필요할까?📕 13:09
재귀적인 제너레이터 06:05
제너레이터와 무한 수열 07:35
제너레이터로 Iterable 쉽게 만들기 04:16
yield 입력 활용하기 07:32
제너레이터로 JobQueue 만들기 09:56
제너레이터와 비동기 작업 06:24
AsyncGenerator를 활용한 비동기 JobQueue 만들기 13:15
섹션 32. 직접 구현하는 배열의 고차함수
고차 함수(High Order Function)란? 03:46
forEach 구현하기 03:12
map 구현하기 04:43
filter 구현하기 02:28
reduce 구현하기 05:55
reduce로 map과 filter 구현하기 06:35
every와 some 구현하기 07:51
RxJS의 Observable.of 구현하기 - 1편 16:19
RxJS의 Observable.of 구현하기 - 2편 13:44
섹션 33. 모듈
모듈이란? 07:19
import와 export 12:36
ESM에서 CommonJS 모듈 사용하기 03:56
모듈을 동적으로 임포트하기(Dynamic Import) 03:51
import 한 것을 다시 export 하기 05:01
모듈 관리 기법📕 13:22
섹션 34. 강의를 마치며
완강을 축하드립니다! 00:40
강의 게시일 : 2023년 10월 20일 (마지막 업데이트일 : 2024년 01월 05일)
수강평 총 8개
수강생분들이 직접 작성하신 수강평입니다.
4.9
8개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
싸이키 thumbnail
4
일단 이 강의를 10% 정도 듣는 입장에서 의견을 이야기해보자면, 강의 자체는 괜찮은습니다. 자바스크립트 복습 개념으로 구매를 한 강의라 별 기대는 안했지만 이론에 대한 설명은 최대한 해주시려고 노력을 하신 듯 보여 그런 느낌을 받았습니다. 다만 설명을 하실 때 시청자들이 이론에 대한 부분을 어느 정도 알고 있는 상태에서 말씀하시는 것 같아 자바스크립트를 처음 접하시는 분들에게는 버거우실 수 있습니다. 가령 인덱스 끝이 n-1 이라고 하면 이 부분에 대해서 "왜냐면 인덱스는 0부터 시작하니까요." 라고 하시는데, 방금 말씀드렸다 싶이 프로그래밍을 처음 접하시는 분들에게는 이론을 전달하려는 개념 설명이 충분히 이루어지지 않은 상태에서 마치 물흐르듯이, 템포도 비교적 빠른 편에 속하는 느낌을 받을 수 있을 것 같아서 그게 좀 걸렸던 것 같습니다. 물론 지극히 주관적인 의견이라 이 부분은 다른 의견이 있을 수 있습니다. 또 배열 설명 하실때 얕은 복사와 깊은 복사에 대해서 잠깐 언급하시는데, "만약 이 내용이 궁금하다면 진짜 자바스크립트의 이 부분을 다룬 강의를 참고하시라" 라고 하시는데 그 부분을 어디서 찾아야 하는지 구체적으로 제시를 안해주시고 있고, 하다못해 해당 강의를 링크로 첨부를 했다면 성의라도 보이신거구나 하는 생각이 들었을텐데... 뭐랄까 약간 커리큘럼도 여기저기 섞여 있는 것 같아서 개념 설명이 더욱 미비하게 느껴지는 것 같습니다. 보니까 유튜브 채널에 강의로도 운영을 하시고 계시던데 유튜브 영상의 일부를 고대로 이 커리큘럼에 옮겨놓으셨더라고요. 물론 그게 잘못됬다는건 아니지만 하다못해 강의 영상들 마다 흐름이라는게 이어지면 좋을텐데 강의 초반이라 그런건지는 모르겠지만 "어? 내가 유료강의에서 들을 때는 없는 내용인데 이걸 설명하셨다고?" 하는 내용이 두 개 정도 있었습니다. 이 점이 앞서 언급드릴 내용들을 포함해서 가장 아쉬워웠던 내용이 아닌가 생각됩니다. 또 다른 하나는 펜으로 작성하실 때 기존 글씨가 사라지더라고요. 음... 이때 좀 당황했어요. 쓴 글을 지우는건 몰라도 글씨가 사라지는 강의는 처음이라. 또 말을 좀 흐리시는 경향이 있으셔서 자주는 아닌데 가끔 의미 전달이 난해한 경우가 있습니다. 일단 10% 까지 보고있는데 복습 개념으로 듣는건 추천합니다만, 분량에 대해서 이 정도 가격이라면 괜찮긴 할 것 같은데... 앞서 말씀 드린 부분만 개선이 좀 되면 자바스크립트 전체 개념을 설명하는 강의는 인프런 중에서 이 강의가 처음(핵심만 집는 강의들이 대부준이라)이라고 느껴지는 점에서 가격 대비 다루는 양도많아서 괜찮거, 또 자바스크립트 강의 중에서도 퀄리티가 좋은 강의가 되지 않을까 생각합니다. 뭐... 의견들이 반영이 되지 않는다면 할인 할때나 복습 개념으로 사는거지 정가로는 손이 잘 가지 않을 것 같습니다. -------- 이하 설명이 필요한 부분 ---------
2023-10-25
지식공유자 코딩맥스 CodingMax
안녕하세요! 싸이키님. 먼저 소중한 첫번째 수강평을 남겨주셔서 감사합니다. 깊이 있는 피드백을 통해 어떤 부분이 개선이 필요한지 알 수 있어 큰 도움이 될 것 같습니다. 전반적으로 자바스크립트 복습 목적으로는 괜찮지만 - 입문자들에게는 좀 더 세세한 설명이 필요한 부분이 있다는 점 - 강의의 흐름과 구성에 있어서 일관성이 더 필요하다는 점 - 강의 중 판서가 사라지는 문제와 말끝이 흐려지는 점 위 내용은 제가 꾸준히 개선해 나아가야 할 것 같습니다. 그 중 "입문자들에게는 좀 더 세세한 설명이 필요한 부분이 있다는 점"은 현재 추가로 촬영하는 내용들이 있어서요 편집이 마무리 되면 올리도록 하겠습니다. 말씀주신 배열 인덱스 부분은 제가 미처 인지하지 못 한 부분인데 지적해 주셔서 감사합니다. 배열 인덱스 내용도 새로 촬영하여 올려드릴게요. 그리고 강의를 전반적으로 리뷰하며 연결되는 부분은 수업 노트로 수업 제목을 적어 드리겠습니다. 가격 대비 강의의 가치와 퀄리티에 대한 의견도 감사합니다. 이를 통해 강의의 가치를 높이기 위한 방향성을 잡을 수 있을 것 같습니다. 앞으로 강의 제작 시 참고하여 더 나은 강의를 만들기 위해 노력하겠습니다. 싸이키님! 정말 상세한 수강평 작성해 주신 점 다시 한번 감사드려요! 앞으로 더 나은 강의 제작을 위해 큰 밑거름이 될 것 같습니다! 좋은 하루 되세요!
2023-10-25
뚱뚱한 고양이 thumbnail
5
HTML, CSS 는 약간 알고 있어서 자바스크립트를 배우고 싶었는데, 이렇게 자세하고 친절하게 알려주는 강의는 처음 보는거 같아요. 개발자 친구한테도 물어보니까 커리큘럼 보더니 좋다고 자기도 복습겸 들어봐야겠다고 하더라구요. 시작할때 추상화나 폰노이만 아키텍처 이런 부분은 조금 어렵게 느끼게 만드는거 같긴 해요..ㅎㅎㅎ 그대로 실제 가르쳐 주시는 부분은 쉽게 잘 알려주시구요!!! 너무 좋은 강의 인거 같아요. 친절하고도 자세해서 공부하기에 너무 감사합니다. 강의 내용이나 소식도 업데이트 해주셔서 믿음도 좀 가구요. 저도 열심히 해봐야겠어요!
2023-10-31
지식공유자 코딩맥스 CodingMax
안녕하세요! 진짜! 자바스크립트 강의에 대한 솔직하고 따뜻한 피드백을 주셔서 진심으로 감사드립니다! HTML, CSS에 기본적인 지식을 가지고 계셔서 자바스크립트 학습도 분명히 더 빠르게 진행하실 수 있으실 거에요 시작할 때의 추상화나 폰노이만 아키텍처와 같은 복잡한 주제들이 조금 어렵게 느껴지는 점은 충분히 이해합니다. 문법 이외의 내용들이어서 다소 낯설게 느껴질 수 있어요. 그 중에서 "사이드 이펙트"만 인지하시고 프로그래밍을 공부하시면 좋을 것 같습니다. 다른 내용들은 프로그래밍을 하시면 점차 자연스럽게 이해 되실 거에요 방금 배열 관련 추가섹션을 등록하러 왔다가 뚱뚱한 고양이님의 수강평을 읽고 큰 힘을 얻어 갑니다. 😄 또 업데이트에 대한 믿음 주셔서 정말 감사드려요! 꼭 완강하시길 응원하겠습니다!💪😄
2023-11-01
ping thumbnail
5
내용이 쉽게 이해할 수 있도록 되어있습니다.
2024-03-08
지식공유자 코딩맥스 CodingMax
안녕하세요, ping님 소중한 수강평을 남겨주셔서 정말 감사드립니다! 수업 내용이 ping님에게 도움이 되어 매우 기쁩니다. 😊 마지막 강좌까지 꼭 완강하셔서 많은 내용이 ping님에게 전달되기를 바랄게요! 👍🎉
2024-03-11
woong617 thumbnail
5
길지만 재밌게 잘 들었습니다.
2024-02-26
지식공유자 코딩맥스 CodingMax
woong617님 안녕하세요! 입문 강좌이다 보니 분량이 길었던 것 같아요😅 긴 시간 함께 수강해 주시고 완강해 주셔서 감사합니다🎉 그리고 소중한 수강평 써 주셔서 진심으로 감사드려요 항상 해피 코딩하셔요!👍😊
2024-02-27
mingyu1.lee thumbnail
5
들었던 자바스크립트 강의 중 가장 알찼습니다
2024-04-14
지식공유자 코딩맥스 CodingMax
안녕하세요! mingyu1.lee 님! 완강 축하드립니다!! 그리고 소중한 수강평 남겨 주셔서 정말 감사드려요 mingyu1.lee 님에게 알찬 강의가 되었다니 다행입니다! 😊 항상 해피코딩 하셔요! 👍😊
2024-04-15