본문 바로가기

Programming/Front

 (5)
무한 스크롤 구현 무한 스크롤이란사용자가 화면을 아래로 스크롤할 때마다 현재 보여주고 있는 데이터의 끝에서 자동으로 다음 데이터를 계속해서 로드하는 방식입니다. 사용자 입장에서는 마치 콘텐츠가 끝없이 이어지는 것처럼 자연스럽게 스크롤이 계속됩니다.구현한 이유개발 중인 프로젝트에서 알림을 발생시킬 때 기존에는 제한 없이 모든 알림을 한 번에 불러와 클라이언트에 표시하고 있었습니다. 데이터 양이 적을 때는 큰 문제가 없었지만 알림이 100개, 1000개 이상 누적되면서 클라이언트에 과부하가 걸리고 성능 저하가 발생하는 이슈가 생겼습니다. 이를 해결하기 위해 무한 스크롤 방식을 도입하게 되었습니다.구현 코드let lastScroll = 0; // 마지막 스크롤 위치let limit_PageNo = 0let pageSize = ..
jQuery 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다. 제이쿼리는 다음과 같은 특장점을 가지고 있습니다. 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다. 네트워크, 애니메이션 등 다양한 기능을 제공합니다. 메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다. 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있습니다. 공식 웹..
JavaScript 자바스크립트는 유사 자바와 비슷하다고 생각들 하시는데 자바와는 다른 언어이다 주로 프런트에서 자주 사용하는 언어입니다!! 간단하게 문법만 알아보겠습니다! 기본 문법입니다!@! let,const //변수 타입 alert() //대화창 출력 console.log() // 콘솔에 출력 typeof() //타입 확인 prompt() //사용자에게 값을 입력 받을 떄 사용 confirm() //사용자에게 확인을 받을 떄 사용 String() //문자형으로 변환 Numver() //숫자형으로 변환 Boolean() //불린형으로 변환 if문 //(자바와 동일) for문 //(자바와 동일) while문 //(자바와 동일) do-while문 //(자바와 동일) break,continue //(자바와 동일) switch..
CSS CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 CSS는 재활용이 가능하며 나아가 테마, 탬플릿의 형태로 확장할 수 있습니다. CSS의 문법을 알아보겠습니다. 전체선택자 *{html내에 등장하는 모든 형태를 선택하는 선택자.(초기화,기본설정값) 태그 선택자 h1,h2,p,a,img.../html내에 등장하는 특정한 태그를 선택하는 선택자. 아이디선택자 :본문(id="name")/스타일(#) 특정한 이름을 부여하여 선택하는 선택자로, html화면 내에서 하나의 이름으로 한번만 사용가능. 주로 큰 달락,부모에서 사용, 위치이동, 이름 클래스 선택자 :본문(class="name")/스타일(.) 특정한 이름을 부여하여 선택하는 선택자로,html화면 내에서 하나의 이름으로 ..
HTML HTML은 (Hypertext Markup Language, 하이퍼텍스트 마크업 언어)로 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.모든 파트들은 요소(Element)로 이루어져 있습니다.이 Element들은 겹치면 안됩니다많이 사용하는 태그들만 작성해 보았습니다. header -1 It is a long established fact that a reader will be distracted by the reada ble content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less nor..

티스토리툴바