일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- useQueryClient
- accordian
- es6
- alias설정
- 문제해결
- transition
- parent padding
- DOM
- debouncing
- 서초구보건소 #무료CPR교육
- 제어컴포넌트
- Carousel
- QueryClient
- vite
- ?? #null병합연산자
- BFC
- 화살표2개
- CustomHook
- twoarrow
- 조건부스타일
- 리액트
- 부모패딩
- ignore padding
- 함수형프로그래밍
- tailwindCSS
- ㅡ
- BlockFormattingContext
- 부모요소의 패딩 무시
- createPortal
- Today
- Total
목록전체 글 (182)
프론트엔드 첫걸음
css border로 삼각형을 그릴수 있다는 것을 알게되었다. 충 격... border가 왜 삼각형이 되는거야... 알고보니 우리가 아는 border는 각각 그 모서리에 각도를 가지고 있었던 것이었다...!! .border { width: 100px; height: 100px; border: 10px solid red; border-right: 10px solid transparent; } 그러니까 내부의 크기를 0으로 하고 border로만 영역을 채운뒤에 세 변의 border를 삭제하면=> 남아있는 border가 삼각형모양으로 보이는것이다.. 응용하면 딱지모양 ☒ 도 만들 수 있고, 가운데가 비어있는 딱지 모양도 만들수 있다..! See the Pen button style by JEONG (@cona..
순회하는 element에 모두 ref를 달지 않고 상위 element에만 ref를 달아준 뒤에 상위 ref에서 Array.from(상위element.ref).map 을 사용해도 되지만- map으로 순회하는 component마다 ref를 달고 싶다면 ?? https://stackoverflow.com/questions/63059962/reactjs-map-with-a-ref-to-each-component ReactJS .map with a ref to each component Working on making it so when a user goes back a page in my react app they will be scrolled to the position on the page they were..
1. 루트경로에 jsconfig.json 만들고 (.gitignore, package.json과 같은 위치) 2. 아래와 같이 compilerOptions에 baseUrl추가 { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 3. ide를 껐다 켠다. 3번이 중요함. 아 왜 안되지 안되나보다 했는데 껐다 켜니까 잘됨 ^^ 껐다 켜시오. [참고] https://imkh.dev/react-absolute-path/
datalist와 option의 차이 datalist는 추천하는 선택지를 나타내는 option 여러개를 보여줄 수 있으면서 input으로 자유롭게 입력할 수 있다. datalist 사용방법 datalist에 id 주고, 그 id를 input의 list속성에 value로 제공한다. img1 img2 img3 예시 See the Pen html datalist by JEONG (@cona) on CodePen.
background-clip text : 백그라운드 이미지를 텍스트에만 border-box : border까지 padding-box : padding까지 context-box : content내에서 background-position: 배경화면 위치 background-position: left 20px; /* 0% 20px; */ background-position: 50% 50%; /* center; */ background-position: bottom 50px right 100px; /*아래로부터 50px, 오른쪽으로부터 100px*/ background-position: 100px 50px; /* 왼쪽으로부터 100px, 위로부터 50px */ background-size /* Keyword v..
https://stackoverflow.com/questions/41121982/strange-behavior-of-an-array-filled-by-array-prototype-fill Strange behavior of an array filled by Array.prototype.fill() I face something I don't understand with an array. Indeed, I created an array I have filled with empty subArrays to obtain a 2D Matrix. But when I manipulate the array it doesn't behave as I expect... stackoverflow.com fill이라는걸 알게됐..
Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (localhost) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab. https://stackoverflow.com/questions/37344066/firebase-this-domain-is-not-authorized [Firebase: This dom..
설치 npm install @react-oauth/google@latest npm install jwt-decode index.html /*중략*/ Sandwich 코드 function App() { //구글 로그인 const [user, setUser] = useState({}); function handleCallbackResponse(response) { console.log('Encoded JWT ID token : ' + response.credential); var userObject = jwt_decode(response.credential); console.log(userObject); setUser((prev) => { return { ...prev, userObject }; }); co..
[생활코딩] https://youtu.be/bNqOHnsJm-w function outter(){ var title = 'coding everybody'; function inner(){ alert(title); } inner(); } outter(); // alert('coding everybody') 내부함수에서 외부함수의 지역변수에 접근할 수 있는 것을 클로저라고 함 function outter(){ var title = 'coding everybody'; return function(){ alert(title); } } var inner = outter(); inner(); // alert('coding everybody') inner(); 로 outter를 호출하면 function() 리턴 리턴..
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN The white-space CSS property sets how white space inside an element is handled. developer.mozilla.org 텍스트의 여백 그대로 사용할 때 태그 안에 넣어주면 여백을 그대로 살릴수있는데, 이때 줄바꿈이 필요할때 white-space: pre-wrap (공백 있는 그대로 표시) 또는 white-space: pre-line(공백 1개만 표시) 사용할 수 있다. [참고] https://aboooks.tistory.com/187