본문 바로가기

개발/Vue.js

Nuxt.js 에서 동적 route시 트랜지션 안되는 문제 해결 사용하고 있는 Layout 의 파일에서 아래와 같이 수정한다. 간단히 설명하자면, 동적 route를 사용하더라도 nuxt-child 에 key를 부여하여 트랜지션이 작동하도록 하는것이다. 참조 : https://github.com/nuxt/nuxt.js/issues/1651#issuecomment-340193233
SPA(Vue.js, Angular, React) 소셜로그인 흐름도 Single Page Application + Restful API + 소셜 로그인 (구글, 페이스북, 트위터, 인스타그램 등등) 을 모두 사용하는 웹서비스를 제작중인데,찾아보다가 결과적으로 아래와 같은 인증 흐름을 적용하게 되었습니다. 사진이 안보이면 사진을 클릭해서 확인하시면 됩니다.Vue.js 나 Angular.js, React 에 라이브러리가 없다면 Vuex, Redux와 같은 상태 저장소를 적절히 섞어서 직접 구현하면 됩니다. 중간중간에 REST API (백엔드)서버에서 access_token과 refresh_token을 데이터베이스에 저장하거나, jwt토큰을 어디다 저장하는지 등의 정보는 나중에 포스팅 하도록 하겠습니다.질문있으면 댓글로 남겨주세요.
Vue.js 에서 컴포넌트 내 method에서 data에 접근할 수 없는 문제 발생 Vue.js 컴포넌트를 정의하던 중, 컴포넌트 내에 method에서 컴포넌트의 다른 메소드와 data의 값을 참조하려니 다음과 같은 오류가 떴다. Uncaught TypeError: Cannot read property of undefined 위의 문제는 여러 문제가 있을 수 있겠으나, 대부분은 ES6의 Arrow function을 써서 생기는 문제이다. 나의 경우 querySearch라는 method를 아래와 같은 방법으로 써서 생긴 문제였다. methods: { querySearch: (queryString, cb) => { .... } } 위 코드를 methods: { querySearch: function(queryString, cb) { .... } } Arrow function을 자바스크립트 ..