분류 전체보기

면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브)

https://youtu.be/_87sAy_SsxQ 나의 언어로 풀어본 최종 답변 우선 사용자가 URL을 입력하면 브라우저 엔진은 쿠키나 세션에 원하는 데이터가 캐싱이 되어있는지 확인합니다. 만약 요청한 정보가 있으면 렌더링 엔진에게 바로 보냅니다. 반면 요청한 정보가 없다며 도메인네임시스템(DNS)에 찾아가서 IP주소를 요청하여 받은 IP주소의 서버를 찾아가서 자료를 요청하고 데이터를 받아와 렌더링 엔진에게 전달합니다. 렌더링 엔진은 HTML문서를 파싱하여 돔트리를 구축하고, CSS 파일과 함께 모든 스타일 요소를 파싱하여 CSSOM 트리를 만듭니다. 그러다가 JS를 만나게 되면, 작업을 중지하고 JS Engine에게 제어 권한을 넘겨 JS Engine이 script를 파싱합니다. DOM트리와 CSSO..

useCallback. [의존성 배열] 난 너만 바라봐

결론: [의존성 배열] 난 너만 바라봐. useCallback useCallback(() => { return value; }, [의존성배열]) const calculate = useCallback((num) => { return num + 1; }, [의존성배열] 이렇게 함수를 useCallback으로 감싸주면 이제 이 calculate라는 변수는 메모이제이션된 함수를 갖고있게된다. 이는 의존성 배열 안에있는 값이 변경될 때 에만 초기화된다. 이 useCallback이 필요한 이유를 알고 이해하기 위해 상황을 설정해보자. 상황설정 간단한다. 인풋하나와 버튼하나가 있다. 인풋값은 number만 들어간다. 그리고 useState를 사용하여 변경값을 input value에 넣어준다. 버튼의 변화를 감지하여 ..

Router v6 헷갈려서 공부해봤다. 기초정리

Router package.json 파일에 들어가 현재 라우터의 버전을 확인해보자. Router 설치하기 npm install react-router-dom@6 index.js파일에 BrowserRouter import하기 import { BrowserRouter as Router } from 'react-router-dom'; //그냥 BrowserRouter로 써도 되지만 더 짧게 쓰려고 Router로 import 기본적으로 Route를 할때는 아래의 구조를 같는다. const container = document.getElementById('root'); const root = createRoot(container); root.render( ); 만약 Router 안에 Routes와 Route를 다..

React를 한다면 무조건 알아야 할 - useRef 2편

결론: 엄청 쉬우니까 쓰자. useRef 사용법 const ref = useRef(value) //아래와 같은 오브젝트 형태로 반환한다 { current: value } // 이 오브젝트를 우리가 접근하고자 하는 태그에 ref속성으로 넣어주기만 하면 끝 이를 사용해서 로그인페이지가 로딩되서 화면에 보여줬을때, 아이디를 클릭하지 않아도 자동적으로 포커스가 되게 해주면 바로 키보드를 쳐서 아이디를 입력할 수 있으니 아주 편하겠지? useRef를 사용해서 이 작업을 손쉽게 해보자. 인풋태그와 로그인버튼을 만든다. import React, { useState, useRef, useEffect } from 'react'; const Ref = () => { return ( 로그인 ); }; export defau..

React를 한다면 무조건 알아야 할 - useRef 1편

결론: 이거 잘 외워둬라. 기본 사용법 const ref = useRef(value) //ref 안의 객체에 아래와 같은 형태로 저장이 된다. { current: value } //언제든 수정가능 ref.current = 'hello' { current. 'hello' } state와 비슷하게 저장공간으로 사용된다. DOM 요소에 접근할 수 있다. input요소를 클릭하지 않아도, 로그인화면에서 자동으로 아이디입력칸에 포커스가 되어있으면 편하겠지? Ref를 사용해서 이런작업을 편리하게 할 수 있다. 마치 JS의 document.queryselector와 같다! (2편에서 배워보자) Ref는 아무리 수정을 해도 다시 렌더링 시키지 않는다! import React, { useState, useRef } fr..

영혼없이 썼던 import React from 'react' - 안써도 된다는데?

궁금했다. create-react-app 하면 항상 맨 위에 있길래. 그래서 찾아봤다. 아~ 최상위 API구나. 그래서 항상 기본처럼 딸려있었구나. (이렇게 react 모듈을 불러와서 실행해주는건 Node.js에서 지원해줌) 그럼 이녀석이 하는 일은 뭐냐? 그건 공식문서를 보면 알 수 있다. 이 import React를 이해하려면 JSX Transform이라는걸 먼저 알아야 한다. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Ma..