React

JEST Mock Service Worker 설정 및 기본 사용

Mock Service Worker Service Worker API를 사용하여 실제 요청을 가로채는 API Mocking 라이브러리입니다. 서버에 대한 호출을 막고 사용자가 작성한 응답을 전송 응답을 보내줄 핸들러 작성 핸들러를 이용해 응답을 보낼 서버 작성 테스트 전 서버가 요청을 MSW로 라우팅, 핸들러 재설정, 서버 종료에 대한 테스트 서버 설정 npm i -D msw Jest를 이용해 axios를 모킹하면 안 되나요? 간단한 앱에서는 모킹이 가능하지만 더 복잡한 앱에서는 MSW로 다양한 도구를 이용할 수 있다 axios 모킹에 MSW를 사용하는 이유는 여러 가지입니다. 동시 요청에 대한 Mocking 반환값은 관리하기 어렵고 불안정하다. 페이지를 재정렬 시 모의 화면에서 반환값의 순서가 잘못되어..

React Jest user-event FireEvent

fireEvent / user-event 14버전으로 진행할 예정인데 13버전과 14버전은 상당히 다르기 때문에 유의바랍니다. fireEvent는 DOM 이벤트를 디스패치하고 user-event는 모든 상호 작용을 시뮬레이션합니다. https://ph-fritsche.github.io/blog/post/why-userevent Why you should test with user-event Choosing the right developing tools for your project can be a daunting task. Here's why user-event should be one of them. ph-fritsche.github.io fireEvent는 이벤트를 트리거 하지만 user-event..

Testing React with Jest and React Testing Library - 2

간단한 어플리케이션 테스트 import { fireEvent, render, screen } from "@testing-library/react"; import { logRoles } from "@testing-library/react"; import App from "./App"; import { replaceCamelWithSpaces } from "./App"; test("button has correct initial color and updates when clicked button", () => { const { container } = render(); logRoles(container); // 이름이 'Change to blue'인 버튼 요소 찾기 const colorButton = scr..

Testing React with Jest and React Testing Library - 1

Jest 개요 render 메서드 실행 import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/Learn React/i); expect(linkElement).toBeInTheDocument(); }); render 메서드 인수로 제공하는 JSX에 관한 가상 DOM을 생성 현재 JSX에 관한 인수는 APP입니다 화면에 렌더된 모든 텍스트를 기반으로 DOM에서 요소를 찾는다. i는 정규 표현식으로 대소문자 비교하지 않고 검색 의미한다. APP에서 찾는 요소가 ..

JEST-REACT18-Vite

JEST 개요 Jest는 React 애플리케이션을 테스트하기 위해 일반적으로 사용되는 JavaScript 테스팅 프레임워크입니다. 개발자들은 쉽게 단위 테스트를 작성하고 실행할 수 있습니다. JEST 설정 1. 라이브러리 설치 🔽 npm install -D @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @testing-library/jest-dom @testing-library/react @testing-library/user-event identity-obj-proxy jest jest-environment-jsdom @babel/preset-env 대상 환경에 필요한 구문 변환(및 선택적으로 브라우저 폴리필)을 관리할 필요..

JavaScript 변수 검증

x !== "" && x !== null && x !== undefined !!x JavaScript 이중 부정 연산자(데이터 검증) JavaScript에서 데이터 검증 시 아래와 같이 사용합니다. x !== "" && x !== null && x !== undefined 해당 코드를 쉽게 쓰기 위해 이중 부정 연산자에 대해 알아보겠습니다. JavaScript에서 이중 부정 연산자 "!!"는 값을 Boolean 변환에 사용됩니다. "!" 연산자는 Boolean 값을 부정하는 데 사용되므로 값의 부정형을 반환합니다. 이중 부정 연산자 "!!"는 부정을 부정하는 데 사용되므로 원래 값을 Boolean으로 반환합니다. ``` 자바스크립트 let x = 5; console.log(!!x); // true x =..

npm cache clean --force

진행 : npm install lib-name@latest 오류 : 이미 설치된 라이브러리의 최신 버전이 아닌 이전 버전을 업데이트 함. npm cache clean --force - 설명 npm cache clean 는 Node.js 패키지 관리자(npm)용 캐시 삭제 명령 유틸리티입니다. 캐시는 동일한 패키지의 향후 설치 속도를 높이기 위해 패키지를 압축된 형식으로 저장합니다. 시간이 지남에 따라 캐시가 커지고 디스크 공간을 많이 차지할 수 있으므로 캐시를 지우는 것이 유용한 경우가 많습니다. --force옵션은 npm이 캐시가 여전히 유효하다고 생각하는 경우에도 캐시 정리를 강제하는 데 사용됩니다. 명령 실행 시 전체 캐시를 지워 시스템의 디스크 공간을 확보합니다. 이렇게 하면 캐시에 저장된 모든 ..

[Intellij]React Prettier, ESlint(airbnb) 설정

1. Prettier 설치 npm install prettier yarn add prettier 2. Prettier 설정 파일 프로젝트 Root 위치에 .prettierrc 파일 생성 후 아래 코드 입력 { //줄 바꿈할 줄 길이 지정 "printWidth": 100, //들여쓰기 공백 수 "tabWidth": 2, //들여쓰기 탭 사용 / 공백 사용 "useTabs": false, //문장의 마지막 세미콜론 작성 여부 "semi": true, //인용 부호 사용 시 큰 / 작은 따옴표 사용 "singleQuote": true, //후행 쉼표 사용 여부 "trailingComma": "all", //대괄호 사이 공백 여부 "bracketSpacing": true, //화살표 함수 괄호 포함 여부 //a..

사설 NPM 업로드 및 다운로드

1. 라이브러리 화 1.1 라이브러리 파일 설정 1.1.1 사용할 함수 Export 및 대표 파일에서 Import 1.2 라이브러리 Build 설정 1.2.1 package.json 설정 1.2.2 vite.config.js build option 설정 1.3 Build Library 2. 업로드 2.1 설정 파일 생성 및 수정 2.1.1 package.json 설정 2.1.2 .npmrc 설정 2.2 업로드 명령어 2.3 업로드 시 오류 및 해결법 2.3.1 .ENEEDAUTH 오류 2.3.2 .E400(Not Allow Updating 오류) 3 다운로드 3.1 설정 파일 생성 3.1.1 .npmrc 파일 설정 3.2 다운로드 시 오류 및 해결법 3.2.1 라이브러리 사용이 되지 않음 기준 버전 Pa..

React Emotion Error nth-child / nth-of-type

1. react emotion 사용 중 에러 발생 - The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type" 2. 차이점 - nth-child(n) : 부모의 모든 자식 중 n번째 - nth-of-type(n) : 부모의 특정 자식 중 n번째 3. 이유 성능적인 문제는 아니고 SSR할 때 안전하지 않다. 스타일을 받아야 할 요소가 SSR 시 제자리에 있지 않을 경우에 제대로 된 스타일 적용되지 않습니다. 4. EX( :first-child ) import styled from "@emotion/styled"; const Text = styled.p..