본문 바로가기

JavaScript

(22)
[javascript] 함수 표현식과 함수 선언식 JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식 두 가지가 있습니다. 함수 선언식과 함수 표현식의 주요 차이점은, 선언식은 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다. 함수 선언식과 함수 표현식 중 어떤 스타일을 사용하던 맞거나 잘못된 선택이 있는것은 아닙니다. 단지 두 방식이 다르게 동작하기 때문에 하나의 방식을 선택하여 일관적으로 사용을 하는 것이 좋습니다. 예를 들어 airbnb에서는 함수 선언식 대신에 함수 표현식만 사용하도록 권장하고 있습니다. 이유는 함수 선언식이 호이스트되어 파일에 정의되기 전에 함수를 참조하게 되면 가독성과 유지 보수성을 저해한다고 판단했기 때문입니다. 그럼 함수 선언식과 함수 표현식의 예시를 살펴보겠습니..
[공유하기] 모바일 웹 URL 복사 기능 구현하기 오늘은 공유하기 기능 중 URL 직접 복사 기능을 설명해보려고합니다. URL 복사 기능 구현하기 1. Android 또는 iOS 13.4 이상 // 클립보드로 링크 복사 navigator.clipboard.writeText('https://dc2348.tistory.com/') .then(function () { alert('URL 복사가 완료되었습니다.') }) iOS 최신버전이거나 Android 기기에서는 위 코드 처럼 Clipboard API를 통해 간단하게 구현이 가능합니다. 그러나 Clipboard APIP가 iOS 13.4 미만 버전에서는 지원이 안되기 때문에, 이 경우에는 다르게 구현이 필요합니다. 2. iOS 13.4 미만 // 클립보드로 링크 복사 const textArea = docum..
[공유하기] 모바일 웹에서 카카오톡 공유하기 기능 구현하기 모바일 웹에서 카카오톡 공유하기 기능 구현하기 메시지 API는 사용자가 카카오톡 친구에게 카카오톡 메시지를 보내는 기능을 제공합니다. 메시지를 보내는 방법은 크게 두 가지로, 카카오링크 API를 사용하는 방법과 카카오톡 메시지 API를 사용하는 방법이 있습니다. 카카오링크 API는 서비스에서 제공하는 정보를 사용자가 원할 때 카카오톡 친구와 손쉽게 공유할 수 있도록 구성됐습니다. 한편 카카오톡 메시지 API는 사용자가 특정 상황에 서비스 클라이언트나 서버를 통해 카카오톡 친구에게 메시지를 보낼 수 있도록 하는 기능을 제공합니다. 저는 서버를 통해 메시지를 보내는건 아니기 때문에 손쉽게 메시지 공유가 가능한 카카오링크 API를 통해 구현하였습니다. 카카오링크 API에서 제공하는 기능에는 Kakao.Link..
[공유하기] 페이스북에 링크 공유하기 지난 포스팅에서 SMS 공유하기 기능을 설명했었는데, 오늘은 페이스북으로 링크 공유하는 기능을 설명해보려고 합니다. 페이스북에 링크 공유하기 방법1. 현재 페이스북에서 제공하고 있는 웹에서 공유하기 방식은 아래 링크에서 참고 가능합니다. developers.facebook.com/docs/sharing/web/ 위 방법은 페이스북 SDK를 이용하는 방식입니다. 방법2. 그러나 단순히 링크만 공유할 예정이라면 위 링크의 복잡한 링크를 따라할 필요가 없습니다. www.facebook.com/sharer.php 링크를 이용해서 간편하게 링크를 공유할 수 있습니다. 사용방법은 아래와 같습니다. 1. html에 엘리먼트를 하나 추가해준 후 클릭이벤트를 추가해줍니다. 페이스북 공유하기 2. 클릭이벤트에 연결된 함수..
[공유하기] 모바일 웹에서 SMS 문자 보내기 기능 구현 신규 모바일 쇼핑몰을 구축하면서 개발했던 내용을 정리해보려고합니다. 그 중 첫번째 소개할 기능은 상품 페이지 링크등을 공유하는 '공유하기' 기능입니다. 우리 사이트의 경우는 '상품', '라이브 커머스 매장', '기획전' 링크를 공유하도록 구현되어 있습니다. '공유하기' 기능에는 카카오톡, 페이스북, 트위터, SMS 등이 있는데, 그 중에서 SMS 공유하기 기능을 소개해보려고 합니다. SMS 문자 보내기 기능 구현하기 우리 사이트에서는 위 버튼을 클릭하면 지정된 링크를 SMS로 공유할 수 있는 기능이 구현되어 있습니다. 안드로이드나 iOS 앱에서는 네이티브 기능인 SMS 문자 보내는 함수가 제공이될테지만, 웹에서는 어떻게 구현해야할까요? 바로 'SMS URL 스킴'을 사용하면됩니다. URL 스킴이란? UR..
video.js & <vue-video-player> 관련 링크 vue-video-player를 이용하여 개발을 진행하면서 참고하였던 사이트를 정리해보았다. 1. Video.js 공식사이트 🔗 데모를 통해 Video.js의 여러 옵션 및 API를 테스트해볼 수 있다. Video.js - Make your player yours Make your player yours with the internet's most popular open source video player framework videojs.com 2. Video.js 문서 🔗 Video.js의 여러 옵션 및 API에 관한 문서 Home | Video.js Documentation There are two categories of docs: Guides and API docs. Guides explain g..