Front

1. username input이 email이 아닐 경우에 비활성화 처리 - 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자) - computed 속성 필요 2. 아이디, 패스워드가 없으면 로그인버튼 비활성화 - html 정규 표현식 disabled 필요 1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자 const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\..

1. username input이 email이 아닐 경우에 비활성화 처리 - 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자) - computed 속성 필요 2. 아이디, 패스워드가 없으면 로그인버튼 비활성화 - html 정규 표현식 disabled 필요 1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자 const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\..

{{ item.subject }}

1. vue-js-modal 을 install 받아준다 npm install vue-js-modal --save https://www.npmjs.com/package/vue-js-modal vue-js-modal Modal Component for Vue.js. Latest version: 2.0.1, last published: a year ago. Start using vue-js-modal in your project by running `npm i vue-js-modal`. There are 187 other projects in the npm registry using vue-js-modal. www.npmjs.com 2. main.js에 vue-js-modal 플러그인을 추가해준다. impor..

catch (error) { // 에러 핸들링할 코드 // console.log(error.response); this.logMessage = error.response.data; } loginForm.vue id: pw: 로그인 {{ logMessage }}

vue.js 는 Single Page Application 이기 때문에 window.open() 비추천 버튼 눌러서 popup을 여는게 아닌 홈페이지가 로딩되면 바로 보이는 popup 이다 실제 사용 코드는 보안때문에 가져올수 없는 프로젝트라 간략하게 작성했다. main.vue window.open(url, 이름, 팝업창 가로길이, 팝업창 세로길이, 팝업창 시작점 top, 시작점 left); window.open("noticePopup", "", "width=500, height=600, top=100, left=100"); window.open 함수의 url 자리에 있는 "noticePopup" 은 router.js에 등록해놓은 router 링크이다. popup.vue {{this.subject}} m..

1. 설치 npm install jodit-vue --save 2. main.js에 코드추가 (플러그인 연결) import 'jodit/build/jodit.min.css' import Vue from 'vue' import JoditVue from 'jodit-vue' Vue.use(JoditVue) 3. 원하는 template에 코드 추가 4. 결과 이렇게 잘 보인다. width에 따라 메뉴바가 변경되니 참고할 것. 아래 에디터는 width가 줄어든 모습이다. https://ddolcat.tistory.com/2112 [Vue.js + Vuetify.js] Jodit 에디터 파일 업로드 기능 구현시 함수 또는 스크립트(method) 호출시 is not a fu Jodit 에디터 사용시 서버로 파일 업..

뒤로가기 this.$router.go(-1) 앞으로가기 this.$router.go(1) 메인가기 this.$router.push(‘/‘)

에러가 났을 때의 대처 방법과 로그 분석하는 방법 - 실제 개발에선 기능보다 에러처리를 잘해야 완성도 높은 코드를 만들수있다. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 - try, catch 걸어주면된다 - 그러면 에러 나면 몇번째줄 코드의 에러인지 까지 확인 가능 - 이거 안하면 무슨 컴포넌트에 에러가 났는지는 뜨는데 몇번째 줄 인지는 모름 async submitForm() { try { // 비지니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); console.log(data.user...