일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- alias설정
- QueryClient
- debouncing
- twoarrow
- es6
- ignore padding
- 화살표2개
- accordian
- parent padding
- Carousel
- 함수형프로그래밍
- BFC
- transition
- BlockFormattingContext
- 서초구보건소 #무료CPR교육
- ?? #null병합연산자
- react
- useQueryClient
- 문제해결
- 리액트
- vite
- 부모요소의 패딩 무시
- tailwindCSS
- DOM
- ㅡ
- createPortal
- 부모패딩
- 제어컴포넌트
- CustomHook
- 조건부스타일
- Today
- Total
목록DOM (2)
프론트엔드 첫걸음
![](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/b84Y24/btrH7QATXbQ/yfaO2OkzIUkzdeZ9BVkMjk/img.png)
input 박스에서 색을 변경할 때마다 화면 색이 바뀌게 하려고 한다. 바꾸려는 화면은 상위컴포넌트(App)에, 바뀌게 하는 input 태그는 하위 컴포넌트(Navbar)에 있는 상황이다. 하위컴포넌트에 prop으로 콜백함수(bgColorHandler)를 넘기려고 한다. 이 때 콜백함수는 style.setProperty를 사용해야 할까 , 아니면 useState로 상위컴포넌트에서 화면색에 대한 변수를 관리한 다음 inline으로 style을 넣는게 나을까? 아무튼 둘 다 되긴 한다. - 코드를 단순화해서 올리지 않고 그대로 복붙하는 이유는.. 개린이에게는 nodeList를 forEach돌리는 것도 새삼스러운 코드이기 때문에... (님들 nodeList와 array의 차이점 알아? 난 몰랐어..) setP..