[Vue] 영화 검색 미니 프로젝트

vue 영화 검색 미니프로젝트를 만들며 배운 내용을 기록합니다.

Lodash를 이용한 중복제거

• _uniqBy 메서드 활용

-> 중복을 제거 해준다!

promise 객체

-> axios로 api 호출하는 부분만 따로 함수를 만들어 재사용하면 코드의 반복을 줄일 수 있음!

• async await 문에서의 예외처리는
  -> try catch문으로 진행해야함!

// :(콜론)을 넣는 것은 v-bind(데이터 바인딩)

CSS 속성

-> flex-wrap - display flex일 때, 요소들의 총 넓이가 부모 요소의 넓이보다 길 때 다음 줄에 이어서 나열해줌

-> white-space

- 공백문자를 처리해줌
White-space: no wrap; -> 줄바꿈X
overflow: hidden
Text-overflow: ellipsis; -> 말줄임 표시
위 세 가지의 조합이 넘어가는 텍스트 생략하는 CSS 스타일링 적용해줌

- 이미지 스타일링 할 때!
-> 크기가 제각각인 경우 Img 태그로 스타일링 하기 보다는 backgroundImage속성으로 스타일링 해주는 것이 더 좋음!

- SCSS 변수를 활용한 이미지 비욜 맞추기

.movie {
    $width: 200px;
    width: $width;
    height: $width * 3 / 2;
  }

-> height가 width의 1.5배 더 크도록 만들어줄 수 있음

- 투명도 스타일링
-> background-color: rgba(black .3)

- 블러 스타일링!
Backdrop-filter:(10px)

- ::after로 테두리 hover 스타일링

&:hover::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 6px solid $primary
    }