https://www.wanted.co.kr/events/pre_challenge_fe_24
원티드에서 진행하는 프리온보딩 챌린지에 참여하게 되었다.
간단히 말하면
신입들을 타겟으로 하여 자기소개서, 포트폴리오, 코딩테스트, 사전과제, 기술면접 등 각 단계에서 무엇을 준비하고 보여주어야 하는지를 알려주고 , 면접관 입장에서 지원자들의 아쉬웠던 점들을 이야기해주는 온라인 강의이다.
여기서 강의 시작 전 해야할 사전미션이 있었는데요
간단한 과제여서 어럽지 않게 금방 해결할 수 있었지만 그래도 처음해보는거라서 기록해보려한다 !
🔥 사전과제
https://github.com/CheolMinBae/pre-onboarding-mission
내가 구현한 화면은 요렇게 동작한다 !~!
우선 구현해야 할 주요 기능은
1️⃣ data의 type별로 묶어서 자동완성 리스트 맨앞에 표시
2️⃣ 검색되고 있는 글자와 일치하는 글자 굵기 조절
그외 UI구현, 클릭시 배경색 변경 등등이 있지만 생략하겠다.
1. data의 type별로 묶어서 자동완성 리스트 맨앞에 표시
일단 데이터는 이런식으로 나와있다.
데이터를 reduce메서드를 사용하여 Type별로 묶어줬다.
여기서 reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드이다
arr.reduce(callback[, initialValue])
쉽게 보면 이런 형태의 구조이다.
배열.reduce((누적값, 현재값) => {
return 새로운 누적값
}, 초기값)
그래서 새로만든 배열 groupedItems을 통해 type을 자동완성 리스트 맨 앞에 보여줬다.
2. 검색되고 있는 글자와 일치하는 글자 굵기 조절
사용자가 입력한 문자(keyword)가 자동완성 리스트에 있으면 해당 문자(keyword)를 기준으로 자동완성 리스트에 있는 문장(i.description)을 분할하여 문장의 keyword부분만 굵기를 다르게 해주었다.
또한
toLowerCase()와 정규표현식 i 옵션을 사용해서 대소문자 구분하지 않게 해주었다.
🍼 느낀점
간단하지만 여기저기 많이 쓰일만한 유용한 과제 였던거 같다. 그리고 출제하신 분께서 Debounce같은것도 사용하시는 분이 있는지 확인해보고 싶으셨다고 하셨다. 난 Debounce가 뭔지 처음들어봤다.. 그래서 다음글은 Debounce에 대해 가져오겠다..
