공부용

리액트에서 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를 호출해..

저는 trip planner를 기획하면서 메인페이지는 나라소개를 넣었고, 컨텐츠로는 동행찾기 게시판 / 계획짜기 / 회원관리 ( 로그인, 회원가입, 아이디 비밀번호 찾기 등) 을 생각하였습니다. * App.js App.js는 react 에서의 메인시작이다. Main - 메인페이지 login - 로그인 페이지 signup - 회원가입 페이지 search - 아이디 / 비밀번호 찾기 페이지 plan - 계획짜기 페이지 board - 일행찾기 게시판 Main 은 Header + SubHeader + 나라소개 페이지로 구성되어 있다. Header에는 로고 & 멤버 관련 ( 로그인 + 회원가입 ) 으로 구성되어 있다. &Header에서는 로그인 관리로 session을 사용하였다. //관련 url : https:/..

Router router는 특정 url에 페이지를 제공하는 방식입니다. 1. 설치 npm install --save react-router 2. 사용방법 * exact = 이하 경로를 중복 출력하지 않도록한다. * switch = /일때, /하위 경로일때 모두 화면에 출력되지 않도록 한다. Styled-componets styled-componets는 react 요소에 css를 입혀주는 프레임워크입니다. 처음에 css를 1페이지에 1개만 사용하게끔하려했지만, 모든 리액트 페이지에서 css를 공유해서 알아보다가 발견한 프레임워크입니다. 현업에서는 자주 사용하는 프레임워크라고 합니다. 1. 설치 $ npm install styled-components 2. 사용방법 import styled from "sty..

* 모든 글은 글쓴이의 공부하면서 개인의견입니다. 확실한 정보는 아닙니다. - 리액트란 무엇인가 (react 자습서 참고) React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 리액트에서는 class 와 객체로 html 을 만들 수 있습니다. //class 버전 class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); } } //객체 버전 const ShoppingList = ()..

보호되어 있는 글입니다.