본문 바로가기

분류 전체보기384

CORS 에러 (vue.js, springboot) / proxy SOP? 자바스크립트 엔진 표준 스펙의 보안 규칙 중, 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하는 정책이 SOP (Same Origin Policy, 동일 출처 정책) 이다. 즉, http://localhost:8000와 http://localhost:8000/posts는 같은 출처라서 상호작용이 가능한데, http://google.com에서 http://localhost:8000를 호출하면 SOP에 위배된다. 동일 출처의 기준 http://example.com:8042/over/there?name=ferret&page=1#nose \__/ \__________/\___/ \________/ \______________.. 2023. 4. 25.
webpack-dev-server 새로고침 하는게 귀찮을때 자동으로 새로고침해주는 기능 npm i -D webpack-dev-server : webpack-dev-server란? webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버로, 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라짐 webpack.config.js에도 devServer 옵션을 통해 옵션을 지정하여 사용이 가능 webpack-dev-server의 동작원리 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시 소스 파일이 변경되면 변경된 모듈만 새로 번들링 변경된 모듈 정보를 브라우저에 전송 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드 package.json 에 "dev":"we.. 2023. 4. 24.
webpack, vue-loader, vue-style-loader -최신 프론트엔드 프레임워크에서 권장하는 모듈 번들러 - 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(javascript)으로 변환시켜주는 도구- 어플리케이션 동작과 관련된 여러 개의 파일(HTML, css, js, Image 등)들을 1개의 javascript파일로 변환하고, 이 js파일만 브라우저에서 로딩하면 어플리케이션이 실행되는 것 - Vue CLI를 통해 프로젝트를 실행하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm rub build' 실행 시 webpack기반으로 동작한다. webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install package.json .. 2023. 4. 24.
ref 태그내부에 ref로 이름을 붙혀주면 $.refs로 통제가 가능하다 methods:{ onSubmitForm(e){ this.$refs.answer.focus(); } } ** this.$refs.anwer.value = '1234' 와 같이 값을 직접적으로 바꿀경우 바인딩시 충돌이 일어남. refs를 필요이외에 남용하는건 좋지않다 2023. 4. 21.
vue.js 문서 https://vuejs.org/guide/introduction.html 공식문서 https://v2.vuejs.org/v2/style-guide/?redirect=true 스타일가이드 https://v2.vuejs.org/v2/cookbook/?redirect=true cookbook https://v3.vuex.vuejs.org/ vuex 공식문서 https://v3.router.vuejs.org/ vueRouter 공식문서 https://cli.vuejs.org/ vue CLI 공식문서 2023. 4. 21.
prevent submit의 기본 기능은 새로고침. 새로고침을 막기위해서 event.preventDefault(); 를 사용한다. methods:{ submitForm:function(event){ event.preventDefault();//submit의 기본동작인 새로고침을 막음 console.log(this.username, this.password); } } v-on: 에 사용할 .prevent를 사용하면 같은 결과를 얻을 수 있음 ** v-on:submit.prevent = @submit.prevent 2023. 4. 21.

티스토리툴바