저번에 브라우저의 렌더링 과정에 대하여 정리하였으니 오늘은 리플로우와 리페인트에 대해서 정리해 보려고 한다. 브라우저 렌더링과 Reflow, Repaint의 관계 Layout은 요소의 위치, 크기를 계산하여 화면에 그리는 과정이며 reflow와 관련 있다. paint는 배치된 요소의 스타일(색상, 굵기 등)을 적용하는 과정으로 repaint와 관련 있다. reflow는 말 그대로 flow 과정을 다시 하는 작업이다. flow 작업은 곧 layout이며, reflow가 된다는 건 요소의 위치, 크기 계산을 다시 한다는 말이 된다. repaint는 paint 작업을 다시 하는 작업이고 paint는 요소에 스타일을 적용하는 과정이므로, repaint는 요소의 스타일을 재적용하는 것을 말한다. 리플로우와 리페인..

기존 성능 (로컬) lazy 적용 (코드) const Root = lazy(() => import('@/pages/Root')); const Main = lazy(() => import('@/pages/Main')); const Member = lazy(() => import('@/pages/Member')); const Auth = lazy(() => import('@/pages/Auth')); const TV = lazy(() => import('@/pages/TV')); ... const router = createBrowserRouter([ { path: '/', element: ( ), loader: tokenLoader, errorElement: , children: [ { index: tru..

HTML 파일은 어떻게 브라우저에 그려지는지에 대하여 명확하게 답을 하지 못하기에 오늘은 브라우저의 렌더링 과정에 대해서 공부하고 정리해보려고 한다. 모자딥다에 나와있는 브라우저의 렌더링 과정 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할..

이벤트 핸들러의 Event 객체 JavaScript에서 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 이 이벤트 객체는 target, currentTarget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 갖고있다. 이벤트 버블링, 캡처링 부모 요소를 가지고 있는 요소에서 이벤트가 발생한 경우, 캡처링과 버블링이 차례대로 실행된다. 이벤트 버블링은 처음 이벤트가 발생한 요소부터 html 요소에 이르기까지 부모요소들을 타고 올라가 이벤트 핸들러가 있는지 검사하고, 있으면 그 이벤트 핸들러를 호출하는 것을 말한다. 이벤트 캡처링은 최상위 부모 요..

CI/CD CI/CD는 애플리케이션 개발 단계부터 배포까지의 모든 단계를 자동화를 통해 효율적이고 빠르게 사용자에게 배포할 수 있는 것을 말합니다. (CI/CD는 DevOps 엔지니어의 핵심 업무라고 한다) CI CI는 간단히 요약하자면 빌드/테스트 자동화 과정입니다. 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미합니다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다. 지속적 통합의 실행은 소스/버전 관리 시스템에 대한 변경 사항을 정기적으로 커밋..

npm 패키지 매니저를 통해 다양한 패키지를 설치할 때, -D, -g, --save 등 다양한 옵션이 붙는 경우를 볼 수 있습니다. 오늘은 그 이유에 대해서 한번 알아보고자 합니다. npm install 명령어 옵션 --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미로 npm@5 부터는 기본 옵션으로 저장합니다. -P (--save-prod) : dependencies에 패키지를 등록, 프로젝트가 배포 시 사용될 의존성 모듈을 정의하고 설치. -D (--save-dev) : devDependencies에 패키지를 등록, 개발 단계에서만 사용하는 의존성 모듈을 정의하고 설치. -O (--save-optional) : optionalDependencies에 패키지를..

리액트를 사용해서 개발을 하면 npm build 입력으로 빌드가 완료됩니다. create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있습니다. 하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해 알 필요가 있습니다. 자신의 프로젝트를 온전히 커스터마이징 하고 싶다면 CRA를 이용하지 않고 환경 설정부터 빌드 세팅까지 스스로 해야 합니다. 웹팩(Webpack) 웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다. 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다. 여러 개의 파일을 하나로 모아주는 것은 왜 필요할까요? 이전에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했습니다. 그러다 ES2015부터 모듈 시스템이 등장하여 exports로 모듈..

리팩토링 - queries 분리 폴더구조, path alias 설정이 끝났으니 무거웠던 컴포넌트들의 코드를 분리시켜 주어야 한다. 폴더구조를 더 개선하기 위해서도 필요하고 성능 향상등 다양한 이유로 아무튼 해야 한다. 우리 프로젝트의 api 는 분리되어 있는 반면에 리액트 쿼리는 그렇지 않기 때문에, 가장 먼저 수정해야겠다고 생각해서 useQuery, useMutation 들을 분리시킬 것이다! 이전 Bookmark 컴포넌트 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { AxiosError } from 'axios'; import { BsHeart, BsHeartFill } from 'react..