-
Javascript, jQuery 2021‧06‧02
window.location 으로 접속 url 정보 가져오기
개발할 때 프로토콜에 맞춰서 도메인 정보를 가져올 때가 있는데 window.location.origin 을 사용하면 된다. 하지만 ie 지원이 어디까지 개발할 것이냐 또는 다른 브라우저에서 지원을 어디까지 제공할 것이냐에 따라 사용을 못할 수 있다. 그래서 아래처럼 사용한다. 이렇게 하면 http나 https 에 따라 http: 또는 https: 로 값을 받고 거기에 hostname을 넣어 현재 접속한 url의 프로토콜과 도메인을 받아올 […]
-
AWS, Javascript, jQuery 2020‧12‧13
동영상 스트리밍 서비스 구축 1장 (AWS s3/cloudFront, HLS, video.js)
동영상을 스트리밍 할 수 있는 방법론은 다양하다.구글을 검색하고 정리하고 다시 찾고 시도하고 해왔지만 결론은 동영상을 HLS로 인코딩하고 그 파일을 AWS의 S3에 업로드하여 cloud front에 배포되고 Javascript를 이용해서 사용자의 웹브라우져에서 스트리밍 하는 것이다. 이제부터 설명하는 플랫폼들의 UI와 기능은 2020년 12월 10일 기준으로 작성되어 차후 버전이 업데이트들 되면 다르게 작업해야할 수 있다는 점 주의해야 한다.자세한 설명은 생략하고 […]
-
Javascript, jQuery 2020‧10‧16
html2canvas 사용시 특정 영역 프린트 제외 시키기
data-html2canvas-ignore 속성으로 프린트 제외하고 싶은 엘리먼트를 지정할 수 있다.아래 예제에 data-html2canvas-ignore 속성에 true를 넣은 것을 볼 수 있다.
-
Javascript, jQuery 2020‧10‧15
정규식 화폐 단위 처리
￦￡￥ 과 같은 화폐 통화 표시는 정규식으로 처리해도 적용이 안될 때가 있다. 이럴 때는 유니코드 정규식을 구글 검색하면 된다. 사용 예는 아래와 같다. 유니코드 정규식은 ES5와 ES6 구분되니 꼭 맞춰서 사용해야 한다.
-
Javascript, jQuery 2020‧09‧15
map 역순으로 처리 (배열 역순)
map을 사용할 때 순서를 역으로 진행하고 싶을 때 아래처럼 사용한다.원본 배열을 건드리지 않고 역순으로 하려면 사본을 만든 다음 반대로 만들고 map을 실행하면 된다.
-
Javascript, jQuery 2020‧09‧01
JS - object가 비어있는 지 체크
예를 들어 var a = {} 이런 식으로 비어있는 지 아닌지 체크하는 코드
-
Javascript, jQuery 2020‧07‧22
카카오톡 간편 로그인 2.0 팝업창 띄웠을 때 부모창 overflow hidden 이슈
카카오톡 간편 로그인 2.0의 경우 팝업창으로 로그인을 띄우면 window.open 으로 로그인 창이 뜬다. 이 때 로그인 진행을 하지 않고 그대로 팝업창을 닫으면 본창이 스크롤이 사라져 있음을 발견할 수 있다.이 것은 팝업창으로 로그인 폼 띄울 때 카카오톡 간편 로그인 자바스크립트에서 html과 body에 overflow : hidden 스타일을 강제로 넣기 때문이다. 그래서 로그인이 성공하여 팝업창이 닫히면서 본창에 이벤트를 […]
-
Javascript, jQuery 2020‧07‧20
JS - Object.entries() 대상 객체를 각 키,값으로 배열로 담은 배열
타겟 객체에 있는 각 요소마다 키와 값이 있는데 이 것을 [키, 값] 바꾸고 모든 변경된 요소들을 새로운 배열에 담아 반환한다. 위 예제의 결과값은 [["user_a", 50], ["user_b", 15], ["user_c", 30], ["user_d", 100], ["user_e", 80]] 이렇게 나온다. 보통 entries는 단독으로 쓰이기보다 reduce 함수나 map 함수등을 활용한다. 이렇게 dataobj 객체에서 가장 큰 값을 가진 키와 값을 반환하는 조합에 […]
-
Javascript, jQuery 2020‧07‧20
JS - reduce()
타겟 배열을 가지고 배열의 0번째부터 끝번째까지 순차적으로 가공을 거치는 데 이때 결과값을 누산기는 곳에 할당하고 최종 결과값은 이 마지막 누산기에 할당된 값을 반환한다. 사용 방법은 아래와 같다. 하지만 대부분 누산기의 값과 현재값을 비교하여 사용하기 때문에 아래처럼 쓴다.초기값도 필요에 따라 생략 가능하다.(누산기라는 말이 어려우면 이전 결과 값이라 생각하면 좋을 것 같다.) 예제로 살펴보자. 위 예제는 배열의 […]
-
Javascript, jQuery 2020‧07‧20
JS - map()
타겟 배열을 가지고 배열의 0번째부터 끝번째까지 하나하나 가공을 거쳐 새로운 배열로 반환하는 것 위 예제는 배열 arr 의 요소들을 곱하기 2로 한 뒤 새로운 배열에 담아 반환하는 것이다.설명하자면 배열 arr 의 하나하나 요소가 맵안에 만들어진 연산을 거쳐 새로운 배열에 그 요소가 들어가는 것이다.