React Slick 을 공부하면서 써보았었다. 당시 때 는 잘 작동하여, 그냥 저냥 API 보고 만들면 되겠거니 했지만, 오늘 요상스럽게 작동하기 시작한것이 마음에 걸려 정리하고자 글을 쓴다
React Slick
은 매우 잘 정의되어 있는 Carousel
이다.
하지만 작동시, 무언가 석연치 않은 구석이 자꾸만 보인다.
일단, 내가 오늘 적용했을때, 갑작스럽게 Carousel
이 사라졌다는 것이다.
이를 해결하기 위해 Carousel
에 width
고정값을 주었더니 잘 작동하는 듯 했다.
하지만 무언가 석연치 않았다.
그래서 이것저것 시도해보고 확인해 보니 Flex
가 문제라는 점을 알게 되었다.
내가 작성했던 code
에 Wrapper
를 주었는데, 이 Wrapper
가 Slick
을 감싸는 flex div
이다.
이러한 flex div
를 사용하여, 감싸주니 갑작스럽게 사라지는 굉장한 경험을 하게 되었다.
그래서 stack overflow
를 찾아보았지만, 검색능력의 한계를 느껴, git
에 올라가 있는 issue
가 있는지 확인해 보았다.
역시나, 내가 겪은 일은 다른 누군가도 같이 겪었구나 싶은 글이 있었다.
깃허브 Issue "Can't seem to wrap carousel in flex box" 이곳을 보면
flexbox
를 사용할수 없다는issue
를 눌려놓은 글이 나온다.
여기서 제시하는 방법으로 다음과 같은 방법을 사용하라고 한다.
{ min-height: 0px; min-width: 0px; }
이러한 방법을 꼭 사용해야 하나 싶은 마음이 들어서, 써 보았는데 실패했다.
내 머릿속 생각으로는, image
를 사용하더라도, Slide
의 width
값이 100%
를 주면 유동적으로 image
가 커지거나 작아지지 않을까 싶어, 100%
를 주었는데, 이것이 문제 인가 싶었다.
그래서 width
값을 주었더니 제대로 작동한다.
지금, 현재 뭐가 정확한 문제인지 알지 못하고 있다.
다시 flex wrapper
를 주었는데, 제대로 작동한다..
현재로써는 width
값을 주지 않아서 생긴 상황으로 생각이 든다.
이 Issue
에 관해서는 조금더 명확히 알기 위해 이것저것 시도를 해보고 추후 기록을 남기고자 여기에 더 적도록 하겠다.
GraphQL
문서를 보려했는데, 공쳤다 ㅠㅠ