# React-slick

React Slick) Warning: `Infinity` is an invalid value for the `width` css style property.
'react-slick' 라이브러리를 사용하면서 다음과 같은 경고 메세지를 만났습니다.해석해보면 react-slick 컴포넌트가 Infinity라는 유효하지 않은 값을 width CSS 스타일 속성에 적용하여 발생한다고 합니다.처음에는 css 속성 중에 값이 잘못들어가

react-slick breakpoint, customPaging 설정하기
프론트엔드 개발을 하다보면 캐러쉘이라고도 불리는 slider를 구현할 일이 정말정말 많은데 이 때 우리를 정말 편리하게 해주는 갓갓갓라이브러리가 있다. 바로 ✨slick✨이다. https://www.npmjs.com/package/react-slick WOW…! 어

[코드캠프]13일차_TIL_React Slick 사용
레이아웃 구조잡기레이아웃 HIDDEN 영역 설정하기슬로벌 스타일 적용하기폰트레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미합니다.app.tsx 작동원
React-Slick 뭐가 문제야!!
React Slick 을 공부하면서 써보았었다. 당시 때 는 잘 작동하여, 그냥 저냥 API 보고 만들면 되겠거니 했지만, 오늘 요상스럽게 작동하기 시작한것이 마음에 걸려 정리하고자 글을 쓴다React Slick 은 매우 잘 정의되어 있는 Carousel 이다.하지만

캐러셀 이미지 (React-slick)
오늘은 라이브러리의 캐러셀을 불러오는 방법을 적어보겠다.캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다.위의 캐러셀을 다운 받는 법은 간단하다.👉🏻캐러셀 다운로드 링크👈🏻링크를 타고 들어가면 npm을 사용하면npm ins

react-slick으로 slick 구현하기 - feat.useRef 잘쓰기
react-slick을 이용해서 한페이지에 여러개의 carousel(slick) 구현하는 과정을 기록한 글입니다. 다소 부족한 점이 있으나 공부의 목적으로 작성하는 글이니 여러 배움을 주시는 피드백을 환영합니다!
react-slick에 styled-component를 사용해보자..
styled-component를 사용해 react-slick의 스타일을 수정하려면, styled()에 import로 불러온 Slider를 넣어주면 된다.
React Slick(레이아웃에 캐러셀 배너 적용)
우선 react-slick을 다운받아줍니다.(yarn 사용함) 그리고 타입스크립는 타입스크립트용 슬릭을 하나 더 깔아줍니다. 저는 src/components/commons/layout/banner/banner.slick.tsx 에 슬릭 SimpleSlider 를 복
react-slick arrow custom
이전에도 react-slick arrow custom을 했지만, 같은 방법으로 했는데 (여기에 기본 설치와 커스텀 방법이 있음) 한쪽(왼쪽) arrow가 이미지의 맨 아래로 들어가서 zIndex가 적용되지 않는 상황이 발생했다. 왜지?? 그래서 찾아헤멘 두번째 방법! react-slick arrow custom settings에 있는 arrow를 fa...

React-slick 버그가 있다(..?)
프로젝트에 React-slick 라이브러리와 input 태그의 multiple 속성을 사용하여 이미지 CRU (Create, Read, Update) 구현하였다.구현하는 도중 버그아닌 버그(?)를 발견하였다!먼저 아래는 React-slick에서 제공하는 slider의

React-Slick으로 슬라이드 구현하기
이번 2차 프로젝트에서는 라이브러리를 자유로이 쓸 수 있었다(!)레이아웃 과정에서 구현해보고 싶었던 기능이 이미지 슬라이드 부분이었다. 1차 프로젝트 때는 라이브러리를 사용하지 않고 transformX 와 transition을 활용했는데, 이번에는 Styled Comp

React-nodebird -05
현재 내가 만들고 있는 트위터 비슷한 이 노드버드 프로젝트에는 사람들이 게시글을 올릴 수 있고, 그 게시글에는 기본 글 외에도 이미지,해쉬태그 등을 올릴 수 있을 것이다.이미지 작업을 해보자.우선 post reducer의 맨 처음 게시글에는 3종류의 이미지를 넣어주었다

14)<페이지네이션>살려주세요 게시물 목록 페이지가 -100페이지까지 가요 Pagination ! 실무형 코드중심 코드캠프! Code-camp FE 6기
포트폴리오 리뷰 오와 원두멘토님은 되게 ㅇ예쁘게 해오셨다 ! 근데 잼라이브.. 넘 고인물 아닌가 ? 푸합.......약간 큐플레이 느낌...헤헹 하지만 존경합니다 멘토님 이 폴더 구조 잊지 말고 component가 레이아웃에 prop.children으로 들어가는거

11) 인기짱 라이브러리들을 쓰자! ant-design! 이벤트 버블링! 근데 이번주 월화수목금은 25시간 잘수있을까 (?) (code-camp fe 6기)
goodmorning self study이제 알고리즘이 어렵다 나에게 너무...풀었던 문제도 다시 푸는 습관을 들여야한다.. 이문제는 풀이보고 겨우 이해한 문제이고..! 이문제는 풀이를 찾아보고도 이해못한 문제 ^^>...눈물나네 아침부터 굿모닝 아니네.... 이따 알
React-slick으로 슬라이드 만들기
일단, npm 혹은 yarn으로 react-slick과 slick-carousel을 설치합니다.혹은(타입스크립트 사용시 @types/react-slick 추가 설치)가장 먼저, 슬라이드 설정을 해줘야 합니다.dot: 슬라이드 밑에 점으로 나타내는 것을 보여주냐 여부 설

[React] react-slick 라이브러리 styled-components로 커스터마이징 하기
react-slick 라이브러리는 React Carousel을 사용하기 쉽게 라이브러리화 시킨것을 의미합니다.실제로 react만을 이용해 carousel을 만들경우, 하단에 무한 carousel 이나 하단에 dot 등 고려해야 할 것이 많기 때문에 사용법만 안다면 훨씬