별점 플러그인 & 쿠키• 로컬 스토리지

 

 

 

 

⭐ 별점 플러그인

별점 플러그인은 웹사이트나 앱에서 사용자들이 상품, 영화, 게시글, 서비스 등에 대해

1~5점(혹은 1~10점) 범위의 평가 점수를 별 모양 아이콘을 클릭하여 남길 수 있게 해주는 UI(User Interface) 컴포넌트

사용자가 클릭하면 별이 채워지는 시각적 효과가 나타나고,

점수 데이터는 서버로 보내져 평균 평점이나 리뷰 통계로 활용됩니다

 

 

 

⭐ 주요 기능

1. 평점 입력

클릭, 호버(마우스를 올렸을 때), 터치 등으로 별점을 설정

 

2. 평균 평점 표시

여러 사용자의 점수를 합산해 평균을 표 시

반별점(1/2별)도 가능

 

3. 동적 업데이트

AJAX를 통해 페이지 새로고침 없이 실시간 반영

 

4. 스타일 커스터마이징

별 모양, 색상, 크기, 애니메이션 등 변경 가능

 

5. 리뷰 연동

텍스트 리뷰와 함께 점수 저장 가능

 

 

 

 

 

⭐ 사용 예시

쇼핑몰 : 상품 평가

영화/책 사이트 : 리뷰 점수

블로그/게시판 : 글의 만족도 평가

 

 

 

 

⭐ 구현 방법

① 순수 HTML/CSS/JS

<div class="star-rating">
  <span data-value="5">&#9733;</span>
  <span data-value="4">&#9733;</span>
  <span data-value="3">&#9733;</span>
  <span data-value="2">&#9733;</span>
  <span data-value="1">&#9733;</span>
</div>

JS로 클릭 이벤트 감지 ➡ 서버로 점수 전송 ➡ 별 채우기

 

 

② jQuery 플러그인
예: jQuery Raty, RateYo
설치 후 몇 줄 코드만으로 구현 가능

③ React/Angular/Vue 플러그인
컴포넌트 형태로 제공
상태관리와 연동하여 실시간 UI 반영 가능

 

 

 

 

⭐ 장점

UX 향상 : 직관적이고 시각적으로 점수 표시

데이터 수집 : 사용자 선호도, 인기 상품 분석

쉬운 커스터마이징 : 디자인과 기능 모두 조절 가능

 

 

 

---

 

 

 

쿠키• 로컬 스토리지

 

⭐ 쿠키

웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일

주로 세션 관리, 로그인 유지, 사용자 설정 저장에 사용

 

 

⭐ 특징

특징	설명
저장 위치	브라우저 (클라이언트), 서버가 읽고 쓸 수도 있음
용량	보통 4KB 이하 (작음)
만료	설정된 유효기간에 따라 자동 삭제 가능
서버 전송	HTTP 요청 시마다 자동으로 서버에 전송됨
접근	JavaScript로 접근 가능 (document.cookie)

 

 

 

⭐ 사용 예시

로그인 상태 유지

장바구니 정보 임시 저장

사용자 테마, 언어 설정

 

 

 

⭐ 단점

용량이 작아서 많은 데이터를 저장할 수 없음

보안상 민감한 정보 저장 불가 (암호화 필요)

서버 요청 시마다 전송되어 트래픽 발생 가능

 

 

 

/

 

 

 

⭐ 로컬 스토리지

브라우저가 제공하는 HTML5 웹 저장소

키-값 (key-value) 형태로 웹 애플리케이션 데이터를 영구 저장 가능

 

 

 

⭐ 특징

특징	설명
저장 위치	브라우저 (클라이언트)
용량	보통 5~10MB (쿠키보다 큼)
만료	명시적으로 삭제하지 않으면 영구 저장
서버 전송	HTTP 요청 시 전송되지 않음 (클라이언트 전용)
접근	JavaScript로 접근 가능 (localStorage.setItem, getItem)

 

 

 

 

⭐ 예시

사용자 인터페이스 상태 저장 (탭, 폰트 크기 등)

장바구니 정보 저장 (서버 전송 없이)

게임 데이터, 설정 캐시 등

 

 

⭐ 단점

쿠키와 달리 서버에서 자동으로 접근 불가

동일 브라우저, 동일 도메인에서만 접근 가능

보안 민감 정보 저장 불가

 

 

---

 

로그인 정보처럼 서버와 연동해야 하면 ➡ 쿠키

페이지 상태, 장바구니 등 클라이언트 전용 데이터 ➡ 로컬 스토리지