Lpla 개발 블로그

JavaScript/기초

[JavaScript] 함수 (2)

이전 글에서 이어집니다. [JavaScript] 함수 1. 함수란? 자바스크립트에서 함수는 가장 중요한 문법 중 하나이다. 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아서 출력 lpla.tistory.com 6. 참조에 의한 전달과 외부 상태의 변경 엄연히 말해 자바스크립트에서 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다. 하지만 편의상 전달되는 값의 종류에 따라 값에 의한 전달과 참조에 의한 전달로 구분하여 부르기로 한다. 이 때 참조에 의한 전달은 다른 프로그래밍 언어에서 말하는 그것과 정확히 일치하지 않는다. // 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다. function ..

etc

네이버 지도 API - 웹사이트에 네이버 지도 첨부

카카오 지도는 HTML 태그를 바로 복사하여 쓸 수 있지만 네이버 지도는 API를 사용해야 지도를 첨부할 수 있다. 따라서 카카오 지도를 써도 무방하면 이 글을 읽지 말고 카카오 지도를 사용하면 되고 반드시 네이버 지도를 써야 한다면 아래 내용을 따라하면 된다. 1. 회원가입 먼저 네이버 클라우드 플랫폼에 가입해야 한다. NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 네이버 클라우드 플랫폼은 부분유료 서비스로 무료 제공 한도를 초과할 경우 비용을 청구하기 때문에 결제수단 정보를 ..

etc

네이버 지도 API 길찾기 - 출발지와 도착지 입력

1. Nclound 웹페이지에 길찾기 버튼을 만들고 클릭하면 네이버 지도 어플을 실행하여 출발지는 GPS상 내 현재 위치, 목적지는 미리 정해둔 어떤 장소로 하여 길찾기 기능을 만들고자 한다. 일반적인 지도 링크는 네이버 지도 사이트에서 URL을 가져오면 된다. 하지만 길찾기라면 이야기가 다르다. 길찾기 기능은 일반적인 네이버 지도로는 기능을 사용할 수 없고 Nclound의 Maps 서비스 중 "지도앱 연동 URL scheme"를 사용해야 한다. 지도앱 연동 URL Scheme - Maps 쿠키 제공 동의 당사는 고객님의 브라우징 기반 정보를 바탕으로 관련 정보 및 광고 제공을 위하여 지식 기반 쿠키를 사용합니다. guide.ncloud-docs.com URL Scheme를 잘 몰라도 어렵지 않게 사용할..

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로 두 번째 피연산자를 ..