이번 실전 프로젝트에서 슬라이드 뷰를 제작하게 되었고 우리 팀은 캐로쉘 라이브러리를 사용하기로 했다. 그런데 생각치 못했던 난관에 부딪히고 말았다...
- 문제가 생긴 & 수정하기 전 화면
가운데로 와야할 이미지가 보이는 것처럼 왼쪽으로 자꾸 치우쳐서 문제였다. 내가 직접 구현한 코드면 text-align, justify-contents, align-items, margin 등을 주면서 위치를 수정할 수 있었겠지만 특정 라이브러리 내에서 CSS를 바꾸는건 너무 어려웠다. 크롬에서 개발자 도구를 틀어보니
element.style{} 부분에 기본으로 설정된 값이 보였다.
저 width: 100% 를 없애니 이미지가 가운데로 오는게 보였다. 그치만 내 코드에서는 element.style{} 에 해당하는 요소가 눈 씻고 찾아봐도 없었고 심지어 node_modules 안에 slick-carousel 파일에서도 해당되는 코드는 없었다^^.. 지쳐가는 도중 결국 다른 크루원 분에게 이 상황을 말씀 드렸더니 해결방안을 같이 찾아주셨다.
- 수정 후 화면
↓ 적용한 코드
useEffect(() => {
const list = document.querySelector(".slick-list");
list.style.setProperty("width", "250px", "important");
console.log(list);
});슬라이드 코드에 useEffect 함수를 사용해 width값을 임의로 변경해줬다!
개발자 도구에서 width:100% 를 지웠을 때 이미지가 가운데로 오는 걸 보고
'아 width값을 건드리면 될 것 같은데!' 라는 생각이 들었고 결국 원하는 그림이 나왔다.
그치만 뭔가 임시방편인 느낌이 들어 시간적 여유가 생긴다면 다른 방법이 있는지 찾아보고 다시 보완해 나갈려고 한다.
Fontend Engineer