Dev Log

React 로그인 구현 (JWT)

토근 저장 방법 (HTTPOnly 쿠키 / localStorage)HTTPOnly 쿠키장점보안 클라이언트 측 스크립트(JavaScript)에서 접근할 수 없기 때문에 XSS(Cross-Site Scripting) 공격으로부터 보호된다자동 전송 요청을 보낼 때 브라우저가 자동으로 쿠키를 포함시켜 주기 때문에 개발자가 직접 토큰을 헤더에 추가할 필요가 없다SameSite 속성 쿠키의 SameSite 속성을 통해 CSRF(Cross-Site Request Forgery) 공격을 방지할 수 있다단점특정 도메인 제한 특정 도메인에만 저장되므로, 도메인 간에 토큰을 공유하기 어려울 수 있다localStorage장점간편함 데이터를 저장하고 불러오는 방법이 간단하다브라우저 전역 접근 동일한 도메인 내의 모든 탭과 창에..

React Modal 구현하기 (Alter, Loading)

모달(Modal)과 팝업(Popup)Popup현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것Modal일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미사용자의 이목을 끌기 위해 표현하는 화면 전환 기법화면 전환 보다는 이목을 집중해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식중요한 정보 전달 혹은 사용자에게 작업에 대한 내용 확인팝업처럼 새로운 창을 띄우는 게 아니라, 기존 열려있는 브라우저 위에 레이어 깔기기존 브라우저와 부모-자식 형태의 관계모달 창을 사라지게하려면 반드시 특정 선택을 해야 함.⇒ 다음 단계로 나아가기 위해 필요한 창브라우저 옵션에 영향을 받지 않음공통점특정 영역 위치에 원하는 사이즈로 별도의 레이어를 만..

React axios 모듈화

fetch, axios 기본 개념기본 제공 여부Fetch: 브라우저에 내장된 JavaScript API로 별도의 설치가 필요 없다.Axios: 외부 라이브러리로 사용하기 전에 설치가 필요하다npm install axios 기능 차이 Fetch기본적인 HTTP 요청만 제공요청과 응답 처리 시 JSON 변환 등을 수동으로 처리해야 함요청 타임아웃, 응답 데이터 변환 등의 고급 기능은 직접 구현해야 함fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .th..

React-Router-Dom 정리

Routing라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 조금 풀어서 얘기하면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다.React는 SPA(Single Page Application)로 구성되어 있기 때문에 경로가 변경된다고 페이지가 갈아 끼워지는 게 아닌, 컴포넌트가 갈아 끼워지게 된다.React는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서, Router 라이브러리를 별도로 설치해 사용해야 한다.React-Router-DomReact 애플리케이션에서 페이지를 탐색할 수 있도록 도와주는 라이브러리 특징SPA 라우팅 React 애플리케이션은 보통 하나의 HTML 페이지에서 ..

React Hook 기본 정리 / Custom Hook

React Hook의 등장배경리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 함수형 컴포넌트에 Hook이 나오기 전까지는, 일반적으로 클래스형 컴포넌트를 많이 사용했다. 하지만 클래스형 컴포넌트에서 상태(state)를 사용하고, 생명주기 메서드를 사용하는 방식은 많은 문제들과 불편함을 가지고 있었다.  React Hook은 클래스형 컴포넌트의 단점을 보완하여, 함수형 컴포넌트를 사용할 수 있도록 한다. React Hook리액트 16.8 버전에 새로 도입된 기능으로, 함수형 컴포넌트에서 사용되는 몇 가지 기술들을 일컫는다.  리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다. React Hoo..

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..