1. 캐러셀
캐러셀 라이브러리, 어떤걸 써야할까?
번거로운 과정 없이 슬라이드를 구현하고 싶었기 때문에 메인 캐러셀은 Material UI Carousel을 선택했고, 결과는 빨랐습니다. 이 과정에서 어려웠던 점은 세개의 화면에서 각기 다른 크기의 gif를 위치시키는 것이였습니다. 그때 저희는 tailwindcss를 사용했기 때문에 className에 각각 다른 위치를 설정해 해결할 수 있었습니다.
두번째로 신상품 캐러셀에선 react-slick을 사용했는데요. 우리 팀이 원하는 스타일로 커스텀하기 위한 선택이였습니다. 구현하면서 어려웠던 점은 기본 캐러셀 세팅에을 했는데 제 화면에선 버튼이 나타나지 않는다는 것이였습니다. 이 부분에서 많이 헤맸는데 스택오버플로우에서 답이 나왔습니다. 버튼이 흰색깔이라 안보이는거라는 다소 황당한 이유로 해결하게 됐습니다. 나중에 여러분들은 헤매지 마시고 흰색 버튼 잘 찾으시길 바랄게요 ^^. 커스텀을 잘하기 위해 팁이 있다면 최대한 다른 사람들의 캐러셀 코드 예시를 계속 읽는게 방법인 것 같습니다. !
2. css측면
styled component를 쓰면서 특정 부분에 css를 주기 위해서 컴포넌트를 만드는 것이 부담스러워질 때 쯤 팀원의 권유로 tailwindcss를 접하게 되었습니다.
빠르게 css를 적용할 수 있다는 장점이 무색하게 느껴질 정도로 tailwind css가 익숙해지기 까지 꽤 오랜 시간이 걸렸습니다. 그러나 그 러닝 커브를 이겨내면 빠르게 css를 적용할 수 있고, 일관된 디자인 시스템, 클래스 작명을 고민하지 않아도 되는 것등의 이점을 누릴 수 있습니다. 하지만 프로젝트 과정에서 tailwindcss의 한계인 제한적인 css는 styled component도 함께 쓸 수 밖에 없도록 했습니다.
여러개의 css 방식을 사용 해도 되는가에 대한 걱정은 멘토님의 'yes' 로 정리할 수 있었습니다.
프로젝트가 끝난 이 시점 tailwind 없이는 css가 부담스러운 개발자가 되었습니다.
