React

React 빌드 용량 최적화 - Vite rollupOptions manualChunks

하나로 빌드 되는 큰 파일을 작게 나누어 필요한 파일을 필요한 때 불러와 렌더링 속도 개선 1. manualChunks 모든 코드를 미리 로드하는 대신 필요에 따라 작은 청크로 분할하는 기능으로 초기 로드 지연을 줄이고, 사용자가 다운로드해야 하는 소스의 양을 줄일 수 있습니다. Configuration Options | Rollup rollupjs.org vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { rollupOptions:..

Dynamic Import / Lazy Loading - 코드 스플리팅[Code Splitting]

코드 스플리팅 코드를 다양한 번들로 분할하고, 요청에 따라 로드하여 사용자가 필요할 때에 필요한 코드만 사용할 수 있습니다. 더 작은 번들을 만들고 리소스 우선순위를 올바르게 제어하기 위해서 사용하며, 잘 활용하면 SPA의 단점인 로딩 시간을 절약할 수 있습니다. Dynamic Import (동적 불러오기) 모듈 내에서 인라인 함수 호출을 통해 코드를 분할합니다. App.tsx function App() { const test = () => { import('./common/test').then(test => { console.log(test.text()); }); }; return test()}>Dynamic Import Button; } test.ts export const text = () => {..

Compound Component 패턴

React Bootstrap과 동일한 패턴을 작성하고 싶었다. # 문제점 이전 컴포넌트의 구성은 ModalBody의 children을 제외한 Header[Title], Footer이 파라미터로 들어가 정해진 구성으로 들어가 일관성 있는 UI를 나타낼 수 있지만 다른 구성 및 스타일로 바꾸기 힘들고 하나의 컴포넌트가 많은 파라미터를 받아 해당 파라미터가 어디에 관련이 있는지 알기 어렵다. 모달입니다. 장점 자유롭게 컴포넌트를 구성 및 스타일 변경이 가능하다. 서브 네임으로 구획을 정확히 나눌 수 있다. 서브 컴포넌트의 파라미터 배분으로 정갈한 코드를 작성할 수 있다. 단점 자유도가 높은 만큼 사용자가 컴포넌트 구성의 이해가 필요하고 예상하지 못한 동작이 일어날 가능성이 있다. # Compound Compo..

React createPortal(Modal Component)

# 문제점 모달을 컴포넌트로 만들고 상태 공유를 위해 부모 컴포넌트에 작성 시 문제 야기 상위 컴포넌트의 필요없는 스타일 반영 최상위로 띄우기 위해 무분별한 z-index 사용 //Another.tsx { const contextValue = { open, handleClose }; return ( {open && ( {children} )} ); }; # createPortal(children, domNode, [key]) 컴포넌트를 root가 아닌 DOM의 다른 부분에 렌더링 DOM 노드의 물리적 배치만 변경하므로 상위 컴포넌트의 React 구성 요소의 하위 컴포넌트로 구성 그러기에 자식은 부모가 제공하는 컨텍스트, 상태, 이벤트에 액세스 할 수 있다. const Modal = ({ open, han..

React Route dom v6 하위 경로 이동 시 에도 인덱스 NavLink 활성화

1. 원하는 작동 방식 MemberDetail페이지 진입 시 MyPost컴포넌트가 Index로 렌더링 되고 각각의 NavLink가 URL에 따라 활성화 작성 글 작성 댓글 내 글 반응 내 정보 수정 하지만 위와 같은 코드는 MemberDetail 진입 시에는 작동을 했지만 하위 경로로 이동 시 인덱스와 선택된 하위 경로 모두 활성화되는 결과를 가져왔다. 2. 해결 방법 NavLink end NavLink의 매개변수 중 하나인 “end”를 사용하여 해결하였다. 작성 글 작성 댓글 내 글 반응 내 정보 수정 NavLink to경로의 마지막이 일치하면 active , pending 상태를 활성화 시킨다. 링크 URL 활성 /tasks 진실 /tasks/123 진실 /tasks 진실 /tasks/123 거짓

Jest Debugging Tips

👉 console.log() 명령문이 브라우저의 출력을 오염시키는 것처럼 디버그 명령문도 테스트를 오염시킵니다. 실제로 테스트를 디버그하고 싶을 때 명령문을 사용해야 하지만 코드베이스로 푸시해서는 안 됩니다. screen.debug(element) 해당 테스트에서 작성한 element가 화면, DOM에서 어떻게 보일지 테스트 출력 사용 화면 screen.debug(screen.getByText("Grand total: $", { exact: false })); 출력 화면 console.log Grand total: $0.00 at logDOM (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/pretty-dom.js:8..

Jest Warning: wrapped in act(...).

경고 메세지 Warning: An update to Overlay inside a test was not wrapped in act(...). act(...)로 코드를 감싸라는 권고사항으로서 테스트에는 성공하지만 현재 해당 프로젝트 코드에서는 act로 감싸면 안되는 경우에 있다. 해당 경고가 발생한다면 마운트 되지 않은 컴포넌트에서 React 상태 업데이트를 수행할 수 없다는 형제 경고를 동반한다. When testing, code that causes React state updates should be wrapped into act(...): 이유 거의 대부분 해당 오류가 나는 이유는 테스트가 끝난 뒤 컴포넌트가 바뀌기 때문이다. 일부 비동기 상태 업데이트가 완료되기 전에 테스트 함수가 종료된다. 프..

JEST Custom Render

Render DOM에 컴포넌트를 렌더링 ... render(); ... function render( ui: React.ReactElement, options?: { /* You won't often use this, expand below for docs on options */ }, ): RenderResult Render Option Wrapper provider로 부터 렌더링 하는 것을 래핑해 테스트 중 provider에 액세스 가능하게 한다. EX : router, reduex, context, theme … ... render(, { wrapper: OrderDetailsProvider }); ... Custom Render 동일한 옵션을 가진 Render를 각 테스트마다 정의해서 사용하기 불..

Jest 원하는 테스트만 실행

Watch Mode에서 원하는 테스트만 실행 yarn run test --watch //watch 모드로 실행 Watch 모드로 실행 시 수정 시 마다 테스트를 진행하는데 w 키 입력 시 아래와 같이 원하는 테스트만 진행할 수 있는 메뉴가 있다. a : 모든 테스트 진행 f : 실패한 테스트 진행 p : 파일 이름으로 필터링하여 진행 t : 테스트 이름으로 필터링하여 진행 Watch Usage › Press a to run all tests. › Press f to run only failed tests. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to ..

JEST Mock Service Worker 테스트 내부 사용

https://arkhyeon.tistory.com/25 JEST Mock Service Worker 설정 및 기본 사용 Mock Service Worker Service Worker API를 사용하여 실제 요청을 가로채는 API Mocking 라이브러리입니다. 서버에 대한 호출을 막고 사용자가 작성한 응답을 전송 응답을 보내줄 핸들러 작성 핸들러를 이용해 arkhyeon.tistory.com MSW 테스트 내용 기존의 성공한 핸들러를 서버 오류가 발생하도록 재정의하여 2개의 비동기 함수 오류 발생 시 알림창이 2개가 화면에 나오는지 테스트 진행 기존 설정된 MSW 핸들러 import { rest } from "msw"; export const handlers = [ rest.get("", (req, r..