정현's 블로그

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

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

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. 오늘 배운 내용 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..

?? -> 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 보다는 혹여 ..

1. Vue js 1) 에러 발생 - 화면 하단 버튼에 조건식(삼항연산자) 사용. 사진이 있는 경우만 나타나게 끔 설정. 그런데 컴퓨터에서는 잘 나타나는데 모바일에서는 사진이 없는데도 나타남. 2) 해결 - store 내 값과 page 내 값을 일치시켜줌. 3) 원인 photo.js const getDefaultState = () => { return { imageAfter: Array.from({ length: 4 }, () => undefined), // undefined } } pageX.vue created () { this.isUploaded = this.photoStore.getImageAfter() !== null // null } -> store(photo.js)에서는 undefined 인..

안녕하세요 오늘 나의 인간과 멍뭉이를 알아볼까요? BEM 규칙을 따라 블록__요소--변경자 로 구성. 내가 원했던 것은, class="label"로 명명한 부분의 글자크기와 폰트를 최대한 재사용하고 싶었음. 이럴 땐 변경자를 활용해주면 좋다. 단, 변경자 클래스를 선언할 때 default가 되는 클래스 이름을 꼭 같이 써줘야 함. ex) label이 default고 label--blue와 label--purple에 폰트, 글자 크기를 전달하고 싶을 경우 label--blue와 label--purple 클래스 명에 label을 같이 써주면 됨. class="label label--blue"

1. brew 설치 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 맥 터미널에서 다음을 입력 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ※ Formulae와 Casks -> Furmulae는 콘솔용 패키지. Cask는 데스크탑용 패키지(LaunchPad에 추가된다) ※ brew 명령어 -> brew search [검색할 패키지명] brew install [--cask (*cask의 경우)] [설치할 패키지명] brew remove [삭제할 패키지명] 2. iTerm 설치 (다..

1. React 1) 오늘 배운 내용 A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. -> 댓글 작성기능 추가하다가 발생. -> 댓글란(input)에 댓글 입력하고 '작성' 버튼 누르기도 전에 콘솔창에 에러뜸. -> input value로 undefined가 들어가서 발생한 오류. 2) 해결 const [comment_text, setCommentText] = React.useState(); -> const [comment_text, setCommentTe..