전체 글

Nuxt.js를 이용해 페이지 이동 시 변수를 넘기는 방법은 2가지(qnery,params) 가 있습니다. 아래와 같이 데이터를 넘길 수 있습니다. this.$router.push({ name: 'board-list', //URL 노출 query: { boardType: "test1" }, //URL 비노출 param" { boardType: "test2" } }) 넘어온 데이터는 아래와 같이 확인 할 수 있습니다. //query 데이터 확인 console.log(this.$route.query.boardType) //board 데이터 확인 console.log(this.$route.params.boardType) query를 사용하면 데이터가 노출되지만 새로고침 시에도 데이터를 유지 시킬 수 있다. p..

정렬을 할때에는 여러 알고리즘을 적용할 수 있습니다. 알고리즘의 성능은 일반적으로 데이터의 크기에 따라 결정됩니다. 따라서 데이터 크기에 따라 가장 효과적인 정렬 방법을 예시 코드와 함께 정리해 보겠습니다 작은 크기의 데이터 (수십 개 이하) 버블 정렬, 삽입 정렬이나 선택 정렬과 같은 간단한 알고리즘들이 효과적일 수 있습니다. 버블 정렬 public class BubbleSort { public static void main(String[] args) { int[] array = {64, 34, 25, 12, 22, 11, 90}; bubbleSort(array); System.out.println("Sorted array: " + Arrays.toString(array)); } static void ..

개발환경 Nuxt.js 2 Vue.js 2 Spring Boot 3요청사항 ❓ API에 권한을 입히면서 특정 API 사용 시 alert를 노출시키고 페이지 이동은 원하지 않는다는 요청사항이 있어 이를 구현하였습니다.개발 내용 💭 Back End에서 권한을 체크하는 AOP를 하나 만들어 체크를 원하는 API에 Annotation을 넣어 Exception처리를 하도록 구현하였습니다. Front End에서 해당 Error를 보고 권한에 대한 Error일 경우 alert를 발생시켜야 합니다. 문제발생 ❗ 공통적으로 처리하기위해 axiox.onError({})로직에 처리를 하려다 보니 무조건 적으로 Error 페이지로 이동하는 현상 발생 이는 Nuxt 설정으로 헤더 정보를 보고 Error 발생 시 error.vu..

프로젝트 마무리 단계에서 웹 호환성 체크를 하다보니 그동안 모호하게 알고있던 지식에 대해 정리가 필요하다는 것을 알게되어 확실한 정리는 하려고 해보려고 합니다. Front End 개발환경 Nuxt.js 2 Vue.js 2 먼저 세 가지 개념인 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 그리고 번들링에 대해 자세히 알아보겠습니다. 서버 사이드 렌더링 (SSR) 서버 사이드 렌더링은 웹 애플리케이션의 초기 HTML을 서버에서 생성하고 클라이언트에 제공하는 방식입니다. 클라이언트는 이 HTML을 받아 브라우저에서 렌더링합니다. 이것은 검색 엔진 최적화(SEO)를 향상시킬 수 있으며, 초기 페이지 로딩 시간을 줄일 수 있습니다. 클라이언트 사이드 렌더링 (CSR) 클라이언트 사이드 렌더링..

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링(SSR)을 지원하는 웹 애플리케이션 프레임워크이다. 페이지 이동은 Vue Router를 사용하여 처리할 수 있다. 아래는 Nuxt.js에서 페이지 이동을 위한 몇 가지 기본적인 방법이다. 링크를 사용한 페이지 이동: Nuxt.js에서 페이지 간의 이동은 컴포넌트를 사용하여 처리할 수 있다. 이 컴포넌트를 사용하면 Vue Router가 내부적으로 처리하므로 페이지 전환 시 SSR을 유지할 수 있다. 사용자 페이지로 이동 위의 예제에서는 userId 변수를 사용하여 동적으로 URL을 생성하고 nuxt-link 컴포넌트를 통해 페이지 간 이동을 수행하고 있다. 또한 user 페이지에서 이 파라미터를 받아와 사용할 수 있다. 이때 user..

개발을 하던 도중 Select Box를 구현하던 와중 전처리 로직이 필요해 watch를 사용하였다. Select Box 선택 선택한 값을 이용해 넘기는 파라메타 변경 파라메타를 이용해 데이터 호출 Select a Fruit: {{ fruit.label }} You selected: {{ selectedFruit }} 정리💯 Vue.js의 watch 속성은 데이터의 변화를 감지하고, 데이터가 변경된 후에 설정된 로직을 실행한다. 반면에 @change 이벤트는 요소의 값이 변경될 때 바로 이벤트 핸들러를 실행한다. 따라서 Vue.js의 watch 속성에 등록한 로직은 요소의 값이 변경되고 데이터가 실제로 변경된 후에 실행되므로, @change 이벤트 핸들러보다 후에 실행된다.

JWT Token에 대해 알아보자 JWT Token이란? JWT Token 구성 JWT Token 인증 과정 JWT Token JAVA CODE 구현 JWT Token이란? `JWT`(JavaScript Web Token)는 웹 애플리케이션에서 사용자 인증 및 정보 교환을 위한 토큰 기반 인증 방식입니다. `JWT`는 토큰 자체에 사용자의 클레임(claim) 정보를 포함하고 있으며, 이를 통해 서버 간의 신뢰성 있는 정보 교환을 가능하게 합니다. 서버의 상태를 유지하지 않고도 토큰을 사용하여 인증을 처리할 수 있습니다. 토큰을 사용하여 클라이언트와 서버간 인증을 할 수 있습니다. JWT Token 구성 Header(헤더): `JWT `토큰의 유형 및 해싱 알고리즘 정보를 담고 있습니다. 일반적으로 "al..

문제❓ highchart map에 map data를 따로 넣어주는 코드가 너무 길어 json 파일에 저장 후 호출을 하려고 파일을 저장할 위치를 정하고 있었습니다. 이때에 json파일을 static에 넣어야 하는지 assets에 넣어야 하는지 명확하게 판단이 서지 않아 이참에 두 폴더의 차이점과 활용방법에 대해 정리해 보겠습니다. static 폴더와 assets 폴더는 Vue CLI 기반의 Vue.js 프로젝트에서 사용되는 두 가지 다른 폴더입니다. static 폴더 static 폴더는 정적인 파일을 저장하는 용도로 사용됩니다. 해당 폴더에 있는 파일은 웹팩 번들링 과정에서 변환되지 않고 그대로 유지됩니다. 주로 이미지 파일, 외부 라이브러리 파일 등과 같이 웹팩에 의한 변환 또는 모듈 번들링이 필요 없..