javascript 1 페이지

자바와 자바스크립트는 직접적인 관계는 없습니다. 다만 문법이 C계열인 정도 인데 의미는 없습니다.의미가 없다는 의미는 자바스크립트 할줄 하는 개발자가 자바를 다르지 못하고 반대도 그렇다고 봐야 합니다.* 이런 생각도 가능!! - 스크립트(SCRIPT) 비교적(프로그램에 비해) 간단한 형태를 말함 - JAVA + SCRIPT = 자바로 만들어진 스크립트?그런데 같은 줄 아는 사람이 있는 경우는 왜? 그런가사람이 모르는 것을 접할 때 기본적으로 생각하는 방향에 따라 생각 하는 것일 뿐입니다.즉, 사람들이 Java와 JavaScript를 같은 것으로 오해하는 이유는 주로 인지적 작용과 언어적 연상에서 기인 하는 것이다. …

클릭 및 방문자 체크 할때 사용하는 쿠키관리

중복된 처리를 제외하고자 할때 일정 부분 쿠키로 가지고 있다가 비교해서 동일한 것은 처리 하지 않기 위한것입니다.이것을 쿠키를 이용하는 방법이 있고 요즘은 로컬스토리지를 이용하는 방법도 있겠습니다. 특정 게시물의 번호나. 방문자의 로그를 저장하여 처리 하는 경우는 중복 처리 방지를 위한 간단한 방식 입니다.게시물의 경우 중복제외 처리를 하지 않으면 들쑥 날쑥 하지만 최고 30% 넘게 차이나는 경우도 있었습니다. <!DOCTYPE html> <html> <head> <title>Click Event Test</title> </head> &l…

[Jquery] 날짜 달력 datepicker(데이트티커)

블로그에 있는 datepicker는 안되는것이 많아서 사용할 일이 있어서 완성한것 올립니다.jquery는 버전이 다르면 안될 수 있으니 버전을 맞우는것이 중요하며 아래 순서도 중요합니다.jquery를 이용하기 때문에 jquery-ui가 아래에 있어야 한다는 것입니다. 그리고 jquery-ui 압축 파일을 받으면 아래와 같이 CDN 이용하지 않고 사이트에 올려 놓고 사용할 수 있으며 압축 파일 안에 아래 cdn 링크 걸린 모든 파일과 더불어 필요한 다른 파일들도 같이 모두 들어 있습니다. 같이 사용되는 jquery 도 별도 디렉토리에 있습니다.△ 아래 달력 datepicker(데이트티커)minDate 사용하면 적용한 이…

[NodeJS] node express, pm2 설치 하는 방법

Node Express는 Node.js와 Express.js를 결합하여 웹 애플리케이션 개발에 사용되는 프레임워크입니다. 이를 통해 비동기적인 서버 측 코드 작성과 HTTP 요청 및 응답 처리 등 다양한 웹 개발 작업을 보다 쉽게 처리할 수 있습니다. 1) 간단하게 띄울 프로그램을 하나 준비 서버가 잘 작동하는지 확인을 할 수 있는 간단한 프로그램을 준비 하도록 합니다.자신이 하는것이 디비커넥션이 들어가게 되면 이 부분도 간단하게 CRUD 프로그램 하나 준비 하면 됩니다. const express = require('express'); const app = express(); const port = …

[NodeJS] 현재 디렉토리에 node_modules이 없는 경우

-g 옵션을 주어 글로벌로 설치한것이 아닌데 현재 디렉토리에 node_modules이 없고 다른곳에 설치 된경우는 아래처럼 초기화하면 package.json 파일이 생성 되고 현재 디렉토리에 node_modules 디렉토리가 생기면서 설치 됩니다. 아래와 같이 초기화 후 설치 하면 됩니다. npm init -y npm install express 그리고 초기화 했는데 안되는 경우는 시스템 로그인할때 홈 디렉토리나 또는 기본적으로 있어야할 스크립트 등이 없는 경우는 아닌지 살펴 보면 됩니다.예를 들면 bash shell의 경우 로그인 하면서 실행 되는 스크립트 들이 있습니다. 파일명은 .(점) 으로 시작하기 때문에 숨…

[NodeJS] /usr/bin/env: node 파일이 없다고 할 때

실제 파일은 있는데 없는다는 메시지가 나올 경우는 PATH 설정 값을 확인해 봐야 합니다.만약 whereis env 했는데 있다면 로그인할 때 실행되는 파일에 PATH 설정을 추가해 주면 됩니다./usr/local/nodejs/bin/npm install yarn/usr/bin/env: node: 그런 파일이나 디렉터리가 없습니다위와 같은 오류가 발생 하는 경우는 경로를 추가해 주면 된다.vim /etc/bashrcexport PATH=$PATH:/usr/local/nodejs/bin이 경우는 nodejs를 압축파일을 받아서 별도의 디렉토리에 압축을 풀고 심복릴 링크 처리한 경우 입니다.

[nodejs] PDF파일 페이지 번호 없는 경우 페이지 자동으로 넣어주기

프로그래머가 아니라 일반인이면 PDF 페이지번호 추가해주는 사이트가 있으니 아래를 참고하시면 됩니다.https://tools.pdf24.org/ko/add-page-numbers#s=1687481961009여기선 nodejs와 pdf-lib 설치에 대해선 언급하지 않습니다.아래는 간단한 소스 입니다.PDF파일에 페이지 번호가 없어서 인쇄하는데 있어 페이지수가 적으면 문제가 안되지만 수십페이지만 되어도 읽을때 문제가 될 수 있습니다. 페이지가 바뀐다거나 아니면 인쇄할때 잘못되어 중간부터 인쇄할때 몇페이지 부터 인쇄해야 될지 찾는데 시간이 소요 될 수 있는 문제를 해결하려면 페이지번호가 들어가 있는것이 좋습니다. /** …

nodejs 문자열을 gzip으로 압축하기

chat GPT API를 통해서 물어본것에 대한 테스트 인데요.잘 되네요.별도의 모듈설치 없이 그냥 실행 되었습니다. 제가 전에 다른것 하면서 설치 되었는지는 확인 안해 봤습니다. // zlib 모듈을 불러온다. const zlib = require('zlib'); const fs = require('fs'); // 압축할 문자열 const str = '압축할 문자열'; // gzip으로 압축한다. zlib.gzip(str, (err, buffer) => { if (!err) { // 압축된 버퍼를 문자열로 변환한다. const gzip_base64 = buffer.toStrin…

[nodejs] 실행중인 현재 디렉토리 알아내기(_DIR_)

파일저장이나 또는 가져올때등 상대경로로 호출 하는 경우도 있지만때론 전체 경로를 알아야 되는 경우가 있습니다.그럴때 현재 디렉토리 기준으로 처리하면 좋은때 이럴때 사용 합니다. // 현재 디렉토리 const _DIR_ = process.cwd(); php의 __DIR__ 과 같은 역활 입니다.확인 결과 위 예제는 잘 되는 것입니다. 현재 V16 버전에서 문제 없었습니다.* 사용한곳은 아래 입니다. 파일을 저장할때 유용합니다. [nodejs] PDF파일 페이지 번호 없는 경우 페이지 자동으로 넣어주기 > javascript 버전 업그레이드가 심해서 안되는것 들이 종종 입니다.요즘 언어들 경쟁 붙었는지 …

[nodejs] 현재 실행중인 시스템 유저명 알아내기

현재 nodejs 실행중인 유저를 알아내기 위한 것입니다.같은 프로그램을 쉘에서 실행하기도 하고 웹서버를 통해서 실행하기도 합니다.그런 경우 파일을 쓰게 되면 문제가 발생합니다. import os from "os"; let osUser = os.userInfo().username; if ( osUser == 'root' ) { console.log('루트 유저: ', osUser); } else { console.log('osUser: ', osUser); } 발생되는 문제는 웹서버로 쓰면 웹서버 유저가 되지만시스템에서 실행하면 시스템에서 실행한 유저로 파일이 저장 되는데요.이때 시스템에서 실…

[jquery] ui 라이브러리에서 소트하는 기능(sortable)

아작스로 서버에 전송하는 기능까지 테스트 된것입니다.jQuery 버전에 따라서 ajax 전송하는 방식이 약간 다른 부분이 있으니 버전 참고하세요.본인이 현재 사용하는것과 여기 샘플의 버전이 비슷하면 문제가 되지 않을듯 싶습니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">…

[nodeJS] PDF-LIB 한글폰트 사용(Error: WinAnsi cannot encode )

백엔드의 PDF-LIB에서 폰트를 지정하지 않으면 오류가 발생 합니다.영문은 문제 되지 않지만 한글의 경우 오류를 만나게 됩니다.그렇기 때문에 커스텀 폰드를 지정해야 하는데 스탠다드폰트가 아닌 별도 폰트를 사용할 때 필요한 부분입니다.Error: WinAnsi cannot encode "한" 이러한 오류를 만나게 된다면 한글을 사용할 수 없는 폰트이기 때문입니다. // https://pdf-lib.js.org/#examples import { PDFDocument, StandardFonts, rgb } from 'pdf-lib' // Cannot import fontkit from @pdf-lib/fontkit…

자바스크립트 implode (문자열 합치기)과 http_build_query

특정 문자로 구분자를 줘서 문자열로 만들어주는 함수인데요PHP의 implode에 해당하는 기능입니다.배열의 경우는 간단하게 join 메소드를 사용하면 되는데요. 객체는 안되기 때문에 만들어진것입니다. let aa = { 'bb1' : 345, 'cc' : 23, 'ee' : 'abc' } let bb = ['name','2',33,5,'age']; /** * 문자열 구분자로 합치기 * * @param string gubun * @param object obj * * @return [type] * */ function implode( gubun, obj ) …

자바스크립트 파일 확장자 얻어내는 방법

파일명에서 파일의 확장자만 필요한 경우 사용합니다.자바스크립트 이긴 하지만 nodejs에서 사용해도 동일합니다.블라우저의 자바스크립트에서 사용하는 함수를 백엔드의 노드에서 사용해도 문제 없습니다. /** * 파일 확장자 * * @param string file * * @return [type] * */ function file_ext( file ) { let fileExt = file.split(".").pop(); fileExt = fileExt.toLowerCase(); return fileExt; } console.log('파일 확장자: ', file_ext('t…

json 문자열 객체(연관배열) 서로 변환 하기

다른 프로그램 언어와 데이터를 주고 받을때 많이 사용하는 json 문자열과 객체형태로 서로 변환하는 방법에 대한것입니다.여개서 객체는 연관배열로 생각하시면 됩니다.연관배열은 배열의 키 부분이 문자열이 들어갈 수 있는것을 말합니다. // json 문자열로 만들기 let oParm = { 'test' : 123, 'abc' : '345' }; console.log('-- 현재값 ----------------------------------------'); console.log(oParm); console.log(''); console.log('-- 문자열 ----------------…

자바스크립트 배열을 쿼리스트링으로( http_build_query )

PHP의 http_build_query 과 같은 것입니다.배열을 쿼리스트링으로 만들어 줍니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 배열 URL 쿼리스트링 생성 </title></head><scrip…

자바스크립트 URL 쿼리스트링(query string) 분리 (PHP _GET)

PHP에서의 _GET에 해당하는 형태로 URL의 쿼리 스트링을 분리해주는 함수 입니다.아래 두개 함수는 비슷한것으로 위쪽에 있는것만 사용을해도 됩니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 쿼리스트링 분리 </title&…

[jQuery] remove empty 삭제의 차이점(요소 자체와 안쪽을 삭제)

요소(엘리먼트) 또는 태그를 삭제하는 jQury 메소드에 대한 설명입니다.id값을 이용해서 자기자신을 포함해서 삭제하는 remove와자신은 그대로 둔 상태에서 안쪽(내용) 부분을 전체 삭제하는 empty의 차이점 입니다.<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &…

박스크기 동적으로 크기가 변할 때 같이 적용되게 하는 방법

자바스크립트에서 비율로 처리 해야 할 때 필요한 함수 입니다.픽셀로 전환을 다시 하거나 픽셀을 비율로 처리 하거나 서로 전환이 가능한 기능을 가집니다.픽셀은 고정된것이기 때문에 화면이나 특정 박스안에 있을때 동적으로 처리가 되지 않습니다. 변화된 크기에 따라서 위치나 크기가 같이 변하게 하려면 비율로 처리를 해야 하는데 그때 필요한 부분입니다./** * px to percent change * * @param mixed mode : px2per, per2px * @param mixed divWidth : 대상박스 가로 * @param mixed divHeight : 대상박스 세로 * @param …

[jquery] 여러개(다중) 클래스를 선택하고자 할때

페이지에 하나만 있는 ID를 선택자로 사용하면 좋은데 간혹 그렇지 못한 경우가 있습니다.이럴때는 class가 있을 경우 클래스를 선택자로 하는데 여러개가 한꺼번에 있을 때 AND 조건인 경우와 OR 조건인 경우에 해당 하는 것입니다. <div class="offcanvas-header navbar-shadow px-4 mb-3">위와 같이 여러개가 있을경우아래는 AND 조건이 되고. 그렇기 때문에 아래 모두 일치하는 엘리먼트를 삭제 하게 됩니다.$(".offcanvas-header.navbar-shadow.px-4.mb-3").remove();이번꺼는 OR 조건이 됩니다. 하나라도 일치 하는 것은 모두 없애는…

div box 글자의 픽셀(px) 구하는 방법(calculating-text-width)

원리를 알면 간단합니다.어떤것이든지 알고나면 간단핝데 알기전에는 정말 쉬원것도 모르면 답답한 법입니다.보통 이미지나 div 박스등은 가로 세로의 픽셀을 구할 수 있습니다.그런데 div 박스 안의 텍스트 글자의 전체 길이를 픽셀로 구하고 싶은 경우가 있는데요.이런 경우 사용하는 방법입니다.이는 가운데로 정렬 되어 있어도 크게 다르지 않습니다. 방법은 다음과 같습니다.박스를 두개 사용하는데 안쪽의 박스에는 TEXT 글자가 들어가 있고 span으로 감싸고 밖을 div나 또는 다른것으로 감싸면 됩니다.width = $(this).find('span:first').width();그리고 밖의 박스에서 위치와 가로세로 높이를 구합니…

div 또는 이미지 중첩 되었을때 안쪽의 크기

상대적으로 설정 되어 있거나 또는 다른 형태로든 관계 없이 박스와 박스의 사이의 간격을 알고 싶으면 각 박스의 값을 구해서 서로 빼 주면 간격을 알 수 있습니다.이미지 크기 또는 대상의 크기jQuery 에서 소수점포함(더 정확히) 알고자 할때는 아래를 사용한다..width() .outerWidth()이미지의 경우 화면에 보이는 렌더링된 크기가 아닌 원본 크기: prop('naturalWidth')소수점 없음: prop('offsetWidth') 바닐라 자바스크립트: domRect = element.getBoundingClientRect();jQuery: $("#"+id)[0].getBoundingClientRect(…

[jQuery] div태그 안쪽에 있는 input 찾아서 값을 가져오기

id값이 없을때 안쪽에 있는것 찾는 방법에 해당 하는것입니다.동적으로 생성되거나 할때는 id값을 일일이 주기 힘든 경우가 있습니다. 이럴때는 여러개 있어도 관계가 없는 class 를 이용하는것도 방법입니다. $(document).ready(function() { // div 안쪽에 input box가 있는데 id 값이 없을 때 // > 클래스를 하나 줘서 찾는 방법도 있다. id는 문서에서 유일해야 하지만 class는 여러개 와도 관계 없음. $("#inboxDiv").find("input").each(function() { console.log(this); // html 출력 console.…

[jQuery] 파일 확장자 체크하기

특정 파일만 받고자 할때 체크하는 방법입니다.확장자로 체크하는데 더 좋은것은 MIME로 체크하면 더 좋습니다.확장자는 얼마든지 변경할 수 있고 더 문제는 아무렇게나 확장자를 변경하는 경우도 있습니다.<script> $("#images").on("change", function(e) { var files = e.target.files; var filesArr = Array.prototype.slice.call(files); filesArr.forEach(function(f) { /* lastModified: 12345657890234 lastMod…

[jQuery] 텍스트박스 한쪽으로 입력하는 그대로 넣어주기

HTML의 form에서 인풋박스에서 jQuey를 이용한 데이터를 그대로 다른 인풋박스에 넣어주는 간단한 프로그램 입니다.키보드 입력에 대한것은 keydown 과 keyup이 있는데 입력한 정보를 얻을때는 keyup 입니다.눌린다음 올라올때 비로서 입력한 값을 얻을 수 있습니다. keydown도 감지는 되지만 입력된것을 얻을 수는 없습니다. <input type="text" name="test1" id="test1"><input type="text" name="test2" id="test2"><script> $("#test1").on("keyup", function(e) { le…

[jQuery] 첫번째 하위요소의 스타일 변경하기

jQuery를 이용한 태그의 하위요소중에서 첫번째 요소에 대한 스타일 속성을 변경하는 방법에 대한 것입니다.아래는 자바스크립트 변수로 처리 되었지만 테스트 할때는 상수를 넣어 해보시면 됩니다.아래와 같이 사용하면 됩니다. $( "#"+idname ).css( 'touch-action', status);$( "#"+idname + " > div:first-child").css( 'touch-action', status);● 참고한곳https://homzzang.com/b/jquery-52

배열 값 또는 인덱스로 삭제하기

요즘은 배열 보다는 객체로 많이 사용되기도 하는데요.배열을 삭제 하는 방법에 대한것입니다.기본적으로 있는 remove는 완전히 없어지는 것이 아니라 빈방으로 만드는 역활을 합니다.그렇기 때문에 갯수를 체크하면 생각과 다를 수 있습니다. 현재의 브라우저 버전에서도는 사용해서 문제 되지 않습니다. Array.prototype.removeByValue = function (val) { let arrRtn = this.filter(item => item !== val); return arrRtn; } // 0 부터 시작 한다 Array.prototype.removeByIndex = function ( …

[jQuery] 요소(태그) 복사 후 id변경 하기

jQuery를 이용한 방식이기 때문에 아래에는 명시 되어 있지 않지만 라이브러리 추가 해야 됩니다.확인하는 방법은 브라우저의 소스보기를 통해 가능 합니다. <div class="target" id="target1"> target 1 </div> <div id="source">source</div> <input type="button" value="clone replaceAll target 1" id="btn1" /> <script> $(document).ready(function() { $('#btn1').click(funct…

[jQuery] 상하로 움직이는 플로팅 메뉴(float menu)

스크롤 할때 움직이는 메뉴에 대한 것은 원리를 알면 본인의 상황에 맞게 수정이 가능합니다.보통 플로팅 메뉴 또는 플로팅배너 라고 합니다.스크롤 이벤트가 발생이 되면 그 위치 만큼 div박스의 top 위치를 변경시켜주는 방식 입니다.아래는 jQuery를 이용하였습니다.<script>// 화면 크기가 변경 되었 때$(window).resize(function( event ) { $(this).trigger('scroll'); });// 페이지 읽힌 다음 위치 설정$(document).ready(function() { // 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다. var floatPo…