웹 최적화 웹 최적화를 왜 시켜야할까? 웹을 사용하다 보면 프론트가 느리거나 반응이 느려서 사용자가 답답해야할 때가 있다. 특히나 한국인의 경우에는 반응이 조금만 새로고침을 하는 특이한 종족이기 때문에 한국의 웹 개발자라면 최적화에 신경을 안쓸수가 없다. 그리고 또한 리액트를 사용하면서 리액트를 사용하는 사람은 많을 것 같다는 생각이 주위의 사람들이나 들었다. 요즘 좋은 강의들도 많아서 나만의 차이점? 특이점을 만들어서 조금 더 스킬업을 하고 싶다는 생각을 많이 했다. 최적화를 통해 얻을 수 있는 것 사용자들이 떠나지 않게 만들 수 있다. 한국 사람 특성상 조금만 로딩이 되거나 늦어지면 나가버리는 사람들이 많다.(나도 그렇다) 이를 해결하면 더 사용성을 높여서 이용자가 더 편하게 사용할 수 있을 것이다...

jest React에서 테스팅 해보기(snapShot, text 찾기) jest를 react에서 사용해서 테스팅을 진행해보겠습니다. 우선 진행하기 전 Cra를 만들어서 진행하도록 하겠습니다. 1. text 찾기 특정 컴퍼넌트를 만들어 테스팅을 해보겠습니다. export default ({jestElement:{name, age}}) =>{ return ( {name? `jest를 테스트하러 오셨나요? ${age}세 ${name}씨` : "jest Test를 하려면 로그인을 하싶쇼"} ); } 파라미터로 특정 객체를 받아서 age와 name을 표시해주고 만약에 해당 객체가 없다면 jest Test 로그인 하라는 후자의 텍스트를 볼 수 있습니다. import JestTestElement from "./jes..

jest mock 함수 영어 단어의 의미로 mock을 알아보면 가짜이다. 엥 가짜함수? 이게 뭘까... 여기서 가짜 함수란 테스트하기 위해 모의로 만든 함수라고 생각하면 된다. 실제 구현된 코드를 모의 코드로 변경하여 편리하게 테스팅을 할 수 있다. mock 함수만들어보기 const mockFn = jest.fn(); jest.fn();를 이용하여 mock 함수를 만들 수 있다. mock함수 안에는 입력값을 넣어줄 수 있는데 이 값은 mockFn의 mock이라는 인스턴스에서 확인할 수 있다. mockFn(); mockFn('하위'); test('mock Function', () => { console.log(mockFn.mock.calls); expect("mock").toBe("mock"); }); m..

이번에는 테스트를 진행하기 전후에 특정 함수를 실행시킬 수 있는 jest 제공 함수를 사용해봅시다. 우선 각함수가 어떤 것을 의미하는지 알아봅시다. beforeEach 여러 개의 테스트가 시작하기 전 각각의 실행되는 함수입니다. 우선 예제를 봅시다. 각 테스트를 실행하기 전에 number의 값을 바꾸어 주어서 이전에 beforeEach가 실행되고 있는 점을 확인할 수 있다. js const fn = require("./hi"); let number = 1; beforeEach(()=>{ console.log(`각 테스트가 시작하기 전에 실행되는 함수입니다.${number}`); }); test('3곱하기 3은 9', () => { expect(fn.add(3, 3)).toBe(9); number = 2;..

jest 비동기 테스팅 js는 싱글 스레드로 돌아가는 언어로 다양한 주로 비동기 작업들과 함께 사용한다. Callback callback 함수를 만들어주어서 등록시켜주며 실행해주면 된다. 하지만 주의해야할 점이 있다. jest의 경우 코드 제일 밑단을 만나버리면 함수가 바로 종료되어 버린다. js 코드 const hi = { add : (num1, num2) => num1 * num2, fourSecondAge: callback =>{ setTimeout(()=>{ callback(25); }, 4000); } } module.exports = hi; test 코드 const fn = require("./hi"); test('4초 후에 나이 25', () => { const callback = (age)..