항해9970 [기술 면접 스터디-2일차] hoisting과 Parameter, argument 차이 1. Hoisting 이란? TDZ란? 호이스팅 - 자바스크립트 엔진이 런타임 이전(코드를 실행하기 전)에 변수와 함수 등의 선언이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 것을 말하며, 정확하게는 변수 식별자와 초기값 undefined를 컨텍스트의 최상단에 등록하는 것을 말한다. TDZ(일시적 사각지대) - TDZ는 let과 const 키워드로 사용하여 변수를 선언했을 때 호이스팅 후 실제 변수 선언문을 만나기 전까지 변수를 참조할 수 없는 일시적 사각지대 구간을 의미합니다. - TDZ는 ES6(ECMAScript 2015)에서 let과 const키워드가 도입됨에 따라 생겨난 개념입니다. 이전까지 var키워드로 선언된 변수는 호이스팅 되고 변수 선언과 undefined로 초기화가 동시에 진행.. 2023. 7. 20. [기술 면접 스터디-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. [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. [TIL-34] 성능 개선 / 렌더링 최적화 - QueryClient - defaultOptions : refetchOnWindowFocus Today목표 : 06/14일 성능 개선 / 렌더링 최적화 - QueryClient - defaultOptions : refetchOnWindowFocus 이번 주 부터는 기능구현이 어느정도 완성되었기 때문에 성능 개선 및 렌더링 최적화를 슬슬 진행해보고자 한다. 먼저 react-query 사용 시 발생하는 불필요한 데이터 통신 옵션을 꺼주었다. 문제 상황, react-query 사용 시 윈도우에 포커스 할 때 마다 계속해서 데이터 통신이 refetch되는 현상 발생 해결 방법, index.js 에서 queryClient의 defaultOption으로 'refetchOnWindowFocus'를 false로 설정해 준다. // index.js 에서 queryClient const queryClient = .. 2023. 6. 14. 이전 1 2 3 4 5 ··· 12 다음
