개발자_승딱 개발자_승딱

currentTarget : 이벤트리스너가 붙어있는 node target: 이벤트가 발생한 node 버블링 이랑 고려해서 사용해야됨

- 리액트 컴포넌트에서 렌더함수 안의 jsx 는 실제 Dom 을 조작하는 것이 아니라 가상의 Dom 을 조작하는 것이다. - render() 의 결과는 실제dom 을 의미하지 않고 그형태를 본딴 자바스크립트 객체를 반환한다. (그 객체는 가독성이 떨어져서 그러한 점을 보완하기 위해서 jsx 문법을 사용한다.) 실제dom 이란? 실제돔은 html을 파싱한 결과를 이야기한다. 이는 html 을 javascript객체의 형태로 표현한 결과물을 이야기하며 이러한 dom 들을 트리형식으로 모아놓은것을 dom tree 라고 한다. > dom 트리는 결국 html 을 javascript 와 연결시키기 위해 만든거다 가상dom이 없다면 ? 실제 dom은 브라우저에서 html 을 파싱한 결과물 이고 이후에 css 파일 ..

맥사용 기준 으로 작성 했습니다~ https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev bToC 아이디어에서 이제 앱개발은 빼놓을수 없는 요소인거 같다. 간만에 공부 하고 싶다는 생각이 들어서 react-native 공부해봐야지 일단 npx react-native init myProjectFolderName --template react-native-template-typescript 설치 해주고 vscode 로 열어보자 (c..

scrollHeight : scroll 이 닿는 영역의 총 높이, scroll 이 존재하는 박스의 높이가 아니라 스크롤영역의 총 높이를 나타낸다. clientHeight : 해당영역의 높이 overflow-y: auto; 일때 고정된 높이보다 해당하는 content의 높이가 더 높아질경우 스크롤이 생기게된다 ( clientHeight { if (wrapperNode !== null) { const hasScroll = wrapperN..

1. 엘레먼트 잡고 이벤트 데이타 보기 2. source tab 에서 특정이벤트에 중단점 잡기 3. 특정엘리먼트에 걸려있는 이벤트함수 보기 1. 개발자 도구에서 위 이미지 에서 왼쪽 상단 마우스 버튼을 누르면 엘레먼트를 집을수 있다. 엘레먼트 집고나서 콘솔창에 $0 를 치면 해당 엘레먼트 코드가 보인다 그다음에 콘솔창에 monitorEvents($0) 라고 치면 해당 엘리먼트 위에서 이벤트 발생시 이벤트 데이타가 콘솔창에 찍힌다. 2. source tab 에서 옆에 보면 eventListenr Breakpoints 라고 있다 거기서 원하는 이벤트를 집어놓으면 나중에 해당이벤트 발생시 코드가 중단 되고 그시점의 코드를 확인할수 있다. 3. element 탭에도 엘레먼트 집은다음에 볼수 잇다. ㅎㅎ근데 그 ..

실행컨텍스트 : 실행가능한 코드가 실행되기 위해 필요한 환경 실행컨텍스트 구조 : 변수객체, 스코프체인, this value 변수객체의 속성 : 1.변수, 2.(parameter,argument)(전역컨텍스트 말고 함수컨텍스트인경우), 3.함수 선언식(함수표현식은 아니다 그래서 함수 표현식은 호이스팅이 안됨) 함수컨텍스트에서의 변수객체와 전역컨텍스크에서의 변수객체의 차이 : 전역컨텍스트에서 변수객체는 GO(전역객체를 가리킨다) 함수컨텍스트에서 변수객체는 AO(활성객체를 가리킨다) GO(전역객체) 와 AO(활성객체) 의 차이 : GO 는 전역변수와 전역에 선언된 함수를 포함한다. AO 는 지역변수와 지역에선언된 함수를 포함한다 + (parmameter, argument) : 이 둘의 차이 = 함수가 선언될..

두개다 있는거 잡을때 .center.red 붙여서 사용 자손은 한칸 띄어서 자식은 > 붙여서 하는거 까먹음

input 창에 focus 주고 싶으면 정적으로 주고싶을때는 input 태그에 autoFocus 속성을 넣어주면 된다 근데 동적으로 줘야하는 경우도 있는데 그럴때 ref 를 이용한다. import { useRef } from 'react'; const App = () => { const inputRef = useRef(); useEffect(()=> inputRef.current.focus(),[??]) return ( ) }; 근데 이렇게 동적으로 포커스를 줄때 이미 인풋창에 디폴트 값이 있는경우들이 있다. 예를 들어 @로 시작하는 인풋창이여서 고정으로 있는경우라던가 근데 동적으로 위와 같이 포커스를 잡아주게 되면 포커스는 제일 앞에 위치한다. ㅣ 표시를 커서로 봣을때 내가 원하는 포커싱은 @ㅣ 이런 ..