공개 게시판 > 공부

Business
- Business
Information
- Information
Study
- IONIC REACT PHP GNU MySQL ASP .NET MsSQL Html CSS Script SEO DNS JQuery Eng
book
- book
free
- free

:: 글답변 ::

이 름

패스워드

이메일

홈페이지

옵 션

html

분 류

제 목

>
>
> 자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 자주 들을 수 있습니다. 그럼 무한스크롤이란 과연 무엇이고 자바스크립트 라이브러리인 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 자세하게 알아보겠습니다. 일단 무한스크롤이란 무엇일가요?
> 
> 
> ! 자바스크립트의 무한스크롤(Infinite Scroll)이란? 용어알기
> ; 무한 스크롤이란 화면 인터렉션(Interaction)의 하나로 사용자 행동에 의해 만약 웹페이지 화면에서 스크롤을 브라우저의 끝으로 내리게되면 새로운 콘텐츠가 계속해서 생겨나는 이벤트의 반복을 의미합니다. 방문자는 스크롤을 계속내리면서 새로운 콘텐츠를 페이지 전환없이 볼 수 있게 됩니다. 이런 화면 인터렉션은 사용자가 새로운 콘텐츠를 더 볼 수 있도록 편리한 인터페이스를 제공합니다. 만약 이 방식이 아니라면 사용자는 페이지를 전환할 수 있는 아이콘 등을 클릭하여 다른 콘텐츠... 즉 2페이지, 3페이지 등을 볼 수 있을 것입니다. 이 방식도 나쁜 방식은 아니나 요새는 Ajax를 활용한 무한 스크롤 방식이 굉장히 많이 사용되고 있습니다.
> 
> 참고로 페이지 전환이 없다는 것은 이탈율(Bounce Rate)을 높이는 원인이 되기도 합니다. 더 쉽고 간단한 UI 제공으로 방문자의 체류시간을 늘릴 수 있겠지만 이탈율이 줄어들 수 있으므로 이를 고려할 필요가 있다하겠습니다. 사실 이탈율, 체류시간 모두 방문자 유입에 대한 공통의 목적을 가지고 있으므로 전체적인 방문자 트래픽에는 큰 영향이 없을 것입니다.
> 
> 그렇다면 무한 스크롤을 구현하기 위해 무엇을 해야할까요? 기본적으로 다음과 같은 프로세스가 필요합니다.
> 
> 
> :+: 무한 스크롤에 필요한 프로세스
> 1. 스크롤이 페이지 최하단에 위치했는지를 확인
> 2. 1번에서 최하단이라면 예정된 이벤트(추가 콘텐츠)를 실시
> 3. 이벤트를 통해 추가되는 콘텐츠가 비동기식(ajax)으로 하단에 추가됨
> 4. 결론적으로 스크롤이 계속 늘어남
> 
> 
> 이 무한 스크롤을 구현하기 위해서는 필요한 몇가지 함수를 알아야만하는데요... 여기에 사용되는 함수들은 다음과 같습니다.
> 
> $(document).scroll()
> // 스크롤이 변경될때마다 이벤트를 발생시킴
> 
> $(document).height()
> // 현재페이지(문서)의 높이
> 
> $(window).height()
> // 윈도우의 크기
> 
> $(window).scrollTop()
> // 브라우저의 스크롤 위치값
> 
> 
> 위의 함수가 이 무한 스크롤의 핵심적인 부분이라 할 수 있습니다. 현재 페이지의 전체높이가 화면의 스크롤의 위치값과 윈도우의 크기를 합산한 값이 클 경우 해당 함수를 실행하게 됩니다. 
> 
> 현재페이지(문서)의 높이 <= 윈도우의 크기 + 브라우저의 스크롤 위치값
> 
> 위에서 비동기식 방식에 대하여 언급을 하였습니다. 비동기식(ajax)은 페이지의 전환이 없이도 새로운 데이터를 서버에서 불러와 추가할 수 있는 방법입니다. 무한스크롤은 비동기 방식이 반드시 필요하므로 이에 대하여 알아야합니다. 그럼 아래 예제를 통해 더 자세히 알아보시기 바랍니다.
> 
> 
> !! 무한 스크롤 예제소스 보기
> <html>
> <body>
>    <div class="aritcleView">
>          <div>1</div>
>          <div>2</div>
>          <div>3</div> 
>    </div>
> </body>
> 
> <script type="text/javascript">
> // Add contents for max height
> $(document).ready(function () {
> $(document).scroll(function() {
> var maxHeight = $(document).height();
> var currentScroll = $(window).scrollTop() + $(window).height();
> 
> if (maxHeight <= currentScroll + 100) {
> $.ajax({
> ...
> })
> }
> })
> });
> </script>
> </html>
> 
> 위 예제는 webisfree.com의 메인페이지 코드중 일부입니다. 설명하자면... 클래스 articleView에는 몇개의 글(article)이 포함되어 있습니다. 이 글이 스크롤을 내려 최하단에 위치할 경우 scroll 이벤트가 발생하게되며 이 이벤트는 ajax() 비동기함수를 실행하게 됩니다. ajax()가 성공할 경우 해당하는 콘텐츠 영역에 불러온 새로운 글을 추가하게됩니다.
> 
> 위 예제에서 ajax()를 실행하는 if문을 보시면 maxHeight <= currentScroll + 100이라는 코드가 있습니다. 여기서 100은 현재 스크롤 위치값에 약간의 보정치를 추가한 부분입니다. 이를 사용하여 사용자가 반드시 최하단이 아니라 하단보다 조금 위에 위치했더라도 미리 새로운 콘텐츠가 추가될 수 있습니다. 비동기 방식은 웹콘텐츠를 로딩하는 시간이 발생하므로 최하단값과 스크롤 위치를 동일하게 할 경우 방문자는 조금 늦게 콘텐츠가 보일 수 있으므로 이를 보정하기 위한 값으로 100을 추가했습니다.
> 
> 100이라는 숫자는 정확한 값이 아니므로 원하는 값을 설정하여 적당한 위치에 도달했을 때 새로운 콘텐츠가 추가될 수 있을 것입니다.
>

링크 #1

링크 #2

파일첨부

왼쪽의 글자를 입력하세요.