🍒 Chae-ri Dev 🍒

연휴가 끝났다... 너무 슬프다...현실로 다시 돌아왔다...몸이 연휴에 너무 익숙해져서 밤낮이 바뀌고 늦게 자고 얼마 못자고 월요일 시작.....다시 갓생 살기 스타또!2025-02-03-MON이 날 강의실에 딱 들어갔는데 다들 얼굴이 어두웠다. ㅋㅋㅋㅋㅋㅋㅋㅋ나만 힘든게 아니구나... 생각했다.힘을 내서... 수업을 들었다... 오전에는 cypress 테스트 도구에 대해 배워보았다.테스트 도구는 여기와서 vitest만 써봤고 두번째로 배우는 테스트 도구였다.자동으로 테스트 코드 짠대로 화면에서 직접 테스트 도구가 실행해주는 거다.뭔가.... 매크로 돌리는 거 같다.... 짱빠르고 짱 신기했다.너무 빠른 것 같으면 시간도 직접 코드로 조절할 수 있다. 테스트 도구에 대해서도 공부 좀 많이 해야겠다! 이..

프론트엔드 기술세미나를 준비하면서 React.memo, useMemo, useCallback 이 3가지에 대해 꼭 블로그에 따로 정리를 해둬야지 싶었다. 오픈소스를 직접 뜯어보며 이 세 가지가 어떤 원리로 돌아가는지 알아간 것을 정리해보겠다. 먼저 브라우저 및 리액트 렌더링 과정에 대해 알아볼 필요가 있다. [React] 브라우저 + 리액트 렌더링 과정에 대해 알아보자기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있yonyoni824.tistory.com 아무리 리액트에서 변경된 사항을 모아서 한 번에 반영한다고 해도 불필요한 리렌더링이 계속 일어난다면 이는 브라우저에게 심각..

기술세미나로 리액트 렌더링 최적화라는 주제에 대해 준비하기로 하였다.렌더링 최적화 방법을 소개하기 전에 브라우저와 리액트가 각각 어떤 과정을 통해 렌더링이 되는지 알아볼 필요가 있었다.이에 대해 확실하게 정리하고 넘어가고자 포스팅으로 남기려고 한다. 브라우저는 어떻게 HTML, CSS로 작성한 웹페이지를 화면에 렌더링 하는걸까?🤔브라우저 렌더링 과정브라우저는 Critical Rendering Path(CRP)라는 과정을 통해 렌더링이 진행된다.상세 과정은 다음과 같다.1단계 - HTML, CSS 변환(DOM, CSSOM 생성)2단계 - Render Tree 생성3단계 - Layout 과정4단계 - Painting 과정HTML 파싱을 통한 DOM 생성CSS 파싱을 통한 CSSOM 생성DOM 트리와 CSS..