[다시 풀어보는 토스 과제]

지난 토요일 토스에서 Next개발자 챌린지 과제가 있었는데, 

나는 프론트엔드를 신청했고, 나는 2시간 이내에 풀지 못했고, 기능 없는 화면 구현만 해놓은 상태에서 끝났다.

이후 어제부터 시작해 다시 풀어보기로 했다. 푸는 중간 토스에서 제공한 노션 가이드 링크 공유가 사라져 테스트까지 해보지는 못했다.

무튼 풀긴 다 풀었다. (feat. gpt님)

생각보다 복잡했고, 토스에서 제공한 컴포넌트들이 없이 처음부터 구현했더라면? 더 막막했을듯 하다.

추후 제공된 컴포넌트들과 코드들을 해부해봐야 할 듯 하다.

 

내가 푼 코드들을 하나씩 뜯어보려고 한다.

(주어진 과제는 github에 public으로 두거나 따로 코드를 외부로 유출하면 안되는 걸로 알기에, 기존 제공된 코드들은 생략하고 내가 작성한 코드들 첨부 예정)

 

구현 후 한 문장

"구현 전 각 기능의 세부 의사 코드는 중요했고, 쉬운 건 없었다"

 

아직 추가 못한 기능

1. keypad를 modal로 만들어 Input컴포넌트를 focus하면 modal이 열리고 modal 영역 밖을 클릭하면 modal이 사라지도록 해야하는데, modal이 열리고 바로 외부 영역을 클릭하면 modal이 사라자지 않음. keypad의 버튼을 하나라도 클릭하고 외부 영역을 클릭 했을 때 modal이 사라짐. 

2. 리팩토링

 

구현하면서 이거 알았음.

1. 2차 배열을 하나의 배열로 매핑하기
무작위 pad api를 호출하여 데이터를 state담고 데이터를 매핑하여 각 버튼에 레더링 해야하지만, 데이터가 2차배열이었다는 것.. map을 두번 돌리면 되겠거니 했지만, 나는 각버튼들을 가로(4), 세로(3)으로 나누지 않고 나열했기에 2차배열의 데이터를 하나의 배열로 매핑해야 했음. 
물론 map을 두번 사용하고 매핑된 값을 flat 메서드를 사용할 수 있지만, flatMap이라는 메서드를 사용하여 2차 배열을 1차 배열로 매핑처리 함.

 {keypadData.flatMap((row, rowIdx) =>
	row.map((buttonText: string, columnIdx: number) => {
		if (funcKeysBlank === `[${rowIdx},${rowIdx}]`) {
        	...
        }
    }

2. 평소 잘만 사용하던 훅 useEffect의 의존성 배열에 경고가 뜨는것이 아닌가...왜?
과제에 설치된 eslint 규칙에 위반되기 때문. 블로그를 찾아보니 "react-hooks/exhaustive-deps" 규칙은 효과 후크에 누락된 종속성이 있을 때 경고를 띄운다. 경고를 없애려면 useEffect 내부의 함수 또는 변수 선언을 이동하고 렌더링할 때마다 변경되는 배열 및 개체를 메모화하거나 규칙을 비활성화해야 한다." 함. (외부에서 사용한 함수나 변수를 쓸 경우..)
몇가지 방법이 있었지만, 가장 쉬운 주석을 추가하여 규칙 비활성화 시키는 것. 
useEffect안에 // eslint-disable-next-line react-hooks/exhaustive-deps 함수를 추가하면 된다.

useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isModal, isSecondModal]);

3. api 호출하여 데이터를 받아와 렌더링 할때 브라우저 빈 화면 주의!
페이지 혹은 특정 이벤트가 실행될 때 useEffect안에 api호출을 담아 실행시키곤 하는데, 갑자기 빈 화면이 뜰때가 있다. 이는 받아오는 화면에 렌더링해야하는 데이터가 [] 빈배열이기 때문일 경우가 크다. 데이터가 로드 되기 전 keypadFuncKey 배열을 읽으면 빈 배열이 나온다.

const funcKeysBlank =
    keypadFuncKey.length > 0 ? `[${keypadFuncKey[0].rowIndex},${keypadFuncKey[0].columnIndex}]` : '';

4. 데이터의 구조를 파악하라...!
api 호출로 받아오는 데이터 구조가 어떻게 되는지 파악해야 시간을 줄인다. object의 키는 무엇이 있고..값의 타입이 무엇인지, 값을 변환해서 사용해야 할 때 어떻게 해야하는지...

5. 모달 영역 밖 클릭 시 모달 사라지게..
태그들에 z-index로 우선순위를 주어 모달 기능을 만들수 있지만, 구글링 해보니 다른 방법도 있었음. currentTargetd와 relatedTarget을 사용하여 현재 영역이 어디인지 파악하여 분기처리 하면됨.

const handleBlur = (event: any) => {
    if (!event.currentTarget.contains(event.relatedTarget)) {
	...
    }
}

 

6. string 타입의 코드들에서 내가 원하는 값 찾아내기!
처음엔 string 타입인 코드들을 변환하여 해당 코드안에 속성에 접근해서 필요한 데이터를 가져오자...했는데 너무 복잡했음.
찾아보니 정규식을 사용해서 string에 내가 원하는 값을 찾을수 있었음. 
(아래 코드 보니 if-if-if...중복된 코드들과 if를 줄여야함.)

const handleButtonClick = (buttonText: string) => {
    const regex = /data-testid="([^"]+)"/;
    const match = buttonText.match(regex);
    if (match && match[1]) {
      const dataTestIdValue = match[1];
      if (isModal) {
        const newInputValue = inputValue1 + dataTestIdValue;
        // 입력이 6자리를 초과하는 경우 입력 막기
        if (newInputValue.length > 6) {
          return;
        }
        setInputValue1(newInputValue);
      } else {
        const newInputValue = inputValue2 + dataTestIdValue;
        // 입력이 6자리를 초과하는 경우 입력 막기
        if (newInputValue.length > 6) {
          return;
        }
        setInputValue2(newInputValue);
      }
    }
  };

7. password 모달과 password 확인 모달 하나로 돌려 쓰기

8. 템플릿리터럴로 묶인 태그들(string 타입)의 데이터를 실제 코드로 반환하고 싶다

<div dangerouslySetInnerHTML={{ __html: buttonText }} />