안루피취뽀일기

카카오 로그인의 흐름은 간단하다. 리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 카카오 API 서버에 넘긴다. 전달받은 정보를 가지고 카카오 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. "애플리케이션 추가하기" 를 클릭! 앱 이름과 사업자명은 필수로 등록 내 애플리케이션 -> 제품 설정 -> 카카오 로그인 카카오 로그인 활성화 켜주기!!!! 카카오 로그인을 사용할 클라이언트 도메인 주소를 입력하는 항목이다. 로컬환경에서 테스트 예정이므로 http://localhost:8080으로 설정! 등록완료 카카오 로그인 활성화 설정 화면에서 아래로 스크롤 하면 Redirect URI 입..

OAuth 로그인..? OAuth는 Open Authorization의 약자로서 2006년에 구글과 트위터가 만든 개방형 인가의 표준이다. 요즘 대부분의 사이트에서 카카오, 네이버, 구글 로그인 등을 지원한다. 사이트에서 직접 회원가입을 하지 않고 위의 소셜 서비스에 로그인을 함으로써 로그인을 할 수 있게 해준다. 이러한 로그인 과정을 OAuth 로그인이라고 하는 것! OAuth2를 본격적으로 알아보기 전에 인증, 인가, 액세스 토큰(access token), 리프레시 토큰(refresh token) 등의 주요 용어부터 알아보자. 인증: 리소스에 접근 자격이 있는지 검증하는 과정으로 OAuth에서 리소스는 보호된 정보를 의미한다. 인가: 자원에 접근할 권한을 부여하는 과정으로 인가가 완료되면 리소스의 접..

REST API에 대해서 알아보기 전에 JSON이 뭔지부터 시작해보자. JSON(Java Script Object Notation) - 자바스크립트 객체 표기법 데이터를 쉽게 '교환'하고 '저장'하기 위한 텍스트 기반의 데이터 교환 표준 JSON은 텍스트 기반이기 때문에 다양한 프로그래밍 언어에서 데이터를 읽고 사용할 수 있다. JSON이 나오기 전에는 XML을 이용해서 프론트와 백엔드가 데이터를 교환했는데 프론트 서버에 보내야하는 데이터보다 XML 태그가 더 많아서 코드를 짜기가 불편하고 힘들었다. 그래서 보다 간단하게 데이터를 교환하자 해서 나온게 JSON! JS 객체를 서버로 전송하려면, 직렬화(문자열로 변환)가 필요한데, 그걸 가능하게 해주는 게 stringify() 다. 서버가 보낸 데이터(JS..

Todo.js - 첫번째 방법 //React 및 관련 모듈을 가져온다. import React, { useState } from "react"; //React Router의 컴포넌트들을 가져온다. import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; //CreatePage 및 ListPage의 컴포넌트를 가져온다. import CreatePags from "./CreatePage"; import ListPage from "./ListPage"; //Todo 함수형 컴포넌트 정의 function Todo() { //Home 컴포넌트 정의 const Home = () => Home; //React State hook을..

1. nodeJs 설치 nodeJs 명령어를 사용해서 파일을 설치하거나 버전을 업데이트하거나 추가적으로 필요한 라이브러리나 프레임워크를 설치할 수 있다. nodeJs = 앱스토어 2. nodeJs 항목에 있는 npx라는 것을 사용해서 react를 세팅할 수 있다. 세팅하는 명령어: npx create-react-app 내가작성하고싶은폴더명 폴더명: 대문자가 들어가서는 안되며, -와 소문자를 활용해서 폴더명을 지을 것! 실행할 때는 npm start를 사용해 실행한다. 리액트를 실행하다가 중간에 필요한 패키지가 발생할 수 있다. 그럴때는 npm install 이나 npm i 를 사용해서 패키지를 설치하면 된다. 대표적으로 많이 사용했던 패키지는 css : npm i bootstrap (className으로..

본격 백엔드와 프론트엔드를 리액트로 연결해보도록 할께요 먼저 터미널을 켜주시고 mkdir node-react-todoList 명령어로 새 폴더를 생성해줍니다. cd node-react-todorist 명령어로 폴더 안으로 들어가 npx create-react-app client 명령어로 client라는 리액트앱을 생성해줍니다. 그러면 이제 이렇게 폴더가 생성되었을 겁니다. 아참 server 폴더는 그냥 여기서 만들어줍니다. 이름은 아무거나 해도 상관없음! server 폴더는 백엔드가 사용하는 폴더이고 client 폴더는 프론트엔드가 사용하는 폴더입니다. 아까 터미널로 생성해준 client 폴더 안에는 이렇게 뭐가 들어있는데 server 폴더는 당연히 비어있겠쥬 다시 터미널로 돌아와 cd node-reac..

JPA에서 가장 중요한 개념 중에 하나인 영속성 컨텍스트(Persistence Context)와 이를 다루는 EntityManager를 알아보자. Entity manager JPA를 사용하기 위해서는 Database 구조와 맵핑된 JPA Entity 들을 먼저 생성하게 된다. 그리고, 모든 JPA의 동작은 이 Entity들을 기준으로 돌아가게 되는데, 이 때 Entity들을 관리하는 역할을 하는 녀석이 바로 EntityManager인 것이다. EntityManager의 동작 JPA는 기본적으로 한 요청 당, 하나의 EntityManager를 사용한다. 또, 각 EntityManager들은 정해진 영속성 컨텍스트를 참조하게 된다. 그리고 이렇게 만들어진 EntityManager로 데이터를 다루려면 가장 먼..

Spring에서 클래스에 컨트롤러를 지정해주기 위한 어노테이션은 @Controller와 @RestController가 있다. 이 2가지 어노테이션의 차이점에 대해 정리해봅시다. 먼저 알아야 할.. @RequestBody, @ResponseBody 어노테이션 보통 웹에서 화면 전환이 없이 이루어지는 동작들은 대부분 비동기 통신으로 이루어진다. 비동기 통신을 하기 위해선 클라이언트가 서버로 요청 메시지의 본문(Body)에 데이터를 담아서 보내야 하고, 서버도 클라이언트에 응답하기 위해 응답 메시지의 본문(Body)에 데이터를 담아서 보내야 한다. 이 때의 본문(body)를 각각 Request Body와 Response Body로 부르는데, 이러한 Body에 담기는 데이터 형식은 JSON(JavaScript ..