자바스크립트

2023-03-16 : 마우스 호버시에 배너가 멈췄다가 마우스가 배너를 벗어나면 배너가 다시 롤링이 시작되는 기능 추가. -------------------------------------------------------------- 고정된 크기를 가지는 이미지들을 전환하는 이미지 슬라이드 배너를 제외하고, 많은 웹사이트에서 가장 사용하는 배너 방식이 텍스트 롤링 배너입니다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너입니다. 무한

HTML 내용에서 태그를 제거하고 텍스트 내용만 재 가공해서 사용할 때 사용할 수 있는 함수입니다. 태그를 제거하면 중간에 줄바꿈과 공백, 탭과 같은 불필요한 문자들이 여러 개 겹쳐져 남게 됩니다. 이런 문자들까지 제거해야 텍스트 데이터를 사용할 수 있는 상태가 됩니다. 태그 제거 str.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/gi, ""); 또는 str.replace(/(<([^>]+)>)/gi,

지연 로딩의 개념 지연 로딩은 웹 브라우저의 뷰포트 바깥에 위치한 웹 페이지의 대상 컨텐츠가 웹 페이지 로딩이 완료된 후 스크롤 등의 동작에 의해 뷰포트 안으로 들어오면, 그때 웹 서버에서 해당 컨텐츠를 가져와 표시를 하는 기능을 말합니다. 웹 페이지를 구성하는 컨텐츠 중에서 개별적인 URI에서 따로 가져오는 리소스를 가진 요소는 지연 로딩을

자바스크립트 메서드 중 element.getBoundingClientRect() 메서드는 요소의 왼쪽 위 모서리 좌표와 오른쪽 아래 모서리 좌표 값을 가져오는 메서드입니다. 얻은 좌표값은 웹브라우저의 뷰포트 왼쪽 위 꼭짓점을 시작점(0, 0)으로 해서 계산된 값입니다. 아래 그림을 보면 이해가 조금 더 쉽습니다. 뷰포트 기준점을 기준으로 하는 상대 위치가 되기 때문에 화면이 스크롤되면 얻는

웹브라우저의 DOM(Document  Object Model) 정보에는 웹 브라우저 안에 표시되는 컨텐츠에 대한 다양한 크기 정보 외에도 다양한 크기에 대한 환경정보가 들어있습니다. 정보들 중에는 웹브라우저 자신의 크기와 데스크탑 풀 스크린 화면에 대한 것들도 있습니다. 필요에 따라 풀스크린으로풀 스크린으로 동작해야 하는 웹앱과 같은 서비스는 풀 스크린으로 실행되기 위해서 필요한 각종 정보가 있습니다.

대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있습니다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 합니다. 그리서 간단한 것은 날짜 포맷 함수를 직접 만들어 쓰기도 하고, 널리 알려진

기본 데이터 타입 배열의 중복 체크 셋(Set)은 중복 없는 값들을 목록으로 유지하는 객체입니다. 맵(Map)에서 키만 있다고 생각하면 됩니다. 맵은 생성자 인자로 배열을 넣을 수 있습니다. 배열에 중복이 있으면 중복 요소들은 배제하고 셋(Set) 목록을 생성합니다. 셋(Set)은 요소의 개수를 size 속성에 가지고 있고, 배열은 length

쿠키는 웹 사이트 방문자의 개인화 정보를 클라이언트 브라우저 저장하는 단순하면서도 효율적인 수단입니다. 인터넷 환경 변화에 따라 쿠키의 비중은 점차 낮아지고 있지만, 여전히 방문자의 정보를 파악하고, 임시 데이터를 보관해두는 중요한 수단입니다. 클라이언트, 또는 웹 브라우저는 DOM 객체에 쿠키 정보를 담고 있는 쿠키 속성을 제공합니다. "document.cookie" 속성은 DOM에 담고 있는 쿠키

자바스크립트에도 다른 언어들에 준하는 런타임 예외 처리 구문이 있습니다. 짧은 코드를 작성할 때는 이런 런타임 에러들이 큰 문제가 안되기도 하고, 쉽게 해결할 수 있습니다. 자바스크립트 코드가 길어지고 로직이 복잡해지면서 파일이나 네트워크 연결을 제어하는 수준이 되면 무수히 많은 에러와 예외 상황이 개발자를 괴롭히게 됩니다. 자바스크립트 에러 핸들링은 이런 예외, 또는 에러