해민

[backend] HTTP의 동작 방식과 프로토콜

HTTP ?HyperText Transfer Protocol 의 약자로 웹에서 클라이언트와 서버가 통신할때 사용하는 프로토콜이다. HTTP의 특징한번 요청 하고 응답받으면 연결을 종료하며 상태 정보를 서버가 저장하지않는다.즉 모든 요청이 독립적이며 이전 상태를 기억하지않는 무상태 프로토콜 이다. 왜 무상태 프로토콜일까 ? 웹 페이지는 빠르고 간단하게 전달하고 돌아가는것이 중요하다서버가 모든 요청에 대한 것을 기억하고 저장하게 된다면 서버에 더욱 많은 메모리 손실과 성능이 저하될 수 있다 따라서 요청이 올때마다 독립적으로 처리하며 이전 요청에 대한 상태를 저장하지 않으므로써 시스템이 더욱 단순하고 빨라지게된다. 프로토콜이란? 컴퓨터들끼리 통신할때의 규칙 또는 약속을 의미한다.모든 컴퓨터나 스마트폰..

[Backend] 세션, 쿠키의 동작방식과 JWT의 동작방식 그리고 JWT + 서버 세션 기반 인증

우선 설명하기 앞서 무상태 프로토콜에 대해서 간략히 알아보았다. 무상태 프로토콜Http는 기본적으로 무상태이며, 이전에 들어왔던 요청이나 로그인 여부에 관한 정보를 서버에서 기억하지 않는다. 서버가 정보를 저장하고있지 않기때문에 요청 하나하나가 독립적이게 되어 더욱 단순한 시스템 설계라는 장점이있지만요청을 보낼때마다 매번 인증정보를 전달해야하며 로그인 상태 등의 정보들을 유지/관리가 번거롭다. 따라서 무상태인점을 보완하기 위해서 세션 - 서버가 사용자 상태 저장쿠키 - 클라이언트가 상태 저장JWT - 토큰에 상태를 저장해 클라이언트가 가지고 있음이 세가지를 통하여 인증 및 상태저장 및 관리를 하는것이다. 🤔상태 저장이란 뭘 의미하는걸까무상태인 프로토콜 대신 세션,쿠키,JWT 등에 사용자의 정보와 인..

프론트에서 axios로 MultipartFile를 전달해보겠다. 우선 Axios로 MultipartFile을 보내기 위해서는 FormData 객체를 사용해야한다. ❓ FormData를 사용하는 이유파일 업로드에 최적화된 형식이며 텍스트 + 파일을 함께 보낼 수 있기때문에 백엔드에서 @RequestParam으로 받을 수 있다. 그리고 FormData를 사용하면 Axios가 Content-Type header를 자동으로 설정해준다. 이때 multipart/form-data는 boundary라는 하나의 요청안에 여러 개의 데이터를 서로 구분해주는 경계선이 필요하다.이것을 Axios가 FormData객체를 감지해서 자동으로 생성해주는데 직접 headers: { "Content-Type": "multipar..

관리자 페이지를 만들다가 최근 7일의 회원가입 수를 통계해서 한눈에 볼 수 있다면 좋겠다 생각이 들었다. 1. API 요청을 받아 Service 로직에서 최근 7일의 날짜와 가입 수를 가져온다.더보기◾ Repository@Query(nativeQuery = true, value = "WITH RECURSIVE date_seq AS (\n" + " SELECT CURDATE() - INTERVAL 7 DAY AS dt\n" + " UNION ALL\n" + " SELECT dt + INTERVAL 1 DAY\n" + " FROM date_seq\n" + " WHERE dt + INTERVAL 1 D..

프로필 변경하는 기능을 구현하고있었다. 프론트에서 axios로 요청을 할 경우 직접 content-type으로 지정하지 않고 자동으로 지정하게 두어야한다. //업로드 이미지 uploadImage: async (file) => { const formData = new FormData(); formData.append("file", file); const result = await instance.post( `${KH_DOMAIN}/user/uploadimage`, formData ); return result.data; },👉 formData를 통해 file을 담아 요청에 포함하여 전송한다. axios는 formData로 넘길 경우 Content-Type:..

오늘 토큰만료 시 로그인할때 Cookie에 저장해둔 RefreshToken을 통해 토큰을 재발급을 받으려고 했는데 문제가 발생했다 . 우선 로그인 하였을때 쿠키를 집어넣는 코드를 보았을때 ◾ AuthService//로그인 함수{ Cookie refreshTokenCookie = new Cookie("refreshToken",tokenDTO.getRefreshToken()); refreshTokenCookie.setHttpOnly(true); //JS 접근 불가 refreshTokenCookie.setSecure(false); // HTTPS 연결에서만 전송 refreshTokenCookie.setPath("/"); //모든 경로에서 ..

회원가입 폼을 만들면 다양한 정보를 입력받는 여러 input들이 있다. 회원가입폼에 필요한 것들을 정리해보자면 👉 입력 필드들의 상태를 관리하기위한 변수👉 유효성 검사를 하기 위한 함수와 만족 여부를 확인하기 위한 변수👉 에러 메시지를 띄우기 위한 메시지 변수 정말 여러 가지들이 들어가야하기 때문에 굉장히 비슷한 성질의 여러 코드가 들어가게된다. 너무 길어지는 코드에 좋은 방법이 없을까 하다가 지피티님이 방법을 추천해주셨다. React-hook-form + yup 을 활용한 폼 ❓ React-hook-form 이란유효성 검사를 쉽게 할 수 있는 리액트의 라이브러리로써 폼을 유연하고 쉽게 구현이 가능하도록 지원해준다.유효성 검사는 물론 상태관리와 에러 메시지 까지 한꺼번에 관리할 수 있다. 물..

지네릭스? 지네릭스란 다양한 타입의 객체들을 다루는 메서드 혹은 컬렉션 클래스에 컴파일 시 타입을 체크해주도록 하는 기능이다.컴파일시 생성된 객체의 타입을 체크해주기 때문에 타입의 안정성을 높이고 형변환이 간편하다는 장점이있다. ✍️ 지네릭스의 표기List list = new ArrayList();흔히 컬렉션에서 이런식으로 컬렉션을 사용하는 경우를 많이 보았을 것이다. List는 제네릭스로 타입을 체크할 수 있도록 되어있다.해당 list는 String 으로 지정하였기때문에 String 이외에 타입이 저장될 경우 컴파일 에러가 발생한다. 따라서 컴파일시 타입체크를 함과 동시에 다른 타입이 저장되지 못하도록 타입 안정성이 생기는 것 이다. 🔍 모든 타입을 받는 지네릭스지네릭스는 타입을 지정하는 동시에..

JPA의 계층 구조? 흔히 JPA를 사용하게되면 JpaRepository 라는 인터페이스를 상속 받을 것이다.해당 인터페이스에는 여러 SQL문을 처리하는 로직이 담긴 메서드들이 많이 있는데, 이 또한 여러 계층으로 나뉘어 상속 받은 인터페이스이다. 🔍 JPA의 계층 구조Lv 1 Repository👉 최상위 계층 Lv 2 CrudRepository ( CRUD 기능을 지원) , PagingAndSoringRepository(Page 기능 지원)👉 CRUD기능만을 구현한 인터페이스와 Paging 기능만을 구현한 인터페이스 Lv 3 ListCrudRepository, ListPagingAndSoringRepository 👉 결과값을 List 형태로 반환하는 인터페이스 Lv 4 JpaRepo..

스프링 부트에서 DB를 조회하기위해선 여러 작업들이 필요하다. DB에 접근하기 위한 Connection 을 생성하고 PreparedStatement를 생성하여 동적으로 SQL문을 처리하고 결과를 반환한다.그러나 이런 과정은 너무 번거로울뿐더러 DB에 접근하고 실행하기 위해 필요한 코드들이 계속해서 중복된다. 이러한 DB 처리를 위한 과정을 자동으로 간편하게 할수있게 해주는것이영속 계층 프레임워크 이다. ❓ 영속 계층 프레임 워크더보기데이터베이스에 연동을 더욱 단순화하여 간편하게 할 수 있도록 도와주며 코드의 유지 보수를 쉽게하기 위한 라이브러이며,대표적으로 JPA , MyBatis가 있다. JPA가 조금 더 간편하게 사용할 수 있는 기능들이 MyBatis 보다 많이 있으나 기능이 많은 만큼 무거워지게된..