"SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다. 생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다. 그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다. (Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.) Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다. 하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다. SDK랑 크게 다르지 않는 것 같다. 예제 시퀀스 다이어그램 사용자가 Naver 계정으로 로그인 시 Nav..

개념 While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. - vue공식문서 - 공식문서에 따르면 대부분 "computed 속성이 적합하지만, 사용자가 특정 지정한 값을 감시하는 경우을 위해 w..

Vuepress 란? 간단하게 정의 하면 "Vue기반으로 정적 사이트를 생성해주는 도구!" 정적 사이트의 자세한 개념은 넘어 가겠습니돠. 나도 잘 몰라서....😅 Vuepress 이 외 정적사이트 생성기는 1. Gatsby(React) 2. Hugo(Go) 3. Hexo(Javascript) 4. Jekyll(Ruby) 5. Gridsome(Vue) 6. GitBook(Javascript) 이 외에도 다양하게 있다. Vuepress프로젝트 생성하기 Vuepress프로젝트 생성방법은 총 2가지가 있다. Quick Start Vuepress프로젝트 생성과 동시에 기본적인 구조를 자동 생성해주는 방법 Manual Installation 직접 구조를 처음부터 만드는 방법 Manual Installation 방법..

Class 동적 바인딩 Vue로 Front 개발을 하다 보면 동적으로 Class를 추가 또는 삭제를 해야 될 때가 있다. JQuery는 잘모르지만 JQuery에서 addClass(), removeClass()와 비슷한 개념 이다. 딱히 어렵지 않아 예제를 보면 쉽게 이해할 수 있다. 문법 :class="{ '클래스이름' : '조건' }" 조건이 true경우 클래스이름이 바인딩 되고 false경우 바인딩된 클래스이름이 제거 된다. 기초 사용법 Class Bind 바인딩 👉 isBind값이 true경우 red클래스가 바인딩 되어 스타일이 적용되고 false경우 red클래스가 바인딩에서 해제되어 적용된 스타일이 사라진다. red는 아래 style에 정의 되어 있다. 👉 버튼을 클릭하면 setBind()가 실행..

동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라질 경우 동일한 component를 재사용하는 것이 효율적이다. 한 개의 component에 params로 구분해 데이터 값만 변경하면 된다. 그런데 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅을 한번 더 호출하지 않아 문제가 발생한다. 예를 들어 라우터 1로 렌더링 된 component는 다음 라우터 2가 랜더링 될 때 라이프사이클 훅이 호출되지 않아 component는 params가 바뀐지 몰라 created 등이 실행되지 않는다. 문제 해결 router-link 코드 라우터1 라우터2 👉 라우터1 라우터 1, 라우터 2는 home component를 같이 사용한다. component를 같이 사용을 하지만 사용자가 라..