남산 아래 개발자들

Vue 로 홍보 플랫폼 작업을 하면서 필요한 기능이 있어서 전화번호 필터를 개발 ( = 예외처리 노가다 ) 작업한 부분 블로그에 공유합니다. 개발환경: Vue CLI 2 개발 프레임워크: Vue2 angular 나 javascript 에도 쓸 수 있을 것 같습니다. 전국의 프로야근러 & 월화수목금금금 개발자님들 화이팅!! + 보충할 점이나 부족한 부분이 있어서 알려주시면 반영할께요~ 입력할때 전화번호 파이프 (-) 자동으로 찍어주기 [동작화면] [템플릿] <input type="text" v-model="contact" @keyup="getPhoneMask(contact)" /> [스크립트] export default { ... data: () => ({ //전화번호 contact:null, }), methods: { getPhoneMask(val) { let res = this.getMask(val) this.contact = res //서버 전송 값에는 '-' 를 제외하고 숫자만 저장 this.model.contact = this.contact.replace(/[^0-9]/g, '') }, getMask( phoneNumber ) { if(!phoneNumber) return phoneNumber phoneNumber = phoneNumber.replace(/[^0-9]/g, '') let res = '' if(phoneNumber.length < 3) { res = phoneNumber } else { if(ph

Vue 로 실제 프로젝트를 시작하기 위한 기본 환경 구성 세팅을 알아보려고 합니다. 간단하게요~ 자세한 내용은 링크들을 참조해주세요 ^^ Vue  로 웹 프로젝트를 시작하기 전에 한가지 알아둘 점은 웹팩 설치시, 인터넷 익스플로러 9 이상 브라우저에서만 동작한다는 점 입니다. 순수 vue 로는 인터넷 익스플로러 11 부터 정상 동작합니다. (그 외 크롬 등에서는 잘 돌아가요) 약 5~10% 의 유저들이 아직도 윈도우 XP 에서 돌아가는 인터넷 익스플로러 8을 사용한다고 합니다. 그 고객들을 위해서는 '브라우저를 업그레이드 해주세요' 같은 문구와 설치 URL 이 포함된 브릿지 페이지를 하나 제작해서 띄워주면 좋을 것 같아요. #1. 개발 환경 구성 CLI 세팅 (3.0) npm install -g @vue/cli Router 세팅 ( 자세히 보기 ) npm install vue-router --save 웹팩 세팅 vue init webpack 프로젝트이름 그 뒤 npm i npm run dev 하시면 실행화면을 볼 수 있습니다 #2. 화면 퍼블리싱을 위한 세팅 SCSS  사용 (scss 로더 설치) npm install sass-loader node-sass webpack --save-dev + 자세한 내용은  여기 를 참고하세요 + SCSS 문법  참조 Bootstrap 사용하기 https://bootstrap-vue.js.org/ npm i bootstrap-vue 만약 Vuetify 나 Google Material 같은 라이브러리를 사용한다면, 굳이 Bootstrap 을 사용할 필요는 없습니다. 비슷한 Grid System이 라이브러리들에 내장되어 있어서 중복됩니다 + Vuetify Grid System  https://vuetifyjs.com/ko/layout/grid #3 라이브러리 세팅 여기 와 여기 를 참고해보세요 Vuetify 초기 세팅하기 (공식 홈페