정현's 블로그

1. $on / $off 1) $on -> 이벤트 청취 2) $off -> 이벤트 청취 중단 3) 생겨난 이유는...? 1) 라이프사이클 훅 이슈 // datepicker를 input에 한 번 연결합니다. // DOM에 직접 연결됩니다. mounted: function () { // Pikaday는 서드파티 라이브러리입니다. this.picker = new Pikaday({ field: this.$refs.input, format: 'YYYY-MM-DD' }) }, // 컴포넌트를 destroy하기 직전에 // datepicker를 destroy합니다. beforeDestroy: function () { this.picker.destroy() } -> 라이프사이클 훅에서만 picker에 접근할 수 있는 ..

1. $nextTick() 1) 사용 원인 -> data가 업데이트 된 후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생 -> 자바스크립트는 DOM 업데이트를 비동기적으로 처리함. -> mounted 훅 사용하면 될 것 같은데... 또 이 mounted 훅이 생각보다 모든 컴포넌트가 렌더되고 실행하는 걸 보장해주지 않는다고 함. 2) 방법 Vue.nextTick(function () { // do something cool })

1. Vue2 1) 오늘 배운 내용 예를 들어, 환경설정 옵션값이 true/false 에 따라, 특정 input값이 비어있다면 '설정해주세요'라는 메시지 팝업을 띄운다고 하자. if ((this.place === null || this.place === '') && this.isRequiredInputPlace) { this.$commonFunction.showDialog_alert_message('장소를 입력해주세요.'); } 컴파일러가 코드를 읽을 때 true || 면 그냥 true라고 인식해버림. false && 면 그냥 false라고 인식해버림. 조건이 여러개일 때, 기준을 옵션값에 맞춰주면 if (this.isRequiredInputPlace && (this.place === null || th..

1. Vue 2 1) 이번주 배운 내용 회사전화 - oninput 함수는 값이 바뀔때마다 실행된다. .replace(/[^-0-9]/g,'') - 숫자만 입력 가능하게 한다. .replace(/(^02|^031|^032|^033|^041|^043|^044|^051|^052|^053|^054|^055|^061|^062|^063|^064|^0504|^0505|^0507|.{0}|^01.{1}|[0-9]{3,4})([0-9]{3,4})([0-9]{4})/g, '$1-$2-$3') - 02, 031, 032 ... 는 지역번호. - 소괄호()가 문자열 한 뭉치다. - 첫번째 뭉치에는 지역번호(02, 031, 033... 에 이어 01{숫자 1자리 - 핸드폰 번호 첫 010, 011, 016등등 019까지} 3 ..

1. JavaScript 1) find와 filter 차이 - find는 배열 요소를 돌다가 조건과 부합하면 그 즉시 동작을 멈춘다. - filter는 배열 요소 전체를 돌면서 조건을 적용한다. 2) 메모리 관리 관점에서... 데이터가 방대한 경우, 상황에 따라 적절하게 취사선택해서 쓸 필요가 있겠다.

index.vue param을 전달받는 쪽에서 param을 받아 세팅한다.(데이터 매칭) acceptWork.vue popupOpen(param) { this.setParam(param); this.modalVisible = true; }, // 여기서 param 받는다. setParam(param) { if (param === undefined || param === null) return; if (param.dialogType) this.dialogType = param.dialogType; if (this.dialogType === 'insert') this.initInsertPopup(); else if (this.dialogType === 'select') this.initSelectPopup(..

1. React 1) 에러 내용 1) --isolatedModules cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208 2) 해결 1) export {} 넣기 -> export {} 입력하거나, 코드 편집기 내 작업중인 해당 페이지에서 저장 Ctrl+s 2) 저장 -> 코드 편집기에서 해당 페이지 작업 후, 저장 필수... 3) 원인 1) 타입스크립트 사용 시, 빈 페이지가 있는 경우 발생하는 에러 -> 저장 수시로 할 것.

1) 오늘 배운 내용 - 룰렛 이벤트 적용하려고 자바스크립트 파일을 프로젝트 폴더 내에 저장했다. - window, document 쪽에서 에러 발생. - Vue 파일에서 해당 스크립트 파일 import 해오는데 계속 에러발생. 2) 서버 사이드 렌더링이기 때문에 window, document는 인식 못함. 다음과 같이 처리했다. // nuxt.config.js plugins: [ { src: '@/plugins/roulleteScript.js', ssr: false } ] -> ssr: false // DefaultRoullete.vue export default { name: 'DefaultRoullete', data () { return { img_url: require('../../assets/i..

1) 이번주 배운 내용 전체: chkAll 내용1, 내용2, 내용3: chkLogIn, chkLastReservation, chkLastVisit //SearchBox 내 체크박스(전체체크여부) , fnSetCheckBoxAll : () => { $('#chkAll').click(function(){ var checkedAll = $('#chkAll').is(':checked'); if(checkedAll) { $('#chkLogIn, #chkLastReservation, #chkLastVisit').prop('checked',true); } else { $('#chkLogIn, #chkLastReservation, #chkLastVisit').prop('checked',false); } }); } //..

1. 오늘 배운 내용 select discount_class_cd_id , ( select a.minor_name from minor_codes a , major_codes b where a.major_code_id = b.major_code_id and b.major_code = 'discount_class' and a.use_yn = 'Y' and b.use_yn = 'Y' and b.account_id = 1 and a.minor_id = discount_class_cd_id ) as discount_class_name , from_date , to_date , from_time , to_time -- 영업구분 ?? , day_scd , ( select name from s_codes where g..