Spring Interceptor 동작 방식강의에서 Spring 인터셉터를 사용하는 부분이 있었는데 정확한 동작 방식 사용법을 이해하지 못하였다.이 내용을 정리하고 어떤 식으로 동작하는 한번 같이 알아보자 1. Spring InterceptorInterceptor란 말을 그대로 해석 하면 가로챈다 라는 의미를 가진다.이름 그대로 Spring MVC에서 인터셉터는 특정한 URI 호출을 가로채는 역할을 한다. 인터셉터를 활용하면 기존의 로직을 수정하지 않고, 사전 하우 제어를 수행 할 수 있다.즉, 요청과 응답을 가로채서 원하는 동작을 추가할 수 있는 것이다. 가장 대표적인 예시로 세션을 통한 인증 구현이 있다.요청을 받기 이전에 요청을 가로채서 세션에 로그인한 사용자가 있는지 확인하고 없으면 로그인 페이..
HandlerMethodArgumentResolver 동작호돌맨 님의 강의에서 JWT 토큰을 통한 인증 로직을 사용하기 위해서 HandlerMethodArgymentResolver를 사용하였다.이를 통해서 컨트롤러에 접근 하기 이전 인증 허가를 처리하는 방법을 사용했는데 정확하게 어떤 시점에 사용되는지 등 자세한 내용을 정리해보자 한다. 1. HandlerMethodArgumentResolver 란❔정의는 컨트롤러 메서드에서 특정 조건에 맞는 파라미터가 있을 때 원하는 값을 바인딩 하는 인터페이스이다.이를 이해하기 위해서 Spring MVC의 아키텍처를 가볍게 보고 넘어가보자Dispatcher 서블릿에서 요청된 모든 리퀘스트를 가장 처음 받아준다.(프론트 컨트롤러 역할)그리고 이 서블릿에서 핸들러 조회..
[웹 기초] HTTP 요청/응답 과정웹 서비스를 개발한다면 클라이언트와 서버가 요청과 응답을 통해서 통신을 하게된다.단순하게 요청을 하고 응답을 하는 것에 그치지 않고 이 요청과 응답이 어떤 과정을 거치는지 한번 알아보자1.필요 개념요청과 응답을 설명하기 이전에 인터넷이라는 거대한 네트워크에서 우리가 사용하는 웹이 있다.즉 웹은 인터넷을 이용하는 하나의 거대한 서비스 라는 사실을 기억해야한다. 단순하게 생각하면 요청과 응답은 클라이언트가 서버로 서버가 클라이언로 전달하는 데이터 통신을 말한다.하지만 실제로 우리가 사용하는 브라우저와 서버에서는 요청과 응답을 처리하기 위해서 여러 작업들을 수행하게 되고 우리는 개발자이기 때문에 그 숨겨진 로직을 알고 원리를 이해해야 한다.그 전에 요청 응답 처리에 사용하는..
[FE기초] 이미지&멀티미디어 태그이전 포스팅의 시맨틱 태그, 인라인 블록 요소의 비교에 이어 이미지 & 멀티미디어 태그에 대한 이야기를 해보려 한다.제목 그대로 이미지나 오디오 같은 멀티미디어 요소 그리고 하이퍼링크에 대한 이야기, 경로에 대한 내용을 설명한다. [FE기초]HTML 시맨틱 태그[FE기초]HTML 시맨틱 태그 이전 포스팅에서는 HTML 에서 사용하는 기초 태그에 대해서 알아보았다. HTML 두번째 포스팅에서는 시맨틱 테그와 블록,인라인의 개념에 대해서 한번 알아보자 [FE 기초]HTMLdeveloper-dodo.tistory.com 1. 이미지 태그 라고 표현하며 HTML 문서에 이미지를 넣는다.이미지 태그이런식으로 사용이 가능하다. 태그는 여러개의 속성을 가지고 있다.src : 필..
[JPA] 엔티티 클래스와 요청/응답 클래스JPA를 공부하고 여러 강의를 들으면 모두 엔티티 클래스와 요청/응답 클래스를 항상 분리한다.어림짐작으로 이유를 생각해봤지만 확실한 이유를 정리해보려 한다. 1. Entity & DTO우리는 요청/응답 클래스를 일반적으로 DTO 라고 하며 JPA로 설계한 도메인 클래스를 엔티티라고 하는데 이 두개가 무엇을 의미하는지 한번 알아보자◼ Entity엔티티 클래스는 DB 테이블과 맵핑되는 핵심 클래스DB의 테이블에 존재하는 컬럼들을 필드값으로 가지는 객체를 의미한다.엔티티는 DB 영속성(persistent) 의 목적으로 사용되는 객체이기 때문에 이를 응답/요청에 사용하는 것은 좋지 않다.서비스, 비지니스 로직들이 엔티티 클래스를 기준으로 동작한다.그렇기 때문에 엔티티..
[FE 핵심] CORS 정책게시판을 만드는 간단한 미니 프로젝트를 하는 중 Vue로 프론트를 구성하고 서버로 글 작성 POST 요청을 했는데 CORS 에러가 발생하였다.CORS에서가 악명 높으며, 정의 그리고 해결법이 프론트의 단골 면접 문제라고 한다. 그러면 CORS의 의미와 에러 해결 방법을 알아보자 1. CORS란❔CORS는 Cross-Origin Resource Sharing의 줄임말로, 교차 출처 리소스 공유라는 뜻이다.여기서 출처가 교차한다라는 뜻을 먼저 해석해보자출처는 오리진의 한글 표현으로 URL에서 도메인 + 프로토콜 + 포트를 포함하는 개념이다.출처를 구성하는 요소를 한번 알아보자 출처를 구성하는 핵심 요소 3가지는 프로토콜, 도메인(호스트Name), 포트 3가지로 이 중 하나라도 다..
[알고리즘] 완전탐색 알고리즘 내가 가장 아이디어를 떠올리지 못하는 알고리즘 중 하나이다.시간 복잡도를 고려하다 보니 O(n^2) 시간 알고리즘이 답일까 하는 의문 때문이고 쉽다는 편견이 있어 완탐 문제를 많이 안풀어 정답률이 낮은 편이다.이번 포스팅을 통해서 완탐 알고리즘의 방법을 정리해보려 한다. 1. 완전탐색 이란이름 그대로 완전히 탐색한다는 뜻으다. 즉 가능한 경우의 수를 모두 확인하며 정답을 가지는 바업ㅂ이다.전체를 모두 확인한다 해서 영어로는 Brute-Force 라고 한다.대표적으로 000-999 숫자 3개를 조합한 자물쇠의 비밀번호를 풀때 모든 경우의 수를 체크하는 방법이 있을 것이다. 이 알고리즘의 특징은 반드시 해를 찾는다는 것이고, 단점은 시간 복잡도가 매우 높아질 수 있다는 것이다대..
[FE기초] CSS - Float & Position이번시간에는 CSS의 Float와 Position 요소에 대해서 알아보겠다.이전 포스팅은 아래 링크를 따라가면 된다. [FE기초] CSS - Box Model & Display[FE기초] CSS - Box Model & Display이전 글에서는 CSS 폰트를 다루었다.이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자2024.04.25 - [FrontEnd] - [FE기초]CSS폰트 [Fdeveloper-dodo.tistory.com 1. Float사전적으로 뜨다 하는 의미를 가지고 있다.HTML 요소에서는 float 은 기존의 흐름에서 벗어나 해당 요소가 둥둥 떠다니는 것처럼 배치된다.인접한..
