본문 바로가기

분류 전체보기141

[기술 면접 스터디-1일차] 브라우저 렌더링 원리, RESTful API 1. 웹페이지가 브라우저에 렌더링되는 과정을 설명해주세요. 각 브라우저에는 렌더링 엔진이 존재하는데 이 렌더링 엔진이 critical rendering path 프로세스를 거치며 화면을 렌더링 합니다. 1. 사용자가 주소 표시줄에 URI 입력 2. 브라우저 엔진이 캐시에서 해당 URI의 캐싱된 데이터가 있는지 확인, 있다면 해당 자료를 렌더링 엔진에게 보내주고, 없다면 렌더링 엔진이 네트워크에 URI를 전달하여 네트워크가 해당 서버에 요청을 보내고, 응답받은 리소스를 렌더링 엔진에게 전달 3. 렌더링 엔진의 HTML파서가 HTML태그를 한줄씩 파싱하여 브라우저가 이해할 수 있는 Node 객체로 변환하고, 이 Node, 즉 DOM의 계층 구조인 DOM Tree를 형성 4. CSS파서가 CSS를 caseca.. 2023. 7. 19.
브라우저의 구성 요소와 렌더링 과정 브라우저의 렌더링 원리 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 구성되어 있다. 브라우저가 화면을 렌더링 할 때, CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. (1) 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 캐시에서 자료를 찾는다. 사용자가 주소표시줄에 입력을 하는 순간, 브라우저 엔진이 주소 값에 해당하는 캐싱된 데이터가 있는지 캐시에서 찾아본다. (2) 렌더링 엔진이 브라우저 엔진 또는 네트워크로부터 자료를 받는다. - 캐싱된 자료가 있다면 브라우저 엔진으로부터 렌더링 엔진이 자료를 받아 HTML, CSS, image 등을 파싱한다. - 캐싱된 자료가 .. 2023. 7. 16.
[Deep Dive] var, let, const의 차이 / hoisting(호이스팅)에 대해 오늘 목표 : var, let, const의 차이 / hoisting(호이스팅) 모던 자바스크립트 Deep Dive 책을 이용해 변수들과 호이스팅에 대해 공부한 내용을 정리해 보았다. 1. var의 등장 배경 / 문제점 1) 중복 선언 - 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다. 또 재할당이 아니라 이전의 변수가 덮어쓰여진다. 규모가 큰 프로젝트에서 변수명이 중복될 경우에도 Error가 발생하지 않는다. 이는 누군가 실수로 변수를 중복 선언하여 의도치 않은 결과를 초래할 수 있다. 2) var 호이스팅 - var변수의 선언문이 스코프 내의 최상단으로 끌어올려진 것처럼 동작하여 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다. 3) 함수 레벨 스코프 - var 키워드로 정의된 변수는.. 2023. 7. 11.
[TIL-37] 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 무한 스크롤 성능 문제 - react-query useInfiniteQuery 도입 1. react-query 도입 이유 성능 개선 방법들에는 네트워크 요청 및 응답 시간을 줄이기 위해 최적화된 서버 설정, 캐싱 기법, 데이터 압축 등을 고려할 수 있을 것 같다. 그 중 데이터 압축은 이미지 최적화를 진행할 때 하도록 하고, 무한 스크롤을 최적화하기 위해, 즉 스크롤 시 마다 요청되는 서버와의 데이터 통신 횟수와 속도를 개선 하기 위해서는 무엇 보다도 캐싱 기능을 고려하지 않을 수 없었다. 때문에 자동으로 캐싱 기능을 제공하는 react-query를 사용하였다. 2. react-query useInfiniteQuery를 도입한 이유 지금까지는 usequery 와 refetch, 그리고 Intersecti.. 2023. 6. 20.
[TIL-36] 무한 스크롤 기능 구현 - Intersection Observer API 무한 스크롤의 도입 장점 페이지네이션은 사용자가 다음페이지로 넘어갈 때 마다 번호를 눌러줘야한다는 단점이 있다. 버튼을 눌렀을 때 페이지가 바뀌는 피로감과 눌러야하는 노동력이 들 수 있다. 무한 스크롤은 이런 단점을 극복할 수 있고, 사용자들이 덜 기다리고, 더 편리하게 웹서핑 할 수 있게 한다. 무한 스크롤의 단점 1. 사용자가 현재의 위치를 알기 힘들다. 2. 원하는 위치에 있는 자료를 찾기 힘들다. 3. 웹페이지의 푸터 부분을 볼 수 없다. 4. 글을 읽고난 후 뒤로가기를 했을 때 원래 위치로 돌아가기 힘들다. 무한 스크롤의 도입 이유 우리 프로젝트의 경우, 특정 오피스 정보를 찾을 수 있도록 검색 서비스가 구현되어 있고, 그 외에 아무래도 여러가지 오피스 정보를 계속해서 둘러볼 수 있도록 하기 위.. 2023. 6. 19.
[TIL-35] react-query와 검색 기능에서의 캐싱 처리 Today목표 : 06/15일 react-query와 검색 기능에서의 캐싱 처리 요즘 실전 프로젝트로 인해 너무 바쁘다... 이제 겨우 리팩토링을 진행하면서 저번 중간 발표회 때 받은 react-query에 대한 질문과, 검색 기능을 이용할 때 react-query를 사용했을 때의 문제점 등을 정리해 보고자 한다. 질문 받은 점, 1. 리액트 쿼리의 장점에 대한 답변 중 꼬리 질문 => 리액트 쿼리에서 refetch를 사용하면 서버의 데이터 변경을 알 수 있는 것인가? refetch를 사용하면? 서버의 데이터가 변경됐을 때 refetch로 변경된 데이터를 가져올 수 있다는 걸로 들린다. => 공부한 내용 : refetch는 서버의 데이터 변경 여부를 실시간으로 감지하는 기능은 아니며, refetch를 호.. 2023. 6. 15.
728x90
반응형

티스토리툴바