일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- es6
- twoarrow
- accordian
- 리액트
- ㅡ
- 화살표2개
- 부모패딩
- Carousel
- 제어컴포넌트
- createPortal
- 함수형프로그래밍
- parent padding
- BlockFormattingContext
- BFC
- ignore padding
- QueryClient
- DOM
- debouncing
- 서초구보건소 #무료CPR교육
- 문제해결
- tailwindCSS
- transition
- 부모요소의 패딩 무시
- vite
- 조건부스타일
- alias설정
- react
- ?? #null병합연산자
- CustomHook
- useQueryClient
- Today
- Total
목록개발 공부 (168)
프론트엔드 첫걸음
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PlhY4/btrGlhmaj8x/yp5SloJp8jMUno7AfqZ520/img.png)
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가 나온다. 파일에 입력하듯이 커밋메시지를 입력하고 저장하면 된다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/E7hLQ/btrGhyh8L54/xID2VvdFVLHHo3hUCLtR01/img.png)
혼자 문제해결한 과정 기록한 포스팅 현재 지식수준에서 찾은 해결방법을 기록합니다. 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 얕은 비교하여 업데이트 할지 말지 결정하..
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 ..
연산자 ?? 는 검색이 잘 되지 않는다. "자바스크립트 ?? " "자바스크립트 연산자 ??" 어떻게 검색해도 삼항연산자 할때 '?' 만 나오고 .. function head(arr) { return arr[0] ?? '' } 이런 코드에서 ??는 바로 null 병합 연산자이다. 이제 키워드를 알았으니 검색할 수 있다. https://ko.javascript.info/nullish-coalescing-operator nullish 병합 연산자 '??' ko.javascript.info [모던자바스크립트 딥다이브 9.4.3 p.123] ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한..