JavaScript 완전 정복 온라인 완주반

수강 신청 마감까지 남은 시간

0일 0시간 0분 0초 2021-11-28T23:59

현직자들이 가장 중요한
언어로 뽑는 JavaScript
완주반은 가장 중요한 것에만 집중합니다.

JavaScript를 마스터하는
가장 확실한 방법

카카오엔터프라이즈, 우아한형제들 개발자와 함께하는

코딩에 왕도는 없으니까.
무조건 많이, 직접 해봐야 내것이 됩니다.

강의 소개
코딩 초보인 당신도
JavaScript 완전 정복하는 강의

프로젝트 소개
JavaScript 100개의 기능을
담은 20개의 토이 프로젝트

EX | 카카오 지도 프로젝트
실제 프로젝트를 자세히 살펴볼까요?

1) 카카오맵 디벨로퍼에 등록합니다
2) 지도를 화면에 띄웁니다

3) 마커를 등록합니다
4) 현재 내 위치를 받아옵니다

실무에서 가장 많이 사용하는
100개 기능만 모아
20개 프로젝트에 압축했습니다.

60일 후 구현하게 될
100개 기능을 확인해보세요 👀

3D 캐러셀
벽돌깨기
이미지 에디터
글쓰기 에디터

프로젝트 소개
개발의 처음부터 끝까지,
페이지 구현 프로젝트

**실제로 완성하게 될 프로젝트 이미지입니다.

👀 네이버 주문하기 프로젝트를 하고 나면?
먼저 HTML 구조를 잡고 CSS로 스타일을 입힙니다. 빠른 작업을 위한 Scss를 사용해 효율을 높이고, JavaScript를 활용해 실제 기능하는 페이지를 구현하게 됩니다.

**실제로 완성하게 될 프로젝트 이미지입니다.

👀 오늘의집 프로젝트를 하고 나면?
SPA를 사용하지 않고 순수 JavaScript만으로 모던 애플리케이션을 구현합니다. Angular, React, Vue에 대한 이해를 높이며, 도구가 해주는 코딩을 넘어 스스로 내 코드를 짤 수 있다는 성취감을 느낄 수 있습니다.

강의 구성
JavaScript 완전 정복을 위한
최적의 커리큘럼

Part 1. HTML/CSS

프론트엔드 개발의 기초, 본격적인 프로젝트 진행에 필요한 기초 지식을 모두 습득합니다.

Part 2. JavaScript

완주반은 JavaScript만 20시간, 가장 중요한 JavaScript의 기초부터 심화까지 공들여 학습합니다.

Part 3. 백엔드(Node.js)

프론트엔드 개발에 필요한 백엔드 기술까지 놓치지 않고 학습합니다.

Part 4. JavaScript 100개 기능 구현

이제 실전, 20개의 프로젝트를 통해 100개 기능을 구현합니다.

강사 소개

완주반 혜택
온라인일수록 관리가 필요하니까,
끝까지 함께하는 학습관리

환급 프로세스는 어떻게 되나요? 👀 * 퀴즈 정답률 50% + 과제 정답률 50% 이상 필수
* 최종 평가 정답률 각각 70% 이상 필수
* 5만원을 초과하는 환급금은 제세공과금(22%)를 제외하고 지급됩니다.
* 실패한 미션에 대한 환급금은 지급하지 않습니다.

[환급 프로세스]
1. 개강일 월요일 오후 4시 과정에 대한 상세 안내사항은 이메일로 안내가 됩니다.
2. 개강 안내 메일을 통해 환급 서류를 제출해 주셔야 환급이 진행됩니다. 환급 서류는 개강일 기준 2주 이내 제출을 해주셔야 합니다.
3. 매주 퀴즈와 과제는 금요일 이전에 업로드가 됩니다. 퀴즈와 과제를 수행해 주셔야 합니다.
4. 수행해 주신 퀴즈와 과제의 채점은 최대 목요일까지 완료가 됩니다.
5. 채점 결과에 따라 환급자 명단이 이메일로 공지가 되며 2주 이내 환급이 진행됩니다.
6. 최종 평가 통과 시 최종 환급이 진행이 되며 최종 평가 정답률은 퀴즈/과제 각각 70%입니다.

멘토 소개
현직 개발자 멘토가
옆에서 도와드릴게요.

평생소장
최저가

한번 구매로, 평생 소장하세요.
(자동 구성) 가격이 인상됩니다.

조만간 가격이 인상될 예정입니다.
지금 구매하세요!

정상가 (자동 구성)
할인 금액 (자동 구성)
최종 금액 (자동 구성)
12개월 할부 시 월 (자동 구성)원

오늘이 최저가!

PLUS
개발자 취업과 실무까지
책임지는 특강 제공

커리큘럼
프론트엔드 개발자 필수
스택들만 모았습니다

HTML/CSS

인사 및 개요 소개
핵심 HTML
태그 예제 실습
Block vs Inline
시맨틱 마크업
HTML Emmet
HTML 학습 팁
마무리
CSS란?
CSS 속성들
핵심 CSS 속성과 작성 팁
CSS Box Model
position
display
그외 핵심 속성
기본 선택자
그룹 선택자, 결합자
가상 클래스 선택자
가상 요소 선택자
단축속성
CSS Emmet 사용법
CSS 학습 팁

SASS

Sass 란?
Sass 7-1 패턴
Sass @import
Sass Variables
Sass @mixin
Sass @function
마무리

네이버 주문 Project

프로젝트 생성하기
개발범위 파악하기
디자인 훑어보기
포장/매장 선택 영역
SVG 이미지 사용법
헤더 영역
주문 분류 영역
최근 주문 영역
메뉴 카테고리/리스트 영역
메뉴 아이템 영역
담은 메뉴 영역
맨위로 버튼
디자인 파악 + Scss 폴더 구조 변경
최근 주문 내역 리팩토링
메뉴 상세 이미지 영역
메뉴 정보/주문 영역
메뉴 주문 영역
공통 컴포넌트(.amount-select)
주문자 사진/리뷰 영역
옵션 선택 영역
주문서 타이틀 영역
주문서 설명 영역
담은 메뉴가 없을 때
담은 메뉴가 있을 때
주문자 정보 영역
주문 매장 위치 영역
개인정보 수집, 제공 영역
오류 시 모달
(보강학습) transition
(보강학습) @media 미디어쿼리

JavaScript 기초 / 프로그래밍 기본

- 프로그래밍
프로그래밍이란?
문법 - 값
문법 - 변수
문법 - 식
문법 - 연산자
문법 - 문
문법 - 함수
JavaScript 기초 / 프로그래밍 기본 - 정리

- 자바스크립트
자바스크립트란?
자바스크립트 배경
자바스크립트 Everywhere
자바스크립트의 미래
강의 수강 방법
기본 문법 및 키워드 (예약어)
변수
값
숫자
문자
연산자
배열
문
함수
객체
함수 스코프
블럭 스코프
JavaScript 기초 / 기본 문법 요약 - 정리

JavaScript 기초 / 개발 환경 및 도구

생태계
에디터 실행 환경
전체 도구 요약
Visual Studio Code
HTML 문서
HTML & JavaScript
DOM 소개
DOM 선택하고 조작하기
디버깅이란?
브라우저 검사 도구 활용하기
에디터를 활용한 디버깅
콘솔 로그 활용
JavaScript 기초 / 웹 브라우저 - 정리

문법 / 값 / 불리언 / 숫자

- 문법
문법 개요
주석
표현식 & 문
제어문과 블록
식별자
리터럴
스트릭트 모드

- 값
타입 시스템
원시 값
객체
원시 값 vs 객체
undefined와 null
원시 값의 래퍼 객체
타입 강제

- 불리언
불리언으로 변환
논리 연산자
동일 연산자, 비교 연산자
Boolean 함수연산자

- 숫자
숫자 리터럴
숫자로 변환
특별한 숫자 값
숫자의 내부 표현
반올림 에러 처리
자바스크립트의 정수
정수로 변환
산술 연산자
비트 연산자
Number 함수
Number 생성자 프로퍼티
숫자 프로토타입 메서드

문자열 / 연산자 / 배열 / 문 / 함수

- 문자열
문자열 리터럴
문자에 접근
문자열로 변환
문자열 비교
문자열 병합
String 함수
문자열 메서드
문자열 인스턴스 프로퍼티 length

- 연산자
연산자와 객체
할당 연산자
동등 연산자
비교 연산자
+ 연산자
불리언과 숫자 연산자
특수 연산자
typeof와 instanceof
객체 연산자
자바스크립트 기본 문법 1차 정리

- 배열
배열 생성과 인덱스
length
Array 생성자 메서드
배열 프로토타입 메서드
유사 배열 객체

- 문
변수 선언과 할당
반복문
조건문
debugger 문

- 함수
함수란
함수 선언
함수 표현식
매개변수와 인자 다루기

DOM / 이벤트 / 스코프 / 객체

- DOM
문서 구조
Node, Tree
브라우저 렌더링
DOM 속성
DOM 선택
DOM 조작

- 이벤트
이벤트란?
이벤트 객체
이벤트 핸들러
이벤트 리스너
자바스크립트 기본 문법 / 2차 정리

- 스코프
변수 선언
정적 vs 동적
변수의 스코프
호이스팅
전역 변수
전역 객체
IIFE

- 객체
객체란?
객체 생성
객체의 속성, 프로터티와 메서드
프로퍼티 접근자(getter와 setter)
프로퍼티 수정
프로퍼티 검사
프로퍼티 열거
접근자(getter와 setter)
프로퍼티 속성과 프로퍼티 서술자
생성자
인스턴스
객체 확장
자바스크립트 기본 문법 / 3차 정리

자료 다루기 / Ajax / 컨텍스트 / This

- 자료 다루기
객체 / Object.keys()
객체 / Object.values()
객체 / Object.entries()
객체 / 객체 순회하기
배열 / 요소 추가와 제거
배열 / 요소 정렬, 역정렬
배열 / 병합, 자르기, 이어 붙이기
배열 / 값 검색
배열 / 순회
JSON
JSON 다루기

- Ajax
HTTP 통신
Ajax
XMLHttpRequest
Fetch
자바스크립트 기본 문법 / 4차 정리

- 컨텍스트
실행 컨텍스트란?
VariableEnvironment
LexicalEnvironment
EnvironmentRecord

- This
This란?
상황별 This
명시적 바인딩
자바스크립트 심화 / 1차 정리

프로토타입 / 클래스 / 클로저 / 비동기

- 프로토타입
프로토타입이란?
constructor
__proto__
프로토타입 체인
메서드 오버라이드

- 클래스
클래스란
인스턴스란
클래스와 인스턴스
클래스 확장
ES2015+ 클래스
자바스크립트 심화 / 2차 정리

- 클로저
클로저란?
메모리
은닉화
커링
활용 사례

- 비동기
비동기와 동기
Callback
Promise
Async & Await

이벤트 다루기 / 모듈 / 예외처리

- 이벤트 다루기
이벤트 전파
이벤트 버블링
이벤트 캡처링
이벤트 위임
debounce
throttle
이벤트 루프

- 모듈
모듈이란
CommonJS
AMD
ES Module
import & export

- 예외처리
예외 처리란?
에러 생성자
스택 추적
커스텀 에러
자바스크립트 심화 / 3차 정리

오늘의 집 Project

Coming Soon!

Node.js

node.js 란
node.js 설치
모듈 패턴
npm

Express

Express 시작
nodemon
Routing
view engine
템플릿상속
미들웨어
form ( body-parser )
정적파일
global view variable
404, 500 error handling
nunjucks macro
Express 권장구조

SQL

Database 기초
SQL 연습
mysql 설치
부록 AWS msyql 설치
Sequelize 란
dotenv 설정
Database 생성
DB 접속
모델작성
DB 입력
DB 조회
상세페이지 작성
Moment.js 적용
DB 수정
DB 삭제

토이 프로젝트 1-5

1. 투두리스트
- 데이터 가져오기
- 입력
- 수정
- 삭제
- 기능 구현하기

2. 투두리스트 페이지네이션 적용
- 페이지 네이션 이론
- 백엔드 페이지네이션 수정
- 페이징 처리
- 데이터 가져오기

3. 야구게임
- 레이아웃 그리기
- 출제자 참가자 인풋 아웃풋 구현
- 반복문 및 코딩 완성

4. 드럼 만들기
- 레이아웃 그리기
- 드럼 키 이벤트 작성
- 키값에 따른 오디오 재생
- 오디오 동작 이후 원상태로 복구

5. 프로그레스바
- html, css 작성
- innerHeight
- scroll에 따른 progressbar 생성

토이 프로젝트 6-10

6. 무한 스크롤
- 첫 페이지 데이터 로드
- 페이지 끝 체크
- ajax 데이터 불러오기
- jquery append

7. 이미지 슬라이더(캐러셀)
- 레이아웃 꾸미기
- 슬라이더 네비 만들기
- 슬라이더가 동작하는동안 네비 기능 막기

8. 유투브 화면구성
- css 를 활용한 반응형 레이아웃
- flex를 이용한 검색바 작성
- video 태그로 영상 제어하기

9. 투두리스트 기능 추가
- 추천 클릭
- POST 액션
- Front 업데이트
- 추천순 정렬클릭
- 화면 업데이트

10. hml5 게임 만들기
- 미정

토이 프로젝트 11-15

11. 모달 팝업
- layout 구성
- 클릭시 모달 오픈
- 바탕 클릭시 모달 사라짐

12. 스톱워치
- setTimeout or setInterval
- stop 구현
- start 구현
- reset 구현

13. 3d carousel 만들기
- layout
- position
- transform rotate
- translate

14. html canvas 를 활용한 차트만들기
- getContext
- fillStyle
- fillRect
- arc, stroke, fill

15. 계산기
- layout
- click event
- 숫자 초기화
- 숫자 지우기

토이 프로젝트 16-20

16. 2d 벽돌깨기 게임
- canvas
- 공움직이기
- 키컨트롤
- 충골감지
- 벽돌 부수기

17. 카카오 지도를 연동한 지도서비스 작성
- 지도 화면 가져오기
- 위도 경도로 상점 출력
- html geolocation 을 활용해 내 위치 가져오기
- 현재 내위치로 화면 이동

18. webrtc 를 활용한 영상 채팅
- MediaStream
- PeerConnection
- SessionDescription
- Signaling

19. 이미지 에디터 만들어보기(포토샵)
- FileReader
- crop
- drag and drop
- canvas

20. 글쓰기 에디터 만들어보기
- Document.execCommand
- font size
- font color
- 링크
- 정렬

TypeScript

Typescript 소개 및 개발환경 구성
Typescript 컴파일러
Typescript 컴파일러 - 설정파일
1번 퀴즈 백엔드 TypeScript 적용
1번,2번 퀴즈 프론트 TypeScript 적용
변수선언
기본타입
인터페이스
함수형타입
enum 타입
클래스 - 1
클래스 - 2
제네릭 - 1
제네릭 - 2
제네릭 - 3
intersection & Union Types
별칭
인덱스 타입

완주반 혜택 모아보기
제로베이스 완주반 특별혜택!

(자동) (자동) (자동)

정가 ~~(자동)~~

현재 판매가 (자동)

12개월 무이자 할부 시 (자동)

수강 신청하기

주의 사항 [환급 기준]
- Zero Base 홈페이지 내에서 주어진 일정에 맞춰 온라인 강의를 수강 한 후, 나의 강의장에 매주 업로드 되는 퀴즈, 과제를 기한 내 제출하면 됩니다.
- 매주차 환급 미션 (퀴즈, 실습과제) 정답률이 각각 50% 이상 되어야 최종 환급 대상에 해당됩니다.
- 퀴즈와 과제 두 가지가 출제되는 강의의 경우 두가지 모두 기한 내 제출 및 정답률이 각각 50% 이상이어야 환급 대상에 해당됩니다.
- 강의 시청 여부는 환급 기준에 포함되지 않습니다.
- 마지막 주에 진행되는 종합평가는 기업에서 신입사원 채용에 활용하는 정도의 난이도로 출제됩니다. 5주 이상 환급완료 & 종합평가시험 정답률 각각 70% 이상을 기록한 분들께는 최종 환급금을 지급해드립니다.

[환급 신청]
- 완주반 개강후 성함, 계좌번호, 통장사본을 안내드린 개강 안내 메일 환급 서류 설문지를 통해 제출해주시면 됩니다..
- 제출해주신 통장사본은 등록해주신 수강생 본인명의여야 합니다.

[환급 절차]
- 매주 미션 완료 후, 환급 대상자는 이메일로 공지해 드리며 2주 이내에 환급해드리고 있습니다..

[환급 주의 사항]
- 총 환급액은 결제 금액을 넘지 않습니다. (ex. 29만원 상품을 5만원 할인 쿠폰을 사용하여 최종 결제액이 24만원일 경우, 최대 환급액은 24만원을 초과하지 않습니다.)
- 환급서류를 개강안내 메일에 고지되어 있는 제출 기한이 지나 제출할 경우 제출 시점 이전의 미션은 환급이 진행되지 않습니다.
- Zero Base 계정 이름과 계좌번호 예금주명이 다를 경우, 환급이 진행되지 않을 수 있습니다.
- 환급서류 제출시 정보 오기입으로 인해 환급 지급이 지체되는 경우 Zero Base의 책임이 없음을 알려드립니다.
- 5만원을 초과하는 환급금은 제세공과금(22%)을 제외하고 지급됩니다.
- 단, 수강료 환급액에 부과된 22%의 제세공과금은 수강생의 종합소득금액과 소득공제액에 따라 전부 또는 일부 환급받으실 수 있으며, 국세청 및 관할 세무서를 통해 환급신청이 가능합니다.

[결제 시 주의 사항]
– 이벤트 50% 할인 쿠폰을 사용하여 결제 하실 경우 주차별 환급금은 정상 환급금의 1/2에 해당하는 금액으로 적용이 되며,
　최종 환급금은 변동없이 진행 됩니다.
– 100% 할인 쿠폰을 사용하여 결제하실 경우 매주 / 최종 / 전액 환급 대상자에서 제외됩니다.
– 쿠폰은 1회에 한해 사용 가능하며, 쿠폰을 적용해 구매한 강의 환불 시 쿠폰은 재발급되지 않습니다.
– 쿠폰을 사용하여 구매하신 강의는 타 강의로 교환이 불가능합니다.

[환불 규정]
– 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
- 중도 환불 시 환급금을 제한 금액으로 환불됩니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 초과 시, 정상(유료) 수강기간인 2개월(60일) 대비 잔여일에 대해 학원법 환불규정에 따라 환불 가능합니다.
: 환불요청일시 기준 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액을 환불
: 환불요청일시 기준 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액을 환불
: 환불요청일시 기준 수강시작 후 1/2 경과 후, 환불금액 없음