[TIL - 24.01.03] Vue.js / $nextTick() 1. $nextTick() 1) 사용 원인 -> data가 업데이트 된 후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생 -> 자바스크립트는 DOM 업데이트를 비동기적으로 처리함. -> mounted 훅 사용하면 될 것 같은데... 또 이 mounted 훅이 생각보다 모든 컴포넌트가 렌더되고 실행하는 걸 보장해주지 않는다고 함. 2) 방법 Vue.nextTick(function () { // do something cool }) 코딩/Javascript 2024.01.03
[TIL - 23.12.07] 메모리 관리 관점에서 바라본 &&와 || 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.. 코딩/Javascript 2023.12.07
[TIL - 23.12.04] 자바스크립트 정규식 input에 번호만 입력(하이픈 추가) 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 .. 코딩/Javascript 2023.12.04
[TIL - 2023.11.23] find와 filter 차이 1. JavaScript 1) find와 filter 차이 - find는 배열 요소를 돌다가 조건과 부합하면 그 즉시 동작을 멈춘다. - filter는 배열 요소 전체를 돌면서 조건을 적용한다. 2) 메모리 관리 관점에서... 데이터가 방대한 경우, 상황에 따라 적절하게 취사선택해서 쓸 필요가 있겠다. 코딩/Javascript 2023.11.23
[JavaScript/Vue 2] - param 데이터 전달 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(.. 코딩/Javascript 2023.11.09
TIL (23.09.19) - '--isolatedModules' 에러 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) 타입스크립트 사용 시, 빈 페이지가 있는 경우 발생하는 에러 -> 저장 수시로 할 것. 코딩/React 2023.09.19
TIL(23.05.04) - jQuery 활용한 checkbox 로직구현 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); } }); } //.. 코딩/Javascript 2023.05.04
[TIL] 23.01.10 - 자바스크립트에서 ?? 활용 ?? -> Nullish Caolescing Operator -> Null인 것 같은 애들 걸러주는 연산자다. ex) A ?? B // A가 Null이거나 Undefined이면 B로 해라 코딩/Javascript 2023.01.10
[TIL] 22.12.22 - Vue3 약관동의 체크박스 Vue3 체크박스 1) 배운 내용 전체 동의 (선택항목 포함) {{ list.label }} {{ list.content }} 다음 별거 아닌데 이틀 반을 태웠다. 1) 체크박스 전체 클릭 시 나머지 체크박스 전체 체크됨.(반대로도 가능) 2) 필수 체크박스 2개 체크 시, 체크박스 전체 체크됨. 3) 전체 체크박스 클릭된 상태에서 필수 체크박스 2개 중 1개 해제했을 때 전체 체크박스 해제됨. 4) 선택 체크박스는 제외. 5) 위 조건대로 '다음' 버튼 활성화 & 비활성화 구현. 2) Trouble Shooting -> document.querySelectorAll로 가져올 경우, 배열이 아닌 NodeList를 가져온다.(배열을 새로 생성한 후 작업해야함) -> 조건식 if, elseif 보다는 혹여 .. 코딩/Javascript 2022.12.22
[스터디 4일차] 22.12.21 - ES6 클래스 이해하기 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.. 코딩/Javascript 2022.12.19