본문 바로가기

Javascript

스크린, 브라우저, 뷰포트 크기 값을 알아내는 방법

0 2021. 10. 14. 웹브라우저의 DOM(Document Object Model) 정보에는 웹 브라우저 안에 표시되는 컨텐츠에 대한 다양한 크기 정보 외에도 다양한 크기에 대한 환경정보가 들어있습니다. 정보들 중에는 웹브라우저 자신의 크기와 데스크탑 풀 스크린 화면에 대한 것들도 있습니다. 필요에 따라 풀스크린으로풀 스크린으로 동작해야 하는 웹앱과 같은 서비스는 풀 스크린으로 실행되기 위해서 필요한 각종 정보가 있습니다. 이런 경우를 위해 window 객체에는 데스크탑 풀 스크린 화면 크기, 웹브라우저 크기에 대한 정보를 담고 있습니다. 이 정보들은 자바스크립트를 통해 접근할 수 있으며, 표준 속성 값이기 때문에 웹브라우저별 호환성에 대한 걱정 없이 접근해서 사용할 수 있습니다. 다음 그림을 보면 쉽게 이해가 될 것입니다. ..

웹페이지 이미지 지연 로딩(레이지 로딩-Lazy loading) 구현하기

0 2021. 10. 6. 지연 로딩의 개념 지연 로딩은 웹 브라우저의 뷰포트 바깥에 위치한 웹 페이지의 대상 컨텐츠가 웹 페이지 로딩이 완료된 후 스크롤 등의 동작에 의해 뷰포트 안으로 들어오면, 그때 웹 서버에서 해당 컨텐츠를 가져와 표시를 하는 기능을 말합니다. 웹 페이지를 구성하는 컨텐츠 중에서 개별적인 URI에서 따로 가져오는 리소스를 가진 요소는 지연 로딩을 이용해 불필요한 트래픽을 줄이고, 더 빠른 페이지 로딩을 완료할 수 있습니다. 예를 들어 웹 페이지에 크기가 큰 이미지 파일이 여러 개 있는 경우 이 이미지들을 모두 다운로드해서 웹페이지에 표시할 때까지 웹페이지는 로딩 중 상태가 되고 완료 시점까지 사용자와의 인터렉션이 제한되게 됩니다. 특히 속도가 느린 모바일 인터넷 환경에서는 꽤 오랜 시간을 기다리게 될 수도 ..

자바스크립트 날짜 포맷과 변환 총정리

0 2021. 10. 5. 대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있습니다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 합니다. 그리서 간단한 것은 날짜 포맷 함수를 직접 만들어 쓰기도 하고, 널리 알려진 날짜 포매팅 라이브러리의 도움을 받기도 합니다. 자바스크립트로 날짜 포매팅을 하는 방법은 크게 3가지로 나눌 수 있습니다. 직접 날짜 포매팅 함수를 만들기 날짜 라이브러리 사용(Moment.js) Internationalization API 사용 세 번째 국제화 API는 많이 사용되지 않다보니 다소 생소할 수 있습니다. 최신 자바스크립트 코딩을..

자바스크립트 배열 요소의 중복 체크

0 2021. 10. 2. 기본 데이터 타입 배열의 중복 체크 셋(Set)은 중복 없는 값들을 목록으로 유지하는 객체입니다. 맵(Map)에서 키만 있다고 생각하면 됩니다. 맵은 생성자 인자로 배열을 넣을 수 있습니다. 배열에 중복이 있으면 중복 요소들은 배제하고 셋(Set) 목록을 생성합니다. 셋(Set)은 요소의 개수를 size 속성에 가지고 있고, 배열은 length 속성에 가지고 있습니다. 속성이 다르므로 주의해야 합니다. size 보다 length는 항상 크거나 같습니다. 배열에 중복이 없으면 둘의 요소 개수는 같고, 그렇지 않으면 length가 항상 큽니다. size보다 length가 크면 중복이 있어서 배제된 배열 요소가 있다는 뜻이 됩니다. const arrDup = ['라이언', '어피치', '프로도', '콘', '..

자바스크립트 쿠키 저장 및 관리 총정리

0 2021. 10. 2. 쿠키는 웹 사이트 방문자의 개인화 정보를 클라이언트 브라우저 저장하는 단순하면서도 효율적인 수단입니다. 인터넷 환경 변화에 따라 쿠키의 비중은 점차 낮아지고 있지만, 여전히 방문자의 정보를 파악하고, 임시 데이터를 보관해두는 중요한 수단입니다. 클라이언트, 또는 웹 브라우저는 DOM 객체에 쿠키 정보를 담고 있는 쿠키 속성을 제공합니다. "document.cookie" 속성은 DOM에 담고 있는 쿠키 문자열이며, 이 정보를 읽어서 쿠키 값을 가져오거나, 반대로 쿠키 값을 저장할 수 있습니다. 객체가 아니고 메서드도 제공되지 않기 때문에 쿠키 문자열을 읽어서 파싱 하고 쿠키 정보를 구분하는 것은 어디까지나 자바스크립트의 몫입니다. 쿠키 기본 알기 - 쿠키 문자열 구조 기본 쿠키 문자열은 다음과 같이 구성됩..

자바스크립트 배열의 중복을 제거하는 방법 총정리

0 2021. 10. 1. 배열 요소에 중복이 있으면 안 되는 경우, 자바스크립트는 중복이 있는지를 확인해서 제거할 수 있는 여러 가지 방법을 제공합니다. 각각의 방법이 장단점이 있기 때문에 경우에 따라 적당한 중복 제거 방법을 사용하는 것이 좋습니다. 필터(Filter)로 배열 중복 제거 배열의 내장 메서드인 filter()를 이용해서 조건에 맞는 요소만을 반환받는 방식으로 중복 없는 배열을 만들 수 있습니다. 필터 메서드는 배열 요소의 선택 조건을 직접 정할 수 있기 때문에 중복 제거가 아니어도 다양한 조건에 맞는 배열을 얻을 수 있는 장점이 있습니다. const arrDup = ['라이언', '어피치', '프로도', '콘', '라이언', '프로도']; const arrUnique = arrDup.filter((val, idx..

자바스크립트 에러 처리(Error Handling) 총정리

0 2021. 10. 1. 자바스크립트에도 다른 언어들에 준하는 런타임 예외 처리 구문이 있습니다. 짧은 코드를 작성할 때는 이런 런타임 에러들이 큰 문제가 안되기도 하고, 쉽게 해결할 수 있습니다. 자바스크립트 코드가 길어지고 로직이 복잡해지면서 파일이나 네트워크 연결을 제어하는 수준이 되면 무수히 많은 에러와 예외 상황이 개발자를 괴롭히게 됩니다. 자바스크립트 에러 핸들링은 이런 예외, 또는 에러 상황을 매끄럽고 부드럽게 처리를 할 수 있도록 해줍니다. 의미를 알기 힘든 알 수 없는 기술 용어로 범벅된 에러 메시지보다는 코드를 작성한 개발자가 이해하고 구분할 수 있는 메시지가 훨씬 더 도움이 될 수 있습니다. 에러 처리에 사용하는 핸들링 키워드는 try, catch, finally, throw 4개입니다. 그밖에 에러 객체 몇..

자바스크립트 확산연산자(...) 활용 방법 총정리

0 2021. 9. 30. ES6에서 새롭게 도입된 확산 연산자는 마침표 점 3개(...)로 표시하는 연산자입니다. 3점 연산자, 또는 스프레드 연산자라고도 합니다. 확산 연산자는 자바스크립트의 코딩 방식을 획기적으로 개선해주는 연산자입니다. 복잡한 객체 나열을 단순화하거나 객체의 병합, 그리고 함수의 인자 처리를 아주 단순하게 처리할 수 있도록 개선해줍니다. 코딩을 효율적으로 할 수 있도록 해줄 뿐만 아니라 작성한 코드의 유연성까지 높여주기 때문에 코드의 유지보수가 훨씬 쉬워집니다. ES6에서부터 도입된 수많은 자바스크립트 기능 추가 중에서 가장 획기적이라고 할 수 있습니다. 확산 연산자는 범용 연산자이기 때문에 자바스크립트 코드 전반에 거쳐 다양하게 사용할 수 있습니다. 확산 연산자를 사용해서 보다 나은 코딩을 하는 방법들을 ..

자바스크립트 배열 정렬 기초, 그리고 숫자를 정렬할 때 주의할 점

0 2021. 9. 27. 자바스크립트의 배열 정렬은 내장 메서드인 sort()를 이용합니다. sort() 메서드를 이용하면 배열 객체를 간단하게 정렬할 수 있습니다. 그리고, 초보자들에게는 다소 위험한 함정도 포함하고 있습니다. 정렬 기초 sort() 메서드 사용 방법은 간단해서 배열 객체의 메서드로 sort()를 호출하면 객체 요소들이 정렬됩니다. 한글, 영문, 숫자 모두 정렬이 잘 됩니다. let arrString = ['콘', '라이언', '프로도', '어피치']; arrString.sort(); console.log(arrString); // ['라이언', '어피치', '콘', '프로도'] let arrNumber = [7, 2, 9, 5]; arrNumber.sort(); console.log(arrNumber); //..

폼 입력 내용을 클립보드로 복사하거나 클립보드에서 가져와 붙여넣기

0 2021. 9. 24. 자바스크립트 코드를 이용해 클립보드와 상호작용을 통해 텍스트 데이터를 복사하거나 가져올 수 있습니다. 웹브라우저는 navigator.clipboard 객체를 통해 운영체제의 클립보드와 상호 작용을 할 수 있도록 기반 기능을 제공합니다. 보안상의 이유로 자바스크립트가 클립보드에 접근할 때는 다음과 같은 접근 권한을 확인할 수도 있습니다. 입력 필드에 입력한 텍스트 내용을 클립보드로 복사하거나 가져오는 간단한 버튼을 다음처럼 만들어서 구현합니다. 클립보드로 입력 필드 텍스트 복사하기 먼저 클립보드 복사를 하는 버튼에 클릭 이벤트를 등록합니다. window.addEventListener('DOMContentLoaded', function(){ document.querySelector('#copybtn').ad..

웹페이지 네비게이션을 돕는 페이지맵(Pagemap) 기능 구현하기

0 2021. 9. 7. 최근 나오거나 업그레이드되는 코드 에디터 프로그램들은 대부분 페이지맵 기능이 추가되고 있습니다. 페이지맵 기능은 에디터에 열려있는 텍스트 내용의 썸네일 요약과 같은 기능을 하며, 드래그해서 텍스트 페이지의 원하는 위치로 바로 이동하는 기능을 합니다. 스크롤바의 비주얼 업그레이드 버전 정도라고 이해하면 쉽습니다. 문서의 대략적인 구조가 보이기 때문에 단순한 스크롤바 보다는 훨씬 직관적으로 이동할 위치를 추정할 수 있는 장점이 있습니다. 실행파일로 실행되는 프로그램은 페이지맵 기능을 내장하거나 플러그인으로 제공하지만, 웹 브라우저로 표현하는 웹 페이지는 자바스크립트 기능을 이용해 직접 해당 기능을 사용자가 구현해 사용해야 합니다. 페이지맵 기능은 오픈소스로 배포되는 Pagemap 자바스크립트 모듈을 사용해 ..

간결한 자바스크립트 코드를 만드는 9가지 최신 방법

1 2021. 7. 29. 1. 함수 파라미터에 기본값을 표시하기 함수를 정의할 때 파라메터의 기본값을 명시하는 습관을 들입니다. 파라미터 기본값은 파라미터가 넘어왔는지를 확인하는 조건 체크를 하지 않아도 되기 때문에 더 간결하고 짧은 코드를 작성하는데 도움이 됩니다. function myFunc1(param1){ console.log(`param1=${param1}`); } function myFunc2(param1 = '기본값'){ console.log(`param1=${param1}`); } myFunc1(); // undefined myFunc2(); // '기본값' 2. 다중 비교 조건을 한번에 비교하기 여러 개의 비교 조건을 만족하는 경우가 최소 1개 이상 있는지를 확인하는 다중 비교를 할 때, 배열의 some() 메서..

이전 1 2 3 4 ··· 12 다음

닫기

티스토리툴바