본문 바로가기

vue.js26

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.
싱글파일 컴포넌트 .vue 로 파일 생성 vue + tab 키로 기본 화면 구성 : HTML 컴포넌트 명명법 케밥케이스 파스칼 케이스 컴포넌트 파일 생성시 파스칼케이스 명명법을 사용하고 최소 두 단어 이상으로 작성. 2023. 4. 20.

티스토리툴바