VUE (4) 썸네일형 리스트형 NuxtJS(ReactJS) + Spring + JWT 토큰 발급 과정 및 보안 고려사항 웹 애플리케이션에서 JWT(JSON Web Token)를 활용하여 인증과 권한 부여를 처리하는 것은 매우 일반적입니다. 이 글에서는 NuxtJS와 Spring을 사용하여 JWT를 관리하는 과정과 관련된 보안 고려사항을 설명하겠습니다.1. JWT 토큰 저장 위치 및 보안 고려사항JWT 토큰은 크게 두 가지, 즉 accessToken과 refreshToken으로 나뉩니다. 각각의 저장 위치와 보안 측면을 고려할 때, 다음과 같은 옵션이 있습니다LocalStorage장점: 데이터 접근이 용이하여 편리합니다.단점: JavaScript에서 접근할 수 있어 XSS(Cross-Site Scripting) 공격에 취약합니다.Cookie장점: Secure 및 HttpOnly 속성을 설정하여 보안을 강화할 수 있습니다.단.. vue.js v-slot 사용 방법 Vue.js에서는 여러 컴포넌트를 조합해 UI를 만들어낼 수 있는데, 이때 을 사용하면 다른 컴포넌트에서 그 자리에 콘텐츠를 추가할 수 있습니다. 그리고 v-slot 디렉티브를 사용하면 요소를 더욱 강력하게 제어할 수 있습니다. v-slot의 예시 1. Scoped Slot v-slot을 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것 외에도, scoped slot을 사용하여 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 수 있습니다. 예를 들어, 하위 컴포넌트에서 사용자가 입력한 데이터를 상위 컴포넌트로 전달하는 경우 scoped slot을 사용할 수 있습니다. {{ slotProps.data }} 위 코드에서, Parent Component는 Child Component를 사용하고.. Vue3 defineExpose 사용법 Vue 3에서 defineExpose는 부모 컴포넌트가 자식 컴포넌트의 API에 직접적으로 접근할 수 있도록 하는 방법을 제공하는 함수입니다. 이 함수는 자식 컴포넌트의 setup 함수 내에서 사용됩니다. 기존의 Vue 2에서는 props, emit, ref 등의 속성을 사용하여 자식 컴포넌트의 API를 부모 컴포넌트에 노출할 수 있었습니다. 그러나 Vue 3에서는 defineExpose 함수를 사용하여 자식 컴포넌트에서 노출할 API를 직접 정의할 수 있습니다. defineExpose 함수는 객체를 인자로 받습니다. 이 객체는 자식 컴포넌트에서 노출할 API를 포함하고 있습니다. 이러한 API는 부모 컴포넌트에서 자식 컴포넌트의 exposed 속성을 통해 접근할 수 있습니다. 예를 들어, 아래와 같이 .. Vue3 ref, reactive 사용법 ref Vue.js 3에서 ref는 새로운 기능이 추가되어 이전 버전의 ref와는 조금 다릅니다. Vue.js 3에서 ref는 다음과 같은 기능을 가지고 있습니다. 1. 간편한 변수 선언 Vue.js 3에서 ref는 변수를 선언하는 데 사용될 수 있습니다. 다음은 ref를 사용하여 변수를 선언하는 예시입니다. import { ref } from 'vue'; const count = ref(0); 2. 반응성 데이터 제공 Vue.js 3에서 ref는 변수를 반응성 데이터로 만들어줍니다. 따라서, ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 Vue 컴포넌트의 뷰도 자동으로 업데이트됩니다. Count: {{ count }} Increment 3. ref 속성을 통한 변수 접근 Vue.js 3에서.. 이전 1 다음