프론트엔드 첫걸음

순회하는 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

코딩애플 강의 38강 batch - setState함수 맨 마지막것만 실행되는것 리액트 17에서는 ajax나 setTimeout 내부는 batch 없이 (맨마지막 setState만 실행되는것 없이) 모든 setStatet실행됐음 리액트 18에서는 ajax나 setTimeout 내부에서도 setState batch useTransition , useDeferredValue import {useState, useTransition, useDeferredValue } from 'react'; let a = new Array(7000).fill(0) function App() { let [name, setName] = useState('') let [isPending, startTransition] = useT..