javascript

FRONT/JavaScript

[JS] vanilla js로 무한 스크롤(Infinite scroll) 구현하기

🤔무한 스크롤(Infinite scroll)이란? 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다. 게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다. [👍무한 스크롤의 장점] - 사용자 참여 및 콘텐츠 탐색이 쉽습니다. - 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. (다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다.) - 터치스크린(모바일)일때 더 유용하게 적용됩니다. (화면이 작을수록 스크롤은 길어지기에 모바일 환경에서 콘텐..

FRONT/JavaScript

[JS] vanilla js로 Pagination 구현하기

🤔 Pagination? 페이지네이션이란 콘텐츠를 여러 페이지고 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. ✅ 필요한 Pagination 조건 게시판을 더 쉽게 볼 수 있고 사용자의 접근성을 높일 수 있게 Pagnation을 적용하기로 했습니다.💪 Pagination을 구상하면서 필요한 요구 조건들은 총 네 가지입니다. 1 한 페이지에 페이지 링크는 10개로 보여준다. 2 한 페이지에 20개씩 게시물을 보여준다. 3 이전, 다음 버튼이 존재한다. 4 처음으로, 마지막으로 버튼이 존재한다. 👩‍💻 JS로 Pagination 개발 [1. 한 페이지에 페이지 링크는 10개로 보여준다.] total : 462 1 ... ..

FRONT

[FRONT] 브라우저는 어떻게 동작할까?

브라우저 종류 인터넷 익스플로러 파이어폭스(오픈소스) 사파리(부분적 오픈소스) 크롬(오픈소스) 오페라 → 오픈소스 브라우저가 시장의 상당 부분 차지합니다 브라우저의 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시 자원 : HTML 문서, PDF, 이미지 , 또 다른 형태 자원의 주소 : URI(Uniform Resource Identifier) W3C(World Wide Web Consortium) 브라우저는 HTML과 CSS 명세에 따라 HTML 파일 해석해 표시 → 명세는 웹 표준화 기구인 W3C에서 정함!(최근 대부분의 브라우저가 표준 명세 따른다) 브라우저의 기본 구조 사용자 인터페이스 주소 표시줄, 이전/다음버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모..

eunoia07
'javascript' 태그의 글 목록