11주차 회고

<작업하면서 느낀점>

1. 비동기 작업에서는 코드 순서가 중요하다.

특히 API를 호출하고 .then(), .finally()로 처리할 때 둘을 혼동하면 제대로 데이터가 전달되지 않았다. 철지히 .then()이 완전히 실행되고 난 후에 .finally()가 실행되기 때문이다. 그 외에도 부모 컴포넌트의 state에 좌우되는 로직이 해당 state가 변화되기 전에 먼저 실행되면서 발생한 오류도 있었다.

2. React는 처음 빌드할 때 undefined인 변수를 가지고 처리하는 로직에 대해 에러를 발생시킨다.

이번에는 유난히 undefined 에러가 많았다. 데이터의 형식을 검증하는 코드가 있었는데 빌드시키면 그 부분에서 자주 에러가 발생했다. 왜냐하면 검증이 필요한 데이터가 처음 빌드할 때는 정의되어 있지 않았기 때문이다. 삼항연산자로 이미 있는 상태에서만 실행되도록 코드를 짠 후에야, 에러가 발생하지 않았다.

const hasNameValid = deductor.name? deductor.name.length >= 2 : false

3. 각 페이지는 핵심 기능이 있고, 그 외 기능은 부차적인 것이다.

체크박스를 통해 현재 입력한 데이터를 기본 데이터로 지정하는 로직이 있었다. 이를 어떻게 구현해야 할지 몰라서 각기 다른 API를 연달아 두 번 호출할 뻔 했다. 그러나 해당 페이지의 주요 기능은 기부영수증을 신청/수정하는 일이었고, 따라서 그 외의 작업은 파라미터 등 부차적인 요소로 빼서 전달하는 게 맞았다.

    const receiptInfo = {
        deductor: deductor.name,
        residentRegistrationNumber: deductor.residentRegistrationNo1 + deductor.residentRegistrationNo2,
        donationId: donationId,
        // 파라미터 값으로 넘겨준 체크박스 값
        isDefault: isChecked.defaultInfo
    };