일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react
- 리액트
- 제어컴포넌트
- BFC
- twoarrow
- ignore padding
- 부모요소의 패딩 무시
- es6
- 조건부스타일
- ?? #null병합연산자
- CustomHook
- 문제해결
- useQueryClient
- vite
- DOM
- 함수형프로그래밍
- 부모패딩
- ㅡ
- Carousel
- tailwindCSS
- debouncing
- createPortal
- parent padding
- 서초구보건소 #무료CPR교육
- QueryClient
- 화살표2개
- alias설정
- transition
- accordian
- BlockFormattingContext
- Today
- Total
목록전체 글 (182)
프론트엔드 첫걸음
git 문서를 보고 마음에 드는 출력방식을 선택할 수 있다. ex) git log --format=short
git 편집기 설정 https://git-scm.com/book/en/v2/Appendix-C%3A-Git-Commands-Setup-and-Config 위 링크에서 자신이 사용할 편집기에 맞는 명령어를 찾아 터미널에 입력하면 된다. 맥 + vscode 사용자의 경우 1. vscode에서 cmd+shift+p code입력=> 설치 PATH에 쉘 명령어 code 설치 2. 터미널에 git config --global core.editor "code --wait" 입력 그러면 git commit 할 때 vim 아니라 editor가 나온다. 파일에 입력하듯이 커밋메시지를 입력하고 저장하면 된다.
혼자 문제해결한 과정 기록한 포스팅 현재 지식수준에서 찾은 해결방법을 기록합니다. display inline 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지 width와 height 속성을 지정해도 무시된다 margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음 span, a, video, audio 등 block block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지 width, height, margin, padding속성이 모두 반영됨 div, h1~h6, table, p, ul, li 등 inline-block inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되..
https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align vertical-align - CSS: Cascading Style Sheets | MDN vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. developer.mozilla.org inline 또는 table-cell box에서의 수직 정렬(세로 정렬)을 지정 이미지 엘리먼트를 텍스트 엘리먼트의 라인 속에서 정렬할 때 쓰일 수 있습니다 See the Pen Untitled by JEONG (@cona) on CodePen. inline이나 inline-block 속성에서 vertical-align 할 때는 sub, sup 도 쓸 수..
See the Pen 띄어쓰기 유무에 따라 달라지는 가상클래스 by JEONG (@cona) on CodePen. li:last-of-type li의 부모 하위의 li 중 맨마지막 li last-of-type인 list (마지막 list) li :last-of-type 띄어쓰기가 있는경우는 li의 하위 요소중에 본인과 같은 tag중 마지막을 선택 last-of-type인 list 하위요소 li:last-child li의 부모요소의 마지막자식인데 이게 li일때만! last-child인 li → 그런데 li가 last-child가 아니면 (tag종류 불문 맨 마지막 요소가 아니면) 선택안됨! li :last-child li 내부의 요소들 중에서 마지막 자식 https://stackoverflow.com/qu..
깃은 누가 어떤 작업을 했고, 체크포인트와 변화를 만든 사람이 누구인지 아ㅏㄴ다. 그래서 깃에 올리고 싶은 이름은 중요하다. 사용하고 있던 이름이 마음에 안들면 바꿀 수 있다. 기존 사용자명 확인 git config user.name 이름 최초 설정 또는 수정 git config --global user.name "바꾸고 싶은 이름" 기존 사용자 이메일 확인 git config user.email 이메일 최초 설정 또는 수정 git config --global user.email "바꾸고 싶은 이메일"
https://ko.reactjs.org/docs/react-api.html React.PureComponent React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재합니다. React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있습니다. shouldComponentUpdate - props와 state 얕은 비교하여 업데이트 할지 말지 결정하..
막상 열어보면 기능은 쉬워보일 수 있다. 그런데 내가 생각한 코드랑 너무 다르게 (깔끔하게!!!) 짠다는 점이 특징이다. 화면상에서 이미지의 padding과 background-Color와 blur값을 변동시키는 자바스크립트 함수를 만들 때 나같으면 함수 3개 나왔다.. 그리고 그 함수마다 dom 객체 불러오는 코드 다 한번씩 써줬다.. 우리 웨스 코드 깔끔한거 보세요.. Update CSS Variables with JS Spacing: Blur: Base Color 1. 첫번째로 input을 다 한번에 querySelectorAll로 가져와서 nodeList를 만들었다. 2. 'px' 등의 suffix가 필요한 input은 HTML에 data-sizing이라는 dataset을 넣었다. 3. nodeL..
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 ..
input 박스에서 색을 변경할 때마다 화면 색이 바뀌게 하려고 한다. 바꾸려는 화면은 상위컴포넌트(App)에, 바뀌게 하는 input 태그는 하위 컴포넌트(Navbar)에 있는 상황이다. 하위컴포넌트에 prop으로 콜백함수(bgColorHandler)를 넘기려고 한다. 이 때 콜백함수는 style.setProperty를 사용해야 할까 , 아니면 useState로 상위컴포넌트에서 화면색에 대한 변수를 관리한 다음 inline으로 style을 넣는게 나을까? 아무튼 둘 다 되긴 한다. - 코드를 단순화해서 올리지 않고 그대로 복붙하는 이유는.. 개린이에게는 nodeList를 forEach돌리는 것도 새삼스러운 코드이기 때문에... (님들 nodeList와 array의 차이점 알아? 난 몰랐어..) setP..