본문 바로가기

SW/JavaScript

JavaScript : GroupBy 함수 : 예제, 구현 다음은 키를 사용하여 배열 및 그룹을 만드는 데 사용할 수 있는 도우미 기능입니다. const groupBy = function (data, key) { return data.reduce(function (carry, el) { var group = el[key]; if (carry[group] === undefined) { carry[group] = [] } carry[group].push(el) return carry }, {}) } export { groupBy } 그룹화할 키와 함께 배열을 전달하여 배열에서 이 기능을 사용할 수 있습니다. let array = [ { name: "Name 1", value: 15 }, { name: "Name 1", value: 30 }, { name: "Name..
JavaScript : Google Font 비동기 로드 방법 : 예제, 구현 Google PageSpeed를 통해 웹 사이트를 실행하면 렌더링 차단 파일로 Google 웹 글꼴 스크립트가 강조 표시됩니다. WebFontLoader를 사용하여 비동기식으로 페이지에 웹 글꼴을 로드하여 이 파일에서 렌더 차단을 제거합니다.
JavaScript : 웹팩 코드 분할 사용 : 예제, 구현 코드 분할이라는 웹팩 기능을 살펴 보겠습니다. 코드 분할을 사용하면 기본 JavaScript 파일을 다른 파일로 분할하여 필요할 때마다 느리게 로드하여 기본 JavaScript 파일의 크기를 줄일 수 있습니다. JavaScript 파일이 매우 클 수 있으므로 단일 페이지 애플리케이션을 빌드 할 때 매우 중요한 기능입니다. 즉, 페이지를 시작하기 전에 페이지가 다운로드 될 때까지 기다려야합니다. 코드 분할을 사용하면 코드를 여러 파일로 분할하고 앱에서 페이지를 표시하는 데 필요한 파일만 다운로드 할 수 있습니다. 예를 들어 단일 페이지에서 구성 요소만 사용하는 경우 앱의 모든 페이지에서 해당 구성 요소를 로드할 필요가 없습니다. 코드 분할 Webpack을 사용하면 필요할 때만 해당 구성 요소에 로드가 지연..
JavaScript : 복사하여 붙여 넣기 : 예제, 구현 jQuery와 ZeroClipboard 플래시 확장을 사용하여 복사하여 붙여 넣기 단추를 만드는 방법을 살펴 보았습니다. 이것의 문제는 플래시가 필요하다는 것입니다. 대부분의 웹은 플래시에서 멀어지고 일부 사람들은 브라우저에 플래시를 설치하지 않았으므로 다른 솔루션이 필요합니다. 플래시가 복사 및 붙여 넣기에 사용 된 이유는 주로 브라우저 호환성으로 인한 것입니다. 이제 대부분의 브라우저는 이제 API를 지원하여 웹 API document.execCommand를 사용하여 Javascript를 사용하여 직접 복사하여 붙여 넣을 수 있습니다. HTML 먼저 페이지에 HTML을 추가하여 복사 할 컨텐츠를 입력 할 텍스트 상자, 복사 프로세스를 시작하는 클릭 이벤트가있는 버튼 및 컨텐츠를 붙여 넣음으로써 복사를..
JavaScript : 사이트 맨 위로 올리는 방법 : 예제, 구현 많은 웹 사이트에서 가장 인기있는 트렌드는 맨 위로 이동 버튼이며,이 버튼을 클릭하면 자동으로 페이지 맨 위로 스크롤됩니다. 이전에는 애니메이션 기능을 사용하여 jQuery를 사용하여 브라우저를 맨 위로 부드럽게 스크롤하는 방법을 설명했습니다. 맨 위로 jQuery를 사용하여 작업 한 여러 새로운 웹 사이트에서 이 스크립트를 많이 사용했지만 최근에는 웹 사이트 성능에 더 많은 노력을 기울이고 페이지 로딩 시간을 단축하는 방법에 대해 연구했습니다 . 노력한 가장 큰 것 중 하나는 jQuery를 응용 프로그램에 로드 할 필요가 없으며 순수한 JavaScript를 사용하는 것입니다. jQuery를 필요한 경우가 있다는 것을 알고 있으며 전혀 사용할 필요가 없다고 말하지는 않지만 간단한 클릭 이벤트만하면 jQu..
JavaScript : 문자열의 첫 글자를 대문자로 표시하는 방법 : 예제, 구현 다음은 ucfirst에 대한 JavaScript 버전에 대한 빠른 코드 스니펫입니다. 이 코드 스니펫을 사용하면 JavaScript를 사용하여 문자열의 첫 글자를 대문자로 지정할 수 있습니다. function jsUcfirst(string) { return string.charAt(0).toUpperCase() + string.slice(1); } 이 코드 스니펫은 JavaScript 함수 charAt를 사용하여 특정 색인의 문자를 가져옵니다. var firstLetter = string.charAt(0); 다음으로 JavaScript에서 대문자 함수를 사용하여이 문자열을 대문자로 설정합니다. var uppercaseFirstLetter = string.charAt(0).toUpperCase(); 그런 ..
Java Script : 자바스크립트로 미디어 쿼리, 창 크기 확인 : 예제, 구현 웹이 너무나 다양한 장치에서 사용되고 있으므로 다양한 화면 크기에 맞게 디자인을 변경할 수 있어야합니다. 화면 크기에 따라 디스플레이를 변경하는 가장 좋은 방법은 미디어 쿼리를 사용하여 화면의 크기 뷰포트를 찾고 사용중인 화면 크기에 따라 디자인을 변경하는 것입니다. 미디어 쿼리 중단 점을 정의하여 이와 같은 다른 장치의 디자인을 변경할 수 있으므로 주로 CSS 파일에서 이러한 변경을 수행합니다. /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { }..
Java Script : jQueryUI를 사용해 고정 너비 정렬 가능한 테이블 행 만들기 : 구현, 예제, 방법 테이블에서 jQuery UI 정렬 가능 함수를 사용하면 드래그하는 행의 너비가 축소되어 이상한 사용자 경험이 발생할 수 있습니다. 도우미 함수를 사용하여 행을 원래 너비로 끌어 오는 너비를 변경하는 방법을 살펴 보겠습니다. jQuery Sortable은 아래에서 찾을 수있는 jQuery UI 라이브러리의 일부입니다. jQuery Sortable 정렬 가능한 행을 갖도록 테이블을 정의하려면 정렬 가능한 메소드를 행의 부모 element에 적용하면됩니다. 일반적으로 테이블 자체 또는 이상적으로는 테이블 본문이 됩니다. Film Date Rating The Shawshank Redemption 1994 9.2 그런 다음 다음 jQuery 코드를 사용하여 테이블 본문 행을 정렬 가능하게 만들 수 있습니다. $(..