Dev Log

React CORS 설정 - 프록시 (http-proxy-middleware)

CORS란웹 브라우저에서는 보안상의 이유로, 다른 출처(origin)에서 자원을 요청하는 경우 제한한다.이것을 **SOP(Same Origin Policy)** 동일 출처 정책이라 한다. 즉, 동일 출처(Same-Origin) 서버에 있는 리소스는 자유로이 가져올 수 있지만, 다른 출처(Cross-Origin) 서버의 리소스는 상호작용이 불가능하다는 말이다.Cross-Origin Resource Sharing직역하면 "교차 출처 리소스 공유 정책"이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다. ’서로 다른 출처에서 리소스를 공유하는 것’을 뜻한다. 출처(Origin) 란?출처(Origin)라는 것은 Protolcol과 Host 그리고 Port..

React 설치 및 실행 / 프로젝트 구조 정리

Node.js 설치Node.js 설치https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org원하는 Node.js 버전을 선택하여 설치한다.설치 확인node -vnpm -vReact Project 생성프로젝트 생성npx create-react-app [프로젝트명]생성한 react app을 실행cd [프로젝트명]npm start  Can’t resolve ‘web-vitals’ Error 조치방법더보기 web-vitals 설치 후 재실행npm i web-vitals --save-devVS Code로 React Project..

React 기본 개념 정리

React란?React는 Facebook에 의해 출시되었고 현재까지 꾸준한 인기를 누리고 있다.Facebook은 매우 복잡한 사용자 인터페이스를 가지고 있으며, 수많은 컴포넌트로 구성되어 있다.기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 React를 만들었다.리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.출처 : 위키백과React가 개발된 이유 웹 개발이 복잡해짐에 따라 HTML, CSS, Javascript만으로는 한계가 생기게 되었다.이후 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게 해 주는 jQuery 라이브러리가 주로 사용되었다. jQuery를 사용하..

RequestBodyAdvice 인터페이스 파해치기

IntroRequestBodyAdvice는 Spring MVC에서 요청 본문을 읽고 처리하기 전에 특정 작업을 수행하거나, 읽은 본문 데이터를 변경하고자 할 때 사용된다. 주로 JSON, XML 등 요청 본문에 포함된 데이터를 Handler(Controller)로 전달하기 전에 특정 요구사항에 맞게 가공하거나 검증하는 데 활용된다.@RequestBody가 적용된 요청에서만 호출된다.RequestBodyAdvice가 실행되고, 그 후 ArgumentResolver가 실행된다.RequestBodyAdvice는 여러 개를 등록할 수 있다.Spring은 @ControllerAdvice를 통해 등록된 모든 RequestBodyAdvice를 스캔하고 실행한다.@Order를 활용해 실행 순서를 조정할 수 있다.sup..

ResponseBodyAdvice 인터페이스 파해치기

IntroResponseBodyAdvice는 Spring MVC에서 Handler(Controller) 처리 후, 클라이언트로 전달되기 전에 공통적으로 처리하거나 수정하고자 할 때 사용된다.ResponseBodyAdvice는 @ResponseBody가 설정된 controller가 반환된 이후 실행된다.ResponseBodyAdvice 인터페이스를 상속받아 구현하고 구현체에는 @ControllerAdvice어노테이션을 추가한다.@ExceptionHandler을 사용하고 있다면 @ExceptionHandler가 먼저 호출되어 발생한 예외를 처리한 후 ResponseBodyAdvice 구현체가 호출된다.ResponseBodyAdvice는 여러 개를 등록할 수 있다.Spring은 @ControllerAdvice..

Jackson - ObjectMapper 사용법 (readValue, writeValue, JsonNode, ObjectNode)

Intro이전글에서 ObjectMapper 설정에 대해 정리하였다. 이번글에서는 ObjectMapper를 사용법에 대해 정리해보고자 한다.  Jackson - ObjectMapper Custom 설정IntroJackson 라이브러리는 자바에서 JSON 데이터를 처리하기 위한 라이브러리다.Jackson의 ObjectMapper는 자바 객체와 JSON 데이터 사이의 직렬화와 역직렬화를 담당하는 클래스다. 직렬화(Sefvor001.tistory.com readValue() - 역직렬화JSON 문자열 또는 파일 등의 데이터를 Java 객체로 변환한다.Jackson은 리플렉션(Reflection)을 사용하여 객체를 생성하기 때문에 역직렬화를 위해서는 기본생성자가 반드시 필요하다. T readValue(String..

Jackson - ObjectMapper Custom 설정

IntroJackson 라이브러리는 자바에서 JSON 데이터를 처리하기 위한 라이브러리다.Jackson의 ObjectMapper는 자바 객체와 JSON 데이터 사이의 직렬화와 역직렬화를 담당하는 클래스다. 직렬화(Serialization)일반적으로 직렬화는 객체의 상태를 저장하거나 다른 환경으로 전송 가능한 형태로 변환하는 과정을 의미직렬화된 형태는 바이트 스트림, JSON, XML 등이 될 수 있다 역직렬화(Deserialization)직렬화된 데이터(바이트 스트림, JSON, XML 등)를 원래의 데이터 형태(객체, 데이터 구조 등)로 복원하는 과정을 의미 ObjectMapper Custom 설정이 왜 필요할까?기본적으로 스프링부트는 실행이 될 때 ObjectMapper가 설정되어 있는지 확인을 하고..

Spring Security + JWT + OAuth2 적용하기 (4/4)

IntroOAuth 개념, 동작원리, 네이버/카카오 애플리케이션 등록방법은 이전글에서 정리하였다.OAuth 개념 파해치기 (1/4)OAuth 네이버, 카카오 애플리케이션 등록 (2/4)OAuth Authorization Code Grant 동작 원리 (3/4) dependency org.springframework.boot spring-boot-starter-oauth2-client   application.yml더보기spring: security: oauth2: client: registration: naver: client-id: {client-id} client-secret: {client-secret} ..

OAuth Authorization Code Grant 동작 원리 (3/4)

IntroOAuth2 프로토콜에서는 다양한 클라이언트 환경에 적합한 인증 및 권한의 위임 방법(Grant Type)을 제공하고 그 결과로 클라이언트에게 Access Token을 발급한다.4개의 권한 위임 방법이 있으며 아래와 같다.Authorization Code (권한 부여 승인 코드 방식)Implicit (암묵적 승인 방식)Client Credentials (클라이언트 자격 증명 승인 방식)Resource Owner Password Credentials (자원 소유자 자격증명 승인 방식)가장 많이 사용하는 Authorization Code (권한 부여 승인 코드 방식)의 동작 원리에 대해 정리하고자 한다.OAuth인증의 최종 목적은 Access Token을 발급하는 것이다.한 번의 인증 이후에 실제로..

OAuth 네이버, 카카오 애플리케이션 등록 (2/4)

IntroOAuth 서비스를 이용하기 전에 Client를 Resource Server에 등록해야 하는 작업이 선행되어야 한다.이때, Redirect URI도 등록해야 한다.  Redirect URI은 사용자가 OAuth 2.0 서비스에서 인증을 마치고 (구글, 네이버, 카카오 등의 로그인 페이지에서 로그인을 마쳤을 때) 사용자를 리디렉션 시킬 위치이다. Redirect URIOAuth 서비스는 인증이 성공한 사용자를 사전에 등록된 Redirect URI로만 리디렉션 시킨다.  일부 OAuth 서비스는 여러 Redirect URI를 등록할 수 있다.Redirect URI는 기본적으로 보안을 위해 https만 허용된다. 단, 루프백(localhost)은 예외적으로 http가 허용된다.Client ID, Cl..