3주차 기업과제 블로깅

평소에 쓰던 기능들의 중요성

이번 프로젝트를 통해 평소에 무심코 쓰던 클릭, Ctrl, Shift를 손 쉽게 구현할 수 있는게 아니었구나를 몸소 체험했습니다.

event.ctrlKey || event.metaKey
event.shiftKey

onClick을 통해 MouseEvent를 받고 MouseEvent 중 조건문을 통해 crtlKey, metaKey, shiftKey를 판별하여 클릭된 요소를 배열에 넣어 다중 선택이 되도록 구현하였습니다.

어려웠던 점

Styled-components에 props 전달하기

<Component
    id={el.id}
    selectedId={selectedId}
>
</Component>

interface CssProps {
  id: number
  selectedId: number[]
}

/*styled-components 부분*/
const Component = styled.div<CssProps>`
...
${({ selectedId, id }) => {
      /*ctrl + click*/
      return selectedId.includes(id) ? 'transform: scaleY(1)' : ''
    }};
...
`

예시: Color 값만 전달, 단일 값만 전달
배열도 props로 전달 될 수 있다.

의문점 & 보완해야하는 부분

• styled-components

  	"@types/styled-components": "^5.1.24"

vscode가 현저히 느려진다

• if else 문을 통한 조건문이 아닌 다른 방법으로 경우의 수 로직을 짜는 방법이 있을까