정현'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) 이번주 배운 내용 전체: 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); } }); } //..

?? -> Nullish Caolescing Operator -> Null인 것 같은 애들 걸러주는 연산자다. ex) A ?? B // A가 Null이거나 Undefined이면 B로 해라

Vue3 체크박스 1) 배운 내용 전체 동의 (선택항목 포함) {{ list.label }} {{ list.content }} 다음 별거 아닌데 이틀 반을 태웠다. 1) 체크박스 전체 클릭 시 나머지 체크박스 전체 체크됨.(반대로도 가능) 2) 필수 체크박스 2개 체크 시, 체크박스 전체 체크됨. 3) 전체 체크박스 클릭된 상태에서 필수 체크박스 2개 중 1개 해제했을 때 전체 체크박스 해제됨. 4) 선택 체크박스는 제외. 5) 위 조건대로 '다음' 버튼 활성화 & 비활성화 구현. 2) Trouble Shooting -> document.querySelectorAll로 가져올 경우, 배열이 아닌 NodeList를 가져온다.(배열을 새로 생성한 후 작업해야함) -> 조건식 if, elseif 보다는 혹여 ..

public, private, setter, getter // 자바스크립트 클래스 문법에 대해.. 1. public -> writable, enumerable, configurable( 해당 속성의 값을 변경할 수 있고, 열거가 가능하며, 속성 재변경을 방지하는 특성) -> public 필드는 생성자나 함수를 통해 동적으로 필드를 생성할 수 있다. class Rectangle { height = 0; width; constructor(height, width) { this.height = height; this.width = width; } } 2. Private -> 클래스 외부나 서브 클래스에서 접근할 수 없다. class CoffeeMachine { #waterLimit = 200; #checkWa..