Web 37

TypeScript] 가볍고 사용하기 편한 이미지 슬라이더/캐러셀

Splide는 TypeScript로 작성된 유연하고 가벼운(27kB) 액세스 가능한 슬라이더입니다. 여러 슬라이드, 축소판, 중첩 슬라이더, 세로 방향 등과 같은 옵션을 변경하기만 하면 다양한 종류의 슬라이더를 만들 수 있습니다. 또한 API를 사용하거나 확장을 빌드하여 슬라이더 기능을 향상시킬 수 있습니다. TypeScript로 작성 종속성이 필요하지 않습니다. 경량, 27kB(11kB gzip 압축) 유연하고 확장 가능 300개 이상의 테스트 케이스로 보호 여러 슬라이드 CSS로 슬라이드 또는 페이드 전환 중단점 지원 CSS 상대 단위 허용 이미지를 자를 필요가 없습니다. 진행률 표시줄 및 재생/일시 중지 버튼으로 자동 재생 RTL 및 수직 방향 마우스 드래그 앤 터치 스와이프 자유 드래그 모드 마우..

Web/JavaScript 2021.12.29

Node.js 와 NPM 최신버전으로 업그레이드 하기

이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 방법에 대한 팁 입니다. 주의: 일부 모듈에선 v6.0.0 을 지원하지 않습니다. # Node.js 설치 및 업그레이드 다음 절차에 따라서 업데이트를 진행하세요. Node 설치 $ yum install nodejs $ node -v v6.17.1 $ npm -v 3.10.10 $ npm install -g yarn $ yarn -v 1.22.17 현재 NodeJs 버전 확인하기 $ node -v v6.17.1 강제로 캐시 삭제 $ sudo npm cache clean -f npm WARN using --force I sure hope you know what you are doing. ..

Web 2021.12.24

Ubuntu에 React, Node 배포하기

안녕하세요. 일루넥스 개발팀 박두현 입니다. 오늘은 React와 Node 서버 배포 방법에 대해 간단히 정리해보았습니다. Nginx를 이용한 React 배포 nginx를 통해 build된 React 프로젝트를 서버에 배포한다. 1. Nginx설치 1.1 Nginx 설치 nginx 사용을 위해 서버에 설치한다. sudo apt get update sudo apt install nginx 1.2 nodejs 설치 nginx 사용을 위해 서버에 설치한다. sudo apt get install nodejs // 설치 확인 nodejs -v npm --v 1.3 확인 정상적으로 nginx가 설치 되면 해당 서버 ip 주소로 접속했을 때 다음처럼 nginx 기본 화면이 뜬다. 1.4 nginx 설정파일 수정 ngi..

Web 2021.12.24

PHP] 사이트맵(sitemap.xml) 생성하는 소스

XML 사이트맵을 생성하는 객체 기반 PHP 사이트맵 생성하는 소스 특징 누락된 기능을 구현하거나 추가 기능을 추가하는 데 도움을 주세요. 웹사이트용 사이트맵 생성 사이트맵 생성을 위한 다양한 옵션 특정 파일 유형만 보는 옵션 크롤링할 때 클라이언트 측 자바스크립트 콘텐츠 로드 모든 상대 링크 유형(// , # , ?) 등을 구문 분석합니다. https://github.com/tristangoossens/php-sitemap-generator 1. 다운로드후 sitemap-config.php 파일을 열고 웹사이트 주소로 변경 "SITE_URL" => "https://student-laptop.nl/", 이 부분을 찾아서 2. sitemap-config.php, sitemap-generator.php, s..

Web/PHP 2021.12.02

PHP] map 폴리곤(Polygon) 영역의 중심 좌표 구하기

폴리곤 영역안의 중심 좌표를 구하는 함수입니다. //중심 좌표 구하기 /*******************************/ function get_center($coords) { $count_coords = count($coords); $xcos=0.0; $ycos=0.0; $zsin=0.0; foreach ($coords as $lnglat) { $lat = $lnglat['lat'] * pi() / 180; $lon = $lnglat['lng'] * pi() / 180; $acos = cos($lat) * cos($lon); $bcos = cos($lat) * sin($lon); $csin = sin($lat); $xcos += $acos; $ycos += $bcos; $zsin += $csi..

Web/PHP 2021.11.05

사업자등록정보 진위확인 및 상태조회 - PHP 오픈 API

국세청에서 보유한 사업자등록정보에 대한 진위확인 및 상태조회 서비스가 오픈API로 개방되었습니다. 한 번에 최대 100개의 사업자등록정보에 대한 진위확인 및 등록 상태조회 기능을 제공합니다. 해당 오픈API에 대한 자세한 내용을 확인하시거나 활용신청은 아래 링크를 통해 가능합니다. https://www.data.go.kr/data/15081808/openapi.do 또한, 개발자가 아닌 분들도 자료실에 등록된 파일을 내려받고 엑셀 파일(.xlsx) 업로드를 통해 사업자등록 상태조회 오픈API를 테스트해볼 수 있습니다. https://www.data.go.kr/bbs/rcr/selectRecsroom.do?pageIndex=1&originId=PDS_0000000000753 실제 사업자등록번호 진위확인 A..

Web/PHP 2021.11.03

youtube 재생 완료(종료) 이벤트 받기

http://lab.naminsik.com/3111 유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다. 그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다. 시작 전 ie8 이하는 해당 기능이 되지 않는다. 이유는 html5를 지원하는 브라우저에서만 가능하기 때문이다. html에 유튜브 영상을 넣을 div를 만들어 놓는다. 스크립트가 실행되면 저 div가 자동으로 iframe 로 바뀌어서 영상이 유튜브 영상이 삽입된다. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; va..

Web/JavaScript 2021.05.28

howler.js - 최신 웹을위한 오디오 라이브러리.

howler.js는 모든 플랫폼에서 자바 스크립트의 오디오 작업을 쉽고 안정적으로 만듭니다. Features Single API for all audio needs Defaults to Web Audio API and falls back to HTML5 Audio Handles edge cases and bugs across environments Supports all codecs for full cross-browser support Automatic caching for improved performance Control sounds individually, in groups or globally Playback of multiple sounds at once Easy sound sprite def..

Web/JavaScript 2021.04.29