내가 보려고 만든 개발 공부 일지

Javascript 객체 먼저, 자바스크립트에서 객체란 무엇인지부터 간략히 정리해보자. js 에서 모든 객체는 언제나 함수에 의해 생성된다. function Person(){} // 함수 정의 var kim = new Person() // 함수로 객체를 생성 이런식으로 말이다. 흔히 쓰는 var obj = {} 이런 코드도 함수랑 전혀 상관없어 보이지만 사실 var obj = new Object() 와 같은 코드다. (Object는 js 기본 함수) Object 뿐 아니라 Function, Array 도 모두 마찬가지다 (new Function(), new Array()) 즉, js에서는 기본타입인 number, string, boolean 과 특수값 null, undefined 빼고는 모두 객체다. 사..

const [val, setVal] = useState(true); const someFunc = ()=>{ setVal(false); setVal(true); } return ( {val ? null : message! } ) 위의 예제 코드에서 하고자 하는 일은, 어떤 이벤트 발생 시 div 태그를 한번 제게했다가 다시 보이게 하려는 것이다. 그래서 위처럼 set을 연달아 다른 값으로 해주면 div가 null 됐다가 다시 그려질줄 알았는데 그렇게 되지않았다.. (함수형 업데이트 방식으로 해도 동일했다) 원인 : setter 함수는 비동기적으로 실행되기 때문 즉, js 작업스택에 작업들이 모두 비워진 이후에 호출된 모든 훅들을 다 처리한 후 렌더링을 하기 때문에 위 상황에서 val 는 false가 되어..

target : 이벤트가 생성된 위치의 element currentTarget : 생성된 이벤트가 퍼지면서 발생된 현재위치의 element ex) [요기] 에서 [요기] 를 클릭하면 function test( e ) { } 에서 e.target == e.currentTarget == 가 된다.

div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } 이렇게 top, bottom, left, right 에 모두 0 을 주게 되면 저 div 는 화면전체를 뒤덮는 효과를 가지게 된다. (top: 0, left: 0, width : 100%, height : 100% 와 같은효과) 아무튼 이걸 이용해서 어떤 팝업이나 툴팁 같은 요소들이 있다고 할때 그 요소 밖같영역을 클릭했을때 없애는 기능을 구현할때 사용한다. 예제) function onClosePop(){ document.querySelector('#pop').style.display = 'none' }