v-on v-bind와 마찬가지로 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. @는 v-on:의 축약표현, v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있다. 클릭 클릭 [v-on] : input v-on:input 은 키다운 개수를 카운트 한다. cnt2:{{cnt2}} [v-on] : v-for에 v-on 사용 {{img.title}} return 초기 이미지 값(initimg)을 설정해 주고 v-on:click="initImg=img.url" 란 {{img.title}} 을 클릭할 때 초기 이미지로 주었던 값을 v-for="img in imgs" 에 있는 img.url 로 바꿔 달라는 의미이다. {{msg + ': ..

[최종 완성본] [진행 순서] 네이버 아이콘 클릭 -> 네이버 로그인 창 -> 로그인하는 순간 -> 요청 값들을 가지고 -> redirect 페이지로 이동 -> Access Token 발급 -> 토큰을 이용해서 사용자 정보 가져오기 -> 사용자 정보가 DB에 있는지 확인 -> 없다면 회원가입 -> 있다면 자동 로그인 [네이버 아이콘 클릭] @click 이벤트를 만들어 놓고 아래의 method 실행 @click="naverlogin" 메서드 naverlogin() { let client_id = "본인 client_id" let redirect_uri = encodeURIComponent("redirct_url", "UTF-8") const state = this.generateRandomState() c..

1편에서는 kg이니시스 결제 창을 띄우는 것 까지 해봤다. 사실 api 가 문서를 읽고 분석하는데 제일 오랜 시간이 걸리지 한번 해 놓기만 하면 그렇게 화려한 기능이 아닐 수 가 없다. 약간 뭔가 되게 많이 한 기분.. 많이 한 척 할 수 있음... 핫 그렇다면 이제 결제가 성공 했는지 안했는지 확인을 어떻게 해야 하는지 알려면 문서를 또 봐야한다. [문서확인] 아래의 아임포트 github에서 README.md를 클릭하여 조금 내리면 아래와 같은 메세지를 만날 수 있다. GitHub - iamport/iamport-manual: 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. 아임포트(iamport) 결제연동을 위한 매뉴얼입니다. Contribute to iamport/iamport-manual ..

카카오톡 로그인 메서드 구현 kakaoLogin() { const redirect_uri = 'http://localhost:8182/kakaojoin'; const clientId = '자신의 키'; const Auth_url = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirect_uri}`; window.location.href = Auth_url; } created 함수 적용 카카오디벨로퍼스에 미리 정해 놓은 클라이언트 측 redirect_uri 페이지를 component로 작성한다. 그 뒤 해당 페이지가 로딩되자마자 인자로 받았던 인가코드를 빼내어 카카오톡에게 ..