🤔 Jwt 토큰과 관련된 속성들이 정의된 JwtProperties 클래스가 있다. 해당 클래스에는 토큰 생성에 필요한 시크릿키가 포함되어 있는데, 원칙적으로 이 시크릿키는 사용자에게 유출되지 않고 오직 서버에서만 알고있어야 한다. @RequiredArgsConstructor public class JwtProperties { public static final String SECRET = "Reminiscene"; public static final int ACCESS_EXPIRATION_TIME = 1000*60*10; public static final int REFRESH_EXPIRATION_TIME = 1000*60*30; public static final String TOKEN_PREFIX =..

얼레벌레 프로젝트를 진행할 적에는, 레이어 간 데이터를 교환할 때 Map을 사용했다. 이유는 VO, DTO, Entity 등 데이터 객체에 대한 이해가 부족했기 때문에.. 그냥 손에 잡히는 걸 사용했던 것이다. Map을 사용하면서 여러모로 불편함을 느껴 DTO 클래스로 리팩토링했는데, 실제로 구글링해봤을 때에도 많은 개발자들이 Map보다는 DTO를 선호하는 것으로 보였다. 🤔 왜 DTO인가? Map 대신 DTO를 사용하는 이유는 뭘까? 이는 Map의 단점으로 대신할 수 있다. 타입체크 불가 Map은 일반적으로 다음과 같이 사용한다. HashMap map = new HashMap(); 다양한 타입의 데이터를 받기 위해서는 value의 제네릭 타입을 Object로 설정하는 것이 불가피하다. 하지만 모든 클래..

🧐 스프링부트와 Vue를 사용한 웹 애플리케이션에서 새로고침, 혹은 URL에 직접 접근할 시 404를 반환하는 에러가 발생했다. 라우터 모드 처음 이 문제를 접하고 가장 먼저 사용했던 방식이다. 라우터를 사용하면 모드를 설정할 수 있는데, hash와 history 두가지 옵션이 있다. 해시 Hash 모든 URL을 해시 형태로 서비스하는 라우터 모드. URL 앞에 #가 붙는다. 해시가 붙은 URL 섹션은 서버로 전송되지 않고 단지 화면 이동에 사용되므로, 따로 서버단에서 처리해줄 필요가 없다. 하지만 SEO에 부적절한 영향을 미친다. 히스토리 모드 Histroy 일반 애플리케이션과 동일하게 정상적인 형태의 URL이 사용된다. URL이 시각적으로 보기 좋고 검색엔진 최적화에 적합하지만, 페이지 직접 접근시 ..

🌙 회원가입을 하고 내 정보 수정 페이지를 진행하면서 프로필 사진을 업로드하는 기능을 구현하고 있다. 프로필 사진을 누르면 로컬 폴더에 저장된 사진을 선택해 변경할 수 있다. SSR 프로젝트에서는 form 태그에 사진, 닉네임, 이메일 등 정보를 담고 POST 요청을 보냈다. 컨트롤러에서는 Multipartfile 타입으로 데이터를 받고, 파일을 정적 저장소에 저장했다. 하지만 REST API에서는 폼 태그를 통해 요청을 보내는 것이 불가능하며, 모든 요청은 Axios를 통해 이루어진다. 닉네임이나 이메일처럼 문자열 타입의 데이터를 보낼 때에는 요청 바디에 넣어서 전송하는 간단한 방식이었지만 같은 방식으로 파일 데이터를 전송하는 것은 불가능하다. Rest Controller에서 Multipartfile로..

🤔 REST API로 데이터를 불러오고 Vue를 통해 화면단을 구성하면서 Axios를 활용한 비동기통신을 많이 사용하게 된다. DB 접근을 통한 CRUD는 물론, 화면을 전환할 때마다 API에 요청을 보내 사용자의 인증/인가 여부를 리턴해야 하기 때문이다. 기본적으로 요청 URL을 매개인자로 넣어야 하는데 같은 호스트를 매번 적어주어야 하고, 혹시라도 포트번호가 바뀌면 모든 메서드를 수정해야 했다. 뿐만 아니라 인증을 위해 헤더에 토큰 값을 추가하고, 만약 응답에서 토큰이 만료됐다는 결과값을 반환하면 그 결과를 vuex 상태에 저장하고... 같은 작업을 반복적으로 하는 것이 비효율적으로 느껴졌다. 📁 전역 설정 axios는 모든 요청에 공통적으로 적용되는 구성 기본 값(Config default) 설정을..

🫣 나의 작고기여운커밋메세지들아 미안해 🧬 커밋 메세지 구조 커밋 메세지는 헤더, 바디, 푸터의 세 영역으로 구분된다. 헤더는 필수적이다. 단, 스코프는 생략할 수 있다. 바디와 푸터는 생략할 수 있다. 타입(스코프): 주제-- Header 본문-- Body 바닥글-- Footer ✅ 기본 규칙 제목과 본문은 빈 행으로 구분한다. 제목의 글자수는 50자 이내로 제한한다. 제목 첫글자는 대문자로 작성한다. 제목 끝에 마침표를 넣지 않는다. 제목은 명령문 형식을 사용하며, 과거형을 사용하지 않는다. 본문 각 행의 글자수는 72자 이내로 제한한다. '어떻게' 보다는 '무엇'과 '왜'를 기준으로 설명한다. ✅ 타입 규칙 헤더의 타입은 해당 커밋의 성격을 나타내며, 아래 중 한가지를 골라 작성하는 것을 권장한다...

🤯 REST API를 통해 싱글 페이지 애플리케이션을 구현하면서 페이지를 전환할 때마다 권한 관련 처리를 어떻게 해주어야 할지 고민했다. 현재 내가 활용하고 있는 방법은 이렇다. 클라이언트에서 페이지를 이동할 때, 라우터 가드에서 이를 가로챈다. 로컬 상태에 있는 토큰으로, 없으면 없는 채로 api에 요청을 보낸다. api는 시큐리티 필터를 통해 토큰의 유무와 그 유효성을 따지고, 다음 중 하나의 결과를 응답한다. 인증 상태 로컬 상태에 토큰이 있고, 그 토큰이 만료되지 않은 로그인 상태 인증이 필요한 페이지(마이페이지 등)라면 그대로 이동 미인증 상태를 요구하는 페이지(회원가입, 로그인 등)라면 404 에러페이지 인증 만료 상태 로컬 상태에 토큰이 있지만 그 토큰이 만료된 상태 901 에러를 반환하고 ..

🤯 Jwt로 인증/인가를 처리할 때 정석은 엑세스 토큰과 리프레시 토큰을 둘다 발급받는 것이다. 엑세스 토큰은 유효기간을 짧게, 리프레시 토큰은 길게 설정하고 엑세스 토큰이 만료되면 리프레시 토큰을 통해 새롭게 엑세스 토큰을 발급받는 방식. 근데 난 토큰을 그냥 하나만 받았기 때문에 토큰이 만료되면 그냥 사용자를 로그아웃 시켜야 한다. 물론 api에서 로그아웃하는 일이야 어렵지 않다. 애초에 만료된 토큰으로는 인가 필터를 통과할 수 없어 500 에러를 반환하기 때문이다. 그런데 토큰이 만료되었을 때, 화면단에서 로그아웃을 시키려면 어떻게 해야 할까? 우선 내 프로젝트에서 고려할 사항은 다음과 같다. api는 토큰을 발급하고 응답 헤더에 보낸다. axios로 api와 통신한 뷰는 헤더에서 얻은 토큰과 로그..