본문 바로가기

개발(Development)/JS(자바스크립트)80

[자바스크립트] 코드로 HTML에 다른 js파일을 로드하는 방법 보통 HTML 파일에서 js파일을 불러오려면, head 영역에 아래와 같이 script태그를 추가하고, src속성으로 js파일의 경로를 설정한다. - extra.js 파일 alert('extra.js 파일에서 띄운 팝업입니다'); *** 실행 결과 - 브라우저에서 실행하면 extra.js파일에 작성해둔 팝업이 뜨고, - 개발자도구로 보면 index.htm파일에 script 태그가 추가되어 있음을 알 수 있다. 이런 기법을 활용하면 프로그램 실행 중에도 원하는 타이밍에 JavaScript 코드를 통해 다른 자바스크립트 파일을 불러올 수 있게 된다. 2021. 7. 9.
[node.js] path 모듈 사용 방법 정리: 파일/디렉터리 경로 처리 node.js이 기본으로 제공하는 path모듈은 파일/폴더/디렉터리 등의 경로를 편리하게 설정할 수 있는 기능을 제공한다. 내 경우에도 node.js 개발 시에는 '안전하게' 경로를 설정하기위해 path모듈의 join(), resolve() 메서드는 꼭 활용하는 편이다. *** 참고: 현재 파일/디렉터리 경로 확인 방법은 아래 글 참고 [node.js] 현재 파일/디렉터리 경로 확인 방법: __filename, __dirname # path 모듈 사용 방법 : path는 node의 내장 모듈이므로 별도 설치 없이 바로 추출하여 사용할 수 있다. 0. 모듈 추출 방법 const path = require('path'); 1. path.sep : "현 운영체제의 경로 구분자" 확인 - 맥 /, 윈도우 \ c.. 2021. 7. 9.
[node.js] 현재 파일/디렉터리 경로 확인 방법: __filename, __dirname # node.js 현재 파일/디렉터리 경로 확인 방법 : node.js에서는 _filename으로 현재 파일의 정보, __dirname으로 현재 디렉터리의 정보를 확인할 수 있다. 1. __filename => 현재 파일 경로.확장자 console.log(__filename); // 출력결과 // /Users/curryyou/dev/VS_Code_Projects/node/test.js 2. __dirname => 현재 디렉터리(폴더) 경로 console.log(__dirname); // 출력 결과 // /Users/curryyou/dev/VS_Code_Projects/node 경로 설정을 편리하게 해주는 node.js의 내장 모듈 path에 대해서는 아래 글을 참고 2021. 7. 9.
[자바스크립트] JSON형식 직렬화/역직렬화 방법 # JSON(Javascript Object Notation) : 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷. : 자바스크립트의 객체처럼 키:값으로 구성되며, 각 객체를 배열로 묶을 수도 있다. : 문자열로된 키와 값은 큰따옴표("")로 감싸야 한다. // JSON 형식 const arr_JSON = [ { "name": "taeho", "age": 37, "major": "경제학", "hobby": "코딩" }, { "name": "eunjung", "age": 31, "major": "경영학", "hobby": "디자인" }, { "name": "curryyou", "age": 21, "major": "역사", "hobby": "글쓰기" }, ]; # JSON 내장 객체 : 자바.. 2021. 7. 9.
[자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법 보통 자바스크립트에서 텍스트를 클립보드에 복사하는 방법은 textarea, input[text]태그의 value값을 선택하여 document.execCommand('copy') 명령어를 실행하는 것이다. [자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 그런데 이 방법은 div, p, a, span 등 다른 태그의 내부 텍스트는 복사하지 못한다는 단점이 있다. 그래서 textarea를 가상(?)으로 생성하여 value값을 넣어서 복사하고, 다시 제거하는 방법을 사용한다. # div, p, a, h, span 등의 값을 클립보드에 복사하는 방법 1. 태그(div 등)의 내부 값을 취득 const valOfDIV = document.getElementById("div").textCon.. 2021. 7. 8.
[자바스크립트] 텍스트 클립보드 복사(copy)/붙여넣기 기능 구현 방법 # 자바스크립트 클립보드 복사 방법 : 복사할 텍스트를 선택하고, 클립보드에 복사하는 방식이다. 1. 복사할 텍스트 선택 1) 사용자가 직접 복사할 영역 선택(드래그)하거나, 2) 자바스크립트로 textarea, input[text]의 값(value) 전체 선택한다. textarea엘리먼트.select(); input[text]엘리먼트.select(); 2. 선택된 텍스트 복사 - document.execCommad('copy')코드는 선택(드래그)된 영역의 텍스트를 클립보드에 복사한다. document.execCommand('copy') - execCommand 를 대체하는 최신 Clipboard API 사용방법은 아래 글을 참고! [JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard A.. 2021. 7. 8.
[자바스크립트] HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부html 설정 방법 # 자바스크립트로 HTML엘리먼트 조작 window.document객체의 메서드로 HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부HTML 설정을 할 수 있다. 1. Element 생성 1) 요소 노드 생성 : document.createElement('태그') 2) 텍스트 노드 생성 : document.createTextNode('텍스트') 2. Element 추가 1) 자식으로 추가 : 부모노드.appendChild(자식노드) * 자식노드 : 요소노드 || 텍스트노드 3. Element 제거 : 부모노드.removeChild(자식엘리먼트) 4. Element의 속성 설정 1) 노드의 프로퍼티 확인/설정 : 노드.속성 / 노드.속성=값; * 지원 안되는 것들이 있음. 아래의 setter/gette.. 2021. 7. 7.
[node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법 # Socket.IO 모듈이란? socket.io는 소켓 구현시 필요한 다양한 편의기능을 제공하는 모듈로, 웹소켓이 지원되지 않는 브라우저에서도 작동하도록 내부적으로 구현해 준다. (ws 프로토콜이 지원되지 않는 경우, http 프로토콜로 반복적으로 서버와 통신하는 polling 방식을 이용한다.) 웹 소켓 자체 및 ws모듈에 대해서는 아래 글 참고! 전체 샘플코드는 글 하단에 첨부! Node.js: Web Socket 통신 - ws모듈 사용 방법 #1 socket.io 모듈 설치 - npm install socket.io #2 서버 측 socket.io 설정 작업 1. http 서버 생성 const app = require("express")(); const server = app.listen(3000.. 2021. 7. 6.
[자바스크립트] HTML 엘리먼트(태그/노드) 선택/취득 방법 # HTML 엘리먼트(태그/노드) 선택/취득 방법 브라우저 환경의 전역객체인 winodw의 documet객체에 정의된 메서드를 활용하여 HTML 노드를 선택하여 조작할 수 있다. # documet.getElement...종류 1. id로 1개의 엘리먼트 선택 window.document.getElementById('아이디') => HTMLxxxElement 반환 *window 생략 가능 2. class로 여러개의 엘리먼트 선택 document.getElementsByClassName('클래스') => HTMLCollection(이터러블) 반환 3.태그명으로 여러개의 엘리먼트 선택 document.getElementsByTagName('태그') => HTMLCollection(이터러블) 반환 # docum.. 2021. 7. 4.