TIL | Mar 30(Wed), 2022

 

👉TODAY

1. 07:30 기상

2. 이번 스프린트의 주요 task 중 하나인 test code 작성

3. cron 관련 코드 인수인계

 

 

📌TOMORROW

1. 이번주 금요일에 회고 및 차주부터 새로운 스프린트가 시작되므로 지난주부터 했던 것 정리해 보면 좋을 것 같음

2. cron 코드 숙지 및 테스트 코드 보충해도 좋을듯

 

 

🔨What I Learned?

📚

1) Jest 셋팅 및 사용법(mock data/function 사용 및 상황에 맞는 matcher 적용)

여러가지 조건 또는 시나리오를 설정하고, 해당 코드가 실행됐을 때의 결과가 기대한 결과와 맞는지 확인하면 테스트하면 된다.

그 과정에서 테스트의 조건이 참/거짓, 단순 일치, 숫자 비교 등이 될 수 있는데, 이를 위해 사용하는게 matcher이다.

그 중 toBe(), toEqual()이 주로 사용되는 것 같고 toBeNull()과 같이 null이 return 되는 경우에 대한 확인도 가능하다.

 

테스트를 해야하는 코드를 가지고 나름대로 시나리오/케이스를 작성해 보았다.

그리고 각 테스트마다 어떤식으로 구성해야하는지(mock data 또는 function이 필요한지, 어떤 matcher를 써야하는지 등) 생각하고 학습했다. 사실 사전에 학습을 한다고 해도 실제로 테스트 코드를 짜고 돌려보면서 나오는 에러들을 가지고 다시 무한 구글링을 해야하기에, 기본 셋팅과 어떤식으로 돌아가는지만 알아두면 될 것 같다.

 

Anyway,

내가 정한 첫번째는 테스트 시나리오는 'getSearch()라는 함수가 있다고 가정했을 때, 해당 함수가 적어도 100개의 데이터를 가져와야하는데 이를 잘 가지고 오는지' 테스트해야했다.

처음에는 딱 100개만 가져오는줄 알았는데, 해당 함수가 데이터를 가져오는 api에서 특정 값의 타입이 string과 number타입으로 되어있어서 100개 이상이 나오는 경우도 있었다. 

그래서 처음에는 expect(data).toHaveLength(100) 과 같이 '해당 함수를 실행 했을 때, data가 100개의 데이터가 나온다.'라는 식으로 했다가 아닌 경우도 있어서 아래와 같이 수정했다.

사실 Object 형식으로 오는 data의 length를 한 번에 확인하는 matcher가 있을 것 같아서 찾아보다가 다른 방법으로 검증한 코드가 있어서 가져왔다. 

=> 배열을 하나 만들어서 거기에 data를 넣어주고 expect 부분에서 length로 접근하는 방법이다. 쉽고 간단했는데, matcher에만 꽂혀서 다른 곳을 둘러보지 못했다 :(

 

https://www.newthings.co/blog/structuring-tests-using-given-when-then/

Structuring tests using Given-When-Then

 

describe('GIVEN an empty array', () => {
    const array = new CustomArray();

    describe('WHEN an item is pushed', () => {
        array.push("item"); // 배열에 담음

        test('THEN the length of the array is one', () => {
            expect(array.length).toBe(1);
        });
    });
});

 

 

아래 사이트에서 국문으로 일부 정보를 찾을 수 있다.

https://mulder21c.github.io/jest/docs/en/next/using-matchers

Jest · 🃏 Delightful JavaScript Testing

 

아래 사이트는 영문으로 작성된 공식문서이다.

https://jestjs.io/docs/expect#tohavereturned

Expect · Jest

 

 

2)  자바스크립트 객체 속성: writable, enumerable, configurable + value

이 부분은 MDN 문서를 보다가 'use strict'에 object.defindProperty(), writable 이 나와서 따로 포스팅하려고 빼뒀다.

블로그 글을 보면서 console.log 로 몇개 테스트만 해봤다.

 

https://im-developer.tistory.com/140

[JS/Object] 자바스크립트, 객체의 프로퍼티(Property)에 대하여 (Object.defineProperty()와 getter, setter사용

 

https://developer-talk.tistory.com/277

[JavaScript]객체 속성(writable, enumerable, configurable)

 

 

🧙‍♂️Reivew

진짜 정신없이 첫번째 스프린트가 지나갔다. 입사 당일에 주어진 업무 겸 과제가 (나한테는)어려워서 좌절했었는데, 이번 스프린트 때 인수인계 받은 코드는 계속 보다 보니까 눈에 익은 것 같다. 뿐만 아니라 퇴근하고도 집에서 2-3시간씩 보고... 거의 하루종일 보니까 익숙해져야지 뭐..

어디서 이런 댓글을 봤다. -> '신입이 120% 하려는 것 만큼 무서운 일이 없다'라고 

시간이 지날 수록 모르는게 너무 많아서 어디서부터 시작해야할지도 모르겠다. 사실 계속 뭔가를 하고 있기는 했는데 말이다.

자바스크립트에 대해서도 모르는게 많았고, 타입스크립트 + 처음해보는 Nest.js도 아직은 낯설고(그래도 스프링 해봐서 쬐금 익숙), 박물관에 기증되어야하는 2012년 맥북으로는 인터넷 서핑하느라 윈도우 랩탑으로 개발을 했기에 macOS로 개발하는 것도 아직 낯가림.

네트워크, 리눅스 환경, 웹 브라우저, 명령어로 버전관리(git), 테스트 코드짜기, DB 등 공부할거 많아서 정말 좋다.

 

네트워크나 리눅스 관련해서 둘 중 하나는 주말에 학원 다니며 배울 생각인데, makmak하다 :/)

오늘로서 딱 2주됐는데, 그래도 이제는 새로운 코드를 보면 어떻게 돌아가는지 딱 알 수 있게 되었다!