들어가며

오늘은 영혼을 갈아내면서 코딩했다. 코드 구조가 복잡해지면서 설계를 다시 해야됐고 그 과정에서 많은 구조가 바뀌었다. 최대한 간결하고 재사용성을 높이게 작성하려고 했다. 하지만 기능 복잡할수록 코드가 많아지는건 어쩔 수 없었다. 할 일이 산더미처럼 불어났다. 구조를 설계하고 공책에 To Do 리스트를 작성하면서 차근차근 진행했다.

MakeQuiz 컴포넌트 전환

• 큰 구조는 타겟 입력, 정규표현식 결과 출력, 정규표현식 입력 3가지로 나뉜다.
• 타겟 입력과 결과 출력은 전환되어야 한다.
  • 정규표현식 입력창을 마우스 클릭하면 타겟 입력에서 결과 출력으로 전환된다.
  • 결과 출력을 마우스 클릭하면 타겟 입력으로 전환된다.
  • 다른 컴포넌트에 속해있던 함수들을 별도의 파일로 빼서 그에 맞게 환경 변경
  • 상태를 만들어서 onClick으로 컴포넌트 전환

<div onClick={handleFocusTestCase('testCase')}>
            <h2>Test Case</h2>
            {focusTestCase ? ( //
              <InputTestCase //
                testCases={content.testCase}
                handleInputTestCase={handleInputTestCase}
                handleTaskButton={handleTaskButton}
                handleTestCaseQuantity={handleTestCaseQuantity}
              />
            ) : (
              <ShowTestCase //
                testCases={content.testCase}
                inputRegex={content.answer}
                handleIsCorrectRegTotal={handleIsCorrectRegTotal}
                handleInputCapture={handleInputCapture}
                handleTestCaseQuantity={handleTestCaseQuantity}
              />
            )}
          </div>

MakeQuiz 실시간으로 그룹 보여주기

• Capture 문제유형일 경우, Group을 지정할 수 있다.
• Group 목록을 가져오기 위해서 상태 제어 함수 상속 handleCaptureInput
• MakeQuiz 환경일 경우, 정규표현식을 입력할때마다 그룹 목록을 실시간으로 보여줌

{testCase.task === 'capture' ? (
            isCaptuerInput ? (
              captureInputArray.map((el) => <p class="found">{el}</p>)
            ) : (
              testCase.groups.map((el, idx) => (isCorrectRegGroups[idx] ? <p class="found">{el}</p> : <p>{el}</p>))
            )
          ) : (
            <></>
          )}

모든 문제가 맞는 경우

• 상태 함수를 상속해서 전달
• 모든 값이 들어왔고 이전 결과과 달라지는 경우에만 상태 함수 적용

  const handleIsCorrectRegTotal = (e) => {
    const result = e.indexOf(false) === -1;
    if (result !== isCorrectRegTotal) setIsCorrectRegTotal(result);
  };

Content 상태로 일원화

• 이전엔 testCase 상태를 따로 관리했음
• 코드가 늘어나면서 최종적으로 보낼때 합치려고하니 코드 복잡도가 오히려 늘어남
• 전체 상태는 하나의 상태로 관리하면서 Input 함수만 별도로 생성

  const makeTestCase = () => {
    return { task: 'match', target: '', groups: [] };
  };
  const [content, setContent] = useState({
    title: '',
    testCase: [makeTestCase()],
    testCaseTarget: 'deprecated',
    answer: '',
    explanation: '',
  });

  const handleInputTestCase = (idx) => (e) => {
    const newTestCase = content.testCase.slice();
    newTestCase[idx].target = e.target.value;
    setContent({ ...content, testCase: newTestCase });
  };

TestCase 항목 추가, 삭제

• 아래 + 버튼을 누르면 TestCase 항목이 추가됨
• TestCase 오른쪽 - 버튼을 누르면 해당 항목이 삭제됨

  const handleTestCaseQuantity = (key, idx) => (e) => {
    let newTestCase = content.testCase.slice();
    if (key === 'add' && newTestCase.length < 5) {
      newTestCase.push(makeTestCase());
    } else if (key === 'delete' && !!idx && newTestCase.length > 1) {
      const front = newTestCase.slice().splice(0, idx);
      const back = newTestCase.slice().splice(idx + 1);
      newTestCase = [...front, ...back];
    }
    console.log(newTestCase);
    setContent({ ...content, testCase: newTestCase });
  };