안녕하세요 개발하는 토마토 입니다 :)리액트라면 메모이제이션이 또 빠질 수 없죠,, 그렇지만 단 한번도 사용해보지 않았다는 사실,,, 오늘은 공식 문서를 참고하여 리액트의 memo를 한번 뽀개보도록 할게요 ! 1. React.memo 와 useMemo 의 각 개념2. 둘의 차이 1. React.memo- props가 바뀌지 않았을 때 컴포넌트의 리렌더링을 건너뛰어 성능 최적화 import { memo } from 'react';const Component = memo(function Component(props) { // ...}, arePropsEqual) Component - memoize 하고 싶은 컴포넌트 (memo는 직접 이 컴포넌트를 변경하지 않으며 새로운 memoized 컴포넌트를 반환!) ..

잠깐 멈춰두었던 1일 1CS의 이번 주제는 '네트워크' 의 웹 브라우저 통신 방식입니다!브라우저에 우리가 아래와 같이 www.google.com을 치면 구글 페이지로 이동하게 될텐데,  그 과정에서 어떤 일들이 일어나는 걸까요?  1. 사용자가 브라우저에 www.google.com을 친다.2. 브라우저는 DNS 조회를 통해 캐싱된 기록을 먼저 조회한다. (1) 브라우저 캐시 확인- 접속한 기록이 있다면 캐시에 저장되는데 이때 IP주소와 TTL값이 포함* TTL(Time to Live) - 해당 IP 주소가 유효한 기간- TTL이 만료되지 않았다면, 캐시에서 IP 주소를 가져옴 (2) 운영체제 캐시 확인- systemcall을 통해 접근 가능  (3) 라우터 캐시 확인- 브라우저와 운영 체제에도 없을 경우..

안녕하세요! 이전 편에서 웹 렌더링 과정으로 보면서 HTML과 CSS를 각각 파싱했을 때 DOM 과 CSSOM 트리가 만들어진다고 했던 내용 기억 나시나요? 그래서 여기서 드는 의문, DOM 트리와 CSSOM 트리가 무엇인가?! 1. DOM vs. CSSOM 1. DOM  (Document Object Model)- 문서의 계층 구조, 정보를 표현하고 이를 제어할 수 있는 API 를 제공하는 트리 자료 구조 아래와 같은 html 코드가 있다고 가정해 봅시다! 여기서 각 태그 (body, p ...) 는 요소 노드가 되고, class는 어트리뷰트 노드, 태그 안에 있는 텍스트 (Hello World가 되겠죠 여기선?) 는 텍스트 노드가 됩니다! Hello World  그럼 이 html 이 DOM..

안녕하세요 :) 저번 편에 예고 했던 대로, 리플로우와 리페인트 늘 프론트 엔드 CS 면접 질문으로 나온다는 주제 중 하나인데, 과연 그 두 용어가 뭘 의미하는지, 웹 렌더링의 어떤 과정에서 나오는 단어들인지 함께 알아 보시죠! HTML이 순차적으로 파싱을 하다가 태그를 만나면 DOM 생성을 중단하고, 자바스크립트 파일을 서버에 요청합니다!참고로 자바스크립트 파싱은 렌더링 엔진이 아니라 '자바스크립트 엔진' 에서 담당해요 :) 이 때, 자바스크립트 코드에 DOM, CSSOM 을 변경하는 DOM API가 사용된 경우 변경 후, 렌더 트리로 다시 결합하고 레이아웃 및 페인트 과정을 다시 거치게 되는데 , ,  1. 리플로우 (Reflow)- DOM 요소의 크기, 위치, 레이아웃에 영향을 미치는 변경이 있을..

안녕하세요 ! 오늘은 저번에 1편에서 봤던 CSR, SSR과 관련해서 올렸는데, 이와 관련해서 프론트라면 꼭 알아야 하는SPA(스파 아닙니다.)와 MPA의 차이, 그리고 웹렌더링의 과정에 대해 자세히~ 알아보려고 해요 :) 1. SPA vs. MPA2. 웹 렌더링 과정 1. SPA vs. MPA(1) SPA (Single Page Application) - 단일 페이지 애플리케이션으로 새로운 페이지 전환 시 새로운 HTML 을 요청하는 것이 아니라 기존 페이지에서 동적으로 갱신- 주로 CSR 방식으로 실행이되고, Javascript가 필요한 부분만 업데이트- AJAX 호출 방식으로 데이터를 가져옴- SEO에 약함 AJAX 호출- 페이지 전체를 새로고침 하지 않고 필요한 데이터만 가져와서 웹페이지 동적으로..