230420(목)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🧐 고민 사항

1. [컴포넌트 리팩토링] 하위 컴포넌트들을 상위 컴포넌트에 element로 attach 후 setState 했을 때, 변경 사항이 반영되게 어떻게 하지..?

일단 리팩토링을 통해서 하위 컴포넌트들의 constructor에서 setState를 통해 화면을 바꾸는 것까지는 성공했다. 그런데 문제는 부모컴포넌트에서 하위 컴포넌트를 붙이고 나서 하위 컴포넌트의 element가 바뀌었을 때..! 이 때 변경사항이 반영이 되어야하는데… constructor에서 setState 되는 것외에 setTimeout이나 setInterval을 통해 나중에 변경되었을 때는 당연히 변경 사항이 적용되지 않는다. 왜냐하면 이미 attachTo 했을 때 붙은 element와 나중에 비동기적으로 생성한 element가 다른 element이기 때문이다. attach 하는 부분을 innerHTML과 outerHTML을 이용해서 어떻게 하면 될 거 같은데… 흐어 진짜 이 부분때문에 너무 힘들다ㅠ 그래도 차근차근 리팩토링해보자!!!

2. [테스트 코드] 서버와 통신하는 로직에 대한 테스트 코드 작성 시, server에 대한 의존성을 없앨 수 있는 방법이 없을까?

아래 코드를 보면 테스트 코드를 실행할 때도, fetch를 통해 서버에서 데이터를 가져온 후 그 값을 테스트하게 된다. 헌데 만약에 서버가 꺼진다면..? 서버가 당장 없다면..? 이럴 때 테스트 코드를 어떻게 작성하고 실행해볼 수 있을까? 일단 알아본 바로는 mock server라는 가짜 서버를 만들어서 테스트해보는 방법이 있는 것 같다. 이 부분에 대해서도 알아봐야겠다..! (예전에 써보려다가 번들러 없이는 안되었던 MSW와 깊은 연관이 있는듯!!)

🔑 오늘의 학습 키워드

• 리팩토링과 테스트 코드

🥳 학습 내용

리팩토링을 위한 테스트 코드 작성(feat. Jest)

기존의 MVC, Observer pattern에서 Flux pattern으로 리팩토링하기에 앞서 테스트 코드부터 작성하고 연습해보았다.(고난길 가기 전 그나마 심적 대비ㅠㅋㅋ)

예시3) fetch에 대한 테스트 그리고 error에 대한 테스트

import { customGet } from '@utils/customFetch.js';
import { BASIC_URL } from '@src/constants/constants.js';

// 서버가 켜져있어야지만 fetch가 되는데, 이 부분에 대한 의존성을 낮추는 방법은 없을까..?
// 서버가 꺼지면 test도 실패가 되어버리니까!
// 추후에 mock server 알아보기
describe('Custom GET', () => {
  it('About Left Issue data', async () => {
    const issues = (
        await customGet(`${BASIC_URL}/issues`).then((res) => res.json())
    )[0];
    const leftIssues = issues.leftRollingData;
    const firstIssue = leftIssues[0];
    expect(firstIssue).toEqual(
        "납치·살인 3인조 영장심사…'왜 죽였나' 묻자 묵묵부답",
    );
  });

  it('About Error', async () => {
    const mockPromise = async () => await customGet(`${BASIC_URL}/none`);
    await expect(mockPromise).rejects.toThrow(
        new Error('Error: 404 Not Found'),
    );
  });
});

fetch에 관한 테스트는 비동기 처리해주는 것이라 크게 다를 게 없는데, error를 처리하는 부분이 재미있었다. 일부러 에러를 내고 그에 대한 promise를 reject 처리하여 에러를 잡아내고 그 때의 값과 예상값을 비교한다. 앞으로도 다양한 테스트 코드를 작성해봐야겠다!