[프로젝트] 홈페이지 캐러셀 슬라이더 및 주간 랭킹 구현

여러 도서사이트를 보면 헤더 아래 슬라이더를 구현해 요즘 일어나는 일에 대해서 소개한다. 살펴보니 db에서 가져오는 정보도 있지만 배경을 입히고 그림을 넣어 화려함을 줄 때는 대부분 이미지였다. 팀에서 화면 정의서를 만들 때 슬라이더 아래 주간 랭킹을 두었기 때문에 비슷한 형식을 슬라이더에도 지정하면 메인 홈페이지가 너무 밋밋해질 것이라 우려했다. 그래서 이번 기회에 figma로 이미지 슬라이드를 개별 작업하여 진행했다. 

 

화면 정의서에서는 신간 도서만 다루었지만 이벤트, 회원 혜택, 신간 도서, 추천 카테고리 등 새로운 소식들을 추가했다. 

슬라이더는 처음부터  js를 당장 배우고 시작할 수 없어서 기존에 구현되어 있는 slider를 변형하고 이해하는 쪽을 택했다. 중간중간 명확하게 이해해야 할 부분은 아래처럼 적어서 표현해 보거나, 직접 간단한 코드를 쳐 보면서 진행했다.  

 

이번에 사용한 부분

- addEventListener('이벤트 타입', 호출 함수);

- innerHTML로 태그 안의 데이터 값을 설정한다.

- event.preventDefault(): a 태그를 클릭했을 때 href로 이동되는 것을 막는다, 새로고침하지 않는다.

- setInterval(): 주기적으로 어떤 행동을 반복 실행한다.

 

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_addeventlistener2

W3Schools online HTML editor

 

- mysql date

 

최근 oracle db로 날짜 관련 함수들을 배웠더니 mysql과 다른 문법에 살짝 어질했다;

cf. https://dadev.tistory.com/entry/MYSQL-날짜-연산-함수-DATEDIFF, https://extbrain.tistory.com/58

# 두 날짜의 차이 일수를 계산
SELECT DATEDIFF(CURDATE(), end_date) < 7
FROM orders;

# 시간이나 날짜 더하기 (SECOND, MINUTE, HOUR, DAY, MONTH, YEAR)
SELECT DATE_ADD(CURDATE(), INTERVAL 1 DAY) 
FROM dual;

SELECT DATE_ADD(CURDATE(), INTERVAL 1 HOUR) 
FROM dual;

# 시간이나 날짜 빼기 (SECOND, MINUTE, HOUR, DAY, MONTH, YEAR)
SELECT DATE_SUB(CURDATE(), INTERVAL 1 DAY)
FROM dual;

# 원하는 형식으로 지정
SELECT DATE_FORMAT(SYSDATE(), '%Y-%m-%d')
FROM dual;

SYSDATE()는 연월일 시분초, CURDATE() 연월일

row_number()를 사용하는데 정렬 기준을 설정하지 않으면 rownum이 기본 정렬기준이 된다.

rank() vs dense_rank() vs row_number()

// 틀린 문법
SELECT original_price, 
	   ROW_NUMBER() OVER (ORDER BY original_price ASC) AS rownum
FROM book 
WHERE ROW_NUMBER() OVER (ORDER BY original_price ASC) <= 10; ### 윈도우 함수는 where 절에 쓸 수 없음


// 올바른 문법
SELECT * 
FROM (
	SELECT original_price, 
		   ROW_NUMBER() OVER (ORDER BY original_price ASC) AS rownum
	FROM book) ranks
WHERE ranks.rownum <= 10;

 

- rank(): 동점이 있을 경우 순위를 건너뜀

- dense_rank(): 동점이 있을 경우 순위를 건너뛰지 않고 연속적인 순위 부여

- row_number(): 연속적인 행 번호, 결과 집합의 순서를 차례로 부여

- mapper에서 부등호를 못 쓴다. 특히 '<'는 태그의 시작으로 이해하기 때문에 &lt; &gt;으로 대신 표현한다.