Lpla 개발 블로그

JavaScript/실전

[JavaScript] 익스플로러 유튜브 로딩 문제 해결

익스플로러에서 iframe이나 object로 유튜브를 삽입하면 타 브라우저에 비해서 로딩 속도가 매우 느린 현상이 있다. 이미 이 자체만으로도 심각한 문제지만, 사이트에 페이드 등 일부 효과들이 렉을 동반한 버벅임으로 정상 실행되지 않는 것도 문제다. 크롬은 지연 로딩을 지원하고 있다. 이치럼 loading="lazy" 를 추가해주면 페이지를 로드할 때 유튜브를 읽지 않고 스크롤이 됐을 때 유튜브를 로드하여 페이지 로딩 시간을 단축시키고 렉도 줄인다. 하지만 아쉽게도 익스플로러는 지연로딩 기능이 없다. 지연로딩도 없지만 로딩 속도가 비정상적으로 느리다. 이 문제를 해결하기 위해서 익스플로러에서 페이지 로드시 유튜브를 읽지 않고 썸네일만 불러들인 다음, 썸네일을 클릭하면 유튜브 영상이 시작되도록 하는 방식..

JavaScript/실전

Swiper 예제 - display: none 이슈 해결

탭이나 팝업 형태로 swiper를 사용한다면 페이지를 로딩한 직후에는 슬라이더가 노출되지 않고 어떤 동작을 한 이후에 나타나게 된다. 즉 처음에 보이지 않는 display: none 상태인 요소에 swiper를 사용하게 되면 에러가 발생하곤 한다. See the Pen swiper display:none issue by lpla (@lpla) on CodePen. 위 예제에서 tab2를 클릭하면 나타나는 두번째 swiper는 제대로 동작하지 않는다. 이 문제를 해결하기 위해서는 observer 매개변수를 사용해야 한다. See the Pen swiper display:none issue solve by lpla (@lpla) on CodePen. observer: true, observeParents: ..

JavaScript/기초

[JavaScript] 함수(1)

1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력을 내보낸다. 이때 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라고 한다. 함수는 함수 정의를 통해 생성되지만 정의만으로 함수가 실행되는 것은 아니다. 함수를 실행하기 위한 입력, 즉 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 지시해야 한다. 이를 함수 호출이라고 한다. 함수를 호출하면 코드 블록에 담긴 문들이 실행되고 결과값을 반환(반환값)한다. // 함수 정의 function add(x, y) { return x + y; ..

JavaScript/실전

swiper 예제 - 페이징 커스텀

swiper의 default 페이징(pagination)은 파란색 점 모양이다. 이것은 swiper에서 지원하는 페이징 타입 중 bullet의 기본 형태이다. 하지만 css로 이 bullet을 꾸미거나 renderBullet 매개변수로 색다르게 커스텀 할 수 있다. 1. 기본 페이징 See the Pen swiper 기본 by lpla (@lpla) on CodePen. 2. 페이징 css 커스텀 See the Pen swiper 페이징 커스텀 by lpla (@lpla) on CodePen. 3. renderBullet See the Pen swiper 페이징 renderBullet by lpla (@lpla) on CodePen.

JavaScript/기초

[JavaScript] 객체 리터럴

객체 자바스크립트는 객체 기반 언어이고 자바스크립트를 이루고 있는 모든 것이 객체이다. 정확하게는 원시 타입을 제외한 나머지 모든 것은 객체이다. 그리고 객체는 프로퍼티로 구성되어 있다. 다시 프로퍼티는 키(key)와 값(value)으로 구성되는데 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다. 클래스 기반 언어에서 객체를 생성하기 위해 new 연산자를 사용한다. /* 1단계 : 클래스 정의 */ public class Prisoner { public int setence = 4; public int probation = 2; public string name; public string id; /* 2단계 : 클래스 생성자 정의*/ public Prisoner(s..

JavaScript/기초

[JavaScript] 논리 연산자와 단축 평가

1. 논리 연산자 자바스크립트는 세 종류의 논리 연산자가 있다. 연산자 의미 || OR && AND ! NOT OR 연산자는 피연산자 중 하나라도 true라면 첫번째 true를 반환하고 그렇지 않으면 false를 반환한다. AND 연산자는 피연산자가 모두 true라면 true를 반환하고 그렇지 않으면 첫번째 false를 반환한다. NOT 연산자는 하나의 피연산자만을 가지고 해당 피연산자의 불린형(true, false)을 역으로 반환한다. true || true; // true false || true; // true true || false; // true false || false; // false true && true; // true false && true; // false true && fals..

JavaScript/기초

[JavaScript] 삼항연산자와 조건문(if ... else문) 차이

삼항연산자(삼항 조건 연산자)는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자다. 삼항연산자의 표현식은 아래와 같다. 조건식 ? 조건식의 true 값 : 조건식의 false 값 삼항연산자는 첫번째 피연산자가 true라면 두번째 피연산자를 반환하고, 첫번째 피연산자가 false라면 세 번째 피연산자를 반환한다. var age = 30; var checkEven = age % 2 ? "홀수입니다." : "짝수입니다." console.log(checkEven); // "짝수입니다." checkEven은 age의 홀수, 짝수를 판단하는 삼항연산자이다. 나머지를 구하는 % 를 사용하여 나머지가 0 이라면 false로 세 번째 피연산자를 반환하고, 나머지가 1이라면 true로 두 번째 피연산자를 ..

JavaScript/기초

[JavaScript] 배열(Array) 요소 추가/삭제

1. 인덱스 지정 추가하고 싶은 배열의 위치에 인덱스를 지정하는 방법 var food = ['rice', 'hamberger'] food[4] = 'noodle' console.log(food); // ['rice', 'hamberger', undefined, undefined, 'noodle'] 2. delete 연산자 delete 연산자와 인덱스로 배열 요소를 삭제할 수 있다. 하지만 요소가 완전히 삭제되는 것은 아니고 undefined로 설정되어 길이는 변하지 않는다. var food = ['rice', 'hamberger'] delete food[1]; console.log(food); // ['rice', 'hamberger'] console.log(food.length); // 2 3. uns..

JavaScript/기초

[JavaScript] 배열(Array) 개요

1. 개요 자바스크립트에서 [1, 'A', '가'] 형태를 배열(Array)이라고 한다. 대괄호 안에 콤마로 구분하여 값을 작성하며 string 타입일 경우 큰따옴표 혹은 작은따옴표로 작성한다. 이때 1, 'A', '가'를 배열 요소(Array Element)라고 한다. 배열은 순서를 가진다. 첫번째 배열 요소부터 인덱스 0번으로 시작하며 이 순서야말로 배열이 가지고 있는 특징이다. 2. 배열 생성 배열은 다양한 방법으로 생성할 수 있다. // 1 var food = new Array(); // 2 var food = Array(); // 3 var food = []; 3. 요소 호출 모든 배열 요소는 각각의 인덱스를 가지므로 대괄호를 사용하여 특정 요소를 호출할 수 있다. var food = ['ric..

JavaScript/기초

[JavaScript] arguments 객체

자바스크립트는 함수를 호출할 때 arguments 객체가 함수 내부로 전달된다. arguments 객체가 하는 일은 크게 두 가지이다. 1. 함수의 인자(argument) 참조 arguments 객체를 사용하여 함수의 인자를 참조할 수 있으며, 이때 인덱스는 0부터 시작한다. function func(a) { return a + arguments[1] + arguments[2] } func(10, 20, 30); // 60 위 func 함수에서 파라미터는 a 하나 밖에 없지만 func(10, 20, 30)처럼 인자(argument)가 3개인 함수를 호출한다고 해서 에러가 발생하지 않는다. func 함수에서 10은 a에 할당되고 arguments[0]에도 할당된다. 마찬가지로 20과 30은 각각 argum..