개발공부/React

빌드 프로세스번들링 + 컴파일링 = "빌드(Build)" 과정목적은 개발자가 작성한 코드를 브라우저에서 효율적으로 실행할 수 있는 형태로 변환하고 최적화하는 것 컴파일링과 번들링의 목적 컴파일링: 브라우저가 이해할 수 없는 코드(JSX, TS)를 JavaScript로 변환번들링: 여러 파일을 하나로 합치고 최적화하여 로딩 성능 개선  웹 개발에서 번들링/컴파일이 필요한 3가지 핵심 이유1. 브라우저는 JSX, TypeScript 같은 최신 문법을 이해하지 못함// 브라우저가 이해 못하는 JSXconst element = Hello;// 변환 필요const element = React.createElement('h1', null, 'Hello'); 2. 수많은 자바스크립트 파일을 각각 로드하면 성능이 느림..

이전 포스팅에서 CRA 없이 리액트 앱을 만들기 위한 기본적인 프로젝트 구조를 살펴보았다.이번에는 모듈 번들러인 Webpack을 설정하는 방법에 대해 알아볼 것이다.1. Webpack이란? Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 웹팩은 애플리케이션을 처리할 때 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.Webpack의 주요 개념 - Entry: 디펜던시 그래프를 만들기 위해 사용해야 하는 시작점 - Output: 생성된 번들을 저장할 위치와 이름 지정 - Loaders: 웹팩이 기본적으로 이해하는 JavaScript와 JSON 파일 이외의 다른 유형의 파일을 처리 - Plugins: 번들 최적화, 에..

Create React App(CRA) 없이 리액트 앱을 구축해보고자 한다.Create React App(CRA)은 단 몇 줄의 명령어로 최적화된 리액트 개발 환경을 구축할 수 있다. 복잡한 설정 과정 없이 즉시 개발을 시작할 수 있고, 웹팩, 바벨, ESLint 등이 미리 구성되어 있어 최신 자바스크립트 기능을 바로 사용할 수 있다. 또한, 핫 리로딩을 지원하는 개발 서버가 포함되어 있어 생산성이 향상된다. 하지만, CRA의 내부 작동 방식을 이해하지 못한 채 사용하게 될 수 있고, 특정 요구사항에 맞춰 설정을 변경하려면 'eject'해야 하는데, 이는 복잡하고 되돌리기 어려운 과정이다. CRA로 리액트를 만들다가 문득 프로젝트 구조와 빌드 프로세스에 대해 궁금증이 생겼고, CRA 없이 리액트 앱을 만..

Mocking- 실제값이 아닌 가짜값을 주입하여 이를 통한 테스트 환경을 통제하여 의존성의 독립을 가져온다.- import 를 통해 외부 모듈을 값이나 로직을 수정함으로 인해 모듈 내의 동작이 의도에 맞게 동작하는지 검토할 수 있다(외부 환경 요인에 대한 적절한 통제)- Mocking은 제어할 수 없는 것을 대체할 수 있다. Jest mocking- 의존성을 Mock function으로 대체- Jest의 mock 함수는 함수 호출 기록, 반환값 설정, 모듈 구현 내용 변경에 대한 기능을 가진다. 1. Mock함수를 만들고 호출 캡쳐 const mockFn = jest.fn(); expect(mockFn).toHaveBeenCalledTimes(3) // mock 함수는 3번 호출됨 // ..

서버로 부터 api를 호출하여 데이터를 받아오는 것을 mocking을 활용하여 처리하는 방법 모든 테스트에서는 api를 실제 호출하기 보다 요청을 모의하여 데이터를 가져올 수 있다.이를 통해 사용할 수 없는 백엔드로 인한 비정상적인 테스트를 막을 수 있고,모의 에러를 이용한 에러의 대응, 의도된 여러가지 응답에 대한 처리를 리액트 컴포넌트 안에서 테스트로 확인할 수 있다.실제 request, response에 소모되는 시간낭비도 방지할 수 있다. 서버로의 request를 모의 데이터로 처리하는 방법 경우 2가지 1. fecth2. axios fetchfetch api의 모의 데이터를 받아오는 방법을 jest function 함수를 이용한 수동 moking 방법과 라이브러리를 이용한 방법모의 데이터에 의존..

render 함수기능- 컴포넌트를 document.body에 붙여서 렌더링 시킨다. 반환값1. query objectsrender 함수의 반환 값으로 getByRole을 사용할 수 있다. const { getByRole } = render(// 버튼 역할을 하면서 - name을 가진 element가 document에 있는지 찾음expect(getByRole('button', { name: "-" })).toBeInTheDocument() screen object를 통해서 getByRole 함수에 접근할 수 있다.expect(screen.getByRole('button', { name: "+" })).toBeInTheDocument(); 2. container- 리액트 컴포넌트가 렌더링 된 DOM Node..

AAA 패턴(Arrange / Act / Assert)1. Arrange: 테스트 전 준비사항들을 구성한다. state, service를 준비하고 라이브러리들을 Mocking하는 단계이다. 테스트할 element를 렌더링하는 과정이 포함된다. 앞서 설정과 해지 패턴에서 알아본 beforeEach와 afterEach를 작성한다.  2. Act: User의 액션에 따른 테스트 코드를 실행한다.  3. Assert: Act로 인해 변경되거나 구성되는 값들을 검증하는 과정이다. element의 값을 검증, element의 생성과 소멸 상태값의 변경 시간에 따라 변화하는 값을 감지한다. 사용자의 의도적인 인터랙션에 의해 변화되는 모든 값을 검증하는 과정이다. AAA 패턴 예describe(' component',..

설정과 해지를 통한 환경의 격리테스트하고자 하는 컴포넌트를 순수하게 외부환경으로 부터 격리할 수 있다환경변수, 글로벌 변수, import, 다른 리액트 컴포넌트로 부터언제 어디서나 테스트가 실행되더라도 같은 결과를 낼 수 있도록 통제할 수 있다. 테스트 전에 데이터 세팅, 특정 모듈 모킹 등 동작을 통해 테스트 시작환경이 동일하도록 조성하고같은 방식으로 테스트 수행 이후에 테스트 동안에 변경되었던 값을 초기화 하여 차후 테스트에 주는 영향을 방지한다.  설정 (Setup)과 해지 (Teardown) 예시Timer를 이용하는 경우 (setTimeout, setInterval, clearTimeout, clearInterval) 테스트는 예측이 어려워지고 느려진다.이런 경우에는 fake timer를 이용하는..