필수 실무 케이스로 배우는 Javascript 핵심 문법

[프론트엔드 실무 핵심 문제상황 Top 5를 해결해보면서 배우는 Javascript, ES6 문법]

본 과정은 자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다. 이제 더 이상 자바스크립트 따로 ES6 따로 각각 공부할 필요없이 본 강좌를 통해서 최신의 ES6 문법과 자바스크립트 프로그래밍 언어를 같이 공부해나갈 수 있습니다.

해당 과정은 아래와 같은 커리큘럼으로 구성되어 있습니다.

<교육 내용>

[프론트엔드 개발시 꼭 해봐야하는 실무 예제 Part1 아코디언]

• 실전편 과정개요 및 데모 예제 미리보기

• 아코디언(accordion) 메뉴 만들기(1)

• 아코디언(accordion) 메뉴 만들기(2)

• 아코디언(accordion) 메뉴 만들기(3) - CSS 코드 작업

• 아코디언(accordion) 메뉴 만들기(4) - JavaScript 코드 작업1

• 아코디언(accordion) 메뉴 만들기(5) - JavaScript 코드 작업2

• 아코디언(accordion) 메뉴 만들기(6) - JavaScript 코드 작업3

[프론트엔드 개발시 꼭 해봐야하는 실무 예제 Part2 로컬 데이터]

• 로컬 데이터 - localStorage에 값 저장 및 가져오기(1)

• 로컬 데이터 - localStorage에 값 저장 및 가져오기(2)

• 로컬 데이터 - localStorage에 값 저장 및 가져오기(3) - 스크립트 작성

• 로컬 데이터 - localStorage에 값 저장 및 가져오기(4) - 삭제하기

• 로컬 스토리지(Local Storage) 데이터 값들 출력하기(1)

• 로컬 스토리지(Local Storage) 데이터 값들 출력하기(2)

• 로컬 스토리지(Local Storage) 데이터 값들 출력하기(3) - 배열을 동적 테이블로 붙이기

• 로컬 스토리지(Local Storage) 데이터 값들 출력하기(4) - 로컬 데이터를 동적 테이블로 붙이기

• 로컬 스토리지(Local Storage) 데이터 값들 출력하기(5) - 최종 마무리

[프론트엔드 개발시 꼭 해봐야하는 실무 예제 Part3 테이블 및 쿠키 활용]

• 테이블의 열과 줄을 동적으로 생성하여 삽입하기(1)

• 테이블의 열과 줄을 동적으로 생성하여 삽입하기(2)

• 테이블의 열과 줄을 동적으로 생성하여 삽입하기(3)

• 테이블의 열과 줄을 동적으로 생성하여 삽입하기(4)

• 자바스크립트로 쿠키(Cookie) 읽기, 생성하기, 삭제하기(1)

• 자바스크립트로 쿠키(Cookie) 읽기, 생성하기, 삭제하기(2)

• 자바스크립트로 쿠키(Cookie) 읽기, 생성하기, 삭제하기(3)

• 자바스크립트로 쿠키(Cookie) 읽기, 생성하기, 삭제하기(4)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(1)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(2)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(3)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(4)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(5)

• JS 쿠키 사용자 정의 함수 및 전체 삭제 만들기(6) - 반복문 역순

[프론트엔드 개발시 꼭 해봐야하는 실무 예제 Part4 쿠키 라이브러리]

• 라이브러리를 이용한 JS 쿠키 - jQuery Cookie

• 라이브러리를 이용한 JS 쿠키 - js-cookie(1)

• 라이브러리를 이용한 JS 쿠키 - js-cookie(2)

• 라이브러리를 이용한 JS 쿠키 - js-cookie(3) - 전체 삭제

• userGetCookie 함수 직접 구현하기(1)

• userGetCookie 함수 직접 구현하기(2)

• userGetCookie 함수 직접 구현하기(3) - 연습

• userGetCookie 함수 직접 구현하기(4) - forEach() 메서드 사용

• userGetCookie 함수 직접 구현하기(5) - ES6 버전으로 만들기1

• userGetCookie 함수 직접 구현하기(5) - ES6 버전으로 만들기2

• startsWith 및 find 함수 사용법

[프론트엔드 개발시 꼭 해봐야하는 실무 예제 Part5 가상요소 디자인 및 팝업창]

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(1)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(2)

• 가상 클래스 vs 가상 요소1

• 가상 클래스 vs 가상 요소2

• 가상 클래스 vs 가상 요소3 - 실습

• 가상 클래스 vs 가상 요소4 - 창 닫기 버튼 실습

• 가상 요소로 푸터 디자인 만들기(1)

• 가상 요소로 푸터 디자인 만들기(2)

• 가상 요소로 푸터 디자인 만들기(3)

• 가상 요소로 푸터 디자인 만들기(4)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(3)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(4)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(5)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(6)

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(7) - 스크립트1

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(8) - 스크립트2

• JS-Cookie 라이브러리를 활용한 팝업 창 만들기 및 오늘 하루만 띄우기(9) - 팝업창 디자인변경 및 삭제