[취업준비일지] - 84 - 원티드 인턴십 10일차

일단 해야하는 일은
드롭다운, 더미데이터, 글자 입력시 출력 확인, 방향키 이동, 클릭 시 반응
5가지 정도로 좁혀지고 이 다음에 진행할 내용은

추가적 조건인 하단의 5가지는 api 및 캐싱 이슈 생성 후
브랜치를 따로 생성해 작업할 예정이다.
1.사용자가 입력한 텍스트와 일치하는 부분 볼드처리
2.검색어가 없을 시 “검색어 없음” 표출
3.API 호출 최적화
4.입력마다 API 호출하지 않도록 API 호출 횟수를 줄이는 전략 수립 및 실행
5.API를 호출할 때 마다 console.info("calling api") 출력을 통해 
  콘솔창에서 API 호출 횟수 확인이 가능하도록 설정

타입을 아직 사용하지도 않았지만 ESLint와 prettier가 자꾸 문제를 만들어서
생각보다 시간이 더 걸렸다.
대부분 간단한 실수거나 굳이 이걸 이렇게 해야 하나 싶은 내용이지만
정해진 컨벤션대로 진행하는 것이 가독성도 좋기 때문에 그대로 진행했다.

첫 레이아웃은 css없이 진행한다고는 했지만
폴더구조에 따라 분할하며 작업하다보니 조금 다듬을 수 밖에 없었는데
이번 구조는 조금은 클론해야 하기 때문에 focus 등 새로운 의사클래스들을 찾았다.

hover정도는 기본 상식이지만 active나 focus 그리고 focus-within까지
점점 그냥 찾기는 귀찮지만 쓸모있는 css 지식을 습득했다.

오후 1시에 회의를 진행한 다음 
전반적으로 캐싱에 대한 의문을 가지고 있거나 
화살표 이동에 대한 문제를 가진 상태였다.

onChange로 받은 이벤트에 타입을 지정해야 했다.
onChange는 아래와 같이 출력되는 모습을 볼 수 있는데

React.ChangeEventHandler<HTMLInputElement> | undefined
onChange는 Handler고 event는 handler를 제외한 앞부분을 넣어주니 해결되었다.
const changeSearchText = (e:React.ChangeEvent<HTMLInputElement>) =>{
    setSearchText(e.target.value)
  }

props 또한 아래처럼 객체에 담긴 상태로 type을 설정할 수 있었는데
DropDown({ searchResult }: { searchResult: string[] })
문제는 setState 부분을 넘기는 것이었다.

이것은 검색 결과 Dispatch, SetStateAction를 react에서 import하고
아래와 같이 타입을 미리 선언한 다음 제네릭 부분에 타입을 추가하는 방식이었다.

type Dispatcher<S> = Dispatch<SetStateAction<S>> 
SerchingInput({setSearchResult}:{setSearchResult:Dispatcher<string>})

 

 

전반적인 내용은 결정되었기 때문에
디바운서를 걸고 입력 텍스트에 따라 axios 요청을 시도한 다음
1.검색 길이가 0인 경우 공백출력
2.검색 길이가 0이 아니고 setSearchResult가 없는경우 검색 결과가 없습니다 출력
3.setSearchResult가 있으면 해당 길이만큼 map으로 출력될 것
또한 3번의 경우 추천 검색어를 표기해야하며
사용자가 입력한 텍스트와 일치하는 부분 볼드처리를 해야한다.


일단 axios를 통해 결과값을 받아오고 데이터를 가공해 7개까지만 넘기게 하고
해당 값을 출력하게 만들었다.

이제 화살표 방향에 따라 넘어가는 것을 먼저 구현하려고 하는데
onkeyDown의 타입이 말썽이었다.
찾아보니 결국 해결책은 아까와 같았는데
저번에 했던 것 처럼 타입을 onKeyDown에서 복사했지만
해당 타입의 Handler부분이 문제였던 것이다.
Handler를 지우고 (e: React.KeyboardEvent<HTMLInputElement>)로 처리하니
정상적으로 잘 작동하는 것을 볼 수 있었다.

화살표 방향 입력에 따라 arrowNow state를 관리했고
총 7개의 데이터를 넣어줄 것이기 때문에 0~7까지의 index로 결정했다.
0번째는 외부(입력창 포커싱 느낌), 1~7은 7개의 데이터 강조표시 목적이다.

className으로 변경에 따른 강조를 주고 싶었지만
styled-components를 사용하는 의미가 퇴색된다는 생각이 들었기 때문에
props로 상태와 index를 넘겨준 다음 type을 지정하고
아래와 같은 방식으로 현재 선택된 데이터임을 표기했다.

const List = styled.div<Props>`
  ${({ index, arrowNow }) =>
    index === arrowNow - 1 &&
    css`
      background-color: lightgray;
    `}
`;

데이터의 길이가 7개가 아닐 경우 state가 7까지 넘어가버리면
2번째 데이터에서 화살표를 여러번 내려 7에서 막힐 경우
5번을 더 올라와야 다시 하이라이트가 될 수 있기 때문에
arrowNow의 Max를 searchResult.length까지로 제한했다.

이전에 arrowNow의 Max를 7로 고정했었지만
searchResult.length자체가 최대 7로 처리했기 때문에
7을 넣던 자리에 searchResultLength를 넣어 해결했다.
setArrowNow(Math.max(0, Math.min(searchResultLength, arrowNow + arrowHaveToDo[e.key])));

또한 화살표는 state로 관리되기 때문에
다른 검색어로 변경되더라도 state가 남을 수 있어
글자를 새로 입력할 경우 arrowNow 상태값을 초기화했고
포커싱이 벗어나는 경우에도 초기화가 필요하기 때문에
onBlur로 포커싱 아웃이 감지되는 순간 arrowNow를 초기화했다.





1.스트레티지 패턴(Strategy Pattern)은 로직을 묶어 관리하는 패턴으로
행동을 클래스로 선언하고 인터페이스와 연결하는 방식으로 구성한다.

이러한 관리를 통해 로직을 독립적으로 관리할 수 있고
알고리즘의 특정 데이터에 집중하고 확장하기 쉽지만
그룹으로 묶어 사용하기 때문에 불필요한 데이터까지 넘어올 수 있다.





(1).백준 1373 2진수 8진수는 2진수를 8진수로 바꾸는 문제였다.
뭐야 쉬운 문제가 정답률이 왜 이렇게 낮지? 하며 풀었는데 오답이었다.
주어지는 수는 1,000,000을 넘지 않는다라는 지문을 자세히 보니
주어지는 수의 "길이"는 1,000,000은 넘지 않는다였다.
무려 (10^1,000,000 -1)까지 갈 수 있는 어마어마어마어마한 숫자였다.
BigInt도 toString으로 진수 변환이 가능한지 체크하니
다행히도 111n은 7로 변환이 잘 되는 모습을 보고
이진수를 BigInt로 바꾸고 다시 진수변환을 하기로 했는데
의외로 BigInt를 진수로 바꾸는 내용은 제대로 언급되지 않았다.

mdn에서 Hex, Octal, Bin의 예시가 있어 다행히 "0b"+input으로 넘어갔지만
타 진수 변환에 대해서는 언급되지 않아 아쉬움이 있다.

let input = `11001100`
console.log(BigInt("0b"+input).toString(8))