쵸코쿠키의 연습장

다음은 키를 사용하여 배열 및 그룹을 만드는 데 사용할 수 있는 도우미 기능입니다. 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..

Google PageSpeed를 통해 웹 사이트를 실행하면 렌더링 차단 파일로 Google 웹 글꼴 스크립트가 강조 표시됩니다. WebFontLoader를 사용하여 비동기식으로 페이지에 웹 글꼴을 로드하여 이 파일에서 렌더 차단을 제거합니다.

코드 분할이라는 웹팩 기능을 살펴 보겠습니다. 코드 분할을 사용하면 기본 JavaScript 파일을 다른 파일로 분할하여 필요할 때마다 느리게 로드하여 기본 JavaScript 파일의 크기를 줄일 수 있습니다. JavaScript 파일이 매우 클 수 있으므로 단일 페이지 애플리케이션을 빌드 할 때 매우 중요한 기능입니다. 즉, 페이지를 시작하기 전에 페이지가 다운로드 될 때까지 기다려야합니다. 코드 분할을 사용하면 코드를 여러 파일로 분할하고 앱에서 페이지를 표시하는 데 필요한 파일만 다운로드 할 수 있습니다. 예를 들어 단일 페이지에서 구성 요소만 사용하는 경우 앱의 모든 페이지에서 해당 구성 요소를 로드할 필요가 없습니다. 코드 분할 Webpack을 사용하면 필요할 때만 해당 구성 요소에 로드가 지연..

jQuery와 ZeroClipboard 플래시 확장을 사용하여 복사하여 붙여 넣기 단추를 만드는 방법을 살펴 보았습니다. 이것의 문제는 플래시가 필요하다는 것입니다. 대부분의 웹은 플래시에서 멀어지고 일부 사람들은 브라우저에 플래시를 설치하지 않았으므로 다른 솔루션이 필요합니다. 플래시가 복사 및 붙여 넣기에 사용 된 이유는 주로 브라우저 호환성으로 인한 것입니다. 이제 대부분의 브라우저는 이제 API를 지원하여 웹 API document.execCommand를 사용하여 Javascript를 사용하여 직접 복사하여 붙여 넣을 수 있습니다. HTML 먼저 페이지에 HTML을 추가하여 복사 할 컨텐츠를 입력 할 텍스트 상자, 복사 프로세스를 시작하는 클릭 이벤트가있는 버튼 및 컨텐츠를 붙여 넣음으로써 복사를..

많은 웹 사이트에서 가장 인기있는 트렌드는 맨 위로 이동 버튼이며,이 버튼을 클릭하면 자동으로 페이지 맨 위로 스크롤됩니다. 이전에는 애니메이션 기능을 사용하여 jQuery를 사용하여 브라우저를 맨 위로 부드럽게 스크롤하는 방법을 설명했습니다. 맨 위로 jQuery를 사용하여 작업 한 여러 새로운 웹 사이트에서 이 스크립트를 많이 사용했지만 최근에는 웹 사이트 성능에 더 많은 노력을 기울이고 페이지 로딩 시간을 단축하는 방법에 대해 연구했습니다 . 노력한 가장 큰 것 중 하나는 jQuery를 응용 프로그램에 로드 할 필요가 없으며 순수한 JavaScript를 사용하는 것입니다. jQuery를 필요한 경우가 있다는 것을 알고 있으며 전혀 사용할 필요가 없다고 말하지는 않지만 간단한 클릭 이벤트만하면 jQu..

다음은 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(); 그런 ..

웹이 너무나 다양한 장치에서 사용되고 있으므로 다양한 화면 크기에 맞게 디자인을 변경할 수 있어야합니다. 화면 크기에 따라 디스플레이를 변경하는 가장 좋은 방법은 미디어 쿼리를 사용하여 화면의 크기 뷰포트를 찾고 사용중인 화면 크기에 따라 디자인을 변경하는 것입니다. 미디어 쿼리 중단 점을 정의하여 이와 같은 다른 장치의 디자인을 변경할 수 있으므로 주로 CSS 파일에서 이러한 변경을 수행합니다. /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { }..

테이블에서 jQuery UI 정렬 가능 함수를 사용하면 드래그하는 행의 너비가 축소되어 이상한 사용자 경험이 발생할 수 있습니다. 도우미 함수를 사용하여 행을 원래 너비로 끌어 오는 너비를 변경하는 방법을 살펴 보겠습니다. jQuery Sortable은 아래에서 찾을 수있는 jQuery UI 라이브러리의 일부입니다. jQuery Sortable 정렬 가능한 행을 갖도록 테이블을 정의하려면 정렬 가능한 메소드를 행의 부모 element에 적용하면됩니다. 일반적으로 테이블 자체 또는 이상적으로는 테이블 본문이 됩니다. Film Date Rating The Shawshank Redemption 1994 9.2 그런 다음 다음 jQuery 코드를 사용하여 테이블 본문 행을 정렬 가능하게 만들 수 있습니다. $(..

웹 사이트에서 타사 응용 프로그램 JWplayer를 사용하여 비디오를 표시하는 방법과 이러한 비디오를 반응형으로 만드는 방법을 쉽게 보여주는 코드를 보여줍니다. JWPlayer는 비디오를 보고있는 브라우저에 따라 플래시 또는 HTML5 비디오를 자동으로 전환하는 비디오 플레이어입니다. 즉, HTML5 비디오와 함께 제공되는 모든 브라우저 지원 문제를 처리합니다. HTML5 비디오는 IE8 이하를 제외한 모든 브라우저에서 제대로 작동합니다. JWPlayer는 사용중인 브라우저 버전을 확인하고 HTML5 또는 Flash를 사용하여 비디오를 재생합니다. 또한 JWPlayer를 사용하면 플레이어를 자신의 이미지로 사용자 정의 할 수 있으므로 웹 사이트에 맞게 쉽게 브랜딩 할 수 있습니다. 사이트에 YouTube..

최근에 다른 하이라이터와 달리 Prism.js라는 새로운 구문 하이라이터를 사용하도록 전환하였습니다. Prism.js는 기본적으로 매우 가벼우며, 추가 옵션을 추가하여 더 많은 옵션이나 새로운 테마를 라이브러리에 추가할 수 있습니다. 현재 선택할 수 있는 테마는 6가지 이며 다운로드 시 패키지에 포함할 테마를 선택할 수 있습니다. Prism.js는 매우 가볍도록 선택할 수 있습니다. Prism.js는 매우 가볍도록 설계되었으므로 추가 기능과 테마를 추가하면 패키지 크기가 늘어납니다. Prism.js는 다른 구문 하이라이터와 마찬가지로, 코드가 코드 편집기 내부에 있는 것처럼 보이는 것처럼 코드를 표시하기 위해 로드 시 코드 태그를 사전 및 코드 태그 내부에서 변경하도록 설계되었습니다. 여기서 중요한 부분..

웹 사이트에서 Google지도 API를 사용하면 스크롤 마우스 이벤트가 무시되고 지도에서 확대/축소 역할을합니다. 이 기능을 사용하면 지도에서 특정 위치를 쉽게 확대/축소 할 수 있습니다. 위치 위에 마우스를 놓고 마우스 휠을 사용하여 확대 또는 축소 할 수 있습니다. 그러나 크거나 전체 화면 맵이 있는 경우 페이지에서 스크롤 할 때 맵이 축소되어 마우스 휠을 사용하여 페이지를 스크롤 하기가 어려워집니다. Google Maps API 버전 V3에서 Google은 마우스 휠이 지도에서 확대되지 않도록 하는 새로운 매개 변수를 도입했습니다. 이 기능을 끄면 마우스가 지도 위에 있어도 페이지를 스크롤 할 수 있습니다. 즉, 지도를 확대하는 유일한 방법은 지도 왼쪽의 확대/축소 컨트롤을 사용하는 것입니다. 스크..

모바일 장치가 점점 더 대중화됨에 따라 이러한 모바일 장치 중 하나에서 사이트를 방문하는 사용자를 위해 다른 작업을 수행해야 할 때가 있습니다. 모바일 장치에 따라 디자인을 변경하려면 미디어 쿼리를 사용합니다. 그러나 Javascript와 같은 기능을 변경하려면 아래 스니펫을 사용하여 모바일 장치에서 다른 작업을 수행 할 수 있습니다. Javascript 이 페이지에이 스크립트를 추가 했으므로 iPhone, ipod 또는 ipad에서이 페이지를 방문하면 경고 상자가 나타납니다. PHP PHP를 사용 중이고 현재 사용자가 iPhone, iPad 또는 iPod을 사용 중인지 알고 싶다면 HTTP_USER_AGENT 변수를 보고 사용중인 장치 정보를 얻을 수 있습니다. function isIphone() { ..

액세스 가능한 웹 사이트를 갖는 것은 매우 중요합니다. 즉, 사이트에 오는 잠재적인 고객을 무시하지 않고 올바르게 사용할 수 있다는 것을 의미합니다. 그러나 방문자가 웹 사이트를 방문했지만 사이트를 사용하도록 브라우저 기능을 설정하지 않은 경우 어떻게해야합니까? Javascript는 이 기능이 꺼져있거나 켜져있을 때 수행해야 할 작업을 알고 알아야하는 기본 브라우저 기능 중 하나입니다. Javascript를 사용하면 클라이언트 측 form 유효성 검사, 슬라이드 쇼, 애니메이션 및 HTML 요소 변경을 통해 웹 사이트에서 많은 작업을 수행 할 수 있습니다. 그러나 방문자가 자바 스크립트를 활성화하지 않으면 어떻게 될까요? 먼저 Javascript 없이도 사이트가 완벽하게 작동하는지 확인해야합니다. 그런 ..

다음은 매우 유용한 것으로 생각되는 간단한 스니펫입니다. 이 스니펫은 숫자가 홀수인지 짝수인지 확인합니다. function checkEven(val){ return (val%2 == 0); } val = 3; if(checkEven(val)){ alert("Number is even"); } else { alert("Number is odd"); ] In PHP PHP에서는 실제로 변수를 수정하는 것만 뺴고 똑같습니다. function checkEven($val){ return ($val%2 == 0); } $val = 3; if(checkEven($val)){ echo "Number is even"; } else { echo "Number is odd"; ]

페이지 URL에서 정보를 얻는 데 대부분의 시간이 걸립니다. 서버 측 프로그래밍 언어를 사용하지만 실제로는 자바 스크립트를 사용하여 URL을 구성하는 다른 섹션을 얻을 수 있습니다. 프로토콜 가져오기 URL 프로토콜을 얻으려면 다음 스니펫을 사용하십시오. window.location.protocol Returns http / https 반환 값은 위와 같습니다. Hostname 가져오기 URL 호스트 이름을 얻으려면 다음 스니펫을 사용하십시오. window.location.host Returns {URL} 반환 값으로 URL 호스트를 가져올 수 있습니다. 경로명 얻기 URL의 파일 경로 이름을 얻으려면 다음 스니펫을 사용하십시오. window.location.pathname Returns index.ht..

Javascript를 사용하여 임의의 색상을 작성하는 방법을 학습합니다. 자바 스크립트에서 임의의 색상을 만들려면 간단한 g함수 입니다. function random_colour(){ return Math.floor(Math.random()*16777215).toString(16); } 랜덤 값을 색을 표현할 수 있도록 잘라서 값을 가져옵니다. 해당 값을 통해 랜덤한 색상을 만들어 변경할 수 있습니다.

다음 스니펫은 이메일 주소를 확인하는 데 사용하는 기능입니다. 이메일이 올바른 형식인지 테스트하기 위해 정규식 패턴 일치를 사용하는 매우 간단한 기능입니다. 유효한 이메일 형식 유효한 형식은 email.address@domain.com / email@domain.com 입니다. 전자 메일 주소의 매개 변수를 사용한 다음 정규식과 패턴 일치를 실행합니다. 일치하는 항목을 찾지 못하면 유효성 검사에 실패하고 함수는 false를 반환합니다. 일치하는 것이 true를 반환하면 전자 메일의 형식이 정확하므로 함수가 true를 반환합니다. /** * Validate email function with regualr expression * * If email isn't valid then return false * ..

웹 페이지에서 사용자 입력으로 작업 할 때 모든 입력을 확인하는 것이 중요합니다. 이는 사용자가 입력하는 것이 예상되는 데이터 유형인지 확인할 수 있도록 하기 위한 것입니다. 서버 측 유효성 검사 만 수행하는 경우 서버 측과 클라이언트 측 유효성 검사를 모두 수행하는 것이 중요합니다. 그러면 클라이언트 측에서 수행 할 수 있는 작업을 위해 서버에서 불필요한 작업을 수행하게 됩니다. 그러나 클라이언트 측에서만 유효성 검사를 수행하는 경우 Javascript를 끄면 이 유효성 검사를 무시할 수 있습니다. 그렇기 때문에 서버 측 및 클라이언트 측 유효성 검사를 모두 수행하는 것이 중요합니다. 그러나 문제는 이러한 언어가 다르고 기능이 다르기 때문에 Javascript에는 사용자 입력을 완전히 검증하는 데 필요..

최근에는 iframe 내의 코드에서 JavaScript로 작업 해야 하는 프로젝트가 있습니다. 직면한 문제는 iframe 내부의 웹 사이트가 JavaScript를 로드하는 페이지보다 로드하는 데 시간이 훨씬 오래 걸린다는 것입니다. 일반적으로 jQuery로 작업 할 때 코드 또는 init 함수를 document ready 함수로 감싸서 웹 사이트가 로드 될 때만 코드가 실행되도록 합니다. $( document ).ready(function() { console.log( "Webpage is ready!" ); }); 그러나 iframe 사이트가 로드되지 않았으므로 iframe 내부에서 선택기를 찾을 수 없기 때문에 jQuery가 실패한다는 것을 의미 하므로이 상황에서는 이 방법을 사용할 수 없습니다. 따..

기본적으로 jQuery slideDown은 분명히 요소를 아래로 밀어 내용을 표시하고 slideUp은 요소를 위로 밀어 내용을 숨깁니다. slideUp을 사용하여 내용을 표시하고 slideDown을 사용하여 내용을 숨겨서 이러한 동작을 취소하려면 어떻게해야 할까요? Query UI 슬라이드 함수를 사용하여 메소드의 방향을 직접 변경할 수 있지만 jQuery 라이브러리를 사용하여 jQuery UI 라이브러리를 로드하여 애플리케이션에 가중치를 더해야합니다. 예를 들어 아래와 비슷한 코드를 사용할 수 있습니다. $('button').click(function () { $(this).hide('slide', { direction: "down" }, 1000); }); 다른 옵션은 애니메이션 기능을 사용하여 슬라..