ToBe와 ToEqual 사용해보기 테스트하려는 코드 const hi = { add : (num1, num2) => num1 * num2, makePerson: (name, age) =>({name, age}) } module.exports = hi; 두개의 객체는 서로 일치하니 당연히 true가 되어야 할것 같은데 toBe의 경우에는 테스트를 통과하지 못하고 있다. const fn = require("./hi"); test('사람 만들기 ToEqual', () => { expect(fn.makePerson("sanghoony", 12)).toEqual({ name:"sanghoony", age:12}); }); test('사람만들기 ToBe ', () => { expect(fn.makePerson("s..

우선 jest를 알아보기전 테스팅을 알아보자! 테스팅은 일반적으로 코드를 개발하기 전이나 하면서 해당 코드가 어떻게 돌아갈지 확인하기 사용한다. 테스트 코드를 작성하면 자신의 코드가 어떤 상황에서 잘 진행될까 미리확인 될 수 있어서 미래에는 효율적으로 오류를 줄이며 코딩을 할 수 있어서 많은 사람들이 사용을 하고 있다. 하지만 개인적인 생각으로는 너무 또 과도하게 하게되면 빠른 변화가 있는 스타트업 같은 경우 따라가기 힘들다고 생각이들었다. 그래서 오늘도 드는 생각 적당히 사용하자다.... 일단 jest의 경우에는 facebook에서 만든 테스트 라이브러리로 일반적인 회사 구인글에도 많이 보인다. jest로는 unit, intergration test 둘다 사용할 수 있다. 이글을 시작으로 천천히 jes..

위의 영상과 같이 스크롤 값을 통해서 뒷 배경의 변화를 주는 페이지를 만들어보겠습니다. 이 부분의 핵심은 위의 배경들을 fixed로 고정 한 다음 스크롤 값에 따라서 opacity를 변화를 주어 어둡게 만들어 주는 것입니다. 우선 html코드와 css코드를 확인해봅시당. body{ margin: 0; padding: 0; overflow-x: hidden; } section.titleWrap{ position: fixed; height: 800px; width: 100%; top: 0; left: 0; } h1{ position: absolute; color: #eee; text-align: center; width: 100%; font-size: 50px; margin-top: 320px; z-inde..

이번에는 뉴스나 특정 페이지를 보면 스크롤을 내릴 수록 얼마나 글을 읽었는지 등의 정보를 확인할 수 있는 프로그레시브 바를 만들겠습니다. 우선 글을 만들기 위해 더미 한글을 만들겠습니다. hangul.thefron.me/ 한글입숨 - 무의미한 한글 텍스트 생성기 한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다. hangul.thefron.me body{ margin: 0; display: flex; justify-content: center; } .textSection{ display: flex; flex-direction: column; align-items: center; width: 30%; background-color: brown; padding: 0 10%; color: antiquew..

오늘 해볼 것들 마우스를 움직이는 대로 자동차나 배경이 다르게 변하는 화면을 만들어봅시다. 이번에도 html, css, js만을 사용해서 구현할 수 있습니다. 기본적인 html 파일을 만들어 줍니다. 그런 다음 img를 사용해서 src로 이미지를 등록해서 화면을 볼 수 있습니다. 이미지만 설정해주면 차례대로 나오기 때문에 겹치게 만들기 위해서 car의 position을 absolute로 만들어줍니다. 그리고 z-index를 숫자를 지정해서 앞으로 보이게 만들어줍니다. body{ background-color: black; overflow: hidden; } #background{ width: 450px; margin-left: 40%; } #car{ position: absolute; width: 300..

이번에는 마우스 커서를 대신 따라 다니면서 볼 수 있는 커스텀 커서를 만들어보겠습니당. html,css,js만 할 수 있으면 되서 쉽습니다. ㅎㅎ 우선 html 파일을 만들어보져 test script에 window.onload가 있는데 이는 html이 완벽하게 로드 된 후에 각종 요소들을 가져오기 위해서 입니다. 그럼 cursor_item이라는 html이라는 html을 가져와서 마우스 커서를 만들어 보겠습니다. js부분 변경을 통해서 마우스의 위치를 html 코드로 볼 수 있게 변경했습니다. 마우스 위치 값 확인하기 그럼 이 위치 값을 저 커서의 위치에 넣어주면 마우스 커서를 따라서 이동하게 될 것입니다. 그럼 위치의 값을 변경하는 js 코드를 넣은 다음 css를 조금 수정해보겠습니다. test curs..