반응형 개발/Javascript41 객체 변경 방지 하는 법 * 프로퍼티 어트리뷰트가 어떤건지 모르면 프로퍼티 어트리뷰트가 뭔지 공부하고 이 글을 보는것이 더 좋을 것 같다. * Typescript를 사용한다면 as const로 해결 할 수 있다. 객체 변경 방지 const로 정의한 객체는 메모리 주소를 할당하기 때문에, 변화가 가능한 값이다. JS에서는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 구분 메서드 프로퍼티 추가 프로퍼티 삭제 읽기 쓰기 재정의 객체 확장 금지 Object.preventExtensions x o o o o 객체 밀봉 Object.seal x x o o x 객체 동결 Object.freeze x x o x x 객체 확장 금지 : Object.preventExtensions const person = {name:'Lee'} // 확장.. 2024. 2. 8. 렉시컬환경과 클로저, 그리고 React에서 이전 state를 기억하는 방식 렉시컬환경 렉시컬환경은 실행중인 함수와 코드블록을 포함하는 검색범위인데, 쉽게 이해하려면 코드블록과 연관지어 이해하는 것이 편하다. 변수에 접근할 땐, 내부 렉시컬 환경 -> 외부 렉시컬 환경 -> 외부 2 렉시컬 -> 전역 렉시컬 환경으로 검색범위를 확장한다. 아니면 그냥 스크린샷이라고 생각하자. 리액트 함수 컴포넌트에서의 렉시컬환경과 클로저 클로저 클로저는 '내부함수가 자신이 선언되었을때의 환경 을 기억하는 성질' 라는 글도 있고, 클로저는 '외부 변수를 기억하고 이 외부 젼수에 접근할 수 있는 함수' 라는 글도 있다. 어쨌든, new Function으로 만든 함수를 제외한 모든 JS의 함수는 클로저이다 . 함수는 호출 할 때마다, 새로운 렉시컬 환경이 생성되고 외부 변수는 마지막 접근했던 당시의 렉.. 2023. 12. 16. onClick과 onMousedown의 차이 onClick과 onMousedown의 차이 react test 코드 만드는것을 연습하면서 혼자 select box를 만들다 예전에 작성한 이 글을 참고하게 되었다. TIL : onBlur때문에 onClick이 실행되지 않을 땐, onMouseDown을 사용 setVisibleUlTag(!visibleUlTag)} onBlur = {()=>setVisibleUlTag(false)} > n개씩보기 {visibleUlTag ? {array.map(el)=> n개씩보기} : null} button클릭 li태그 노출 li태그 클릭시 onClick이 실행되기 전에 button태그의 onBlur가 실행되 wnsdufdl.tistory.com 궁금해졌다. 왜 onMousedown에 list click event를 할.. 2023. 11. 21. 모달과 이벤트 버블링 모달과 이벤트 버블링 웹에서 발생하는 대부분 이벤트들은 해당 요소부터 시작하여 부모 요소들을 거슬러 올라간다. 이렇게 이벤트가 거품이 올라가듯 전파되는 현상을 이벤트 버블링이라고 한다. 모달의 backdrop과 이벤트 버블링 모달을 만들면 보통 모달 외부(backdrop)를 눌렀을때 모달이 꺼지는 기능도 만들게 된다. 이때 이벤트 버블링을 고려하지 않으면 모달을 클릭했을때도 모달 backdrop의 onClick이 발생하여 모달이 꺼지게 된다. 대부분 이렇게 간단하게 말해도 이해를 하겠지만, 모달을 안만들어본 사람이라면 이해를 못할 수 있으니 풀어서 설명하면 모달을 클릭했을때, 당연히 모달에 정의된 onClick이 먼저 실행된다. 그리고 이벤트 버블링으로 back drop의 onClick까지 실행된다. 대.. 2023. 9. 12. 이전 1 2 3 4 ··· 11 다음 반응형
