Web 38

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

React에서 Font Awesome 사용하기

React 를 사용하면 태그나 태그로 Font Awesome 자료를 사용할 수 없음(렌더링 안됨) 사용하려면 패키지부터 설치해야함 기본 패키지 설치 npm i @fortawesome/fontawesome-svg-core 일단 무료인 패키지 설치 solid regular brands npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons font awesome 을 react 컴포넌트로 쓸 수 있게 해주는 패키지 설치 npm i @fortawesome/react-fontawesome import React from 'react'; import {Link} from '..

Web 2020.12.30

[크롬] gh-pages 로 배포했을 때 opacity 변경, img 안나올 때

css에서 opacity 를 100%라고 적으면 이렇게 나와야하는데 크롬 브라우저에서 어느새 1%로 바뀌어져있다 포스터가 날아갔다. 1로 고쳐줘야 해결된다. 좀 기다려야됨 바로 적용 안됨 edge에선 제대로 잘보임 환장.. ⭐opacity 적을 때에는 처음부터 소수점으로 적자 +) 이미지가 안나올 때 폴더에 있는 이미지를 불러올 경우 제대로 안나와서 엑박이 뜨는 경우가 있다 ex) img 폴더의 background.jpg 불러오기 img src ="/img/background.jpg" 여기서 앞의 /를 빼주면 제대로 잘나온다 img src ="img/background.jpg" 이것도 엣지에선 잘 됨

Web 2020.12.30

css - 외부 스타일시트 불러오기, 인라인 스타일 시트, 선택자

외부 스타일 시트 가저오기 css상단에 html charset 과 같은 내용을 써줘야함 ; 안붙이면 적용안됨 @charset: "UTF-8"; p{ color: deeppink; } 사과사과사과 @import를 사용해서 불러올 수도 있음 사과사과사과 인라인 스타일은 우선순위가 높지만 유지보수가 힘들어서 거의 안쓴다고 함 초콜렛 선택자 표현할 대상이 되는 부분 h1 { color:red; } h1: 선택자 color : 속성 red: 속성값 color:red; : 선언 {color:red;} : 선언부 타입 선택자 id 선택자 id 선택자 적용 안됨 class 선택자 class 선택자 하위 선택자 하위 선택자 하위 선택자 (id 지정) 자식 선택자 자식의 자식 자식의 자식 자식 선택자 인접 선택자(그룹선택..

Web/HTML CSS JS 2020.10.23

HTML - form, input type 속성, text area, select, 주요 입력 속성

블록 레벨 요소 입력한 값들을 처리하는 프로그램으로 전달 텍스트, 인라인, 블록 요소 포함 블록 레벨 요소 양식 요소 그룹화 텍스트, 인라인, 블록 요소 포함 자식: 그룹화된 서식 제목 정의 서식에서 작성한 값을 처리하는 URL 지정 서식의 값들을 서버 프로그램에 전달하는 방법 정의 get, post 인라인 요소 데이터 값 입력 type속성에 따라 다양한 폼 컨트롤러 생성 공통으로 name, value 속성을 가짐 로그인 text: password: search: email: tel: color: number: range: radio(Y/N): checkbox: 1 2 3 submit: reset: button: image: file: hidden: 파일 선택 클릭시 여러줄 입력 가능한 텍스트 박스 중 ..

Web/HTML CSS JS 2020.10.22

html - map, text, list, table

1. map 엑셀로 대충 만든 지도 이미지에 링크 걸기 map 태그를 사용하면 이미지 중 도형으로 구역을 설정해서 링크를 달 수 있다. 이미지 좌표는 그림판으로 간단하게 확인할 수 있다 A를 누르면 이동 2. text em 태그: 기울여짐(강조) strong 태그: 굵어짐(강조) b 태그: 굵어짐(의미없음) mark 태그: 노란 줄 small 태그: copyright sub 태그: 아래첨자 H2O sup 태그: 위첨자 100m2 3. ol, ul, li : 순서 목록 : 비순서 목록 (동그라미 나옴) => 둘다 자식으로 반드시 포함 대분류 1 소분류 1 소분류 2 소분류 3 대분류 2 소분류 1 소분류 2 소분류 3 대분류 3 소분류 1 소분류 2 소분류 3 4. dl : 설명 목록을 나타냄 : 설명할 ..

Web/HTML CSS JS 2020.10.21