JavaScript
-
[this, 화살표 함수] Javascript this 완전정복!javascript 2022. 3. 31. 16:43
안녕하세요! 오늘은 좀 개념적인 부분인 자바스크립트의 this에 대해서 알아보도록 하겠습니다. 우선 this는 생성자 혹은 메소드에서 객체를 가리킬때 쓰입니다. this 때에 따라 다른 값을 가리킵니다. 어디에서 선언되냐에 따라서 그 값이 바뀝니다. global scope 에서 사용될 때 this 는 전역 객체를 가리킵니다.(window 객체) 함수에서 사용될 때에도 this 는 전역 객체를 가리킵니다. 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킵니다. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 전역 객체를 가리킵니다. 생성자에서 사용될 때 this 는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다. 글로써 보는 것보다 코드와 함께 설명하면 훨씬 이해하기 ..
-
Event bubbling, 이벤트 버블링이란?javascript 2022. 3. 25. 20:23
안녕하세요 박상준입니다. 오늘은 이벤트 버블링에 대해 공부해보는 시간입니다! 🤔 What is the event bubbling? 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. HTML요소는 트리 형식이죠? 그렇다면 그 랜딩페이지에서 가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있죠. 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가집니다. 이 것을 ' 이벤트 버블링' 이라고 합니다. What is the event Capture? 이벤트 캡쳐링은 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달합니다. 이벤트 버블링과 정반대인 것이죠. 이 것은 이벤트리스너의 옵션으로써 구현할 ..
-
[Typescript,React] Typescript로 Form,UseState 사용해보기Front-end/React 2021. 12. 14. 18:04
안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다! #1. Form event with react+typescript 저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다. 간단하게 말하면 타입스크립트는 inp..