인프런 Vue.js

Project/lecture-vue-trello

• 코드 스캐폴딩

• >> vue init webpack-simple lecture-vue-trello

• 위의 명령어를 통해 프로젝트 생성

• >> npm i

• >> npm run dev

• 라우터의 필요성

• 서버 라우팅

• 매번 주소를 요청할때마다 화면이 갱신된다.

• ex) 네이버, 구글

• 브라우저 라우팅

• 주소를 매번 요청 하더라도 화면이 갱신되지 않는다. 대신, 그 화면에 필요한 데이터만 서버에 따로 요청해서 화면을 갱신하는 방법을 사용한다.

• 서버 라우팅과 비교해서 조금 더 효율적으로 화면을 갱신한다.

• ex) 구글메일, 트렐로

• 라우트는 일반적으로 vue-router 를 사용한다.

• Vue-router

• https://router.vuejs.org/kr/

• 설치 후 main.js 에서 Vue.use(VueRouter) 를 해줘야 한다.

• url 에서 # 을 지우려면 router 속성에 mode : 'history' 를 추가하면 된다.

• 뷰 인스턴스

• url 에서 param 가져오기

• 컴포넌트에서 

• this.$route

• 객체 안에 들어있다.

• 자바스크립트에서 XMLHttpRequest를 이용해서 request 요청을 할 수 있다.

• 위의 도구를 대체 하는 라이브러리 >> Axios 

• this.$router.replace('/login') // 이를 이용하여 javascript에서 페이지 이동을 시킬 수 있다.

• Axios 사용 팁 

• 라이브러리를 래핑해서 쓰는것 

• 뷰 라우터의 네비게이션 가드

• 라우팅 직전에 로직을 추가할 수 있는 기능.

• beforeEnter 라는 함수 사용

• Vuex

• vuejs 어플리케이션에 대한 상태관리 패턴 + 라이브러리

• 상태관리 패턴 ? 

• 프론트엔드 라이브러리에 많이 사용됨 

• scaffold >> 폼 자동 생성