공부용

리액트에서 sns로그인 호출하는 틀은 비슷했다. 발급받은 클라이언트 키를 가지고 auth_uri에 code값을 요청하는것이다. front https://github.com/Jang-JinYoung/react-sns-login GitHub - Jang-JinYoung/react-sns-login Contribute to Jang-JinYoung/react-sns-login development by creating an account on GitHub. github.com backend 수정예정

1. https://developers.kakao.com/ 접속한다. 2. 계정이 없으면 새로 만들고, 계정이 있으면 상단에 내 애플리케이션을 누른다 3. 애플리케이션 추가하기를 누른다. 4. 애플리케이션 이름과 회사명 필수조건 체크를 한다. 5. 사용자 정보를 가져오기 위해서는 id_token이 필요한데 이 id_token을 가져오기 위해서는 로그인 하였을때 제공해주는 1회성 code값을 필요로 합니다. 6. 좌측 메뉴에서 동의항목으로 이메일 설정을 합니다. 7. 보안에서 id_token을 가져오기 위한 Client Secret을 생성한다. 8. 좌측 메뉴에서 플랫폼에서 Web Platform 등록을 하여, 기본 도메인을 설정한다. 9. 좌측 메뉴에서 카카오 로그인을 누르고, Redirct URI을 설..

회사에서 SNS 로그인 기능을 담당하기로 했다. 근 2주간 SNS 로그인 기능을 개발하였고, 어느정도 마무리가 되어가는 과정이기에 추후에 또 사용하기 위하여 글을 기술하려고 한다. 적용한 SNS 로그인은 카카오(kakao), 네이버(naver), 구글(google), 애플(apple) 이다. 물론 좋은 로그인 라이브러리도 많았지만, 라이브러리 없이 개발을 하였다. Front : react Language : javascript Back : spring boot Language: java 11 카카오부터 시작하여 네이버, 구글 애플까지 개발하면서 거친 과정을 기술하려고 합니다. 로직은 비슷합니다. 사용자가 로그인하였을때 SNS에서 제공하는 1회성 코드를 받습니다. 그 코드를 가지고, SNS API를 호출해..

0. axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. 쉽게 말해서 백엔드 데이터를 프론트에 가져온다.. 라는것으로 정의할 수 있다! 1. 설치 npm install --save axios 2. 코드 ./src/view/axios.vue 번호 제목 작성자 날짜 {{board.id}} {{board.title}} {{board.writer}} {{board.writeDate}} button button을 누르면 foo라는 함수..

0. 믹스인 Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법입니다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있습니다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”됩니다. // 관련 url https://kr.vuejs.org/v2/guide/mixins.html 믹스인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 1. 준비 1.1. ../assets/mixins.js export const mixins = { data () { return { counter : 10 } }, methods: { addCounter() { this.counter++; }, subCounte..

0. vuex vuex는 vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리이다. 상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙과 함께 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할 // 공식 url https://vuex.vuejs.org/ What is Vuex? | Vuex What is Vuex? NOTE This is the docs for Vuex 4, which works with Vue 3. If you're looking for docs for Vuex 3, which works with Vue 2, please check it out here. Vuex is a state management pattern + library for Vue.js a..

0. 시작하기 부모에서 자식으로 데이터를 주는 props와 자식에서 부모에게 데이터를 주는 emit을 한번 사용해보려고 한다. 1. props // src/components/props.vue child counter : {{ counter }} + - props에서 부모에게서 받는 counter를 사용한다고 등록한다. // src/view/props.vue parent counter : {{ counter }} + - script 단에서 components 폴더에 있는 props.vue 파일을 import 시킨 후, components 에서 props를 사용한다고 등록한다. 그후 template에서 props라는 태그를 적어준 뒤 v-bind로 counter를 전달한다. parent counter의 +..

0. 시작 router로 v-if와 v-on을 볼 새로울 페이지를 만든다 (이전까지 했으므로 과정은 생략한다) 1. v-for에서 썻던 template를 가져온다 // ./src/view/vif.vue //3. 사용 2. v-if와 v-on btn html 태그안에 v-if를 넣어서 사용할 수 있다. v-on 은 보통 어떠한 액션들을 취했을때 실행시킬수 있다. 여기서는 func라는 기능이고, 이걸 methods: {} 안에 넣어서 실행시켰다. 만약 show변수가 true라면 테이블이 보여질것이고 show변수가 false라면 테이블은 보이지 않을 것이다. // 출처 : https://uxgjs.tistory.com/119 Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 ..

// 참고 url : https://mkil.tistory.com/518 Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지 1.템플릿 문법이란 뷰의 템플릿은 HTML, CSS 등의 마크업속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 말한다. 여기서 템플 mkil.tistory.com 0. 템플릿 문법 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 html 변환 크게 데이터바인딩과 디렉티브로 나뉜다. 0.1 데이터 바인딩 문법 설명 {{}} 뷰 인스터의 데이터를 html 태그에 연결하는 텍스트 삽입 방식 v-bind 아이디, 클래스, 스타일 등의 html 속성 값에 뷰 데이터값 연결 0.2 디렉티브 이름 설..

0. router? 클라이언트 요청에 따라 해당하는 컴포넌트를 불러와 입힐수 있다. https://router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. router.vuejs.org 1. 설치 np..