hanker

Redis - Spring Boot + Redis를 사용하여 실시간 검색어 순위 만들기 (1) 화면 구성 및 Script 처리 본문

DATABASE/Redis

Redis - Spring Boot + Redis를 사용하여 실시간 검색어 순위 만들기 (1) 화면 구성 및 Script 처리

hanker 2025. 4. 1. 01:25
반응형

이전 글에서 Redis를 Spring Boot에서 등록하고 가져오는 방법에 대해서 적었었는데, 

 

이번 글에서는 Redis를 이용하여 실시간 검색어 순위 프로세스를 만들어보자.

 

 

https://hanke-r.tistory.com/entry/Redis-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%8B%A4%ED%96%89-2-Spring-boot-%EC%8B%A4%ED%96%89%ED%8E%B8-%EA%B8%B0%EB%B3%B8

 

Redis - 설치 및 실행 (2) Spring boot 실행편 (기본)

설치 관련해서 이전글에 올려놨다.https://hanke-r.tistory.com/218 Redis 설치 및 실행이전 글에서는 Redis가 뭔지 왜 사용하는지에 대해서 적었었다.https://hanke-r.tistory.com/214 Redis 란..자세히 정리된 블로

hanke-r.tistory.com

 

실시간 검색어 순위 화면 만들기

 

1. 화면 만들기 (Controller Url 맵핑)

    @GetMapping("/view/rate")
    public String rateView() {
        return "layout/rate";
    }

 

 

 

2. html 생성 (template/layout/rate.html)

rate.html 경로

 

 

3. html 코드 (CSS 포함)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>실시간 검색어</title>
</head>

<style>
    @media (max-width: 1200px) {
        .trending-box {
            display: none;
        }
    }

    .trending-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .content-container {
        display: flex;
        min-height: calc(100vh - 220px); /* 상단 바 높이를 뺀 높이 */
        margin: 0 20px;
        gap: 25px;
    }

    /* 실시간 검색어 순위 스타일 */
    .trending-box {
        width: 300px;
        background-color: #fff;
        padding: 25px;
        box-shadow: -2px 0 5px rgba(0,0,0,0.05);
        border-radius: 10px;
    }

    .trending-box h2 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
        display: flex;
        align-items: center;
    }

    .trending-box h2 .refresh-icon {
        margin-left: auto;
        color: #007bff;
        font-size: 14px;
        cursor: pointer;
    }

    .trending-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .trending-item {
        display: flex;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .trending-item:hover {
        background-color: #f5f9ff;
    }

    .trending-item:last-child {
        border-bottom: none;
    }

    .trending-item .rank {
        font-weight: bold;
        color: #007bff;
        margin-right: 12px;
        min-width: 20px;
    }

    .trending-item .keyword {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .trending-item .change {
        margin-left: 10px;
        font-size: 12px;
    }

    .trending-item .up {
        color: #f25c54;
    }

    .trending-item .down {
        color: #0fa958;
    }

    .trending-item .new {
        color: #ff8c00;
        font-weight: bold;
    }

    .trending-footer {
        margin-top: 15px;
        text-align: right;
        font-size: 12px;
        color: #888;
    }


    @media (max-width: 768px) {
        .content-container {
            flex-direction: column;
        }

        .content-container {
            margin: 0 10px;
        }
    }

</style>
<body>
<div class="content-container">
<!-- 실시간 검색어 순위 영역 -->
<aside class="trending-box">
	<h2>
		실시간 검색어
		<span class="refresh-icon" onclick="refreshTrending()">
                &#x21bb;
            </span>
	</h2>
	<ul class="trending-list" id="trending-list">
		<li class="trending-item" onclick="searchTrending('AI 기술 동향')">
			<span class="rank">1</span>
			<span class="keyword">AI 기술 동향</span>
			<span class="change up">▲ 3</span>
		</li>
		<li class="trending-item" onclick="searchTrending('코딩 테스트')">
			<span class="rank">2</span>
			<span class="keyword">코딩 테스트</span>
			<span class="change down">▼ 1</span>
		</li>
		<li class="trending-item" onclick="searchTrending('리액트 튜토리얼')">
			<span class="rank">3</span>
			<span class="keyword">리액트 튜토리얼</span>
			<span class="change">-</span>
		</li>
		<li class="trending-item" onclick="searchTrending('자바스크립트 최적화')">
			<span class="rank">4</span>
			<span class="keyword">자바스크립트 최적화</span>
			<span class="change up">▲ 2</span>
		</li>
		<li class="trending-item" onclick="searchTrending('Docker 컨테이너')">
			<span class="rank">5</span>
			<span class="keyword">Docker 컨테이너</span>
			<span class="change down">▼ 2</span>
		</li>
		<li class="trending-item" onclick="searchTrending('클라우드 서비스')">
			<span class="rank">6</span>
			<span class="keyword">클라우드 서비스</span>
			<span class="change up">▲ 5</span>
		</li>
		<li class="trending-item" onclick="searchTrending('머신러닝 입문')">
			<span class="rank">7</span>
			<span class="keyword">머신러닝 입문</span>
			<span class="change new">NEW</span>
		</li>
		<li class="trending-item" onclick="searchTrending('웹 접근성')">
			<span class="rank">8</span>
			<span class="keyword">웹 접근성</span>
			<span class="change down">▼ 3</span>
		</li>
		<li class="trending-item" onclick="searchTrending('데이터 시각화')">
			<span class="rank">9</span>
			<span class="keyword">데이터 시각화</span>
			<span class="change new">NEW</span>
		</li>
		<li class="trending-item" onclick="searchTrending('API 설계 방법')">
			<span class="rank">10</span>
			<span class="keyword">API 설계 방법</span>
			<span class="change down">▼ 4</span>
		</li>
	</ul>
	<div class="trending-footer">
		업데이트: 2025-03-31 10:30
	</div>
</aside>
</div>
</body>
</html>

화면 UI

 

 

다음 글에서는 script 처리와 spring boot 에서 redis 데이터 처리 방법에 대해서 알아보자.

반응형
저작자표시

'DATABASE > Redis' 카테고리의 다른 글

Redis - Spring Boot + Redis를 사용하여 실시간 검색어 순위 만들기 (2) Spring Redis 검색어 저장  (0) 2025.04.04
Redis - 설치 및 실행 (2) Spring boot 실행편 (기본)  (0) 2024.10.01
Redis 설치 및 실행  (1) 2024.09.30
Redis 란..  (0) 2024.09.26
'DATABASE/Redis' Related Articles more