Instagram-Vue.js

Instagram-Vue.js is a web-app with Instagram features using Vue.js

all credits goes to -> coding apple

based on the seminar from coding apple

---

Course Outline

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

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

• 개발 서버띄우기

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

• 기본적인 데이터 다루기 (v-bind 데이터바인딩 등)

• 카드 컴포넌트 만들고 첨부하는 법 (.vue 단일 컴포넌트 파일)

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

• 컴포넌트에게 쇼핑몰 데이터 전해주는 법 (Props)

• 기본적인 정렬기능 만들기 (methods)

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

• 컴포넌트에 이벤트 리스너 달아서 정렬 기능 만들기 (native events)

• 유저가 데이터를 바꾸는 역방향 바인딩 (v-model)

• 라이프사이클 함수 (mounted 등)

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

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

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

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

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

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

• 라우터의 children 개념

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

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

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

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

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

• 글작성과 발행기능

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

• 이벤트 버스로 데이터 상위요소에 버스태워 전달하기 (빵빵)

• Slot을 이용해서 조금 쉽게 데이터 전달하기

• Vuex 로 데이터 관리해보기

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

• 요즘 유행하는 Progressive Web App 10초만에 발행하고 셋팅하기

• Github Pages를 이용해 인스타그램 발행과 앱설치 실습