React Slick

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 문서를 보려했는데, 공쳤다 ㅠㅠ