초격차 패키지 Online.
내 생에 마지막 JavaScript
: 기초 문법부터 실무 웹 개발까지 한 번에 끝내기

  • JavaScript의 모든 것을
    파헤치는 초격차 커리큘럼 구성

    JavaScript 문법 및 다양한 프로젝트와 실무 연계 학습을 통해 더 깊고 완벽하게 팔 수 있도록 커리큘럼을 구성했습니다.

  • 각 파트 별 예제와 프로젝트로
    배우는 응용&심화 프론트엔드

    학습한 이론을 실습을 통해 응용하는 방법을 배우며, 심화된 내용의 프론트엔드를 경험할 수 있습니다.

  • 강의 하나로
    실무부터 취업/이직까지 전략적으로

    실무 대비와 함께 취업 또는 이직을 고민 중이시라면, 이 강의로 차별화된 프론트엔드 실력을 구축해 나가세요.

코스 프로모션 배너 전용입니다.
0 0시간 0 0 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

당신의 프론트엔드 개발 실력이 흔들리는 이유는
프론트엔드의 근본인 JavaScript에 대한 이해와 지식이 얕기 때문!

자바스크립트의 '핵'까지 파고드는 커리큘럼으로
프론트엔드 실력의 기반 제대로 세우세요!

인생의 마지막 JavaScript 강의가 되도록, 패스트캠퍼스가 준비한 9가지
Special Point

인생에 자바스크립트 강의를 단 하나만 소장해야 한다면,
단연코 이 강의입니다.

Point 1

오직 JavaScript만, 기본기가 완벽히 쌓일 때까지
4단계로 깊이있게 파고드는 커리큘럼


★ 단순히 문법 또는 예제만 학습한다고 JavaScript를 온전히 학습할 수 없습니다.
배울 수록 어려워지는 JavaScript. 다양한 방식으로 JavaScript를 끝까지 파보며 기본기를 쌓을 수 있도록, 여러분의 인생 마지막 강의가 될 커리큘럼으로 준비했습니다.



이 커리큘럼이 끝나면, 여러분은
JavaScript의 필수 문법을 이해하고 효율적인 프론트엔드 개발을 할 수 있어요.

프레임워크의 동작 원리를 이해하고 새로운 기술도 빠르게 학습 할 수 있어요.
프론트엔드 개발자 채용 전반적인 프로세스에 필요한 개념과 실력을 쌓을 수 있어요.

Point 2

프론트엔드 개발자라면 꼭 알아야 하는
15가지 필수 기초 & 심화 개념 완전 정복

기초 | 5가지 문법 & 개념
프로그래밍의 근본적인 논리 이해를 위한 JavaScript
변수와 데이터타입으로 가장 기본적인 구성 요소부터 시작하여, 웹 페이지와의 상호작용을 가능하게 하는 DOM API까지 순차적으로 학습합니다.

학습방식  개념 설명 1 (문법 설명) → 개념 설명 2 (활용 방법) → 코드 예제

심화 | 프론트엔드 개발자가 어려워하는 10가지 심화 개념
복잡한 문제 해결을 위한 JavaScript
비동기, 이벤트루프 등의 고급 주제로 나아가 학습자가 단계적으로 지식을 쌓고, 각 개념의 연결성을 이해하며 체계적으로 JavaScript 심화 문법을 학습합니다.

학습내용  실행 컨텍스트, 클로저, 메모리 할당 방식, 호이스팅, 비동기, 이벤트루프, 프로토타입 & 비트겐슈타인, this, 이벤트 버블링 & 캡처링, 모듈 시스템(ESM, CJS)

기술적 설명만 있는 문법 강의는 어렵고, 이해가 안 돼 배우다 지치기만 하죠.
본 강의에서는 개념의 어원, 기술의 유래 등 배경지식과 스토리를 바탕으로 설명해 추상적 개념을 더 쉽게 이해할 수 있습니다.

★ 강사님의 한 마디 by. 요기요 시니어 김의중 님
기초를 이해하는 데 도움이 되는 프로그래밍의 근본적인 논리들과 학습한 개념들을 베이스로, 실무에서 사용되는 라이브러리나 프레임워크를 적용하는데 효율적으로 사용하여 더 유연하고 효과적으로 작업할 수 있는 내용들로 커리큘럼 순서를 구성했습니다. 배경 지식과 함께 스토리를 더해 설명함으로써, 학습자가 단단한 기초 위에 고급 지식을 쌓을 수 있게 해주며, 이러한 복잡하고 추상적인 개념을 더욱 쉽고 재미있게 이해할 수 있도록 전달합니다.

Point 3

언어 활용 능력부터 채용 과제까지 대비할 수 있는
순수 JavaScript 프로젝트 9개


프론트엔드 요구 사항을 구현하는 5개 프로젝트


개발 방법론을 적용하는 2개 리팩토링 프로젝트


JavaScript to TypeScript 2개 마이그레이션 프로젝트

★ 강사님의 한 마디 by. FE리드 박현범 님
객체지향 프로그래밍, 함수형 프로그래밍은 대규모 프로젝트의 코드를 구조화 & 재사용이 가능하게 하고, 보다 유지보수 하기 좋게 하는 개발 방법론입니다. 이런 프로그래밍 방법론을 모르고 개발하게 되면 유지보수가 어렵고 버려지는 코드를 생산하게 됩니다. 따라서 협업, 다량 코드를 생산하는 큰 프로젝트에서는 이와 같인 방법론이 적용된 코드 써야 유지보수가 가능하므로 꼭 알아두셔야 합니다.

Point 4

프레임워크 변화 히스토리로 배우는
프론트엔드 프레임워크 & 라이브러리 동작 원리


주요 프레임워크를 통해 만들면서 이해하는 JS와 프론트엔드

주요 학습 내용
기본적인 웹 개발 개념
DOM
∙ 선택자(Selector)
∙ 이벤트(Event)
∙ DOM 조작


특징  DOM 중심 개발
MVVM 등장 전
MVC ∙ Backbone.js 이해

주요 학습 내용
데이터와 UI 간에 양방향으로 동기화되는 데이터 바인딩 개념
옵저버블(Observable)
데이터 바인딩(Data-binding)
템플릿(Template)


디자인 패턴  MVVM
Vue 2.0의 토대
MVVM ∙ Angular.js 이해

주요 학습 내용
데이터와 UI 간에 양방향으로 동기화되는 데이터 바인딩 개념
컴포넌트
디렉티브
생명주기


디자인 패턴  MVVM

주요 학습 내용
상태관리를 위해 단방향 데이터 바인딩으로 회귀
가상돔(Virtual DOM)
JSX
훅(Hook)


프론트엔드 주요 상태관리 모델별 히스토리에 따른 이해

주요 학습 내용
Action
Reducer
Dispatch


상태관리 방식  Top-Down 방식
등장 배경
Flux에 영감을 받은 예측가능한 상태관리를위한 중앙 집중화된 라이브러리

주요 학습 내용
Atom
Selector
Effect


상태관리 방식  Bottom-up 방식
등장 배경
컴포넌트 간 데이터 공유와 관리를 위해 만들어진 새로운 방식의 상태관리 라이브러리

주요 학습 내용
Query
Mutation
Cache & Invalidate


상태관리 방식  서버상태관리
등장 배경
데이터 로딩과 관리를 간편하게 하며, 데이터 캐싱, 상태관리, 에러 처리, 사전 로딩 등을 통해 개발 생산성과 성능을 향상시키는 서버 상태 관리 라이브러리

★ 강사님의 한 마디 by. 카카오 FE 시니어 Teo 님
JavaScript는 웹 개발을 위해 탄생한 언어인만큼 웹 개발이 어떻게 발전했는지, 그 과정에서 JS 프레임워크가 어떠한 역할을 했는지 이해하는 것이 중요합니다. 이 강의는 단순 프레임워크 사용법을 넘어, 웹 개발의 발전 과정을 친숙한 ToDo App 개발을 통해 여러 프레임워크로 직접 만들어보고 비교해 보면서, 몸으로 익힐 수 있도록 구성했습니다. 본 강의를 통해 앞으로도 계속 발전하게 될 웹 개발 생태계 안에서 JavaScript에 대한 통합적인 접근 방법을 익힐 수 있게 되기를 바랍니다.

Point 5

프레임워크 변화 히스토리로 배우는
프론트엔드 프레임워크 & 라이브러리 동작 원리


◆◆
Case 1
문제 발생 원인에 따른 문제 해결
① 다양한 경우의 수를 고려하지 못해 문제 발생
② 기능 추가에 따른 기존 기능의 오류 발생
③ 문제 해결 후 다른 곳에서 같은 문제 발생
④ 다른 패턴 동일 문제 발생

◆◆
Case 2
발생할 수 있는 문제를 사전에 예방
① 에러 메시지 중 자주 보이는 메시지들 파악
② 개발자 도구 활용 디버깅
③ 문제 발생한 상황과 동일한 환경의 테스트 환경 구축
④ 추가/수정한 테스트 케이스를 통과할 수 있는 기존 코드 수정
⑤ 문제 발생 코드와 유사한 패턴을 가진 코드를 찾고 수정하여 문제 예방

◆◆◆
Case 3
실전 문제 발생 상황을 가정한 시나리오 학습
① 정상적인 게시글 수정 후, 수정된 게시글이 목록에서 갱신되지 않을 경우
② 로그인 성공 후, 메인 페이지로 넘어가지 않고 로그인 화면에서 멈춰 있을 경우
③ 서버에서 ToDo 목록을 받아와 렌더링 시 아무런 동작을 하지 않을 경우
④ 유사한 동작을 하는 두기능을 하나의 패턴으로 묶어보는 경우
⑤ 유사한 패턴으로 묶은 코드가 유연성과 확장성이 필요한 경우

+ Bonus | JS를 TS로 바꿨을 때의 문제 상황
TypeScript를 도입할 때 자주하는 실수
∙ 단순히 타입만 붙이면 해결될 줄 알았는데 아닌 경우
∙ 유니언 타입(I)과 인터섹션 타입(&)를 적용시 빨간 줄이 뜨는 경우
∙ 제너릭(Generic) 타입을 사용했을 때 발생하는 문제 상황
∙ 외부 라이브러리를 사용시 @types가 없어 전부 빨간 줄이 뜨는 경우

★ 강사님의 한 마디 by. FE 개발자 이규덕 님
리드로 있는 동안 프론트엔드 개발자들이 JS를 사용할 때 안타까운 점은 단순히 문제를 해결하면 그것으로 끝이었다는 점입니다. 성장하는 개발자가 되려면 문제의 발생 원인, 실무 중 문제 탐색 과정의 보완을 통한 문제 발생 예방, 그리고 다양한 문제 해결 경험이 있어야 합니다. 본 강의에서는 이 내용을 모두 커버합니다. 이 강의를 들으면 문제가 발생했을 때, 당황하지 않고 그 문제와 잘 마주할 수 있는 능력 또한 얻어갈 수 있을 거라 자부합니다.

Point 6

코딩테스트 1티어, 나동빈 강사님의 빠른 취업/이직을 돕기 위한 특급 혜택!
JavaScript 코딩테스트 131예제

알고리즘 핵심 유형부터 문제 풀이를 위한 문법 예제까지 | 총 131문제

JavaScript 코딩테스트 합격 노하우

좋은 알고리즘 평가 기준 중 하나, 최소 시간 내 해결!
∙ 소요 시간의 경향성을 계산을 위한 빅오표기법 학습으로 시간복잡도를 계산하여 제한된 시간 내 문제 해결
∙ 알고리즘 코딩 테스트를 준비하며 코드템플릿 제작 & 관리 방법

문제 풀이를 위한 JavaScript 필수 문법만 골라서!
코딩테스트용 JavaScript 기본사칙연산, 기본 입력(fs 모듈, readline 모듈), 조건문, Array.prototype.reduce() 등 문제풀이를 위한 문법을 정리해 알려드립니다.

lectured by

강의력과 개발 실력, 교육에 진심까지 갖춘
고 연차 현직 프론트엔드 개발자로 구성된 강사진을 소개합니다.

8~15년차의 프론트엔드 개발 경험이 모두 담긴 인사이트를 전달해주실 시니어 강사님들을 모셨습니다.
IT대기업, 고연차 팀 리드, 개발자 커뮤니티 인플루언서 등 믿고 수강할 수 있는 강사님들의 화려한 이력까지 확인하세요.

김의중 강사님 (Part 1)
| 이력  프론트엔드 개발 경력 총 8년 이상
현) 위대한 상상 시니어 프론트엔드 개발자
전) 우아한형제들 프론트엔드 개발자
| 경험   C사 개발자 커뮤니티 6,600명 이상의 팔로워를 보유한 인플루언서
☛ 커리어리
안녕하세요, 프론트엔드 개발자 김의중입니다. 저는 취업 준비생과 주니어 개발자들을 대상으로 강의 진행과 멘토링 경험이 있습니다. 이와 같은 경험을 통해 학습을 하는데 있어, 수강생 분들이 어떤 어려움을 겪고 있는 지 잘 알고 있습니다. 수강생 분들의 어려움을 해소하는데 조금이나마 도움을 드리고자 합니다. 제가 가진 실무적인 노하우와 팁들을 여러분께 공유하고 싶습니다. 저와 함께, 프론트엔드 개발의 기본기를 다지며 한 단계 더 성장해보아요!
박현범 강사님 (Part 2/3 + 부록 3)
| 이력  프론트엔드 개발 경력 총 15년 이상
현) 알서포트 프론트엔드 팀 리드 개발자
안녕하세요. 프론트엔드 개발을 하고 있는 박현범입니다. 저는 C++ 을 사용한 응용프로그램과, Javascript 를 사용한 라이브러리를 다년간 개발해왔고 현재 20명 규모의 프론트엔드팀을 리드하고 있습니다. 팀리드로써 팀원들의 능력향상을 위한 교육도 진행하고 있는데요. 그 경험을 살려서 취준생과 이제 막 실무를 접하고 있는 분들이 커리어를 준비하는데 도움이 되고자하는 마음으로 이번 강의를 준비했습니다. 현업에서 라이브러리를 사용하는 개발자, 라이브러리를 생산할 수 있는 개발자는 다르게 말하면 대체할 수 있는 개발자와 대체할 수 없는 개발자일 수도 있습니다. 이 강의가 수강한 모든 분들에게 생각을 현실로 구현해내고 성취감을 느끼는데 도움이 되길 간절히 바라겠습니다.
Teo 강사님 (Part 4 + 부록 1)
| 이력  프론트엔드 개발 경력 총 14년 이상
현) Teo의 프론트엔드 운영
현) 카카오 프론트엔드 시니어 개발자
전) 카카오 엔터프라이즈 프론트엔드 파트장
| 경험
Teo의 프론트엔드 등 유명 프론트엔드 블로그 및 디스코드 채널 운영
Teo의 스프린트 1~15기 진행 / TeoConf 2회차 진행
C사 개발자 커뮤니티 5,000명 이상의 팔로워를 보유한 인플루언서
☛ 커리어리 |  ☛ Teo의 프론트엔드(블로그)
안녕하세요! 저는 '테오의 프론트엔드'의 시니어 개발자 테오입니다. 저는 개발을 통해서 새로운 가치를 만들어내고 그 가치를 통해 세상에 기여하고자 합니다. 개발뿐만 아니라 그동안 제가 쌓아온 경험과 지식들을 잘 전달하고 함께 공유하는 것도 새로운 가치와 기여가 될 수 있을 거라고 생각합니다. 이 강의를 통해 여러분들이 웹 개발에 대해서 더 깊이 이해하고 더 나은 개발자로 성장하는데 도움이 되기를 바랍니다.
이규덕 강사님 (Part 5 + 부록 2)
| 이력  프론트엔드 개발 경력 총 11년 이상
현) 마키나락스 프론트엔드 개발자
전) 딥네츄럴 프론트엔드 팀 리드 개발자
안녕하세요, JavaScript 를 좋아하는 Web Frontend 엔지니어 이규덕입니다. 긴 개발 경력을 가진 것은 아니지만, 제가 겪어왔던 문제 상황들과 나름의 해결 방법을 공유할 수 있어서 정말 기쁩니다. 제가 진행하는 파트에서 다른 강의처럼 개발하는 방법에 대해서는 다루지 않지만, 여러분들이 개발하면서 발생하는 수많은 문제들에 대해 어떻게 하면 원인을 잘 찾고 해결에 가까워질 수 있는 지에 다룰 예정입니다. 이 강의가 JavaScript 활용과 실무 문제 해결에 도움이 되길 바랍니다.

Special Benefit 1

프론트엔드 취업 & 커리어 Up을 위한
시니어 개발자들의 꿀팁 3종 부록 제공


Special Benefit 2
수강 중 궁금한 내용이 생겼다면 언제든 물어보는
AI 질의응답 게시판 운영
AI 조교, 수강생과 함께하는 웹 개발 및 강의에 대한 실시간 질의응답

본인 회사에 적용 & 응용하기 위한 강의 스터디 모집
프론트엔드 실무 문제 해결을 고민하는 실무자 커뮤니티
* AI 질의응답 게시판 운영 노출 기간: 2024.01.17 ~ 2026.12.11

프론트엔드 개발 실력의 근본, JavaScript 완전 정복 강의를
월 10,000원대에!

상세 커리큘럼.

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
- [프론트엔드 웹 개발의 모든 것(시그니처)]에서 Course 3. 한 번에 끝내는 JavaScript 코딩테스트 (Part. 1, 2)와 동일한 내용입니다.

Part 1. JavaScript 언어의 이해

Part 2. 5개 VanillaJS 예제로 실무능력 키우기

Part 3. Typescript 문법학습에서 실무 적용까지

Part 4. JS 베이스의 프론트엔드 프레임워크와 라이브러리 이해하기

Part 5. 자주 발생하는 문제 예방부터 해결까지

Special 1. JavaScript로 끝내는 자료구조/알고리즘 (코딩 테스트)

Special 2. 프론트엔드 개발자가 알아야 하는 CS 지식

부록 1. 기술면접 모음집

부록 2. FE 개발자가 알려주는 클린코드 작성법

부록 3. 워커홀릭 팀장이 같이 일하고 싶은 개발자는?

해당 강의는 사전 예약 상품입니다.

영상 공개는 다음과 같이 5회에 걸쳐 공개됩니다.
(강의 1회 결제시 모든 영상을 평생 반복 수강 가능합니다.)

-----

1차 공개   24년 01월 17일 (수)
2차 공개   24년 02월 14일 (수)
3차 공개   24년 03월 13일 (수)
4차 공개   24년 04월 17일 (수)
전체 공개   24년 05월 29일 (수)


(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시