728x90 프로그래밍38 브라우저 렌더링 과정 및 Reflow Repaint 브라우저 렌더링 과정 및 Reflow Repaint 웹 브라우저 동작 순서 1. 웹브라우저에서 DNS를 통해 사이트 IP주소를 얻음 2. 웹사이트 접속하여 서버와 3번의 handshake (random숫자 +1)를 함 3. 서버에 데이터 요청(HTTP Request)해서 받음(HTTP Response) 4. 데이터 해석 (웹 표준화 기구인 W3C의 명세에 따라 해석) 브라우저의 렌더링 엔진이 HTML parsing(해석)하여 DOM Tree 생성 style 태그 만나면 CSS parsing(해석)하여 CCSOM Tree 생성(HTML parsing 멈추고) CSS parsing 마치면 HTML parsing 중단지점부터 다시 parsing 시작 script 태그 만나면 JS 엔진에 제어 권한을 넘겨 pa.. 2022. 1. 7. [면접 질문] 기타 [면접 질문] 기타 1바이트은 몇 바이트? 8바이트 (예전엔 4, 6바이트 인 컴퓨터도 있었음) 1픽셀은 몇 바이트? 채널이 몇개냐에 따라 다름 3개인 경우 RGB 각각 2^8이므로 24비트 = 3바이트이다. Stack과 Queue의 차이? Stack은 LIFO. Queue는 FIFO(queue.popleft 생각해보면 간단) Binary Tree의 시간 복잡도는? O(n) balanced tree인 경우 O(logn) DNS의 역할? 호스트의 도메인 이름을 호스트의 네트워크 주소(IP)로 변경 하는 것. 사람은 숫자보다 문자를 더 잘 기억 HTTPS와 HTTP의 차이? HTTP: Hyper Text Transfer Protocol HTTPS: Hyper Text Transfer Protocol Secu.. 2021. 12. 19. [면접 준비] OS [면접 준비] OS 운영체제를 사용하는 목적? 1) 제멋대로 동작하는 응용프로그램들이 하드웨어를 잘못 사용하는 것을 막음 2) 응용프로그램들이 단순하고 균일한 메커니즘을 사용하여 복잡하고 매우 다른 저수준 하드웨어 장치들을 조작할 수 있도록 함 -> 두 가지 목표 달성을 위해 추상화를 이용 1) 파일 : 입출력장치의 추상화 2) 가상 메모리: 메인 메모리와 디스크, 입출력장치의 추상화 3) 프로세스: 프로세서, 메인 메모리, 입출력장치 모두의 추상화 프로세스란? 메모리에 올라가서 실행중인 프로그램이 프로세스 운영체제는 시스템에서 이 한 개의 프로그램만 실행되는 것 같은 착각에 빠지도록 해준다. 즉 프로그램이 프로세서, 메인 메모리, 입출력장치를 모두 독차지하고 있는 것처럼 보인다. 이 것은 프로세스라고 .. 2021. 12. 19. [21/11/27] TIL_onClick 무한 렌더링, 21/11/27 TIL onClick event 무한 렌더링. (Room > serchbox.index.js) 아래 코드는 무한 렌더링 된다. const clickTag = useCallback( async (tag) =>{ setSearchKeyword(tag); ... // 함수의 결과값 렌더링시 onClick(clickTag(tag))의 함수가 실행되며 clickTag(tag)의 결과값을 받아오는 과정에서 setSearchKeyword(tag) 코드에 의해 state의 변화가 생기고 이 상태변화는 렌더링을 초래한다. 즉 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 ->.... 무한 반복 ! 그래서 함수 객.. 2021. 11. 27. [React] z-index, 그의 정체는?!? [React] z-index, 그것의 정체는?!? z-index html나 jsx로 화면을 구현할 때 layer 층 개념이 중요하다. 특정 Object가 제일 특정 위치에 오게 하기 위해서 z-index라는 인자를 사용한다. 기본적으로 숫자가 클수록 더 앞(위)에 위치한다. 하지만 왜 원하는대로 동작하지 않는 것이냐...... 규칙을 알아보자 layering 규칙 1. According to this rule, elements that come later in the markup will be on top of elements that come before them. 뒤에있는 코드가 더 위로 온다. 2. To set position for an element, add the CSS position pro.. 2021. 11. 12. [React] SPA와 React-Redux [React] SPA와 React-Redux SPA SPA은 Single Page Application의 약어로 한 개의 페이지로 이루어진 애플리케이션이다. 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다. 라우팅 : 다른 주소에 다른 화면을 보여 주는 것 SPA 단점 : 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. -> 코드 스플리팅(Code splitting)을 이용해 해결 가능 React - Redux React : 소문으로 전파 필요 없는.. 2021. 11. 11. 이전 1 ··· 3 4 5 6 7 다음 728x90
