Vanilla JS로 구현하는
인터랙티브 웹 CAMP

JavaScript를 이해하고 내가 원하는 인터랙티브 웹을
직접 구현할 수 있는 능력을 키울 수 있는 기회!

#GSAP, #Parallax Scrolling, #JavaScript

기간 & 일정

2019.5.25. – 7.13. *6/8휴강
매주 토요일 14:00 – 17:00
주 1회, 총 21시간

장소 & 준비물

패스트캠퍼스 강남강의장
강남역 4번 출구, 미왕빌딩
개인 노트북

담당자 & 문의

이유리 매니저
02-501-9695
help.camp.dev@fastcampus.co.kr

인터랙티브 웹 구현을 위한 필수적인 JavaScript 요소만 쏙쏙 뽑아서
전문가의 노하우를 더해, 실무 역량을 강화하는 7주 강의!

나도 인터랙티브 웹 한 번 구현해 볼까? 라고 마음먹었는데,

정작, 새로운 기능을 구현할 때마다 시간을 들여 구글링하기 바쁘셨나요?

눈에 확 띄는 효과를 주고 싶은데, jQuery를 가져다 쓰는 것으론 부족하신가요?

기존에 사용하던 기능을 커스터마이징하기 어려우셨나요?

※ 이해를 돕기 위한 예시 사이트입니다.

그렇다면 이제JavaScript로 직접 구현해 보세요!

단순히 애니메이션 효과가 좋다?

인터랙티브 웹

인터랙티브 웹은 단순히 애니메이션이 효과가 잘 되어있는 웹이 아닙니다.
능숙한 디자이너/웹퍼블리셔라면 좀 더 효과적인 웹사이트를 만들어야 합니다.

평소 코딩이 어려웠다면?

부담없이 코드를 접하고 본인의 업무에 적용할 수 있습니다.
기획자였지만 지금은 개발자인 강사님께서
JavaScript 초보자도 프로그래밍 논리 구조까지 이해할 수 있도록 노하우를 전달해드립니다.

왜 vanilla JS로 배우냐구요?

순수 JavaScript인 vanilla JS를 익힌다면 본인이 작성한 코드를 직접 수정(디버깅 또는 리팩토링) 할 수 있게 됩니다.
개발자와 협업 할 때 원활한 의사소통이 가능하며, 웹 성능을 개선할 때 효율적으로 일할 수 있습니다.

그런데 왜,

Vanilla JS ?

순수 자바스크립트

바닐라JS는 순수한 JavaScript로 다른 부가기능 사용없이 기본적인 기능만으로 구현한다는 말입니다. 즉, 바닐라JS는 새로운 프레임워크 또는 라이브러리가 아닌 순수한 Javascript 뜻합니다.

0 KB ?!

Vanilla JS를 공식 홈에서 다운받으면 0kb로 나옵니다. 잘못받은게 아니냐구요? 네, 아닙니다. Vanilla JS는 브라우저에 내장되어 있기 때문에 별도의 파일이 필요하지 않아 성능이 빠릅니다.

튜닝의 끝은 순정

JavaScript기반의 많은 라이브러리를 사용하는 것도 물론 좋지만, 각각의 라이브러리를 배우고 이해하는 데 걸리는 시간도 만만치 않죠. 튜닝의 끝은 순정이라는 말이 있듯이 Vanilla JS만 제대로 구현할 수 있어도 좋은 퍼포먼스를 낼 수 있습니다.

VanillaJS로

어떻게 배워요?

의사코딩 학습법으로 프로그래밍 사고 체득하기

어렵기만 했던 프로그래밍의 논리 구조! 의사코딩 학습법을 통해 입으로 논리 구조를 설명하고 손으로 직접 코드를 쓰면서 막막하기만 했던 프로그래밍의 논리적 사고를 체득합니다.

매주 실습과 과제를 통해 코드 체화하기

반복 학습은 중요하지만, 실무를 하면서 강의를 듣기란 참 어렵습니다. 따라서, 보다 수업을 잘 따라갈 수 있게 매주 과제를 통해 복습을 하면서 코드를 직접 작성할 수 있는 능력을 쌓을 수 있게 도와드립니다.

공부도 하고!
학습지원금도 받고!

결제액의 15%를 학습지원금으로 드립니다.

패스트캠퍼스의 수강의지를 강화하기 위한 지원금 제도를 운영합니다
패캠이 제안하는 학습 목표를 달성하고 커리어 이상의 성취감을 얻어가길 바랍니다.

*학습지원금은 제세공과금(22%)을 제하고 드립니다.

학습노트

100% 제출

7주 동안

무엇을 배우나요?

1

너도나도 해본 클릭 이벤트, 순수 자바스크립트로!(1)

자바스크립트 변수와 연산자, 데이터 타입의 주요 특징을 파악해 봅니다.

상세 내용보기

– 변수 생성과 주의사항
– 자바스크립트 데이터 타입 ( 문자열, 숫자, Boolean, Null, Undefined, 함수, 배열, 객체 )
– 연산자 ( 사칙 연산자, 비교 연산자, 논리 연산자 등 )
– 원시타입과 참조타입 비교

실습

6개의 정해진 색상으로 배경 색상 변경하기

2

너도나도 해본 클릭 이벤트, 순수 자바스크립트로!(2)

자바스크립트 조건문과 반복문을 학습하고, 스코프, 호이스팅과 같은 중급 개념을 알아봅니다.

상세 내용보기

– 조건문과 논리 연산자, 삼항 연산자
– 전역변수와 지역변수
– 스코프와 스코프 체인
– 변수 호이스팅과 함수 호이스팅
– Math 객체
– parseInt(), parseFloat()
– 반복문 (while, for, forEach, for ~ in, map )

실습

– 숫자와 문자를 조합하여 랜덤한 배경 색상 적용하기
– 랜덤 인용 문구 적용하기
– 글자 전달하기
– 이미지 슬라이드 효과 구현하기

3

인터랙티브한 타이핑 효과 만들어보기

자바스크립트에 존재하는 프로퍼티와 메서드를 살펴봅니다.

상세 내용보기

– 생성자 함수
– prototype과 _proto_, constructor
– this
– 템플릿 리터럴

실습

– 슬라이드 효과 구현하기
– 글자 타이핑 효과 만들어 보기

4

개발자들이 말하는 API, 나도 한 번 써보자

선택자 접근 및 콘테츠 추가, 제거 그리고 CSS 속성 등 DOM과 관련된 자바스크립트 주요 기능을 살펴봅니다.

상세 내용보기

– JavaScript와 DOM
– JavaScript 선택자
– innerHTML, outerHTML
– textContent, innerText
– 콘텐츠 추가와 제거
– CSS 속성 적용방법
– 클래스 접근 방법

실습

– 뉴욕 타임즈 검색 API 활용

5

jQuery에서 흔하게 다뤘던 그 요소들! 자바스크립트로 구현한 코드와 비교하기

제이쿼리 기본 내용과 이벤트의 종류 그리고 this에 대해 알아봅니다.

상세 내용보기

– 제이쿼리 라이브러리 소개
– 선택자
– 이벤트 종류
– this

실습

– 좋아요
– 체크박스
– 프로필 팝업
– Accordion

6

애니메이션의 강자 GreenSock으로 랜딩 페이지 제작하기

GreenSock 라이브러리에 대해서 알아보고, 라이브러리를 활용해 랜딩 페이지를 만들어 봅니다.

상세 내용보기

– GreenSock 라이브러리 소개
– to, from, fromTo
– 속도의 성격 변경하기
– staggerFrom, staggerTo
– Bezier

실습

– 랜딩 페이지 만들기 (1)
– 랜딩 페이지 만들기 (2)

7

사용자의 눈길을 사로잡는 다차원 효과 주기

스크롤 지점을 기준으로 애니메이션 효과를 적용할 때 사용되는 ScrollMagic 라이브러리에 대해 살펴보고, GreenSock 라이브러리와 결합해서 사용하는 방법을 알아봅니다.

상세 내용보기

– ScrollMagic 라이브러리 소개
– 스크롤 지점 설정하기
– 특정 영역 고정하기
– ScrollMagic과 GreenSock

실습

– 간단한 패럴랙스 효과 구현해보기
– 패럴랙스 효과를 적용한 랜딩 페이지 만들어 보기
– 비행기 날려보기

7주 후에 당신은,

이렇게 달라질거에요!

의사코딩 학습법으로
코딩 능력 UP

어렵기만 했던 프로그래밍의 논리 구조! 의사코딩 학습법을 통해 입으로 논리 구조를 설명하고 손으로 직접 코드를 쓰면서 체화합니다.

매주 과제를 통한 복습으로
활용 능력 UP

반복 학습은 중요하지만, 실무를 하면서 강의를 듣기란 참 어렵습니다. 따라서, 보다 수업을 잘 따라갈 수 있게 매주 과제를 통해 복습을 할 수 있게 도와드립니다.

현업 노하우를 통해
실무 능력 UP

현재 실무에서 기획자 겸 프론트엔드 개발자로 있는 강사님을 통해 현업 노하우를 그대로 배울 수 있습니다. 배운 것을 실무에서 바로 적용해보세요!

매주 실습과 의사코딩 학습, 그리고 복습을 통해 JavaScript를 체득하여 상상만 했던 사이트를 이제 내 손으로 직접 구현하세요!

나도 들을 수 있나요?

수강 대상이 궁금해요.

icon_수강대상

추천합니다.

✓ 웹퍼블리셔 혹은 웹디자이너로 업무 능력을 향상 시키고 싶다면!
✓ jQuery에 의존하지 않고 직접 효율적으로 코드를 관리하고 싶다면!
✓ 평소 Vanilla JS를 배워보고 싶었다면!

icon_선수지식

잠시만요! 본 코스는 선수지식이 필요해요.

HTML/CSS 기본 문법에 대한 이해 및 활용 경험이 있어야 들을 수 있습니다. 아래 질문에 모두 대답을 할 수 있다면, 수강이 가능하니 꼭 확인해주세요!

질문 확인하기

– HTML, CSS 레이아웃 속성
– 공간을 만들 때 사용하는 HTML 태그 종류
– 포지션 속성값 static, fixed, relative, absolute 차이점
– float 속성 사용시 주의사항

기획자 + 개발자 =기발자

강사님을 소개합니다.

김인권 강사님

경영학을 전공한 광고기획자 출신 웹개발자로, 현재 스타트업에서 서비스 기획자이자 프론트-엔드 개발자로 근무하고 있습니다. 입문자, 개발자에게 유용한 개발 지식을 전달하는 [나, 개발 한 번 해보려고] 페이스북 페이지를 운영하고 있으며, 저서로는 비전공자를 대상으로 한 <모두의 HTML5 & CSS3>가 있습니다.

기발자 브런치
나, 개발 한번 해보려고

강사님이 만드신 사이트를 통해 수강 내용을 눈으로 확인하시고, 지금 바로 수강신청하세요!

이미지를 클릭하면 강사님이 제작한 사이트를 확인할 수 있습니다.

본 강의(VanillaJS로 구현하는 인터랙티브 웹)를 기획할때 제가 공부하면서 경험했던 내용을 바탕으로 입문자 입장에서 쉽게 배울 수 있게 커리큘럼을 구성했습니다. 버튼을 누르면 색이 바뀐다와 같은 단순한 기능 구현을 시작으로 일정 시간이 지나면 텍스트가 자동으로 완성되고 삭제되는 행위를 반복하는 복잡한 기능 구현까지 말이죠. 특히, 실무에 자주 사용하는 기능 위주로 구성하면서 이를 자신만의 로직으로 기능을 구현할 수 있게 도와드리고자 합니다.

VanillaJS로 구현하는 인터랙티브 웹은, HTML/ CSS로 레이아웃 작업을 진행할 수 있다면, 강의를 수강할 수 있습니다. 제이쿼리 대신 본인만의 로직으로 기능을 직접 구현하고 싶거나 리액트, 뷰와 같은 프론트엔드 기술을 익히고 싶지만 자바스크립트주요 개념 때문에 다가가기 힘들어하는 분들에게는 꼭 필요한 강의라고 생각합니다.

{ FASTCAMPUS COMMUNITY MEMBERSHIP }

패스트캠퍼스 오프라인 강의를 수강하셨다면!
별도의 가입절차없이 패스트캠퍼스 커뮤니티 멤버쉽 회원이 됩니다.
커뮤니티 멤버쉽은 수강 후 1년 동안 유지되며,
오직 멤버들만을 위한 비공개 스터디클럽, 네트워킹행사, 세미나 등 비정기적 행사에 모실 예정입니다.

매주 목요일마다 할인 마감!

수강료 안내

강의 정보, 한 번 더 확인!

기 간 : 2019. 5. 25. ~ 2019. 7. 13. (총 7주)
일 정 : 토요일 14:00 – 17:00 (주 1회 3시간)
준비물 : 개인 노트북 권장
장 소 : 패스트캠퍼스 강의장


85만원 100만원

출시 할인 | 15% OFF

✓ 5월 16일 자정에 할인이 마감됩니다.
✓ 매주 목요일마다 가격이 소폭 상승합니다.

다음 모집은 언제죠?

출시알림을 신청해주세요

최저가로 강의를 수강할 수 있게, 강의 홍보 시작 시 가장 먼저 메일을 보내드립니다.

수업을 듣기 전 위치 확인은 필수!

강의장 안내

인터랙티브 웹 구현을 위한 JS 를 배우고 싶다면! 지금 바로 신청하세요.

학습 지원 프로젝트

공부도 하고! 학습지원금도 받고!

*학습지원금(제세공과금 22% 차감 후 지급)은 강의마다 개인마다 상이할 수 있습니다.

학습 목표. 학습노트 제출

매 수업 전날 24:00까지 폼스택으로 과제 이미지 제출.
1주차 : 5월 31일
2주차 : 6월 7일
3주차 : 6월 14일
4주차 : 6월 21일
5주차 : 6월 28일
6주차 : 7월 5일
7주차 : 7월 12일

학습지원금을 받으려면?

미션을 모두 완료하면 신청페이지를 통해 신청 가능합니다.
다만, 강의 종료 후 30일 이내에 신청페이지를 통해서 신청해주셔야 합니다.
아래의 환급신청 링크로 신분증 사본 / 환급받을 통장사본을 제출 (반드시 본인 명의로만 가능)해 주세요.
결제한 수강료의 10% (환급 금액의 22% 제세공과금으로 차감) 를 드리며, 학습지원금은 개인마다 상이할 수 있습니다.

환불규정

* 학습지원금은 기수강생 및 얼리버드 할인과 중복 적용이 가능합니다. (기타 다른 이벤트와 중복 적용이 불가합니다.)
* 과제물이 허위로 작성되거나 표절일 경우 환급이 거절될 수 있습니다.
* 환불은 환불규정(https://www.fastcampus.co.kr/refund/)에 따라 진행됩니다. 규정에 의거하여 환불금액이 없을 수 있습니다.