오늘의 목표
- 만든 슬라이드 팀프로젝트에 구현하기 (O)
오늘 어려운점
팀 프로젝트 를 풀로 가져와서 내껄 합치는 와중에 데이터를 받는 곳 부터 받아 오지 못하였는데
이것을 함수를 하나 만들어서 같은장르를 하는 팀원이 비교해놓은 result값을
따로 result2를 배열로 만들어서 .push를 하고 함수가 호출할때 그 result2값을 호출하게 했다.
또한 혼자 예시본 슬라이드를 만들때는 갯수가 20개 지정된 이미지가 들어오게 해서 css에 한 슬라이드에 넓이를 400%를 지정해서 5개가 딱 맞게 들어올수있었지만
팀프로젝트의 목적은 세부페이지에 있는 영화와 비교를해서 추천 장르만 들고 들어오는거여서
슬라이드에 들어오는 개수가 정해져 있지 않았다. 그래서 칸칸마다 삐죽삐죽 티어나오고 맞지 않았는데 이것을 해결하기위해 팀원분에도움을 받아
``
const slides = document.querySelector('.items');
5개가 넘어가는 것은 아래 방식으로 해서 나타내었고
slides.style.width = 20 * slideCount + "%";
5개가 미만은 것은 minWidth를 지정해서 하나에 100프로가 나오게했다.
slides.style.minWidth = "100%"
``
이렇게 하여서 슬라이드에 카드가 뿌려지는 것은 완성을 하였고.
또한 구현중에 아래 문법을 알면 구현할수있는 문제들도 있었다.
- offsetWidth : 일반적으로 테두리 offsetWidth,패딩 및 세로 스크롤 막대(렌더링된 경우)를 포함하여 요소의 CSS 너비를 픽셀 단위로 측정한 값입니다.
- translateX : 이것을 알아서 슬라이드에 한칸씩넘어가는 너비를 구하는 공식
let posX = clickCount * sW / slideCount;
slides.style.transform =translateX(-${posX}px);
이렇게 한칸식 넘어가는 너비를 구해서 슬라이드를 넘어가는 것을 구현했다.
느낀점
-
팀프로젝트의 만들어진걸 풀로 땡겨와서 내가 작업한걸 합치는 과정이었는데.
여기서도 굉장한 어려움이 있었다. 모든게 처음이라 그렇겠지만
같은 파트를 하는 팀원 분 에 덧붙혀서 해야됬었는데 하는 도중 느낀거지만. 같은파트를 하는사람끼린 이름명칭 규칙을 정해서 하는 것도 좋은방법이겠다고 생각을 했다. -
완성본
##슬라이드가 6개이상일때 버튼생성##
##슬라이드가 5개이하일때 버튼숨기기##
이렇게 나오도록 구현을 했는데. 처음 프로젝트를 할때 보다 무언가를 만들었다 라는 느낌은 확실히 좋았고 내가 코드를 써내려가서 만든부분이 있을수도 있네 라고 생각을한 한편 하지만 내 혼자 힘으로 만들진 않았고 팀원분들과 튜텨님들에게 여쩌보고 알려주신걸 더해서 만든 부분도 있어서
확실히 처음 만든 부분이 나오면 내가 생각하는 힘도 길러야 되고 또한 로직을 아직 읽는데 많이 서툰거 같은데 그런부분을 더 기르도록 해야 될거 같다고 생각했습니다.
