Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링(SSR)을 지원하는 웹 애플리케이션 프레임워크이다. 페이지 이동은 Vue Router를 사용하여 처리할 수 있다. 아래는 Nuxt.js에서 페이지 이동을 위한 몇 가지 기본적인 방법이다. 링크를 사용한 페이지 이동: Nuxt.js에서 페이지 간의 이동은 컴포넌트를 사용하여 처리할 수 있다. 이 컴포넌트를 사용하면 Vue Router가 내부적으로 처리하므로 페이지 전환 시 SSR을 유지할 수 있다. 사용자 페이지로 이동 위의 예제에서는 userId 변수를 사용하여 동적으로 URL을 생성하고 nuxt-link 컴포넌트를 통해 페이지 간 이동을 수행하고 있다. 또한 user 페이지에서 이 파라미터를 받아와 사용할 수 있다. 이때 user..
WEB
개발을 하던 도중 Select Box를 구현하던 와중 전처리 로직이 필요해 watch를 사용하였다. Select Box 선택 선택한 값을 이용해 넘기는 파라메타 변경 파라메타를 이용해 데이터 호출 Select a Fruit: {{ fruit.label }} You selected: {{ selectedFruit }} 정리💯 Vue.js의 watch 속성은 데이터의 변화를 감지하고, 데이터가 변경된 후에 설정된 로직을 실행한다. 반면에 @change 이벤트는 요소의 값이 변경될 때 바로 이벤트 핸들러를 실행한다. 따라서 Vue.js의 watch 속성에 등록한 로직은 요소의 값이 변경되고 데이터가 실제로 변경된 후에 실행되므로, @change 이벤트 핸들러보다 후에 실행된다.
문제❓ highchart map에 map data를 따로 넣어주는 코드가 너무 길어 json 파일에 저장 후 호출을 하려고 파일을 저장할 위치를 정하고 있었습니다. 이때에 json파일을 static에 넣어야 하는지 assets에 넣어야 하는지 명확하게 판단이 서지 않아 이참에 두 폴더의 차이점과 활용방법에 대해 정리해 보겠습니다. static 폴더와 assets 폴더는 Vue CLI 기반의 Vue.js 프로젝트에서 사용되는 두 가지 다른 폴더입니다. static 폴더 static 폴더는 정적인 파일을 저장하는 용도로 사용됩니다. 해당 폴더에 있는 파일은 웹팩 번들링 과정에서 변환되지 않고 그대로 유지됩니다. 주로 이미지 파일, 외부 라이브러리 파일 등과 같이 웹팩에 의한 변환 또는 모듈 번들링이 필요 없..
문제⛔ Front End(Nuxt.js)와 Back End(Spring boot)를 나누어 개발하다 보면 API 호출 시 CORS 정책에 따른 API 호출 불가 메세지가 발생합니다. 개발 환경에서 이를 우회하기 위한 설정을 알아보겠습니다. Node.js 서버(localhost:3000) Tomcat 서버(localhost:8080) CORS란❓ CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 발생하는 보안 상의 제약을 우회하기 위해 도입된 웹 브라우저의 정책입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르며, 이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 자원에 접근하는 것을 제한합니다. 출..
Nuxt.js를 사용하면 편한점이 많이 있는데 이번에는 components를 사용하는 법을 알아보겠습니다. 실습순서 components 폴더 생성 component 파일 생성 기본 component 호출 다른 호출 방법 components 폴더 생성 root 아래에 components 폴더를 생성합니다. Nuxt를 설치하게되면 기본 패키지 구성으로 폴더가 생성되어 있을겁니다.(~/components) component 파일 생성 테스트를 위해 components/dept1/dept2/component-test.vue 생성 ~/components/dept1/dept2/component-test.vue 컴포넌트 입니다. 기본 component 호출 pages에 파일을 생성한 후 component를 호출합니다..
문제❓ Nuxt.js를 이용한 Highchart 예시를 만들면서 메인화면을 구성하던 도중 pages의 폴더와 파일 등을 자동으로 파악해 동적으로 변화는 메인화면을 구현하기 위해 psges에 존재하는 모든 파일 정보를 가지고 오고 싶습니다. 하지만 Nuxt.js는 SSR프로젝트다 보니 client내에서 pages의 파일 정보를 가지고 올 수 없었습니다. 해결방법❗ async asyncData()를 이용해 SSR시 require.context('~/pages', true, /.vue$/);를 호출 해 .vue 확장자를 가진 모든 파일을 가지고 옵니다. async asyncData란❓ Nuxt.js 2에서 asyncData는 페이지 컴포넌트에서 사용할 수 있는 특별한 메서드입니다. 이 메서드는 Nuxt.js의..
tomcat을 사용해 서버를 띄우게 되면 기본적으로 index 페이지에 tomcat에 정보가 노출되고 에러페이지에 tomcat에 정보가 노출된다. 이는 취약점에 해당하기 때문에 아래와같이 수정을 해줘야 한다. tomcat 설정파일 변경 /tomcat/conf/web.xml 파일 수정 /error.html index.html index.htm index.jsp 404 /error.html error 페이지 구현 /tomcat/webapps/ROOT 에 error.html 생성 에러페이지는 html 형식에 맞춰 각자 원하는데로 생성하면 된다. 재시작 /tomcat/bin 이동 ./shutdown.js ./start.js
JAVA SCRIPT를 사용하면 this를 사용하는 경우가 많이 있다. 단순한 코드에서는 흘러가는대로 대충 이해하고 넘어가면 되지만 복잡한 로직이 들어간 코드에 대해서는 확실하게 이해하고 넘어가지 않으면 계속 걸리게 될것이다. ⚡️ this의 정의 ❗️this는? this란 ‘이것’ 이란 뜻을 가진 javas script 예약어 this는 함수가 호출될때 결정된다. 즉 함수의 호출 방식에 따라 호출시에 동적으로 바뀐다. 아래의 코드를 보면서 이해해 보겠다. 예제 1 (함수 호출) 코드 function outFunction() { this.title = 'Hello World!'; console.log("--------outFunction-------") console.log(this) console.lo..
