전체 글

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..

1. 개요개인적으로 React Native를 이용해 개발해 운영중인 서비스가 있다.시간이 지나며 새로운 버전의 React Native가 출시됐는데, 새로운 아키텍쳐를 적용과 개발의 효율성을 높이기 위해 React Native의 버전 업그레이드를 진행하기로 했다. 2. 업그레이드를 하게 된 이유이전 버전의 React Native를 이용해도 서비스의 운영은 충분히 가능하긴 하다.하지만 아래의 이유로 React Native의 버전을 업그레이드하기로 했다.1) 아키텍쳐 변경기존 React Native는 bridge방식을 이용해 cross platform을 구현하고 있었다.새로운 React Native는 JSI(Javascript Interface)를 이용해 bridge를 대체하고, 네이티브코드에 직접 접근할 ..