캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...
티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다. 위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다 리액트에서 setInterval()함수 사용하는 법 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 됩니다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev..
7570번: 줄 세우기 입력은 2 개의 줄로 이루어져 있다. 첫 줄에는 어린이 수를 나타내는 정수가 주어진다. 둘째 줄에는 처음에 줄서있는 어린이들의 번호가 차례대로 주어진다. 주어진 번호들 사이에는 공백이 하 www.acmicpc.net 꼭 알아야 하는 개념인 LCS를 활용한 문제입니다. LCS는 2차원 DP로 푸는 경우가 많아서 이 문제를 처음 봤을 때 고민을 많이 했습니다. 복습 차원에서 글을 적습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const N = +input.shift() const dp = Array(N+1).fill(0) let max = 0; fo..
알고리즘 문제를 푸는데, LCS문제가 종종 나와서 이번에 한번 개념을 확실하게 잡고자 글을 적어봅니다. LCS (Longest Common Subsequence) 두 개의 문자 서열 X,Y가 주어졌을 때, X와 Y에서 공통으로 나타나는 부분 문자 서열을 찾는 알고리즘. 부분 서열의 길이가 최대가 되도록 하는 문자서열을 찾는다. 문제를 푸는 방법? 단순하게 풀기 브루트 포스(Brute-Force Approach) X의 모든 부분 서열에서 Y의 부분 서열인 것의 길이를 구한다음 최댓값을 구한다. X의 부분 서열의 개수는 지수 시간 복잡도를 가진다 따라서 이렇게 푸는 방법은 옳지않다. X = { x1, x2, x3 … x(m-1), x(m) } Y ={ y1, y2, y3 … y(n-1), y(n) } Z =..
8980번: 택배 입력의 첫 줄은 마을 수 N과 트럭의 용량 C가 빈칸을 사이에 두고 주어진다. N은 2이상 2,000이하 정수이고, C는 1이상 10,000이하 정수이다. 다음 줄에, 보내는 박스 정보의 개수 M이 주어진다. M은 1이 www.acmicpc.net 푸는데 상당히 오래 걸렸습니다. 5시간 정도 걸렸습니다.. 처음 문제를 풀었을 때 15점에서 멈춰서 어디서 잘못된 건지 한참을 찾았는데, 처음 풀이방법이 맞긴 맞아서 코드를 새로 짰습니다. 개인적으로 특히 그리디 문제를 풀 때 코드가 더러워 지는데, 그리디 연습을 많이 해야겠네요.. 풀이 방법 풀이 자체는 간단합니다. 데이터를 정렬합니다. 출발 마을을 기준으로 오름차순으로 정렬을 해줍니다. 출발 마을이 같을 경우 도착 마을이 빠른 순서대로 정..
1700번: 멀티탭 스케줄링 기숙사에서 살고 있는 준규는 한 개의 멀티탭을 이용하고 있다. 준규는 키보드, 헤어드라이기, 핸드폰 충전기, 디지털 카메라 충전기 등 여러 개의 전기용품을 사용하면서 어쩔 수 없이 각종 전 www.acmicpc.net 문제 푸는 방법을 잘 모르겠어서 시간이 오래 걸렸던 문제. 문제푸는 방법만 알면 간단하게 풀 수 있었다. 풀이 방법 우선 멀티탭에 전기용품을 꼽는다. 순서대로 전기용품을 shift()한다. 멀티탭에 꽂혀있는 물건이 아니라면, 물건을 하나 골라서 플러그를 빼야한다. 플러그 빼는 물건은 가장 늦게 쓰이거나, 나중에 쓰이지 않는 물건의 플러그를 빼야한다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin..