전체 글 227

JEST - snapshot

snapshot 은 어떤 기능의 예상 결과를 미리 포착해두고 결과를 비교하는 테스팅 기법이다. 1. toMatchSnapshot() snapshot을 따로 파일을 만들어서 보관한다. 아래 코드를 실행하면 snapshot 파일이 생성된다. fn.js에 addNum이라는 함수를 하나 만들고 배열과 숫자를 입력받으면 각 배열의 요소마다 입력받은 숫자를 더한 뒤 배열을 리턴하는 함수를 작성하고 test를 진행해봤다. //fn.js addNum: (arr, num) => { arr = arr.map((el) => el + num); return arr; }, //it 과 test는 같은 함수이다 it("snapshot", () => { let result = fn.addNum([1, 2], 100); // [10..

Web/JEST 2023.12.07

JEST - Mock

Mock 함수는 새로운 함수를 구현한 게 아니라 테스트를 위해 구현하는 가짜함수이다. 가짜로 대체하는 이유 -테스트 하고 싶은 기능이 다른 기능과 엮여있을 경우 정확한 테스트를 하기 힘들다. -내가 작성한 코드의 문제인지 api의 문제인지 db의 문제인지 다른 문제인지 파악하기 힘들다. =>실제로 데이터베이스에 데이터를 넣지 않고 잘 작동한다는 전제하에 테스트를 하기 위해 mock이 필요하다 1. calls (호출확인) Jest는 에서는 가짜 mock 함수를 생성할 수 있는 jest.fn()을 제공한다. mock 함수에는 mock이라는 property가 있으며 이 안에는 calls라는 배열이 있다. mock property에는 호출되었던 값들이 저장된다. calls를 이용하면 함수가 총 몇번 호출 되었는..

Web/JEST 2023.12.06

JEST - before, after, only, skip

Jest에는 전역 환경에 있는 함수와 객체들이 있는데 그 중에서 before, after, only, skip 를 araboza. 1. Before / After Before, After 는 테스트 함수 실행 전 후에 실행되는 함수이다. 뒤에 Each와 All을 붙여서 각각 사용할 수 있다. 1.1. BeforeEach / AfterEach Each를 붙이면 각 test 함수마다 실행된다. let num = 10; //각 테스트 전마다 실행 beforeEach(() => { console.log("test start"); num = 0; }); //각 테스트 직후마다 실행 afterEach(() => { console.log("test end"); }); test("+1", () => { console...

Web/JEST 2023.12.05

JEST - Matcher

JEST는 Test Runner, Test Matcher, Test Mock 를 제공해주는 테스트 프레임워크이다. 설치 npm install --save-dev jest 설치 후엔 package.json 을 열어서 script 의 test 부분을 지우고 jest 로 고쳐주면 npm test로 테스트 할 수 있다. "scripts": { "test": "jest" }, 테스트 파일을 만들 땐, 테스트 파일명.test.js로 만든다. (app.test.js) npm test를 실행하면 Jest는 기본적으로 test.js로 끝나거나, __test__ 디렉터리 안에 있는 파일들을 테스트 파일로 인식하여 프로젝트 내에 모든 테스트 파일을 찾아서 테스트를 실행한다. 만약 특정 테스트 파일만 실행하고 싶은 경우에는 ..

Web/JEST 2023.12.05

반응형 웹과 적응형 웹

기본적으로 두 방법 모두 웹사이트가 다양한 크기의 화면과 모바일 기기에서 더 나은 사용자 경험을 제공하기 위한 방법이지만 설계와 구현에 차이가 있다. 1. 반응형 웹(Responsive Web) 미디어 쿼리를 사용해 화면 크기를 확인하고 flex, grid 등을 활용해 화면 크기 변화에 따라 페이지 크기 및 레이아웃을 조절한다. 글자 크기 자동 조정은 em, 이미지 크기는 % 사용해 구현한다. 하나의 템플릿을 사용하여 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하지만 이미 PC용이나 모바일용으로 웹사이트가 구축되어 있을 경우, 사이트를 재구축해야한다. 또한 사용자는 모든 기기에 대한 css를 다운 받아야 하므로 로딩 시간 증가 및 데이터 낭비라는 단점을 가진다. 2. 적응형 웹(Adaptive W..

NOTION 정리/CSS 2023.11.12

iframe sandbox

sandbox 속성은 HTML5에서 추가되었으며 iframe 에 지정하면 해당 프레임이 삽입되는 페이지에 제한을 둘 수 있다. sandbox 속성을 비워두면 모든 제한 사항을 적용하고 값을 지정하여 제한을 완화할 수 있다. allow-scripts : 리소스가 스크립트를 실행할 수 있도록 허용, 팝업은 생성 안됨 allow-popups : window.open()이나 target=“_blank”, showModalDialog() 등의 팝업(popup)을 허용 allow-forms : 리소스(resource)가 폼 데이터를 제출할 수 있도록 허용 allow-modals : 리소스가 모달 윈도우(modal window)를 열 수 있도록 허용 allow-same-origin : 리소스가 same-origin ..

NOTION 정리/HTML 2023.11.06

UseEffect(Hook)

UseEffect Effect Hook인 UseEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줌 class 의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것 Hook: 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 side effects(짧게 effects): 컴포넌트 안에서 데이터를 가져오거나 구독하고 DOM을 직접 조작하는 작업 componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 마친 이후 실행 componentDidUpdate: 리렌더링을 ..

NOTION 정리/REACT 2023.11.06

원시타입과 참조타입(feat. 얕은 복사와 깊은 복사)

자바스크립트에는 원시타입과 참조타입이 있다 원시타입(Primitive type) Number, String, Boolean, Null, Undefined, Symbol 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장한다.(메모리 크기 고정) 값이 절대 변하지 않는 불변성을 지니고 있어서, 재할당 시 값이 변하는 게 아니라 변수가 새로운 메모리를 가리키게 된다. let a = 10; a = 50; 기존 메모리에 있던 10이라는 값이 50으로 변경되는 것이 아니라 새로운 50이란 값을 메모리에 생성하고 a는 새로운 메모리(50)을 가리키게 된다. let a = 1; let b = a; a = 2; console.log(a); //2 console.log(b); //1 console...

휴대폰 번호 입력 시 자동 하이픈

let inputElement = document.getElementById('input'); //정규표현식으로 숫자만 입력받게 체크 let phoneNumber = inputElement.value.replace(/[^0-9]/g, ''); let tmp = ''; if( phoneNumber.length < 4){ } else if(phoneNumber.length < 7){ tmp += phoneNumber.substr(0, 3); tmp += '-'; tmp += phoneNumber.substr(3); phoneNumber = tmp; }else if(phoneNumber.length < 11){ tmp += phoneNumber.substr(0, 3); tmp += '-'; tmp += pho..