Frontend/React

✅React Testing Libraries란?? React Testing Library는 React 애플리케이션의 컴포넌트를 테스트하기 위한 라이브러리이다. 주로 사용자 관점에서의 컴포넌트 동작을 테스트하도록 설계되어 있으며, 컴포넌트가 실제로 어떻게 동작하는지를 검증하는 데 중점을 둔다.  ※ 프론트엔드 테스트 종류 더보기항목React Testing LibraryVitestCypress목적단위 테스트, 통합 테스트단위 테스트, 통합 테스트엔드 투 엔드(E2E) 테스트, 통합 테스트실행 환경노드 환경에서 가상의 DOM 사용노드 환경에서 Vite와 통합해 빠르게 실행실제 브라우저 환경에서 테스트사용 용도컴포넌트의 단위 테스트컴포넌트/함수의 단위 및 통합 테스트전체 애플리케이션 흐름, UI 상호작용 테스트..

🧐useSWR란? useSWR은 React에서 데이터를 자동으로 캐싱하고, 재검증하며, 동기화하는 데 도움을 주는 훅(hook)이다. SWR은 Stale-While-Revalidate의 약자로, 오래된 데이터와 새로운 데이터를 함께 처리하는 전략에서 이름을 따왔다. 이 훅은 비동기 데이터 요청에 관련된 복잡한 로직을 쉽게 처리할 수 있도록 설계되었다. ※ 데이터를 자동으로 캐싱한다. 한 번 가져온 데이터를 저장해 두고, 같은 데이터를 다시 요청할 때 서버로 또다시 요청하지 않고 저장된 데이터를 사용하는 것 📌주요기능데이터 가져오기(fetching)useSWR은 주어진 키(key)와 fetcher 함수(API 호출 등을 수행하는 함수)를 사용하여 데이터를 가져온다. 자동 캐싱데이터를 캐시(Cache)하..

구글 로그인을 적용해보고 있던 중 사람들이 .env 파일을 많이 사용하길래 이게 대체 뭐지 하고 알아보고 싶어졌다!.  📌.env이란? .env 파일은 환경 변수를 저장하는 데 사용되는 파일이다. 환경 변수는 운영 체제나 실행 환경에서 프로그램이나 스크립트가 실행될 때 참조할 수 있는 동적으로 할당된 값이다. 이러한 변수들은 보안, 설정, 구성 데이터를 포함하며, 코드에서 직접 하드코딩하는 것보다 외부에서 관리하는 것이 더 안전하고 유연한다! 1. 루트경로에 .env 파일 생성  2. 필요한 환경 변수를 추가합니다. 예를 들어: DATABASE_PASSWORD=verysecretpasswordAPI_KEY=123abcXYZ 3. gitignore 파일에 .env를 추가하여 Git 저장소에 업로드되지 않..

프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다.  📌 MSW ?백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.  📌MSW 설치 방법 npm install msw --save..

마운트(생성) ✔️constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드✔️getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.✔️render : 컴포넌트를 렌더링 하는 메서드✔️componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드이며, 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행한다.업데이트(갱신) ✔️getDerivedStateFromProps : 마운트 단계와 동일하며, 컴포..

📌Recoil이란? 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는Redux, 그리고 Redux 는 근본적으로 React를 위해 출시된 것이 아니다. Recoil은 React 자체에 내장된 상태 관리 기능인 ContextAPI를 한계를 보완하고자 facebook에서 개발한 라이브러리이다. 📌Recoil은 무엇이 다를까? 우선 첫번째, Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다. 두번째, 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 select..

📌redux를 이용해 만든 계산기 기능 import React from "react"; import { createStore } from "redux"; import { Provider, useDispatch, useSelector } from "react-redux"; // Actions const ADD_NUMBER = "ADD_NUMBER"; const ADD_OPERATOR = "ADD_OPERATOR"; const CALCULATE_RESULT = "CALCULATE_RESULT"; const CLEAR_DISPLAY = "CLEAR_DISPLAY"; const addNumber = (number) => ({ type: ADD_NUMBER, payload: { number } }); const ..

📌Redux란? React 프로젝트의 규모가 커질때마다 자식으로 넘겨주어야 하는 props의 깊이도 점점 깊어진다. 따라서, 어디에서든 내가 원하는 state를 사용할 수 있는 라이브러리 Redux이다. 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 참고로 Redux는 react의 종속된 도구가 아니다! 📌Redux 설치 npm 명령어를 통해서 라이브러리를 설치해준다. 리액트에서 redux 라이브러리를 더 효율적으로 사용할 수 있는 react-redux 라이브러리도 설치해주는 것이 좋다. npm install redux npm install react-redux 이렇게도 가능 npm install redux react-redux 📌Red..