Programming/자바스크립트

[js][splide]이미지슬라이드 라이브러리

여러 이미지를 간편하게 슬라이드 뷰로 볼 수 있는 라이브러리가 필요했다. 여러 개 검색해본 결과, 가벼운 로딩과 다양한 유저 경험을 제공할 수 있는 라이브러리가 적합하여 splide를 선택하게 되었다. splide는 이미지를 여러 view로 볼 수 있도록 한다. 한 화면에 여러 개의 이미지라든가, Grid형식의 슬라이드, 동영상 첨부, 자동 슬라이드 넘기기 등 제공한다. 위 사진은 splide 사이트에 있는 이미지이며, 프로젝트에는 위와 같이 썸네일과 슬라이드가 동시에 보이도록 적용했다. 아래는 적용한 간단한 예시 코드로 HTML 부분과 Javascrip 부분이다. main슬라이드와 thumbnail슬라이드 두부분으로 구성하여 sync하여 구성하였다. splide 자세한 설명과 내용은 아래 사이트를 참고..

[js][Tippy]Tippy(Tooltip 라이브러리) 사용

프로젝트에서 툴팁을 태그 속성의 title 사용하기 때문에 시인성을 위해 개선이 필요했다. 간단하고 많이 사용하는 툴팁 라이브러리인 Tippy를 적용하여 해결하였다. Tippy 소개 및 적용 예시를 남겨둔다. 기본적인 소개 및 사용법 그리고 Demo까지 너무나도 깔끔하고 완벽하다. https://atomiks.github.io/tippyjs/ Tippy.js - Tooltip, Popover, Dropdown, and Menu Library The complete tooltip, popover, dropdown, and menu solution for the web atomiks.github.io Tippy는 기본적으로 popper라이브러리를 이용하여 툴팁, 드롭다운 등을 제공한다. 원하는 대로 CSS가..

[Javascript]Null, Undefined, 빈문자열 처리

javascript에서 값을 할당하거나 파싱하는 등의 작업을 하면서 의도되지 않은 값이 생기는 경우가 있다. 그 중 많은 비율을 차지하고 있는 것이 "빈 값"이다. "빈 값"으로 판단되는 경우에 대한 처리를 하기 위해, 아래는 대표적인 케이스 몇 개를 뽑아 null과 비교해봤다. var v_null = null; var str_null = 'null'; var v_undefined = undefined; var str_undefined = 'undefiend'; var str_empty = ''; console.log('값 그대로 비교'); console.log('null == null : ', null == v_null); console.log('null == "null" : ', null == str..