원티드 프리 온보딩 5일차 TIL

오늘의 회고

오늘은 인턴 카카오 코딩 테스트와 개인 과제로 대부분의 시간을 보냈습니다.

코딩 테스트

코딩 테스트는 칠 때 마다 느끼는 것이지만 매번 조금씩 아쉬운 부분이 존재하는 것 같습니다.
코딩 테스트 후기 및 복기는 나중에 코딩테스트 결과 및 해설이 나오면 그때 다시 다뤄 보도록 하겠습니다.

개인 과제

오늘은 개인과제로 input type="range"를 이용한 Slider와 Dropdown을 구현하였습니다.

• useClickAway
  Dropdown을 구현 하면서 Dropdown에 필히 포함되는 기술인 Dropdown 이외의 부분을 클릭 햇을때 Dropdown이 꺼지는 기능을 useClickAway을 이용해서 구현 하였습니다.
  • 원리에 대한 고민
    코드를 전부 이해 할 순 없지만 event.target이 ref.current.el에 포함 되는지 확인을 한 뒤 포함 되지 않을 경우 내가 지정한 함수를 실행 할 수 있도록 설계되어 있는 것 같다. 얼마전에 currentTarget과 target의 차이에 대해 포스팅 한 적이 있는데 여기서는 확실히 click한 element에 대한 정보를 받아와야 하기에 target프로퍼티를 사용하는 것이 적절하다고 할 수 있을 것 같습니다.
• abolute의 남발(?)
  Slider를 구현하면서 css module을 이용하다보니 input type="range"를 css 핸들링 할때 ::-webkit-slider-runnable-track을 활용하지 못하여서 따로 absolute한 div태그를 이용해서 따로 트랙을 만들어 주었습니다.
  뭔가 absolute를 많이 사용하게 되는데 아무래도 사용하기 쉬워서 그렇기도 하지만 뭔가 사용하면서 재사용성이 떨어지는 것 같아서 많이 사용해도 될까 라는 생각을 하게 되었습니다.

후기

오늘은 코딩테스트에서 많은 시간을 보내기도 했고 팀 과제를 다소 일찍 끝내게 되어서 개인 과제에 많은 시간을 보내게 되었습니다. 계속해서 이런 마음을 지속적으로 유지 할 수 있도록 노력하는 것이 중요하겠습니다.