일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Carousel
- ㅡ
- QueryClient
- accordian
- useQueryClient
- BFC
- transition
- 제어컴포넌트
- 조건부스타일
- ignore padding
- debouncing
- 리액트
- 함수형프로그래밍
- createPortal
- CustomHook
- 화살표2개
- alias설정
- 문제해결
- ?? #null병합연산자
- parent padding
- es6
- vite
- 부모패딩
- 서초구보건소 #무료CPR교육
- BlockFormattingContext
- twoarrow
- 부모요소의 패딩 무시
- DOM
- tailwindCSS
- react
- Today
- Total
목록개발 공부/Javascript (21)
프론트엔드 첫걸음
이벤트 위임 localStorage에 데이터가 저장되는 todoList 를 만들었다. 아이템 추가된 후에 추가된 아이템에 delete버튼을 클릭한 경우 추가된 아이템을 그린 뒤에 delete 버튼에 이벤트를 걸려고 하니까 delete버튼이 null이라고 하는 오류가 발생했다. 이벤트 위임을 사용하니 해결되었다. https://stackoverflow.com/questions/16512016/event-listener-in-elements-appended-after-dom-content-loaded //deleteEvent document.body.addEventListener('click', function (e) { if (e.target.className == 'delete') { let $delBt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tRZYk/btrI2q2MCMw/6uBVp4Gg4TJD1GLuwSSDp0/img.png)
getter setter setter를 설정하면 값을 할당하려 할 때 프로퍼티의 값이 직접 바뀌지 않고 setter가 호출된다. getter를 설정하면 값을 읽을때 getter를 통해 읽는다. class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } get age() { return this.age; } set age(value) { this.age = value; } } const user1 = new User('Steve', 'Job', 11); console.log(user1.age); user1 생성 시 constructor에서 -1..
첫 번째 truthy를 찾는 OR연산자 '||' 모든 피연산자가 false이면 마지막 피연산자를 반환 let firstName = ""; let lastName = ""; let nickName = "바이올렛"; alert( firstName || lastName || nickName || "익명"); // 바이올렛 리팩토링 예시 리팩토링 전 function fetchData() { if (state.data) { return state.data; } else { return 'Fetching..'; } } 리팩토링 후 function fetchData() { return state.data || 'Fetching'; } 첫 번째 falsy를 찾는 AND 연산자 ‘&&’ 모든 피 연산자가 true이면 마..
:root { --width: 30vw; } getComputedStyle(document.documentElement).getPropertyValue('--width');
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cb7kKi/btrHIHrPNhI/arZd1g6yw1upUeutBvCaCK/img.png)
버튼을 클릭할때마다 HTML이 특정 요소에 insert되어 화면에 보여지는 코드가 있을때 동적으로 추가된 HTML에 이벤트를 붙이고 싶으면 어떻게 해야할까? 우선 이벤트를 달고싶으면 그 DOM 을 선택자로 골라내야하는데 그게 안된다. querySelector가 HTML로 생성된 요소를 찾지 못했다. 콘솔에 바로 찍어보면 또 찍힌다 . See the Pen Untitled by JEONG (@cona) on CodePen. codepen에서 확인할 수 있다시피 'DOMContentLoaded'를 사용하여 DOM이 모두 로드된 뒤에 해도 안된다. let html = ` 생성되는 아이템 `; let $container = document.querySelector('#container'); let $btn = ..
[코딩애플 JavaScript 입문과 웹 UI개발] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/javascript-jquery-ui/ 스크롤바 내린 높이 : scrollTop div 박스의 실제 높이 : scrollHeight 눈에보이는 div 박스의 높이 : clientHeight 실제 높이 = 스크롤 내린높이 + 눈에보이는 눈에보이는 div 박스의 높이 $div.scrollHeight = $div.scrollTop + $div.clientHeight 가 되면 스크롤이 전부 내려왔다는 뜻이다. 스크롤이 다 내려왔을때 alert를 띄우는 javascript 코드는 다음과 같다. ( -5는 오차를 감안한 것이다.. 완전히 스크롤 끝까지 닿지않고 스크롤..
[코딩애플 JavaScript 입문과 웹 UI개발] 강의 수강 후 배운 것을 정리한 것입니다. https://codingapple.com/course/javascript-jquery-ui/ 캐러셀은 CSS가 관건이다. 사진이 들어가는 slide list는 사진크기의 3배로 두고 사진을 하나만 보여주는 slide container는 사진크기의 1배로 두고, overflow:hidden을 주면된다. img { vertical-align: bottom; } .slide-container { overflow: hidden; width: 30vw; } .slide-list { background-color: grey; width: 90vw; transition: all 1s; display: flex; } .sl..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bj1mWR/btrHdsu3DTS/6euEni1XGSthcttZtFQW71/img.png)
[출처] https://ko.javascript.info/script-async-defer https://www.youtube.com/watch?v=tJieVCgGzhs&feature=youtu.be 브라우저가 그림그리는 순서는 다음과 같다. 1. Render Tree만들기(parsing 및 style) 2. Layout잡기 3. Paint 4. composite 처리(transform , opacity 등) 브라우저의 페이지를 렌더링할때 DOM (Document Object Model), CSSOM(CSS Object Model)을 만들어 렌더트리를 만드는 과정을 거치는데 , 이 때 태그로 외부 자바스크립트 소스를 참조하게 되면 DOM트리 만드는 것을 중단하고 해당 javascript 코드를 파싱한다...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6I21y/btrHqQnGtvv/KZ6WC1KYnvcZkkNVMokCck/img.png)
해당 코드펜 링크의 로고를 클릭하면 코드펜에서 콘솔에 찍히는 결과를 확인할 수 있다. 이벤트버블링이 발생하는 코드 See the Pen Untitled by JEONG (@cona) on CodePen. 👍 을 클릭하면 "like it"을 , title을 클릭하면 "title" 을 콘솔에 찍게 했을때 title을 클릭하면 title만 찍히지만, 👍을 클릭했을 때는 like 와 title이 두번씩 찍힌다. 이 때 내가 유도하지 않은 title 이벤트의 target이 title클릭 했을 때의 target과 다르다는 점에 주목하자! 이는 이벤트 버블링 때문이다. (자식요소 클릭했을때 이벤트 버블링이 일어나서 상위요소의 이벤트를 발생시키는 효과가 일어났다. 이벤트버블링에 의한 이벤트 발생 시 currentTar..
NodeList와 Array 차이점 1. NodeLists는 DOM 요소에 접근하는 언어에 구애받지 않는 객체(브라우저 API)이며, Arrays는 항목 모음을 포함하는 데 사용할 수 있는 JavaScript 객체다. 2. NodeList는 정적 콜렉션, Node.childeNodes는 동적인 콜렉션이다. 경우에 따라, NodeList는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, Node.childNodes 는 실시간입니다: var parent = document.getElementById('parent'); var child_nodes = parent.childNodes; console.log(child_nodes.length); // let's assume ..