오늘 회사동료가 재미있어 보이는 걸 하길래 한번 해보았다. Vue를 가지고 프로젝트를 하는데, 기존의 프로젝트는 Vue2의 인라인 템플릿을 활용하여 구축했었는데, Vue3를 이용해서 한다는 것, 그래서 인라인 템플릿을 사용 못하는 상황이라는데.. 공식 홈페이지에서 Vue를 cdn으로 가져오니 실제로 cdn을 통해 가져 온 Vue는 2.6.14버전이었다.. -- 수정 Vue 공식홈페이지에서는 안정화 되어 있는 2.6.14버전만 cdn으로 배포하는 것 같고.. Vue3 버전의 cdn을 가져오려면 아래 스크립트를 넣으면 될 것 같다. -- 가장 최신 버전의 Vue를 가져옴 2022.03.05 기준 3.2.31버전 -- Vue 3.1.1 버전 ​ 각설하고 바로 jsp환경에서 import, export를 해서 c..

이번에 네이버 영화 API를 통해서 뭐 좀 가져 오려고 하면 여기는 또 그놈의 CORS로 막히는 문제가 생겼다. 그래서 시도해본 게, 1. 우회URL을 사용 : 네이버API에서 자체적으로 막아서 안됨 ( 403 에러 ) 2. 헤더에 Accept : "*" 추가 : 이유는 모르겠으나, CORS에러가 떨어짐.. 그래서 Vue프로젝트 자체에서 프록시를 설정해줄 수 있다고 해서 이번에 정리해본다. 우선 테스트용으로 proxy-project라는 프로젝트를 하나 생성해주었다. ( axios 등 환경도 설치 ) 우선 root경로(package.json이 있는 경로)에 다음 파일을 만들어준다. vue.config.js module.exports={ devServer: { proxy: { // proxyTable 설정 ..

오늘 npm 명령어를 통해 axios를 설치하고 main.js에서 import하여 사용하려는데, 에러가 났다. error 'axios' is defined but never used no-unused-vars 이 에러인데... 내 기억으로는 이래도 서버는 켜져야 하는데.. 왜냐하면 정의는 됬지만, 사용만 안됬다는 에러라.. 그래서 해결법을 보니.. axios를 import하는 라인 위에 아래 문구를 넣어주면 해결된다. //eslint-disable-next-line no-unused-vars //eslint-disable-next-line no-unused-vars import axios from 'axios'

지금까지 프로젝트에 적용했었던 Vue는 아래와 같았다. 1. 뷰컴포넌트 생성 2. 뷰 인스턴스 생성 3. dom에 뷰 인스턴스 부착 이걸 소스로 풀면 아래와 같이 되는데.. $(document).ready(function() { Vue.component('color-list',{ template : '내용', data () { return { //데이터 } }, methods : { //함수 } }); new Vue({ el : '#color' }) }); 이렇게 컴포넌트를 만들고 나면 반드시 아래에, 뷰 인스턴스를 생성하여, DOM의 특정 태그에 부착시켜 줘야 했었다. => new Vue 생성자를 통한 뷰 인스턴스 생성 근데 VScode로 Vue project를 만들어 공부를 하는데 뷰 인스턴스를 다음..

오늘 유튜브를 보면서 Vue 기초부터 하나하나 공부하고 있었다. 영상에서는 이미지 경로를 그냥 넣었는데, 나는 v-bind 함수를 가지고 src속성에 경로를 넣어주려고 하였다. 그래서 처음 짠 코드가 아래였다. 우선 배열의 길이는 3이므로, v-for문이 3번 돌고, 이미지 파일은 아래와 같이 연속 된 숫자를 가졌다 room0.jpg room1.jpg room2.jpg 그래서 그냥 getSrc함수를 아래와 같이 짰다. getSrc : function(index){ return './assets/room'+index+'.jpg'; } 이렇게 짜면 v-for문의 index값이 0, 1, 2 순으로 들어 올테고, 각 이미지 경로를 src로 적재되니, 당연히 가져 올 줄 알았는데... 실행해보니 이미지를 가져오..

오늘 v-for문을 이용해서 리스트를 출력하는데 아래와 같은 에러가 발생했다. error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) 이건 그냥 component에서 v-for문을 쓸 때 key값을 설정하라는 말이다. 지금까지는 그냥 Vue 인스턴스에서 v-for문을 자주 쓰기도 했고, 해당 기능은 Vue 2.2.0버전에 생겼다고 한다. 그래서 지금까지는 못 본 에러가 아닐 까 쉽다. 해결법은 간단하다. 그냥 v-for문을 입력한 태그에 v-bind:key만 넣어주면 된다.