CATEGORIES
자바스크립트에서 동일한 노드(엘리먼트)가 다수 필요한 경우 어떻게 하면 DOM에 효과적으로 그릴 수 있을까요? HTML을 반복 사용하는 것도 가능하지만 자바스크립트를 사용하여 cloneNode() 함수를 사용할 수 있습니다. cloneNode()는 쉽게 엘리먼트, 노드를 복제하여 줍니다. 아래에서 자세히 알아봅니다.# 자바스크립트 cloneNode() 노드 복제하기똑같은 노드를 복제하여 만들 수 있는 방법으로 자바스크립트의 cloneNode() 함수가 있습니다. cloneNode()는 엘리먼트를 DOM에 복제하여 붙여넣기를 하면 동일한 기능을 수행하므로 코드를 간결하고 쉽게 만들 수 있죠. 이 함수는 생산성을 높여주는 함수로 알아두면 매우 간단하게 코드 구현이 가능합니다. 아래는 간단한 사용방법입니다.원하는
Last Modified : 2019-09-01 23:13:26똑같은 요소가 필요한 경우... 그래서 특정 요소를 복사해야한다면 제이쿼리에서 지원하는 clone() 메소드를 사용하여 간단하게 만들 수 있다. 간단하게 사용하는 방법은 아래와 같다.$(선택요소).clone();clone() 메소드는 단순하게 요소를 복사하는 것 뿐만 아니라 데이터 및 기능들도 함께 복사된다는 특징을 가지고 있다. 하지만 기본값은 false로 되어 있으며 만약 데이터 및 기능까지 복사하기를 원할 경우 매개변수에 true를 넣으면 된다.또 다른 특징으로는 clone() 메소드를 사용하면 가지고 있는 요소뿐만 아니라 그 안에 포함된 자식요소가 자동으로 모두 복사된다. 자식요소의 복사를 하지 않으려면 cloneNode() 자바스크립트 함수를 사용하는 방법이 있다.! clone() 예제소스 보기만약
Last Modified : 2016-01-06 01:11:26
만약 웹서버(Web Server)를 쉽고 빠르게 구축할 필요가 있는 경우 어떤 방법이 있을까요? 많이 사용되는 Nodejs 웹서버 구축 방법에 대하여 알아봅니다.제 경우는 급하데 프로젝트를 진행해야해서 퍼블리싱이 필요했습니다. 이때 서버 환경이 아니라면 스태틱한 파일(이미지, css, script)들의 경로를 모두 바꿔야하는 경우가 있을 수 있죠. 이런 경우 서버 구축 후 진행하면 편리하겠죠.# Why NodeJS Server음... node를 서버 구축하는 이유는 여러가지가 있습니다. 먼저 가볍고 쉽게 구축한다는 점이 장점이구요 자바스크립트를 알고 있다면 문법 이나 자료형등이 어렵지 않고 쉽게 배울 수 있습니다. 또 다른 이유라면 node를 사용한 유용한 툴, 라이브러리 또는 컴포넌트가 많기 때문입니다.
Last Modified : 2019-08-07 20:38:34npm을 최신버전으로 업데이트 하는 방법을 알아봅니다. 어떻게하면 최신버전으로 업데이트 할 수 있을까요?! npm을 최신버전으로 업데이트 해야하는 이유는?만약 npm이 최신 버전이 아닌 경우 디펜던시 등의 이유로 앱이 동작하지 않을 수 있습니다. 또한 개발환경을 맞추어 보다 안정적인 환경에서 개발하려면 최신 버전이 필요할 수 있죠. 이런 이유로 npm을 최신버전으로 유지하기 위해서 아래와 같이 가능합니다.(! npm 최신버전이 더 높은 버전의 node package 정보를 가졌기 때문에 가급적 npm 최신 버전 설치는 필수적입니다.)# npm 최신 버전으로 업데이트 방법그럼 npm의 버전 업데이트를 해보겠습니다. npm 버전은 크게 두 가지로 나뉘는데 latest와 next 버전입니다. 둘 다 다른 방법으로
Last Modified : 2019-01-08 01:14:35
nodejs에서 npm을 사용하여 여러가지 모듈을 쉽고 빠르게 설치할 수 있습니다. 이 때 npm을 사용하는데 아래에서 자세히 알아봅니다.nodejs는 사용할 모듈을 직접 설치해야합니다. 모듈 설치를 할 경우 node 밖에 실행해야하므로 만약 node 안에 있다면 Ctrl-D 키를 눌러 빠져나오도록 합니다.(이는 process.exit()와 같다) 이제 node shell에서 빠져나왔다면 다음 커맨드를 입력해 원하는 모듈을 npm을 통하여 설치할 수 있습니다. 그럼 npm이 무엇인지 간단하게 알아보겠습니다. # npm 이란 무엇인가?먼저 npm은 Node Package Manager로 nodejs에 필요한 모듈을 설치하고 관리하는 패키지 매니저입니다. 이 npm을 사용하여 nodejs를 위해 필요한 모듈을
Last Modified : 2020-09-21 16:06:45바로 위의 부모로부터 몇 번째 자식요소인지 자바스크립트를 사용하여 알아내는 방법입니다.function getIndex(selector) { var elem = document.querySelector(selector); for(var i = 0; i < elem.parentNode.childNodes.length; i++) { if (elem.parentNode.childNodes[i] === elem) { console.log('elemIndex = ' + i); } }}아래는 간단한 예제입니다.<ul> <li>0</li> <li id="test">1</li> <li>2</li></ul>위 코드를 사용하면 id값으로 test를 가진 li 태그가 부모가 가진 자식 요소 중에서
Last Modified : 2018-05-23 16:00:35설치된 node에 문제가 생긴 경우 지우고 다시 인스톨해야합니다. 윈도우에 사용하기 위해 node를 apt-get으로 설치했는데 어떤 문제인지 동작하지 않아 재설치가 필요하였습니다.(node의 정상 동작 여부는 쉽게 버전 확인으로 가능합니다. node -v)# linux에서 설치된 node 제거하기만약 apt-get으로 node가 설치된 경우라면 아래 방법으로 삭제가 가능합니다.sudo apt-get purge node참고로 파일을 직접 설치한 경우 해당 경로를 찾아 모든 파일을 제거하는 과정이 필요합니다. 이런 이유로 apt-get처럼 패키지를 사용하는 방법이 제거하는 과정에서도 매우 편리합니다.
Last Modified : 2017-10-30 23:57:39자바스크립트의 DOM 메소드 parentNode, parentElement의 차이점을 알아봅니다.먼저 이 둘의 차이점을 알아보는 이유는 이 둘이 거의 동일하게 동작하기 때문입니다. 둘 다 부모 요소에 접근해 엘리먼트를 리턴합니다. 이런 이유로 둘 중 어느 것이라도 사용할 수 있지만 차이점을 알아두면 더 좋겠죠.차이점을 알아보면 parentElement는 Element node를 반환한다는 점입니다. 여기서 element 타입의 node만 반환한다는 점이 parentNode와의 차이점입니다. 즉 반환되는 node가 엘리먼트가 아니라면 parentElement는 null을 반환하지만 parentNode는 해당 Node를 반환하게 됩니다.예를들어 아래 두 코드는 다른 리턴 값을 가지게 됩니다.document.do
Last Modified : 2020-08-04 15:04:14Mac에 node, npm을 설치하는 방법입니다.# Mac에 node, npm 노드를 설치하려면?리눅스나 윈도우 유저의 경우 apt 또는 apt-get 아니면 설치 프로그램을 실행해서 사용합니다. Mac도 비슷한데 node, npm 설치를 위해서는 Mac에서 가장 많이 쓰이는 패키지 매니저 brew를 사용하여 설치하는 것이 가장 쉽고 간단합니다. 그래서 brew를 사용하여 설치해봅니다. 만약 brew가 설치되어 있지 않다면 먼저 brew를 설치하도록 합니다.! brew를 사용하여 node, npm 설치하기brew가 설치되었다면 아래와 같이 업데이트를 먼저 한 뒤에 node를 설치하면 됩니다.> brew update> brew install node위와 같이 node를 설치하면 node와 npm이 모두 설치된
Last Modified : 2021-09-04 14:07:12Front 앱에서 axios를 사용하여 파라미터를 Body에 담아 서버에 전달하였습니다. 특별한 설정은 없으며 매우 단순합니다. 당연히 잘 동작할거라 생각했었지만 결과는 참담하게도 아무 값도 얻어오지 못했습니다.# Express Node 서버에서 body를 못가져오는 경우body가 아니라 다른데로 넘어오나? 메소드 문제인가? get, post, patch로 바꾸어보고 request의 query, params, body 모두 찾아보아도 빈 값으로만 전달됩니다. 아 ~ query string으로 전달하는 경우에만 res.query로 잘 전달되는 이상한 문제입니다.! 이슈 확인 후 문제 해결을 위해 검색뭐가 문제일까요? 수 많은 문서를 찾아봤으나 대부분 ajax, axios 설정 또는 nodejs express의
Last Modified : 2022-06-30 00:32:45