gggimmin 개발 블로그 gggimmin 개발 블로그

useRef 는 DOM 요소에 접근할 수 있도록 하는 React Hook 이다. 리액트에서도 DOM을 선택해야 할 상황이 생기는데 예를들자면, 특정 input 태그를 focusing 해야 하는 경우다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 위 코드는 useRef hook의 사용법이다. 콘솔을 확인해본다면 ref 에는 값이 저렇게 담겨있는걸 볼 수 있다. 그리고 ref 에 담겨있는 값을 변경도 가능하다. import "./App.css";..

웹 페이지의 작동 원리는 이렇다 1. 사용자가 브라우저에 ' www.naver.com ' 주소를 입력한다. (💡 사용자 = 브라우저 = 클라이언트, 같은 의미 ) - 클라이언트가 서버에게 요청(request) 2. HTML 문서를 서버로부터 수신. - 네이버서버는 사용자에게 응답(response) - 그 응답은 바로 HTML 문서 3. 브라우저가 HTML 파일을 해석 (parsing 파싱) - 브라우저의 렌더링 엔진이 서버가 준 HTML 문서를 렌더링 - 렌더링 엔진이 HTML 문서에 코드를 한줄, 한줄 보면서 해석 4. 자바스크립트가 알아들을 수 있는 방식으로, 해석한 내용을 토대로 DOM Tree를 구성. (위의 사진처럼 ) 5. DOM Tree 랑 CSSOM Tree를 묶어 Render Tree를 ..

팀 소개 미니 프로젝트가 끝나자, Javascript 강의와 함께 찾아온 개인 과제... Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다. 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다. 대략적인 과제에 대한 소개는 이렇다. Api 가져오기부터 카드로 정렬해서 나타내기까지 엄청 많이 헤매는 바람에 몇시간이 훌쩍 지나갔다. 그런데 정말 문제가 생겼다. Input 창에 Api에 존재하는 영화를 검색 검색 결과가 없습니다.. 콘솔 창에는 Cannot read properties of null ( reading 'addEventListener' ) 이라는 메세지가 출력되었다. 이 오류에 대해 찾아보니 이 오류는 ' addEventL..