javascript 3 페이지
회원가입
로그인
전체메뉴열기
검색열기
PHP(웹프로그램)
AWS.클라우드
리눅스.서버(MySQL,Apache)
개발관련
양식.서식 파일
javascript
HTML
CSS
회원가입
로그인
PHP(웹프로그램)
AWS.클라우드
리눅스.서버(MySQL,Apache)
개발관련
양식.서식 파일
javascript
HTML
CSS
사이트 내 전체검색
검색어 필수
검색
javascript
전체 98건
3 페이지
[nodejs] Warning: To load an ES module, set "type": "module" in the package.json or use th…
간간히 사용하게 되는데 오류가 발생한 부분입니다.Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.(Use `node --trace-warnings ...` to show where the warning was created)잘 읽어보면 어떻게 하라고 나와 있습니다.그러면 그렇게 해주면 됩니다.패키지 관리에 대한 부분으로 현재 디렉토리 기준으로 독립적으로 처리 하기 위해서 존재를 하는 파일인 package.jso 파일에 추가를 해주면 됩니다.vim package.json "type": "modul…
[jQuery] div 태그의 높이 구하는 방법
높이를 구하기 이전에 div 태그에서 테두리로 사용 되는것과 마진, 패딩 까지 포함할것인가? 그 안쪽에 있는것만 사용할것인지 명확하게 ㅇ알고 있어야 합니다.물론 픽셀이 몇 픽셀 되지 않으면 무시하고 사용해도 문제가 안되는 경우가 많이 있을 수 있습니다. 패딩은 겨울에 입은 패딩을 생각하고마진은 밖에서 남기는 것으로 밖에 있는것이라고 생각하면 좀 외우기 쉽습니다.jquery.height() : 안쪽 높이jquery.innerHeight() : 내부높이 + 패딩jquery.outerHeight() : 내부높이 + 패딩 + 테두리jquery.outerHeight(true) : 내부높이 + 패딩 + 테두리 + 마진* 참고한곳h…
[nodejs] 얼굴 부분만 잘라주는 프로그램(smartcrop-cli) 이미지 크롭
쉘에서 실행하는 CLI 프로그램 입니다.이미지 크기가 커서 섬메일을 만들때 그냥 자르면 얼굴이 있는 경우 원하지 않는 결과물을 얻는 경우가 있습니다.그래서 원본을 그대로 줄이면 홀쭉한 사람 얼굴이 되거나 뚱뚱한 얼굴로 보여주는 경우도 있습니다. 사람 얼굴이 있다고 판단 되는 경우 그 주변을 자동으로 잘라 주는 프로그램 입니다.이 프로그램은 CLI 로 실행하는 프로그램이긴 하지만 nodejs가 설치 되어 있어야 사용 가능합니다.1) 아래명령으로 설치를 합니다.npm install -g smartcrop-cli2) 픽사베이 같은곳에서 얼굴이 보이는 이미지를 하나 받아서 아래와 같이 테스트 해보면 됩니다.smartcrop -…
자바스크립트로 png 힌색 부분을 투명으로 만들기
자바스크립트를 이용한 png 이미지의 바탕화면 부분이 힌색인 경우 투명으로 만들어 주는 프로그램 입니다.* 자바스크립트로 png 힌색 부분을 투명으로 변경아래 샘플은 완전한 힌색일경우 알파값을 0으로 변경하여 투명으로 변경하는 예제 입니다.<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> body { background-color: #00f; margin: 0px; padding: 0px; } </style> <scr…
자바스크립트 라이브러리 펜으로 사인하는 signature_pad
signature_pad 라이브러리를 이용해서 캔버스에 사용자가 사인을 한것을 다른 이미지로 복사하는 샘플 입니다.아래에서 PNG 이미지의 경우 투명한것 때문에 jpg 사용하지 않는 것이기 때문에 아래 부분의 끝에 반드시 0이 들어가야 합니다.backgroundColor: 'rgb(255, 255, 255, 0)',이 샘플에서는 PNG 저장을 클릭하게 되면 base64로 된 이미지가 img01의 id인 이미지로 들어가서 그대로 보이는 예제 입니다.아래처럼 페이지가 로드된 다음 기본적인게 실행되게 해야 오류가 없는 페이지를 만날수 있습니다.<!DOCTYPE html><html lang="en"><…
jQuery-ui 드래그 드랍( draggable droppable )
jQuery를 이용한 드래그와 드랍에 관한 것입니다.아래 샘플에서 경로가 로컬로 되어 있는것은 찾아서 필요한 위치에 있어야 합니다.여기선 파일에 대한 부분은 다루지 않고 예제에 있는것을 쉽게 확인이 가능하도록 만들어진 샘플 입니다.참고할 수 있도록 F12 디버깅 모드에서 마우스 움직임에 따라서 어떤 이벤트가 발생 하는지 쉽게 알 수 있도록 모두 표시가 되어 있습니다.drop 에서 over 부분에서 체크를 하게 되는것은 약 50% 들어가게 되면 작동을 합니다.containment 명령을 통해서 박스를 벋어나지 못하게 하는 설정이 들어 있습니다. 그러면 없애는 방법은? 직접 만들어야 합니다.박스에 들어가면 작동을 하는지 알…
[nodejs] node:internal/modules/cjs/loader:936 오류가 발생한 경우
nodejs 쉘에서 실행을 합니다. 아래와 같이 node /home/test.js이랬을때 오류가 발생한 경우인데요. 바빠서 인지 이런것은 만들때 조금만 신경써 주면 좋을텐데요~node:internal/modules/cjs/loader:936 throw err; ^Error: Cannot find module '/home/act.js'이건 파일이 없어서 발생하는 오류 입니다. 위 예에서는 /home/test.js 파일이 없어서.. 이런면 오류를 발생 시킬게 아니라 파일이 없다고 한줄 보여주면 좋을 텐데요프로그램에 오류가 있는것 처럼 오류를 발생하니 에디터에서 엄한것이 있는지 확인해 봅니다. 경로가 잘못되서 발생한 문제…
[nodejs] scss 컴앤드라인(CLI) 실행하기
# 설치nodejs 및 npm 패키지 관리자는 미리 설치 되어 있어야 한다.만약 여러버전의 node를 사용하여 왔다 갔다 한다면 말이다. 그때 마다 다시 설치를 해줘야 한다.npm install -g node-sass# CLI 사용방법node-sass input.scss output.css프롬프트에서 위와 같이 실행을 하면 생성 됩니다. 점점 복잡해지는 웹. 기능이 많아진다는 것인데. 힘들어진다 웹---- 아래와 같은 오류가 발생 한다면 ----gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/root/.nvm/version…
[nodejs] sleep 함수 사용하기(잠깐 쉬는 기능)
php에서의 usleep와 비슷한 기능입니다. 또는 sleepusleep는 마이크로 타임입니다.이런것도 내장함수로 만들어 주면 좋을텐데 ... 언어특성이 있는것 무시하고 웹브라우저가 아닌 경우 감안하여 만들어 주면 좋을 텐데 ...npm을 통해 설치하는 sleep가 작동하지 않으면 아래것 사용하면 됩니다.보시다 시피 단위는 밀리초 입니다.보통 1초를 하려면 1000 10초이면 10000 이렇게 하지만 눈에 잘 안들어옵니다.그래서 1초면 1222 10초면 10222 이렇게 뒤쪽에 구분이 가는 숫자를 아무거나 넣어 주면 가독성이 좋아 집니다. 우리는 사실 일반적으로 잠깐 쉬게 하고 싶을때는 1초나 1.2초나 관계 없잖아요.…
[nodejs] 일점 범위의 난수값 가져오기(랜덤값)
php에서 rand()에 해당하는 함수 입니다.nodejs에선 아래와 같이 보통 많이 사용 합니다.let rand = getRandomint(10, 200);이렇게 사용할 경우 10에서 200사이 숫자중 아무거나 하나 리턴 받게 됩니다.function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min;}이런 흔히 많이 사용하는것은 언어 특성 무시하고 내장함수로 만들어 주면 좋을텐데.. 고집이란~
nodejs ERR_INVALID_ARG_TYPE 오류
예전에 문제 없던것인데 문제가 발생 합니다.형변환을 하면 되는데 우선 간단하게 오래된 습관으로 + '' 해서 문자열로 만들어 주는 방법을 사용 해도 되는데요.제가 발생한 부분은 아래와 같습니다.숫자를 받아 들이지 않네요.!!fs.writeFileSync(pid_file, process.pid + '', 'utf-8');node:internal/errors:465 ErrorCaptureStackTrace(err); ^TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedAr…
json 및 중첩배열 처리 방법에 대해서 잘 나와 있는곳
배열 json 중첩에 대해서 잘 나와 있는곳다양한 형태로 예제가 잘 되어 있습니다.https://rateye.tistory.com/424const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]}; function toArray(obj) { const result = []; for (const prop in obj) { const value = obj[prop]; if (typeof value === 'object') { …
자바스크립트 2차원 배열 사용 하는 방법. 문자 인덱스
누구든 그렇겠지만 본인이 주 언어로 사용하던 언어대로 프로그램을 다른언어에서도 그대로 사용하고 싶은 그런것이 있습니다. 이 부분은 그래서 찾은 것인데요. PHP에서는 연관배열이라고 합니다. 문자가 인덱스로 들어가는 것입니다. 딕셔너리라고 하기도 하고 이런 비슷한 형태를 사용하려면 json 으로 해도 되는 경우가 있습니다.* 배열 문자 인덱스 - 자바스크립트 2차원 배열 사용 하는 방법.물론 아래는 PHP의 배열과는 많이 다르지만 기존에 하던 논리를 적용할 수 있는 구조 입니다. var array = [ {text:'abcd',number:1234}, {text:'efgg',number:5678} ]; …
nodejs 파일크기 구하는 방법(filesize)
php에서 filesize 함수에 해당 하는것입니다.아래 처럼 여러가지 형태로 사용이 가능 하다.if ( fs.existsSync(file) ) { var aStats = fs.statSync(file) var filesize = aStats['size']; var filesize = aStats.size; console.log(aStats); console.log('filesize: ' + fs.statSync(file).size);}echo '123' > 1.txt # node test.js Stats { dev: 40, mode: 33188, nlink: 1, uid…
nodejs에서 프로그램 종료 하는 방법
php에서 exit;에 해당하는 기능입니다.process.exit()실패코드로 종료하고 싶을때는 process.exit(1);너무 간단하지만. 몰라서 찾음.그리고 한동안 안쓰다가 또 몰라서 찾음.
nodejs 파일이 있는지 체크하는 방법(is_file)
● 파일이 있는지 체크 하는 방법 var is_file = 0; fs.stat(data_file, (err,stats) => { if ( stats.isFile() ){ is_file = 1; console.log('stats.isFile(): ' + stats.isFile()); } }); console.log('is_file:' + is_file + "\n"); // 함수로 만들어 사용 /** * 파일이 있나 * * @param string filepath * * @return bool * */ function isFileSync(filepa…
nodejs 파일 읽기/쓰기(저장) 하는 방법
◆ 파일을 읽는 방법 입니다.동기적으로 파일 읽기 const data = fs.readFileSync("package.json", "utf-8"); console.log(data);이렇게 캐릭터셋 지정하기 않고 읽어도 된다.const dataBytes = fs.readFileSync(file);◆ 아래는 파일 쓰는(저장) 하는 방법import fs from "fs";...... var file = './result.txt'; fs.writeFile(file, dataBytes, (err) => console.log(err)); fs.writeFile(file, dataBytes, function(err) …
nodejs SyntaxError: Cannot use import statement outside a module 오류
import { mydql, db } from 'mysql';^^^^^^SyntaxError: Cannot use import statement outside a module아래처럼 추가해 주면 된다. 패키지 json 파일을 열어서 아래 처럼 추가 해준 후 저장하면 됩니다.# vim package.json { "type": "module", "dependencies": { "mysql": "^2.11.1" }}
nodejs ReferenceError: fetch is not defined 오류가 발생 할때
const dataBytes = fetch(url).then(res => res.arrayBuffer()) ^ReferenceError: fetch is not defined이런 경우는 fetch가 브라우저에서 사용 되는것이라서 쉘에서 사용 할때는 아래를 추가해 주면 된다.* 모듈 설치npm install node-fetch* 프로그램 상단에 아래를 추가import fetch from "node-fetch";위에서 보듯이 npm install node-fetch 를 쉘에서 인스톨을 해준다음 사용하면 됩니다.프로그램은 위에서 임포트 해준것 이외에는 수정하지 않고 사용…
NVM(Node Version Manager) 이용한 NodeJS 설치방법
nodejs 현재 안정적인 버전이 뭔지 알아보기https://nodejs.org/ko/#sudo yum install gcc-c++ makehttps://github.com/nvm-sh/nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash/etc/bashrc 파일 최 하단에 아래를 추가해 준다.export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm[ -s "$NVM_DIR/bash_completion"…
요소 셀렉터(ID)값을 변경 하는 방법
● 속성 값 변경 하기$clone.$('#invo99').attr("id", "newID");$('#'+cidname).attr("id", cidname + '_new');console.log('변경확인: ', document.getElementById(cidname + '_new'));위와 같이 요소 셀렉터(ID)값을 변경 하는 방법이 있는데요. 변수를 사용해서 동적으로 변경이 가능 합니다.여기서 주의할것은 위에 id 라고 되어 있는것은 상수 입니다. 고정된 id 라는 속성에 대한 것입니다. 그리고 두번째 파라미터에 값이 들어 가는 것입니다.그러니까 id에 해당하는것이 old의 이미가 아니라는 것입니다. old에 해당…
데이터를 시각적으로 보여주는 라이브러리
D3.js 는 데이터를 시각적으로 보여주기 위한 JavaScript 라이브러리입니다. D3 는 HTML, SVG 및 CSS를 사용하여 데이터에 생명을 불어넣는 데 도움이 됩니다. 웹 표준에 대한 D3의 강조는 강력한 시각화 구성 요소와 DOM 조작에 대한 데이터 중심 접근 방식을 결합하여 독점 프레임워크를 유연하게 최신 브라우저에 모든 기능을 제공합니다.● 데이터를 시각적으로 보여주는 라이브러리 사이트https://d3js.org/
jQuery 여러개의 박스 겹치지 않게 만들기
id 값을 다르게 하여 만드는 샘플 입니다.jQuery 여러개의 박스 겹치지 않게 만들기 할때 글로벌 변수를 하나 생성하고 이 값을 만들때 마다 변경하는 방식을 사용하여 서로 다른 선택자가 되게 생성을 하는 방식 입니다.<!DOCTYPE html><head> <meta charset="UTF-8"> <title>여러개 만들기</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"></head><script src="/…
jQuery 이미지 리사이즈(resize) 샘플
이미지 리사이즈 샘플 입니다.특이점은 이미지를 직접 resize 하는 것이 아니라 밖에 감싸고 있는 div를 이용해서 리사이즈 하면서 크기가 변경 되면 실시간으로 img 태그의 이미지의 크기를 변경 처리 합니다.이미지 resize 시작할때와 마무리(멈춤 - 끝났을때) 테두리를 변경해 줍니다.<!DOCTYPE html><head> <meta charset="UTF-8"> <title>apply_resize</title> <style> .segrip { width: 12px; height: 12px; …
jQuery 이미지를 마우스 드레그(draggable) 하는 샘플
테스트 할때 잘 발생하는 문제는 버전이 서로 맞지 않아서 생기는 문제 입니다.샘플도 중요하지만 각 프러그인에 서로 호환되는 버전을 사용 했는지 jQuery 사이트에서 확인하는 습관이 중요 합니다.아래는 간단하게 마우스 드레그 하는 샘플 입니다. 아래 예제의 특징은 이미지를 움직이는데 이미지를 직접 움직이는 것이 아니라 밖에 감싸고 있는 DIV를 사용 한다는 것입니다.<!DOCTYPE html><head> <meta charset="UTF-8"> <title>apply_draggable</title> <link rel="stylesheet" hre…
하위 노드,요소(엘리먼트) 전체 확인하여 ID값 출력하기
간혹 특정 ID(선택자)에 속한(하위) 전체를 확인하고 싶을 때가 있습니다.동적으로 생성되는 경우 더더욱 그렇습니다.<script>function getNextNodesIn(node, includeWhitespaceNodes){ var textNodes = [], nonWhitespaceMatcher = /\S/; function getNextNodes(node) { /* 1: 요소-엘리먼트 2: 속성 3: 텍스트 8: 주석노드 */ if (node.nodeType == 1) { for (var i = 0, len = node.childN…
[nodejs] MySQL 커넥션 접속 후 데이터 가져오는 샘플
절차적으로 실행 되도록 테스트 되어진 nodejs용 MySql 커넥션 후 데이터 가져오는 샘플 입니다.다른 언어를 사용해 봤다면 몇가지 문법적인 것만 익히면 어렵지 않습니다.코드를 간결하게 하는 부분은 좀 사용을 해야 가능 할듯 합니다./* * sleep.sleep(n): sleep for n seconds * sleep.msleep(n): sleep for n miliseconds * sleep.usleep(n): sleep for n microseconds (1 second is 1000000 microseconds) */var fs = require('fs');var sleep = req…
jQuery 이미지사이즈 변경하기 - 콘솔출력(실제 이미지크기 확인하기)
많이 사용 되는 jQuery를 사용한 이미지 크기 변경 방법 입니다.여기에선 현재 이미지 태그에 적혀 있는 width와 height의 값을 가져오는 것과 실제 보여지는 이미지의 크기를 가져오는 것이 있습니다. 아래 사진을 보면 토마토색에 대한 보더가 위 아래 들어가 있어 그 만큼 빠짐을 알 수 있습니다.아래 소스를 확인하시면 위에 출력 된것이 어떤 것인지 더 쉽게 알 수 있습니다.소스에서 // 된부분은 https:// 이것으로 변경처리 해야 합니다. (여기서 링크 처리 때문에 변경해서 등록)<!DOCTYPE html><html lang="ko"><head> <title>jQu…
[리엑트] 1) 사용해야 되는 이유와 사용하는곳
리엑트 왜? 사용해야 되는가?새로고침 없이 처리가 되는 인스타그램, 페이스북 같은것을 생각하면 되는데 이런 사이트를 유심히 보면 주소가 변경되지 않고 어떤 내용이 변경 됩니다.SPA(싱글 페이지 어플리케이션) 웹앱 이라고 칭한다. 실제 스마트폰의 앱과 큰 차이가 없다. 그렇기 때문에 모바일로 발생하기가 쉽다. 앱처럼 뛰어난 UX를 방문자에게 보일 수 있다. 쇼핑몰에선 일반적인 사이트 보다 결제율이 높기도 하다 - 문법이 어려운 문제가 있다.아래와 같은 순서로 이루어 집니다.첫째 개발환경설정 입니다. 이부부분 처음에 그대로 따라 하는것이 좋습니다.둘째 HTML처럼 생긴 JSX 문법에 대한 소개 입니다.셋째 변수와…
[리엑트] 2) 개발환경 구축하기(vscode 에디터, nodeJS 설치)
리엑트 사이트에서 시작하기를 통해 nodejs를 설치하는것이 어디 있을것 같은데왜? 숨겨 놓았는지 찾을 수 없습니다.시작하기 > 설치에 있어야 할것 같은것이 보이질 않습니다. 생각의 뇌구조가 달라 제가 찾지 못한것일 수 있습니다.보기엔 바뀌는 과정에서 기존에 사용하는 방법에 대한 설명이 없어서 인것 같기도 하지만 새로 시작하시는 분에게 도움이 될만한것은 아니라고 보여 집니다.https://ko.reactjs.org/docs/getting-started.html설치는 아래 순서대로 nodeJS와 에디터인 vscode 설치를 하시면 됩니다.작성한 다음 드디어 찾았습니다. https://ko.reactjs.org/doc…
처음
1
페이지
2
페이지
열린
3
페이지
4
페이지
맨끝
게시물 검색
검색대상
제목
검색
상단으로