무료 IP 지리 정보 서비스인 freegeoip.app를 사용하여 IP 주소로 국가 코드, 국가 이름, 지역 코드, 지역 이름, 도시, 위도 및 경도, 타임존 정보를 가져올수 있습니다. 아래 코드는 PHP를 이용한 코드입니다. 아래는 Python을 사용하여 예시를 보여드리겠습니다. 다음 코드는 requests 라이브러리를 사용하여 freegeoip.app API를 호출하여 IP 주소의 국가, 위도 및 경도를 가져오는 방법을 보여줍니다: import requests def get_ip_geo(ip_address): url = f"https://freegeoip.app/json/{ip_address}" response = requests.get(url) data = response.json() country..
1. CKEditor5 클립보드 이미지를 서버에 업로드 CKEditor5의 clipboardInput 이벤트를 사용하여 붙여넣기된 콘텐츠에 이미지가 있는 경우 이미지를 서버에 업로드할 수 있습니다. 이미지가 있을 때 해당 이미지를 서버에 업로드하고, 서버에 업로드된 이미지의 URL을 콘텐츠에 삽입하는 방법을 살펴보겠습니다. ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { // clipboardInput 이벤트 리스너 등록 editor.editing.view.document.on( 'clipboardInput', async ( evt, data ) => { let clipboardData = data.dataTr..
아래 PHP 함수는 주어진 시작일자($s_date)와 종료일자($e_date) 사이의 남은 일 수를 계산하는 기능을 합니다. 함수는 다음과 같은 단계로 작동합니다: $e_date가 빈 문자열인 경우, 즉 종료일자가 제공되지 않은 경우에는 "0"을 반환합니다. 시작일자와 종료일자를 각각 연, 월, 일로 분리하여 배열로 저장합니다. (explode 함수를 사용하여 문자열을 구분자(여기서는 "-")로 분리합니다.) mktime 함수를 사용하여 시작일과 종료일의 타임스탬프를 생성합니다. 이 함수는 연, 월, 일, 시, 분, 초를 기반으로 타임스탬프를 반환합니다. 시작일의 타임스탬프($s_time)와 종료일의 타임스탬프($e_time)를 비교하여 시작일이 종료일보다 늦은 경우 0을 반환합니다. 즉, 시작일이 종료..
바닐라, 경량(~19kb gzipped🎉), 구성 가능한 선택 상자/텍스트 입력 플러그인. Select2 및 Selectize와 비슷하지만 jQuery 종속성이 없습니다. CountUp.js는 모든 브라우저를 지원합니다. https://choices-js.github.io/Choices/ Choices choices-js.github.io
CountUp.js는 보다 흥미로운 방식으로 숫자 데이터를 표시하는 애니메이션을 빠르게 만드는 데 사용할 수 있는 종속성 없는 경량 Javascript 클래스입니다. 그 이름에도 불구하고 CountUp은 전달하는 시작 값과 끝 값에 따라 어느 방향으로든 계산할 수 있습니다. CountUp.js는 모든 브라우저를 지원합니다. https://github.com/inorganik/CountUp.js GitHub - inorganik/countUp.js: Animates a numerical value by counting to it Animates a numerical value by counting to it. Contribute to inorganik/countUp.js development by crea..
Flexbox Froggy에 오신 것을 환영합니다! Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임입니다. 오른쪽의 justify-content 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. http://flexboxfroggy.com/#ko Flexbox Froggy A game for ..
포스트맨 사용시 API url, token, 테스트 아이디를 변수화하여 처리하는 방법입니다. 최근 프로젝트 중에 개발자서버(cafe24)를 사용하다가 서버이전(AWS, NCloud 등)으로 이전시에 편하게 Url을 수정해서 사용할 수 있는 방법입니다 귀찮은 상황이 생길시 fix해두고 편하게 사용할 수 있습니다 (프로젝트 포스트맨을 생성할때 셋팅을 해두시면 두고두고 후회 안할 팁입니다) 1. 우선 'Collection'탭에서 프로젝트에 해당하는 폴더를 생성하면 우측 상단에 'No Environment'라고 표시가 됩니다. 2. 'Collection'탭 아래에 'Environments'탭을 클릭해주세요. 3. 기본으로 'Globals'가 있으며, '+'버튼을 눌러 새로 생성할 수 있습니다. 'Globals'..
jQuery FilePond는 JavaScript 라이브러리인 FilePond용 편리한 jQuery 어댑터로, 무엇이든 업로드할 수 있고, 더 빠른 업로드를 위해 이미지를 최적화하며, 훌륭하고 액세스 가능하며 매끄럽고 부드러운 사용자 경험을 제공합니다. 또한 이미지 편집이 필요하십니까? Pintura는 최신 JavaScript 이미지 편집기 를 찾고 있습니다. Pintura는 자르기 종횡비 설정 , 크기 조정 , 회전 , 자르기 및 이미지 뒤집기 를 지원 합니다. 무엇보다도 FilePond와 아름답게 통합됩니다. Learn more about Pintura Pintura Image Editor, a Powerful JavaScript Image Editor SDK A powerful JavaScript ..
완벽한 컬러 팔레트를 찾는 데 시간을 낭비하지 마십시오! 색상을 입력하기만 하면 됩니다! 그리고 멋진 색상 팔레트 생성 My Color Space 사용자가 입력한 16진수 코드로 알려진 한 가지 색상을 기반으로 색상 팔레트를 생성하는 첨단 색상 구성표 생성 도구입니다! 그 외에도 이 도구를 사용하여 배경 이미지에 대한 3색 그라디언트를 만들 수 있습니다. 색상을 선택하고 도구가 그라디언트를 생성하도록 하고 CSS 코드를 복사하여 사이트에 붙여넣습니다. https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycol..
Splide는 TypeScript로 작성된 유연하고 가벼운(27kB) 액세스 가능한 슬라이더입니다. 여러 슬라이드, 축소판, 중첩 슬라이더, 세로 방향 등과 같은 옵션을 변경하기만 하면 다양한 종류의 슬라이더를 만들 수 있습니다. 또한 API를 사용하거나 확장을 빌드하여 슬라이더 기능을 향상시킬 수 있습니다. TypeScript로 작성 종속성이 필요하지 않습니다. 경량, 27kB(11kB gzip 압축) 유연하고 확장 가능 300개 이상의 테스트 케이스로 보호 여러 슬라이드 CSS로 슬라이드 또는 페이드 전환 중단점 지원 CSS 상대 단위 허용 이미지를 자를 필요가 없습니다. 진행률 표시줄 및 재생/일시 중지 버튼으로 자동 재생 RTL 및 수직 방향 마우스 드래그 앤 터치 스와이프 자유 드래그 모드 마우..
이번 포스트는 기존에 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. ..
안녕하세요. 일루넥스 개발팀 박두현 입니다. 오늘은 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..
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..
