세 줄 요약

 

1. 2019년 4월 21일부터 강남역에서 4주간 일요일 10시~1시,

 

2. 인스타그램, 블로그, 부동산앱 등 실전 프로젝트를 만들어보며 Vue.js를 배워보도록 합시다! 

 

5월 5일은 휴무입니다! 다음주에 이어서 3주차 진행됩니다.

 

3. Vue 문법외우기보다는 실전에서 Vue를 활용하는 '패턴'을 위주로 알려드립니다. 개발 패턴 10개만 외우면 누구나 Vue로 웹개발이 가능합니다!

 

(참고) 파일럿 프로그램은 20% 할인 가에 이용가능하며 2기부터는 가격이 인상될 수 있습니다. 

 

더 자세한 정보 및 커리큘럼은 codingapple.com

 

 

 

 

  

 

 

난이도 & 레벨

 

다음과 같은 HTML/CSS 기초내용을 알고계신 분들 께 추천드립니다!

 

- div 를 이용한 간단한 페이지 레이아웃 구축하기 

- 폼 입력과 전송버튼 만들기

- CSS로 스타일 넣기

- onclick, value, id, class 등 간단한 HTML 속성넣기와 용도

 

다음과 같은 JavaScript 개념을 알고계신 분들 께 추천드립니다! 

 

- 모달창 같은 간단한 UI 만들어봤음 

- 함수 만들줄 안다

- 원하는 HTML 요소 찾고 바꾸는 법을 안다

- Array, Object 자료형 만들고 안에있는 자료 뽑는 법을 안다

- map(), sort() 함수를 어디선가 들어봤다 

- for.. in 반복문과 이를 이용해 Array 데이터를 하나씩 뽑아낼 줄 안다

- if와 true/false를 써봤다

 

  

 

 

 

 

담당 선생님

 

박해윤 선생님 

전 IT 외주개발 전문회사 프론트엔드 총책임

음악교육 인강 플랫폼 프론트엔드 개발 담당

현 코딩애플 자바스크립트 4주 단기완성 담당 선생님

 

 

 

 

 

 

준비물 

 

1. 노트북 (맥 or 윈도우)

2. Node.js 설치 

3. 터미널 안다뤄보신 분들은 VS code 에디터 설치 필요

4. 크롬브라우저 

  

 

 

 

 

 

뭘 배우게 되는 건가요?

 

[1~2주] Vue.js 기초와 부동산 사이트 웹버전 만들어보기   

- Vue CLI 프로젝트 기본 설치와 환경셋팅

- 개발 서버띄우기

- Bootstrap-vue를 이용한 UI 개발과 반응형 레이아웃 

- 기본적인 데이터 다루기

- 카드 컴포넌트 만들고 첨부하는 법

- 반복문으로 카드 컴포넌트 여러번 첨부하는 법 

- 컴포넌트에게 쇼핑몰 데이터 전해주는 법 

- 기본적인 정렬기능 만들기

- if문을 이용해 모달창(상품 상세페이지) 만들기 

- 컴포넌트에 이벤트 리스너 달아서 정렬 기능 만들기

- v-model을 이용해 사용자가 데이터를 바꾸는 역방향 바인딩 

- 컴포넌트 라이프사이클(생명주기) 함수의 용도

 

[2주] Router를 이용한 포트폴리오 소개형 블로그 만들어보기   

- Vue CLI로 프로젝트 다시 한번 더 만들어보기 

- Vue-router 설치와 라우터 개념

- 컴포넌트 다시 한번 만들어보기

- 라우터로 페이지 구분하기

- URL파라미터를 추가해서 각각 다른 데이터 보여주기 

 

 

[3~4주] 인스타그램 웹버전을 만들며 배워보는 Vue 실전 프로젝트 

- Vue CLI로 프로젝트 다시 한번.. 만들어보기

- step에 따른 페이지 구분패턴 (왜 이건 라우터로 안만들죠?)

- 웹앱 인스타그램 기획문서를 보고 코드를 짜보자

- FileReader API를 이용한 프론트엔드 환경에서의 이미지 업로드

- 글작성과 발행기능

- 커스텀 이벤트 만들어 사용하기 

- 이벤트 버스로 데이터 상위요소에 전달하기

- Vuex 맛보기 

- Axios를 이용한 Ajax요청 배워보기 

 

번외 : 요즘 유행하는 Progressive Web App 만들기

 

- 파일럿 프로그램은 진도 내용이 약간 변경될 수 있습니다!

 

 

 

 

 

 

 

 

핵심내용 1. SPA 웹 개발이 대세인데 편승해보자!

 

배경 1) 2010년 이후, 보다 빠르고 매끄러운 사이트를 만들기 위해 프론트엔드 개발자를 채찍질해 Single Page Application 를 만들기 시작했습니다. (찰싹)

 

SPA 사이트는 새로고침이 아니라 자바스크립트를 이용해 HTML을 매끄럽게 바꿔치기하며 보여줍니다. 흰 대기화면이 가득한 기존 사이트보다 월등한 UX환경을 제공했죠.  

 

배경 2) 생각해보니 SPA와 모바일 앱은 사용성이 동일합니다. "SPA를 앱으로 이용할 수 없을까?" 라는걸 생각하기 시작합니다. 

 

SPA 사이트를 이용해 앱설치한 것 처럼 사기를 치는 Progressive Web App을 만들기 시작했습니다. 

 

Trivago 라는 여행사이트에서도 PWA를 이용한 앱설치 방식을 도입하자 구매전환율이 2배로 폭등합니다.

 

이에 다른 회사들도 앞다투어 PWA를 도입하기 시작합니다.

 

배경 3) React와 Vue를 이용하면 PWA와 SPA 개발이 쉬워집니다. 그래서 Vue와 React가 다시 한번 흥하기 시작했습니다. 

 

그래서 SPA 개발에 꼭 알아야하는 Vue 류의 프론트엔드 프레임워크를 배워놓아 미래를 대비하는 개발자가 되어보도록 합시다. 

 

   

 

 

 

핵심내용 2. 문법외울 시간에 패턴을 외우자! '패턴'으로 배우는 Vue 기초 

 

뷰를 대표하는 v-for, v-bind, v-model 문법내용 달랑 배웠다고 실전에서 사이트를 만들어낼 수는 없습니다. 

  

코딩애플에선 문법을 실제 상황에서 어떻게 사용하는지 '패턴 중심'으로 교육을 진행하게 되는데 

 

'상품 디스플레이 하는 법' '모달창 만드는 법' 등을 통해 Vue 문법을 배우게 됩니다. 

 

이젠 문법만 외우고 있지 마시고 깔끔히 정리된 '패턴'을 배워서 실제 웹개발에 적용해보시길 바랍니다! 

 

 

▼ 프로젝트 샘플 

(라이브 샘플은 yogoho210.github.io )