요즘 파이썬과 함께 급부상하고있는 자바스크립트 배우기로 결심했는데 

문법책만 보다가 때려친 분들 많으시죠?

그래서 준비했습니다.  

 

모던 쇼핑몰 프론트엔드 개발로 배워보는 자바스크립트 4주 단기완성 강의!

 

 

강남역 5분거리에서 매주 일요일 10시, 4주간 진행됩니다! 

더 자세한 내용보기 & 신청은 codingapple.com

 

 

 

<세 줄 요약>

 

1. 쇼핑몰 프론트엔드 제작으로 배워보는 자바스크립트 기초 단기완성 강좌가 4주간 진행됩니다. 

 

2. 쇼핑몰 프론트엔드 프로젝트를 제작해보며 자바스크립트 기본 Syntax, Selector, 이벤트, jQuery, Ajax수신, UI개발, 데이터 다루기 & 바인딩, Class, ES6 문법, Vue.js 맛보기 등 프론트엔드 개발에 필요한 대부분의 내용을 다뤄보게 됩니다!

 

3. 벌써 누적 수강생 200명의 초절정 인기 강좌! 

 

 

 

난이도 & 대상

 

- HTML/CSS 기초를 아는 분들 (HTML 기초 서적 50페이지 정도 훑고 오시면 됩니다.)

 

- Javascript가 처음이거나 간단한 문법만 조금 아는 분들

 

의 레벨에 맞춰 진행됩니다. 

 

권장 HTML 실력은 

 

- 이미지를 눌렀을 때 네이버로 이동하게 하는 법

- 간단한 리스트를 만드는 법

- 폼 input과 전송버튼 만드는 법 

- CSS로 스타일 넣는 법

 

 

이 정도는 미리 학습하고 오는걸 추천드립니다. 

 

 

 

 

 

<추천 대상>

 

- 생각하는 대로 코드를 짤 수 있는 능력을 기르고 싶다. (핵심)

자바스크립트 문법책만 보면 졸림

- 함수가 자꾸 1급 객체라는데 뭔소린지 모르겠다. 

- 실제 웹개발은 어떻게 하는지 배우고 싶다. 

- 모달창, 탭, 버튼 등 필수 UI 개발에 대해 배우고 싶다.

- 이벤트 객체, 이벤트 bubbling을 이용해 고수처럼 이벤트를 다루고 싶다.  

- 요즘 중요해지는 자바스크립트 data binding을 배우고 싶다. 

- Class(객체지향)에 대해 완벽하게 이해하길 원한다. 

 

- 취업을 목표로 하는 Javascript 포트폴리오를 만들고 싶다.

- 날카로운 Javascript 면접 질문에 대비하고싶다. 

- 기업이 필요로하는 개발 능력을 배우고싶다.

- Vue와 jQuery 3버전을 실전에서 맛보고 싶다.

- 옛기술 보다는 신기술을 배우기 원한다. 

 

  

 

 

 

 

 

 

<커리큘럼> 

* 공식교재는 PPT/PDF 240여장으로 제공됩니다. 

[1~2주] 쇼핑몰 메인페이지와 상세페이지 제작 & 기능개발 

 

- 요즘 웹개발 트렌드 (Javascript로 앱을 만드는 이유) 

- Bootstrap4를 이용해 10분만에 쇼핑몰 메인페이지 만들기 

- 자바스크립트 기초 핥기 프로젝트 

- 로그인/ 회원가입 Modal 창 : 이벤트와 기초 셀렉터

- 로그인/ 회원가입 Modal 창2 : 모던 자바스크립트로 코드 refactoring 

- 상품 진열 및 데이터 다루기 기초 : Array와 Object의 용도, 그리고 간단한 데이터 바인딩

- HTML 요소 찾기와 배치 : vanilla JS 셀렉터와 name, id, data 몰래 심어놓는 법

 

- Bootstrap으로 상세페이지 15분만에 만들기 

- 폼 기능 개발 : 데이터 형식 검사하기 (string validation) 와 if 조건문

- 코드 재사용 : 함수 등으로 비슷한 코드 재사용하기

- 이벤트를 이용한 코드양 줄이기 : Event Bubbling과 Event 객체를 이용해 고수처럼 이벤트 다루기

- 모달창 업그레이드 : 이벤트 객체를 이용해 배경을 눌러 모달창을 닫아보자

- jQuery 입문과 예제 : jQuery를 이용한 손쉬운 기능개발

 

 

 

 

[3~4주] 쇼핑카트 리스트, 결제 폼, Ajax, 애니메이션 등

- Bootstrap으로 장바구니 페이지 10분만에 만들기  

- 중요한 Tab 기능 : 같은 코드 for 문으로 반복하기

- 장바구니 추가 버튼 만들기 : 서버말고 브라우저에 몰래 정보를 저장하기 (Cookie / local Storage)

- 장바구니에 넣을 상품 데이터 구축 : Array와 Object 데이터 다루기 심화  

- 장바구니 품목 바인딩 : 옛날 vs 최신 문법을 이용한 자료 iteration  

- 장바구니 스몰 UI : 버튼 및 계산기능 만들기

 

- 객체지향 프로젝트 (Overwatch 만들기) : 자바스크립트의 Class 와 객체, 그리고 prototype 

- 상품진열 심화 (메인페이지 업그레이드) : Ajax 통신을 이용해 상품목록 더 불러오기 

- 메뉴 숨기기 애니메이션 : Scroll 이벤트와 css 애니메이션 이용하기 

- 결제기능 : 외부 API를 이용해 Paypal 등 간단한 결제 모듈 붙여보기 (요청시)

- Vue.js 프로젝트 : Vue.js 를 이용한 데이터 바인딩과 iteration 맛보기 

 

 

 

 

자바스크립트로 프로젝트를 완성해보며 문법과 논리를 쉽고 빠르게 배워봅시다. 

 

그래서 이번 코딩애플 강좌에서 4주동안 빡세게 실무 프로젝트를 제작해보며 자바스크립트 기본 내용을 배워보는데 

 

1. 자료형/for/if/function 등 기본 Syntax, 

2. Selector 

3. HTML요소 변경 메소드

4. 이벤트학과 이벤트 객체

5, Array/Object 및 데이터바인딩

6. JSON 데이터 다루기 

7. 반복문과 데이터 iteration 

8. Ajax 수신 

9. jQuery

10. 함수화와 객체 지향

11. 간단한 애니메이션

12. Vue.js 맛보기

 

등이 포함되어있습니다.

 

실무에 필요한 기초내용들을 대부분 다뤄보며 프론트엔드 개발자로 커리어 전환점을 만들어봅시다. 

 

 

 

 

 

 

<장점>

 

1. 문법학습보다는 프로젝트 중심입니다.

 

가위바위보, 369게임, 구구단 만들기.. 등 이런 문법 예제코드를 짤 줄 안다고 프론트엔드 개발자가 되는게 아닙니다. 

첫날부터 바로 쇼핑몰 제작! 자바스크립트 문법은 프로젝트를 만들며 맞닥뜨릴 수 있는 실전상황에서 함께 배워봅니다. 

 

 

2. 코드 따라적기식 강의가 아닙니다.

 

선생님 예제코드를 그대로 따라적으면 코딩실력이 상승합니까. 

프로그래밍 논리를 배워본 후 직접 코드를 작성해보는 시간을 많이 가져보게 됩니다. 

 

 

3. 자바스크립트 책 읽어도 혼자 코드 못짜던 분들 많으시죠?  

 

왜 그런지 원인을 짚어드립니다. 

언제나 생각대로 코드를 작성할 수 있는 사람을 만드는게 코딩애플의 목표!

이제는 Coder말고 Programmer가 되어봅시다. 

 

 

 

 

 

 

 

<프로젝트 샘플>

 

 

 

 

 

 

▲ 만들어볼 페이지 3~4개 및 쇼핑몰 필수기능들이 포함되어있습니다.

 

- 메인페이지 상품 데이터 바인딩 

- 모달창

- 탭

- Ajax를 이용한 상품더보기

- 새로고침 없는 상품 가격순 정렬과 가격필터

- 상세페이지 이미지 변경

- 장바구니 추가

- 장바구니 페이지 관련 계산 기능

- 스크롤 애니메이션

- Vue를 이용한 데이터 바인딩

 

 

 

 

 

 

 

 

기타 상세한 커리큘럼은 코딩애플 홈페이지에서 조회가능합니다 

더 자세한 내용보기 & 신청은 codingapple.com