개발 일지

모달을 사용할 때 일반적인 HTML 구조를 살펴보면 다음과 같다. 페이지의 DOM 구조 내부에 모달이 있다. 그런데, portal을 사용하게 되면, DOM 구조 밖에 이 모달을 위치시킬 수 있다. 사용 방법 1. createPortal export function createPortal(children: ReactNode, container: Element | DocumentFragment, key?: null | string): ReactPortal; createPortal(JSX, 위치 시킬 Node) 예시: function Modal({children, onClose}) { return createPortal( X {children} , document.body); } 다시 HTML 구조를 살펴보면..

Compopund Component 패턴이란 부모 컴포넌트의 속성, 로직을 자식 컴포넌트와 공유할 때 사용하는 리액트 패턴이다. 주로 Select 박스, 드롭다운 메뉴, Modal 에서 자주 사용된다. React Context API를 사용하게 되는데, Context API는 Provider에서 값이나 속성들을 정의하고, 하위 컴포넌트에서 이를 공유해서 재사용할 수 있도록 만들어진 구조이다. 보통은 부모에서 props 로 자식에게 속성들을 전달하는 것이 일반적인데, 부모와 자식 사이의 간격이 너무 멀어질 경우, props를 계속해서 하위 컴포넌트로 넘겨줘야 하는 불편함이 발생한다.(props drilling) 그래서, 이러한 것들을 개선하기 위해 나온 개념으로, props로 자식에게 넘기지 않고도 하위에..

test("if checkbox is not checekd, submit button disabled", async () => { render(); const checkBoxElement = screen.getByRole("checkbox", { name: /checkbox/i, }); const submitButtonElement = screen.getByRole("button", { name: /submit/i, }); expect(checkBoxElement.checked).toEqual(false); expect(submitButtonElement.disabled).toBeTruthy(); }); 위의 예시로 보자면, toEqual( )과 toBeTruthy( )를 구분해서 사용한 이유는 각 ma..

이번에는 이전 포스팅에서 다뤘던 쿼리 함수들의 우선 순위와 userEvent 에 대해서 더 자세히 알아본다. 쿼리 함수 우선 순위 먼저, 쿼리 함수란 간단하게 요약하자면, 우리가 테스트를 할 때 요소를 직접적으로 가져오기 위한 수단 정도로 이해하면 쉽다. 타입은 세 가지 종류가 있었는데, [get, query, find] 세가지 종류가 있다. 세 가지 종류의 타입에 대해서는 이전 포스팅에서 자세히 확인해 볼 수 있다. 이 쿼리 함수에도 공식 문서에서 권고하는 우선 순위가 있는데, 이에 대해서 다뤄보려고 한다. 일반적으로 테스트 코드는 사용자의 인터렉션 방식과 최대한 유사해야 한다. 1. Queries Accessible to Everyone. :모든 사용자가 쿼리에 접근할 수 있어야 한다. 일반적으로 웹..

간단한 예제를 통해, React Testing Library를 실습해보고자 한다. 먼저 실습에 앞서, TDD 개념에 대해 짚고 가보자. TDD란 Test Driven Development의 약자로, 한국어로는 테스트 주도 개발이라고 명칭한다. 테스트 주도 개발이란 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 것을 의미한다. 즉, 기능 개발에 앞서 테스트 코드를 작성하고 이 테스트 코드를 바탕으로 기능 구현 후, 이를 검증하는 방식이다. TDD는 크게 3가지 단계로 나눌 수 있다. Red : 코드를 작성하기 전에 테스트 코드 작성 단계. 코드를 작성하기 전이므로 당연히 테스트는 실패할 것이다. Green : 테스트를 통과 시키기 위해 코드를 작성하는 단계. Refactor : 코드를 리팩토링 하..

React Testing Library 1. 개요 - Facebook에서 만든 오픈소스 테스팅 프레임워크 - Javascript와 Typescript 를 지원한다. - React, Vue, Angular 등의 프레임워크에서 지원한다. - 참고) CRA 설치시 기본으로 RTL이 세팅되어 있다. 2. 사용 방법 1) CRA에서 테스트 코드 확인해보기 Create-React-App을 이용해서 프로젝트를 설정하면, 구성 폴더에서 App.test.tsx를 확인해볼 수 있다. 예시: [비교 1] import React from "react"; import { render, screen } from "@testing-library/react"; import App from "./App"; test("renders l..

프론트엔드에서의 테스트란 (with React) 1. 테스트 목적 💡프로그래밍에서의 테스트란 프로그램을 실행해서 오류, 버그를 검출하고 어플리케이션이 정상적으로 작동하는지 검증하는 과정이다. 그렇다면, 왜 테스트를 하는걸까? 테스트를 하는 이유에 대해서 간략히 정리해보자면, 다음과 같다. 어플리케이션을 안정적으로 만들기 위해, 버그를 빨리 찾아내서 고치기 위해 디버깅 시간 단축 - 자동화 된 유닛테스트로 특정 버그를 빨리 캐치할 수 있다. 신규 기능 추가시 설계 시간 단축 신규 기능 추가시 발생하는 변경 사항들로 인한 결함을 찾아낼 수 있다. 기존 기능을 리팩토링시 테스트를 실행하여 기능 상 결함이 없음을 보장할 수 있다. 코드에 확신이 생긴다. 컴포넌트가 제대로 작동한다는 것을 테스트 케이스를 통해 보..

vite는 기본적으로 프로덕션 모드에서 Strict Mode를 true로 설정한다. 프로덕션에서 Strict Mode가 켜져있는 이유는 안정성과 성능을 향상시키기 위해서 인데, 'Strict Mode'를 설정함으로써 자바스크립트의 잠재적 오류를 탐지하고 경고 메세지를 출력하는 기능을 제공한다. 프로덕션 환경에서 잠재적인 버그를 발견하는 것은 어플리케이션의 안정성을 향상시키는데 기여한다. 실제로 rollup 옵션 Docs를 보게 되면, 특별한 이유 없이 이 'Strict Mode'를 해제하지 말라고 나온다. (참고 : https://rollupjs.org/configuration-options/#output-strict ) # Javascript에서 'Strict Mode'는 여러 기능들을 제공한다. 암묵..

함수형 컴포넌트에서는 앞서 공부한 라이프 사이클 메서드를 사용할 수 없다. React v16.8부터는 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 유사한 기능을 할 수 있는 기능들을 제공한다. 1. useState 가장 기본적인 hook. 가변적인 상태를 지닐 수 있다. (1) 사용 예 state를 컴포넌트에 추가할 때 이전 state에서 상태값 업데이트가 필요할 때 배열이나 객체 state를 업데이트 할 때 초기값을 재생성하는 것을 막고 싶을 때 key와 함께 state를 초기화 시키고 싶을 때 이전 렌더링 정보를 저장하고 싶을 때 (2) useState(initialState) 컴포넌트 최상단에 state 변수를 할당하며, 컨벤션은 일반적으로 [이름, set이름] 이런식으로 배열 ..

리액트의 전체적인 흐름을 이해하기 위해서는 라이프 사이클에 대한 이해가 필요하다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 제공되기 때문에 클래스형 컴포넌트로 대략적인 컨셉에 대해 설명 후, 함수형 컴포넌트에서의 라이프 사이클에 대해 설명한다. 1. 라이프사이클 메서드 이해하기 리액트의 라이프사이클 메서드는 9가지가 있다. 큰 단위로는 마운트, 업데이트, 언마운트 이렇게 세 가지 영역으로 나뉠 수 있다. 마운트(Mount) : 페이지가 컴포넌트에 나타남 (페인팅) 업데이트(Update) : 컴포넌트의 정보를 업데이트 (리렌더링) 언마운트(Unmount) : 페이지에서 컴포넌트가 사라짐 1-1. 마운트(Mount) 컴포넌트가 처음으로 DOM에 그려질 때를 의미한다. 따라서 컴포넌트의 초기 설정과 데이..