어쩌다 하루에 라인 코테, 자비스앤빌런즈 과제테스트, 카카오 코테가 다 겹쳐서... 제일 가망 없을 것 같은 카카오를 포기하고 다행히 라인은 오전이라 두개만 봤다. 지금까지는 닥치는대로 다 봤는데 이런 경우를 보니까 나만의 선택 기준이 있어야 할 것 같긴 하다.

라인 코딩테스트

사실 대기업(?)에 서류 통과한게 처음이라 너무너무 신났다... 나도 이제 간간히 서류 통과할 만큼의 짬은 찼다는건가!

시험은 프로그래머스로 봤고 총 5문제 나왔는데, 1.2솔 정도 한 것 같다. 정답 체크를 안해줘서 정확히는 모르겠다. 인터넷 검색 자유여서 좋았다.

1. 어디까지 말해도 되는지 모르겠는데 배열에 새로운 수를 추가할 때 드는 복사 횟수가 주요 내용이었다. 문제 자체는 어렵지 않았는데 기본함수 새롭게 사용하는 것 때문에 좀 헤멨다.

   - Math.max.apply(null, queries.map((el) => el[0]));
Math.max에는 배열만 넣어봤는데 함수도 들어갈 수 있는걸 처음 알았다. 알고 보니 Math.max의 특성이 아니라 기본 함수에는 다 적용할 수 있는 func.apply(thisArg, [argsArray])메서드이다.
   첫 번째 인자는 함수 호출에 주어지는 this값. 다른 함수에 기본으로 들어 있는 this를 대체해서 호출할 수 있게 된다. .call과의 차이는 .call은 두번째 인자에 배열을 풀어서 넣고 .apply는 통채로 넣는다는 거? 아직 잘 활용은 못 하겠지만 설명을 읽었더니 대략 이해는 된다.
   - Array.from({ length: arrLen+1 }, () => [0,0]);
   유사 배열이나 iterable한 객체를 얕은 복사할 수 있다. 두 번째 인자에 들어가는 함수로 변형도 가능. 첫 번째 인자에 원배열이 들어가는 건 알았는데 저런 식으로 길이 지정이 되는 건 처음 봤다.

2. 채팅에 비속어 마스킹 하기 문제. 정규식에 익숙하면 진짜 금방 끝날 것 같았는데 난 아니어서.. 어찌저찌 열심히 찾아서 했지만 첫 번째 조건밖에 못맞췄다.
   - str.replace(findDic, masking);
findDic에 비속어 찾는 /dic/g 정규식을, masking에 비속어 자릿수만큼 # 넣는 정규식을 넣으려고 했는데 아무리 해도 안 되길래 약간 돌아갔다. 그냥 정규식은 안 되고 const findDic = new RegExp(dic, "g");로 만들어줬더니 됐다. 자릿수만큼 #반복하는 정규식도 모르겠어서 const masking = "#".repeat(dic.length);로 만들었다.
   - .자리에 k개 이하 알파벳 넣었을 때 비속어이면 채팅 단어 마스킹(비속어 길이 말고)는 해결못했다... 남은 도전과제!

시험 보려니 갑자기 forEach랑 map도 헷갈렸다. 알고리즘적 요소는 없는데 푸는 속도가 느린게 문제였던 것 같다. 지금 답안 다시보니 콘솔을 안 지우고 냈네.... 저번 카카오때도 느꼈지만 코테보려면 정규식 꼭 공부하자!!! 이번에는 운 좋게 비알고리즘 문제가 많이 나왔지만 알고리즘도 꼭 다시 공부해야 한다. 카카오 코테 힐끔 봤더니 1번부터 알고리즘이었어...

자비스앤빌런즈 과제테스트

소문을 듣고 카카오 코테볼까 고민했지만 코테보단 과제테스트가 더 내 적성에 맞아서 경험 삼아 봤다.
프로그래머스 내부 vsc로 봤는데 파일 저장해놓을껄 제출하는데 급급해서 까먹었다.. React+Typescript로 설문조사 페이지 만드는거였는데 토스때보다는 타입스트립트의 제약이 적어서 거의 any 넣어놨다가 마지막에 맞췄다.

• 처음 fetch된 데이터가 비어있어서 .map에 undefined가 들어가는 문제가 또 발생했다. .map을 컴포넌트에서 바로 호출하지 않고 내부함수에 넣은 다음에 fetchedData && func()로 조건 호출해서 해결했다. 댕냥쓰해서 있었던 문제를 이제 바로 해결할 수 있는 실력이 되었다! (뿌듯😌)

• 주어진 api가 이중배열이었는데 단계 이동에도 답안 유지되게 하는거에 제일 애먹었다. 그러니까 설문조사 하나가 steps : [[1, 2, 3], [4, 5]] 식으로 페이지가 나뉘어져 있고 이 내부 페이지는 url이동이나 페이지 이동 없이 이전/다음 버튼으로 내용만 바뀌는데 이동할 때 작성한 답안이 유지되어야 했다. 답안 유지 조건을 나중에 봐서 처음에 fetchedData[i]를 매번 가져와서 컴포넌트로 구성하던 것을 미리 컴포넌트로 만들어서 이중 배열에 넣어놓고 배열에서 꺼내오는 방식으로 갈아엎었다.
  그런데 이렇게 하니까 저장한 배열이 Element[][]타입을 가졌다. 리턴문에 통채로 넣었더니 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.라는 오류를 뱉었다. 이중 element 배열을 바로 호출해서 그런가보다 해서 페이지번호를 인수로 받아서 한 페이지만 리턴해주는 렌더링 함수를 작성했다.
  렌더링 함수 내부에서 Element[pageNum]을 했더니 type 'number' cannot be used in the index format '() => Element[][]이라는 오류가 떴는데 괄호 표시 때문에 검색도 안되고 '이중 element', '중첩 element', '2차 element', 어느 검색어로도 검색이 안돼서 절망... 밑에 나오는 인덱스 시그니처 속성 선언했더니 해결됐다.
  근데 하고 보니 바꿀 필요 없었던 것 같다. <input value=state onChange={() => setState(prev => {...prev, [name]: value}>로 value값에 상태 동기화하니까 해결되었다. 사실 이건 form data를 로컬스토리지에 저장하기 위해 state에 넣는걸 하다가 우연히 얻어걸린 건데 전에도 이걸로 고민했던 적이 있어서 잘 기억해두어야겠다.

• object에 key 이름으로 value 가져오는 것도 잘 안됐다. Object[name] 하면 당연히 되어야 하는 것 아냐? 'string' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 오류가 떴다. 예전에도 봤었는데 무시한 인덱스 시그니처의 보복을 받았다. key값의 타입을 명시해줬더니 해결되었다. type과 interface가 다른지도 모르고 막 작성했는데 이제 구분해서 써야겠다.

	type Object { 
    	[key: string] : number 
    }

+) object에 key 동적으로 할당하기는 엘리스 노트에 있었다 

• 유효성 검사를 <form> 태그에서 해본 적이 없는 것도 문제였다. "리액트 validation" 검색하니까 죄다 라이브러리 사용.. html에서는 <input> 태그에 required 속성으로 쉽게 된다길래 했는데 안 됐다. <button>이 type='submit'이어야 한대서 바꿨는데 안 됐고, <input> 태그 잘 닫혔나 확인했는데 안 됐고, 6가지 다 체크했는데 안 돼서 리액트에서는 안되는 것 같다. '다음' 버튼을 누를 때 유효성검사 막히면 안 넘어가게 했어야 됐는데 해결 못하고 밑에 알림만 띄우는 걸로 했다. 지금 생각해보니 버튼 이벤트핸들러에서 validation 함수 호출해서 true 리턴받아야 pageNum++되게 했으면 됐을 것 같다.

• Each child in a list should have a unique 'key' prop 에러는 전에도 났을 때 해결했던 적이 있고 분명 문서로 정리해뒀는데 못 찾았다! 내가 구현한 컴포넌트에는 <li>는 없는데 이런 경고가 뜨는 이유는 컴포넌트 재활용을 통해 같은 컴포넌트를 반복적으로 렌더링 할 때 나오는 문제였던 걸로 기억한다. (댕냥쓰에서 <RenderList/>, 정치발자국에서 <Issue/> 때 났던 문제!) 반복되는 컴포넌트가 리턴하는 컨테이너에 key를 추가하는건 안 먹히고 컴포넌트를 호출할 때 key 속성을 부여해야 한다.

	/*Issue.jsx*/
	function Issue () {
        return (
            <Container key = {index}> //이건 소용 없다
            ...
            </Container>
        ) 
    }

    /*App.jsx*/
    function App () {
      return (<Issue key={index}/>) //이게 필요!
    }

• dependency 속성이 있는 질문은 특정 답을 선택했을 때만 나오게 했어야 했는데 시간 부족으로 못했다. multichoice, singlechoice, yesOrNo 유형에만 가능할 것 같으니까 dependency ? JSX Element : ''로 해결하면 금방일 것 같다.

• progress bar도 못 만들음. fetchedData.length 세고 페이지 수 or state 저장된 문제 수 세서 state에 저장한 다음 <div width={(count/total)*100 + "%"}/> 하면 될 듯.

설문 페이지 매달리다가 결과 페이지는 건들지도 못했다. localStorage 저장까지 구현했으니까 결과페이지부터 해볼껄! 그래도 역시 코테보단 과제테스트가 재밌고 쉽다. 리액트 연습을 더 해서 과제테스트도 시간에 쫒기지 않게 해야겠다.