js

[Javascript] setInterval, clearInterval setInterval 은 일정 시간마다 반복적으로 무언가를 행할 때 사용되며, clearInterval은 이것을 중지할 때 사용한다. 한번만 실행할 것이라면 timeout을 사용하는 것이 좋다. 시간 단위: ms // 3초마다 "안녕" 문구 출력 const polling = setInterval(() => { console.log("안녕"); }, 3000); // 중지 clearInterval(polling) clearInterval : www.w3schools.com/jsref/met_win_clearinterval.asp setInterval : www.w3schools.com/jsref/met_win_setinterval.as..

[Javascript] 호이스팅(hoisting) * 호이스팅? - '끌어올리다'라는 의미. - 변수 정보를 수집하는 과정을 더웃 이해하기 쉬운 방법으로 대체한 가상의 개념. > 출처: 도서 '코어자바스크립트' ⭐ 호이스팅 규칙: 함수 선언, 변수명을 위로 끌어올리고 할당과정은 원래 자리에 그대로 남겨둔다. ⭐ 아래 코드를 실행해보면 어떻게 될까? 한번 머릿속으로 예상해보자. var x = 1; console.log('x - (1): ', x); console.log('y - (1): ', y); console.log('a - (1): ', a); console.log('b - (1): ', b); console.log('c - (1): ', c); e(3); var y = 2; function a() ..

[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 4 context menu 드래그앤드롭(DragNDrop)기능을 사용하기 위해서는 dnd5모듈을 추가해야한다. dnd5 모듈을 이용해서 기본적인 기능은 가능하지만, 드래그앤 드롭시 목적지 폴더에 내가 옮기려는 파일과 이름이 같은 파일이 존재할 경우 예외처리를 추가하고자 한다. dnd5의 이벤트는 다음과 같다. dragStart : 드래그 이벤트 시작시 (마우스 누름) dragDrag : 드래그 이벤트 중 dragEnd : 드래그 이벤트 끝남 dragEnter : 드래그 이벤트 중 "over", "before, "after"..

[JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기 노드(node)의 이름(title)들이 줄 바꿈이 안되고 원하는 너비를 넘어가면 Scroll-X 가 생성되어 보여진다. 원래 아래 노드의 이름은 `개구리 - 복사본` 이지만 X축 스크롤이 생기고 화면상 짤려져보인다. X축 스크롤이 아닌, 글자가 자동 줄 바꿈이 되었으면 한다면 두 가지 방법이 있다. 먼저, 가장 간단한 방법은 css 속성을 이용하는 것이다. 방법1. css 속성 사용 span.fancytree-title { white-space: normal; } 방법1이 안 될 경우가 있다. 그러면 두 번째 방법인 rendernode를 통해서 해결할 수 있다. 방법2. fancytree 의 rendern..

[JavaScript] TreeView 사용하기 (fancytree) 사용하고자 하는 Tree 조건은 다음과 같았다. * Tree(트리) 사용 조건 방향키로 노드간 이동 가능해야 한다. shift, ctrl이용해서 다중 선택이 가능해야 한다. 폴더간 드래그 앤 드롭으로 이동이 가능해야 한다. 루트 노드는 이동 불가해야 한다. 자식노드는 자식노드 하위로 이동 불가해야 한다. 위 조건을 모두 만족하는 트리를 찾기 힘들었다. 처음에는 가장 많이 쓰는 라이브러리를 찾아 구현되어 있지 않는 조건들은 stackoverflow 나 git 등에서 찾아 기능을 추가하려고 했으나, 쉽지 않았다. 완성된 프로젝트에 트리 부분만 떼다 붙이려니 여러가지 오류가 발생했었다. jstree 가장 많이 사용함. 위 조건 모두 구현 가..

[Electron] img 태그 src="file://~" 경로에 존재하는 파일이 로드되지 않는 경우 해결 방법 1. 오류 WebRoot 경로 및 하위 폴더에 존재하는 이미지는 상대 경로로 입력하여 이미지를 불러올 수 있지만, 로컬에 존재하는 파일 또는 다른 서버에 존재하는 파일을 로드할 경우, 절대 경로로 입력해 주어야 한다. C:/나 D:/ 등 마운트된 디렉토리는 정상적으로 접근해서 이미지를 로드했지만, 외부(다른) 서버에 존재하는 파일을 파일은 존재한다고 출력은 되나, 이미지를 불러오지 못했다. 아래 코드를 실행해 보면 image1은 이미지가 보이지만, image2는 이미지가 보이지 않았다. const fs = require("fs"); var image1 = document.createElemen..