[프리온보딩] 220526 그룹과제 #3 종료 + 그룹과제 #4

그룹과제 #3 종료

공식적인 내생각

과제가 생각보다 예외라던가 생각할부분이 많아서 조금 어려웠지만 재미있었다

무엇보다 피그마도 주고… 코멘트도 잘 달아준 편이었고… 😇 (피그마의 소중함을 절실히 느끼는중)

다음 과제는 빠르게 구현하고 넘어가고 개인과제에 시간을 많이 쏟기로 했다

작업한 내용

배열 내에서 조건에 맞는 원소 하나라도 있는지 체크하기

const arr = [{id: 1, name: 'john'}, {id: 2, name: 'dave'}];
arr.some(v => v.name === 'john')) // true
arr.some(v => v.name === 'jade')) // false

filter 메서드를 사용하고 길이를 체크하는 방법도 있지만 길어진다

그리고 some 메서드는 조건에 부합하는 케이스가 하나라도 나오면 true를 반환하고 탐색을 중단하므로 더 빠르다고 한다

컴포넌트 위에 그래디언트 주기

.tableGradient {
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    content: '';
    background: linear-gradient(to right, rgba(colors.$WHITE, 0%), rgba(colors.$WHITE, 100%));
  }
}

after 선택자를 이용하여 컴포넌트 위에 씌워주었다

(사실 형제 태그로 구현해도 상관없을 것 같긴 한데 둘 다 position을 absolute로 설정해야 하고 이래저래 번거로울 듯 하다)

1. 그래디언트를 입히고자 하는 태그에 position: relative를 적용한다
   • 그래디언트를 position: absolute 속성으로 특정 위치에 고정시킬 것이기 때문
2. after 선택자에 position: absolute를 적용하고, 그래디언트를 먹이고 싶은 위치의 끝에 부착한다
   • 이번 구현에서는 그래디언트가 오른쪽 → 왼쪽 방향으로 흐려지며 오른쪽 끝에 적용할 것이기 때문에 top, right 속성을 0으로 적용해주었다
   • 왼쪽 끝에 적용할 거라면 top, left 속성을 0으로 적용하는 식
3. 그래디언트의 길이만큼 width를 적용하고, height는 그래디언트를 적용하고자 하는 컴포넌트와 맞춰준다
   • 그래디언트가 위 → 아래 또는 아래 → 위 방향으로 퍼진다면 height를 그래디언트 길이만큼 적용하고 width를 그래디언트를 적용하고자 하는 컴포넌트와 맞춰주면 된다
   • 길이를 100%로 맞추고 linear-gradient 속성의 퍼센티지를 조절하는 것보다 그냥 길이를 짧게 하는게 더 쉽다
4. 컨텐츠는 비운다
5. background로 linear-gradient를 적용한다
   • to right를 설정하면 왼쪽에서 오른쪽으로 퍼진다

단점이 있다면 그래디언트가 적용된 부분은 클릭이 안 먹힌다

이부분 수정할 수 있을텐데 일단은 상호작용이 필요없는 컴포넌트라 방치해두었다