웹개발자의 기지개

.pre-formatted { white-space: pre; } new Vue({ el: '#app', data: { text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n' } }) {{ text }} 참고 : https://stackoverflow.com/questions/49264645/vuejs-newline-character-is-not-rendered-correctly

전역으로 쓸 수 있는 환경변수를 만들어보자. [ .env ] VUE_APP_API_VAR = https://www.naver.com VUE_APP_FILEDOWNLOAD_VAR = https://www.daum.net .env 파일명으로 VUE_APP 문구를 앞단어로 꼭 넣어서 만들어야한다. VUE_APP_변수명 = 입력값 그리고, 설정한 모든 환경변수를 vue 파일에서 한번 찍어보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 export default { data() { return { middelLists: [], bottomLists: [], notices: [] } }, created() { }, mounted() { console.log(process.env) } } cs..

[ router 설치 ] npm install vue-router [ /router/index.js ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 import { createWebHashHistory, createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", name: "main", component: () => import("../components/main.vue"), }, { path: "/swiper", name: "swiper", component: () =..

CORS(Cross-Origin Resource Sharing) Access to XMLHttpRequest at 'http://localhost:8989/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 브라우저 자체 보안 관련 사항으로 cross-origin HTTP 요청에 대하여 서버 동의가 필요하고, 이에 동의되지 않을때 거절되는 보안 매커니즘이다. 보통의 경우 Backend 와 Frontend 사이의 HTTP 관련 개발환경이 달라서 이를 proxy 설정을 해놓음으로써 자연스레 ..

로 페이지 이동시 this.$route.push() 로 페이지 이동시 정상 작동 되지 않을때, 특히 /board/2 , /board/20 와 같이 같은 디렉토리 형태를 띄고 있을때, 2번글을 읽고 바로 20번 글을 읽고 싶으나, 정상 되지 않았때가 있다. [ App.vue ] 위의 코드처럼 정답은 참고 : https://hj-tilblog.tistory.com/99 참고 : https://stackoverflow.com/questions/62868980/vue-js-router-link-not-updating 참고 : https://stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath

코딩하면서 Javascript 와 기타 연관된 Javascript Framework 에서 해당 객체가 비어 있는지 체크하는게 반드시 필요하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function isEmptyObj(obj) { if(obj.constructor === Object && Object.keys(obj).length === 0) { return true; } return false; } const obj1 = {}; const obj2 = {name: 'js'}; const str = "Javascript"; document.writeln(isEmptyObj(obj1)); // true document.writeln(isEmptyObj(obj2)); // fa..

1 2 3 4 5 6 7 8 9 10 F:\vue_exam\vue2>node --version v18.16.1 F:\vue_exam\vue2>npm --version 9.5.1 F:\vue_exam\vue2>npm list F:\vue_exam\vue2 └── (empty) Colored by Color Scripter cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 현재 설치된 로컬 상의 패키지 모듈 리스트 명령어 npm list --depth=0 글로벌 스코프로 설치된 패키지 모듈 리스트 명령어 npm list --..

[ 작업환경 ] "swiper": "6", "vue": "^3.2.13", "vue-router": "^4.2.4", "webpack": "5.0.0" Swiper (슬라이드 기능) 구현할때 보통의 경우 CDN 방식으로 Javascript 소스상으로 간단히 작업을 할 수 있다. https://swiperjs.com/swiper-api Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 그런데, Vue.js 로 작업하면서 기존의 CDN 방식으로는 ..