전체 글

1. 개요Javascript에서 객체 deepcopy를 위해 보통 아래의 방법을 이용한다.const obj = {...}; // 원본 객체const newObj = JSON.parse(JSON.stringify(obj)); // 복사된 객체하지만 이 방법은 무거운 작업이라 영 못미더운 점이 있다.이런 문제를 해결하기 위해 재귀함수를 이용하거나 lodash와 같은 라이브러리를 이용하는데 이는 번거로운 작업의 추가로 느껴진다.그래서 나온것이 structuredClone()함수이다. 2. structuredClone()structuredClone()함수는 structured clone algorithm을 이용해 deep copy(깊은 복사)를 수행한다.이는 Json을 이용한 방법보다 효율적이다.structur..

1. 개요React의 핵심 기능중 하나는 VritualDOM이다.VirtualDOM과 관련된 내용은 아래에 다뤄본 적이 있다.https://w-storage.tistory.com/71 [React] VitrualDOM을 알아보자!1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대w-storage.tistory.com여기서 궁금증이 발생한다. VirtualDOM을 이용하면 속도는 어떻게 될까? 2. VirtualDOM을 이용하면 속도가 빨라질까?그럴수도 있고 아닐수도 있다.VirtualDOM은 "최소한의 DOM 업..

최초 작성일 : 2024.11.18최종 수정일 : 2024.11.18 1. 개요프로젝트에 기능을 추가, 리팩토링 등의 작업을 하다보면 테스트코드가 절실해질 때가 있다.그래서 테스트 코트 환경을 도입하려 하지만 환경세팅부터 어려움이 발생하기도 한다. 우선, Next.js공식 문서에서 테스트 환경 구축 방법을 설명하는 페이지가 있다.https://nextjs.org/docs/app/building-your-application/testing/jest Testing: Jest | Next.jsLearn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.nextjs.org다만 이 페이지의 내용대로만 진행해도 실행이 안될 수 있는데,이번 ..

1. 개요VritualDOM의 동작에 관해 다룬 적이 있었다.https://w-storage.tistory.com/m/71 [React] VitrualDOM을 알아보자!1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대w-storage.tistory.com여기서 DOM 트리를 수정할 때 Reflow, Repaint과정에서 리소스를 많이 소모한다 했는데, Reflow와 Repaint가 무엇인지 한번 알아보자! 2. ReflowReflow는 레이아웃을 변경하는 작업이며 레이아웃 단계에서 발생한다.width, heig..