728x90
반응형
1. 박스슬라이더(bxslider)
- Install을 누르면 코드가 있다.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$(".slider").bxSlider();
});
</script>
</head>
<body>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
</body>
</html>- Examples에 가면 여러가지 기능을 사용해보고 필요한 기능을 찾아볼 수 있다.
- 자연스러운 슬라이더를 쉽게 구현할 수 있다.
2. 쿠키(Cookie)
- F12-응용프로그램(application)-저장소-쿠키-도메인-쿠기정보
- 팝업창 4개 7일간 열지 않기(value : no)
$(document).ready(function(){
//DOM이 완성되면 콜백실행
cookieCheck()//호출(사용)
createCookie()
closeBtn()
})
function cookieCheck(){
if( $.cookie('popup_java') === 'ok'){
//popup_java라는 이름의 쿠키의 값이 ok라면
//쿠키가 존재하면?
$("#popup").hide()
}
}
function createCookie(){//함수 선언,정의
$("#popup-chk").click(function(){
alert("체크박스 클릭!")
//쿠키 생성!
$.cookie('popup_java','ok',{
expires:7,
path:'/'
})
$("#popup").hide()
//이름이 popup_java 값이 ok이고
//현재경로에 7일뒤에 만료되는 쿠키를 생성하겠다.
})
}
function closeBtn(){
$("#close-btn").click(function(){
alert("창닫기 버튼 클릭!")
$("#popup").hide()
})
}
3. Ajax(에이젝스, 아약스)
AJAX (Asynchronous JavaScript and XML)는 웹 페이지나 어플리케이션에서 서버와 비동기적으로 데이터를 교환하고 갱신하기 위해 사용하는 기술입니다. "비동기적"이라는 말은 웹 페이지 전체를 새로고침하지 않고도 일부분만 업데이트할 수 있다는 의미입니다. 이로 인해 사용자 경험이 개선되며, 응답성이 높은 웹 인터페이스를 구현할 수 있습니다.
AJAX는 주로 다음과 같은 상황에서 사용됩니다:
- 폼 데이터 제출: 사용자가 웹 폼을 제출할 때 페이지를 새로고침하지 않고 서버에 데이터를 보내고 결과를 받을 수 있습니다. 예를 들어, 회원가입 폼이나 로그인 폼 처리에 자주 사용됩니다.
- 데이터 로딩: 웹 페이지의 특정 부분만을 업데이트할 필요가 있을 때, 전체 페이지를 새로고침하지 않고 필요한 데이터만 서버로부터 로드합니다. 예를 들어, 소셜 미디어 피드, 주식 시세 정보, 또는 검색 결과 업데이트 등이 있습니다.
- 실시간 통신: 채팅 애플리케이션 같은 실시간 기능 구현 시 AJAX를 사용하여 사용자 간의 메시지를 거의 실시간으로 교환할 수 있습니다.
- 웹 애플리케이션: 대부분의 현대 웹 애플리케이션(예: Google Maps, Gmail)은 사용자 인터페이스와 상호작용성을 향상시키기 위해 AJAX를 광범위하게 사용합니다.
<head>
~
<script src="./js/jquery.min.js"></script>
<script>
function myFunc(){
$.ajax({
method:'get',
url:'https://yts.mx/api/v2/list_movies.json',
dataType : 'json'
}).done(function(respense){
console.log(respense)
console.log(respense.data.movies)
})
}
</script>
</head>
<body>
<button onclick="myFunc()">클릭</button>
</body>
4. yts 사이트 api 활용
- 링크 : https://yts.mx/api
- api를 활용하여 json 파일을 불러온다.
- 검색어 자동완성, 아이디 중복 검사, 영화 정보 화면 구성, 순위표 구성 등 다양한 페이지를 만들 수 있다.
5. Pagingnation vs Infinite Scrolling
Pagination (페이징네이션)과 Infinite Scrolling (무한 스크롤링)은 웹사이트나 애플리케이션에서 많은 양의 콘텐츠를 효과적으로 표시하고 관리하는 두 가지 다른 방법입니다. 이 두 기법은 사용자 인터페이스 설계에서 중요한 역할을 하며, 사용자가 데이터를 탐색하는 방식을 결정합니다.
Pagination (페이징네이션)
Pagination은 콘텐츠를 여러 페이지로 분할하여 사용자가 특정 페이지 번호를 선택해 해당 페이지의 콘텐츠에 접근할 수 있도록 합니다. 이 방법은 주로 신문이나 잡지와 같이 명확하게 분리된 개별 항목을 표시할 때 유용합니다.
장점:
- 사용자가 원하는 데이터를 찾기 위해 정확한 위치로 쉽게 이동할 수 있습니다.
- 서버와 클라이언트 모두에서 리소스 사용을 효율적으로 관리할 수 있습니다. 한 번에 한정된 양의 데이터만 로드되기 때문에 메모리와 대역폭 사용이 줄어듭니다.
- 사용자가 데이터의 양을 예측할 수 있어서 특히 대량의 데이터가 있는 경우에 탐색하기 쉽습니다.
단점:
- 사용자가 여러 페이지를 거쳐야 하는 경우, 내용 탐색이 번거로울 수 있습니다.
- 페이지 전환으로 인한 로딩 시간이 발생할 수 있으며, 이는 사용자 경험을 저해할 수 있습니다.
Infinite Scrolling (무한 스크롤링)
Infinite Scrolling은 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠가 계속해서 로드되는 기법입니다. 이 방식은 특히 소셜 미디어 피드, 이미지 갤러리 등에서 자주 사용됩니다.
장점:
- 사용자가 콘텐츠를 끊임없이 탐색할 수 있어 자연스러운 사용자 경험을 제공합니다.
- 페이지 로딩에 대한 인지적 부담이 줄어들어, 탐색 과정이 매끄럽게 이어집니다.
- 콘텐츠 탐색의 연속성을 유지하면서 사용자의 참여도를 높일 수 있습니다.
단점:
- 무한 스크롤을 사용하면 어디까지 읽었는지 파악하기 어려울 수 있으며, 특정 위치로 다시 돌아가기 어려울 수 있습니다.
- 메모리 관리가 중요해지며, 많은 양의 콘텐츠가 로드되면 성능이 저하될 수 있습니다.
- SEO (검색 엔진 최적화)에 문제를 일으킬 수 있습니다. 무한 스크롤 페이지는 검색 엔진이 콘텐츠를 효과적으로 인덱싱하는 데 어려움을 겪을 수 있습니다.
각 기법은 사용 목적과 목표에 따라 선택되며, 사용자의 욕구와 웹사이트의 콘텐츠 유형을 고려하여 결정하는 것이 중요합니다. 또한, 때로는 이 두 기법을 적절히 혼합하여 사용하기도 합니다. 예를 들어, 무한 스크롤과 페이지네이션을 결합하여 사용자가 원하는 위치로 빠르게 이동할 수 있는 '점프 투 페이지' 옵션을 제공할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pagination Example with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 샘플 데이터 배열
const items = [
'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5',
'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10',
'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15',
'Item 16', 'Item 17', 'Item 18', 'Item 19', 'Item 20'
];
const itemsPerPage = 5;
const pageCount = Math.ceil(items.length / itemsPerPage);
// 특정 페이지의 아이템을 표시하는 함수
function displayItems(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const itemsToShow = items.slice(start, end);
// 콘텐츠 DIV를 비우고, 새로운 아이템으로 채움
$('#content').empty();
$.each(itemsToShow, function (index, item) {
$('#content').append($('<p>').text(item));
});
}
// 페이지네이션 버튼을 설정하는 함수
function setupPagination() {
$('#pagination').empty(); // 페이지네이션 DIV를 비움
for (let i = 1; i <= pageCount; i++) {
$('<button>') // 버튼 생성
.text(i) // 버튼 텍스트 설정
.on('click', function () { // 클릭 이벤트 핸들러 추가
displayItems(i);
})
.appendTo('#pagination'); // 페이지네이션 DIV에 버튼 추가
}
}
// 초기 페이지 설정
$(document).ready(function(){
displayItems(1);
setupPagination();
})
</script>
</head>
<body>
<div id="content"></div>
<div id="pagination"></div>
</body >
</html >
5.1 Jquery each메서드 설명
$.each(itemsToShow, function(index, item) {...});
- $.each() 함수는 jQuery의 유틸리티 함수로, 배열이나 객체의 각 요소를 순회(iterate)하는 데 사용됩니다. 이 함수는 첫 번째 매개변수로 순회할 배열(itemsToShow)을 받고, 두 번째 매개변수로 각 요소를 처리할 콜백 함수를 받습니다.
- 콜백 함수는 두 개의 인자를 받습니다:
- index: 현재 요소의 인덱스 번호입니다.
- item: 배열의 현재 요소의 값입니다.
콜백 함수 내부의 동작:
$('#content').append($('<p>').text(item));- $('#content'): ID가 'content'인 HTML 요소를 선택합니다.
- .append(...): 선택된 요소에 새로운 콘텐츠를 추가합니다.
- $('<p>'): 새로운 <p> (paragraph) HTML 요소를 생성합니다.
- .text(item): 생성된 <p> 요소의 텍스트 내용을 item 변수의 값으로 설정합니다. 여기서 item은 순회 중인 배열의 현재 항목입니다.
- $('#content').append($('<p>').text(item));: 최종적으로, 각 item 값이 텍스트로 설정된 <p> 요소가 #content 요소 안에 추가됩니다. 이 과정은 itemsToShow 배열의 모든 항목에 대해 반복적으로 실행됩니다.
댓글