본문 바로가기
코리아 IT아카데미/node.js~~~

2022_0112 | node 기초

by Sharon kim 2022. 1. 25. 

<!DOCTYPE html>
<html lang="en">
<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>setTimeout</title>
</head>
<body>
    <script>
     const hi = function(){
         alert('안녕하세요')
     };

     const st = window.setTimeout(hi,2000);//2초후 hi함수가 실행
     //setTimeout(실행함수, 시간)  시간이되었을때 한번만 실행
     //clearTimeout(st) setTimeout()실행중지
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>setTimeout</title>
        <!-- 01-2.html -->
</head>
<body>
    <script>
     const hi = function(){
         console.log('안녕하세요');
     };
     
     const clearInter =function(){
         console.log('hi함수가 중지되었습니다');
         clearInterval(si);
     }

     const  si= window.setInterval(hi, 2000); //2초마다 hi함수를 호출
     //setInterval(실행문,3000) 3초를 간격으로 실행
    </script>
    <button onclick = "clearInter()">자동실행중지</button>
</body>
</html>
[노드(node)]

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다.
HTML DOM은 노드들을 정의하고 그 사이의 관계를 설명해주는 역할을 합니다.
HTML 문서의 정보는 노드트리라고 불리는 계층적 구조에 저장됩니다.
노드트리는 최상위 레벨인 루트 노드로부터 시작하고,
가장 낮은 레벨인 텍스트 노드까지 내려갑니다.
HTML DOM을 이용하여 노트 트리에 포함된 모든 노드에 접근할 수 있습니다.

노드의 종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소(태그)의 노드, 속성 노드를 포함하는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 모든 텍스트
주석 노드(comment node) : HTML 모든 주석


노드간의 관계
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드
노드 추가
appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData() : 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가

<!DOCTYPE html>
<html lang="en">
<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>
        <!-- 02-0.html -->
</head>
<body>
 <h2>노드의 추가</h2>
 <p id="item1">자바스크립트</p>
 <p id="item2">PHP</p> 
  <hr/>

 <div id="list">
     <p id="js">node.js</p>
     <p>react</p>
 </div>
 <hr/>
 
 <p id="text">지금 시간은 오전 9시 30분입니다</p>
 
 <button onclick="appenNode()">노드추가1</button>
 <button onclick="insertNode()">노드추가2</button> 
 <button onclick="appendText()">텍스트추가</button> 
 <script>
   'use strict';
    const appenNode = function(){
        const parent = document.getElementById('list');
        const newItem = document.getElementById('item1');
        parent.appendChild(newItem);
    }
    const insertNode = function(){
        const parent = document.getElementById('list');
        const js = document.getElementById('js');
        const newItem = document.getElementById('item2');
        parent.insertBefore(newItem,js);
    }
    const appendText = ()=>{
        const text = document.getElementById('text').firstChild
        text.insertData(7, " 수업 시작한지 30분째인 ");
    }
 </script>  
</body>
</html>

노드 생성
createElement() : 새로운 요소 노드를 만듬
createAttribute() : 새로운 속성 노드를 만듬
createTextNode() : 새로운 텍스트 노드를 만듬

<!DOCTYPE html>
<html lang="en">
<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>
      <!-- 02-1.html -->
</head>
<body>

 <h2>노드의 생성</h2>
 <p id="el">새로운 문장이 이 문장 앞에 추가됩니다</p>
 <p id="attr">이 단락에 새로운 속성이 추가됩니다</p>
 <p id="text"></p>
 
 <button onclick="createNode()">요소 노드 생성</button>
 <button onclick="createAttr()">속성 노드 생성</button> 
 <button onclick="createText()">텍스트 노드 생성</button> 
 <script>
   'use strict';
    const createNode = function(){
        const elNode = document.getElementById('el');
        const newNode = document.createElement('p');//<p></p>생성
        newNode.innerHTML="<b>새로운 요소 입니다</b>"//<p><b>새로운 요소 입니다</b></p>
        document.body.insertBefore(newNode, elNode)
    }

    const createAttr = function(){
       const attr = document.getElementById('attr');
       const newAttr = document.createAttribute('style');// style=""
       newAttr.value = 'color:white; background-color:deeppink;';
              // style="color:white; background-color:deeppink;"
       attr.setAttributeNode(newAttr);     
    }
  
    const createText = () => {
       const textNode = document.getElementById('text');
       const newText = document.createTextNode('새로운 텍스트입니다');
       textNode.appendChild(newText);
    }
 </script>  
</body>
</html>

노드 제거
removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거. 성공적으로 노드가 제거되면 노드를 리턴. 노드가 제거될 때 제거되는 노드의 모든 자식들도 다같이 제거
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거

css- 요소노드 삭제 / 핑크 bg - 속성 노드 삭제

<!DOCTYPE html>
<html lang="en">
<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>
      <!-- 02-2.html -->
</head>
<body>
 <h2>노드의 삭제</h2>
 <div id="list">
    <p>HTML</p>
    <p id="item">CSS</p>
    <p id="js" style="background-color: deeppink; color:white;">javaScript</p>
 </div>

 <button onclick="removeNode()">요소 노드 삭제</button>
 <button onclick="removeAttr()">속성 노드 삭제</button> 
 <script>
   'use strict';
    const removeNode = function(){
       const parent = document.getElementById('list');
       const removeItem = document.getElementById('item');
       const result = parent.removeChild(removeItem);
       console.log(result);
    }

    const removeAttr = function(){
        const js = document.getElementById('js');
        js.removeAttribute('style');
    }
 </script>  
</body>
</html>

노드 교체
replaceChild() : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있음
replaceData() : 텍스트 노드의 텍스트 데이터를 교체할 수 있음

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- 02-3.html -->
</head>
<body>
 <h2>노드의 교체</h2>

 <div id="parent">
    <p id="first"></p>
    <p>김사과</p>
    <p>오렌지</p>
    <p>반하다</p>
 </div>
 <p id="second">이메론</p>
 <hr/>
 <p id="text">제가 좋아하는 과일은 사과입니다</p>

 <button onclick="changeNode()">요소 노드 교체</button>
 <button onclick="changeText()">텍스트 노드 교체</button>
 <script>
   'use strict';
    const changeNode = function(){
         const parent = document.getElementById('parent');
         const first= document.getElementById('first');
         const second = document.getElementById('second');
         parent.replaceChild(second, first);
    }

    const changeText = function(){
        const text = document.getElementById('text').firstChild;
        text.replaceData(12,5,'메론이었나');
        //replaceData(글자위치,수정할글자수,'수정할 내용');
    }
 </script>  
</body>
</html>

* 동기와 비동기
프로그램이 동작하는 상태에서 완전히 해당 내용을 끝내고 다음으로 제어를 넘기는 방식을 동기식, 
동작이 끝나지 않은 상태에서도 제어권을 넘긴 후 프로그램을 계속 진행하면 비동기식이라고 합니다.

예외 처리(Exception)
프로그램이 실행되고 있는 런타임시에 에러가 발생할 경우 처리할 수 있는 프로그램 구간을 의미합니다.

try {
    예외 상황이 발생할 수 있는 문장
    ....
    ....
}catch(e){
    예외 상황이 발생했을 경우 처리할 문장(e는 Exception 객체)
}finally{
    예외 상황이 발생하거나 발생하지 않아도 무조건 실행될 문장(생략가능)
}

<!DOCTYPE html>
<html lang="en">
<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>
        <!--  03-0.html -->
</head>
<body>
 <h2>동기와 비동기_비동기식</h2>
 
 <script>
   'use strict';
    
   setTimeout(function(){
       console.log('todo: First work!');
   },3000);

   setTimeout(function(){
       console.log('todo: Second work!');
   },2000);

   // 결과 
    // todo: Second work!
    // todo: First work!
 </script>  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>
    <!--  03-1.html -->
</head>
<body>

 <h2>동기와 비동기_동기식</h2>
 
 <script>
   'use strict';
    
   setTimeout(() => {

       setTimeout(() => {
           console.log('todo: Second work');
       }, 2000);

       console.log('todo: first work');
   }, 3000);

   
// 결과 
// todo: First work! 
// todo: Second work!
 </script>  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>
        <!--  03-2.html -->
</head>
<body>
 <h2>동기와 비동기_사용자 정의 함수 동기식</h2>
 
 <script>
   'use strict';
    function fakeSetTimeout(callback){
        callback()
    }

    console.log(0);

    fakeSetTimeout(function(){ console.log('hello');});
    //var callback = function(){ console.log('hello');}

    console.log(1);
   
  //출력결과
  //0
  //hello
  //1

 </script>  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>동기식과 비동기식_api 비동기식 처리</title>
            <!--  03-3.html -->
</head>
<body>
 <h2>동기와 비동기_사용자 정의 함수 동기식</h2>
 
 <script>
   'use strict';
    
   console.log(0);

   setTimeout(() => {
    console.log('hello');
   }, 0);//0이란 숫자값은 0초이지만 대기시간을 의미하기때문에 다음에 실행함

   console.log(1);

   //setTimeout(실행함수, 대기시간) 웹브라우저에서 제공하는 API

   //실행결과
   //0 
   //1
   //hello
 </script>  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>
        <!--  03-4.html -->
</head>
<body>
 <h2>동기와 비동기_일반 비동기 함수</h2>
 
 <script>
   'use strict';
    
   function work(sec, callback){//템플릿
       setTimeout(function(){
        callback(new Date().toISOString());
       }, sec * 1000);
   }

   work(1, function(result){
       console.log('첫번째 작업', result);
   });

   work(1, function(result){
       console.log('두번째 작업', result);
   })
   
   work(1, function(result){
       console.log('세번째 작업', result);
   })
 </script>  
</body>
</html>

결과 위와 동일

<!DOCTYPE html>
<html lang="en">
<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>
        <!--  03-5.html -->
</head>
<body>
 <h2>동기와 비동기_ 동기 처리</h2>
 
 <script>
   'use strict';
    
   function work(sec, callback){//템플릿
       setTimeout(function(){
        callback(new Date().toISOString());
       }, sec * 1000);
   }
   
   work(1, function(result){
       console.log('첫번째 작업', result);

        work(1, function(){
        console.log('두번째 작업', result);

            work(1, function(){
                console.log('세번째 작업', result);
            });
        });
   });
    
 </script>  
</body>
</html>

결과 위와 동일

<!DOCTYPE html>
<html lang="en">
<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>
                <!--  03-6.html -->
</head>
<body>
 <h2>동기와 비동기_ 동기 처리</h2>
 
 <script>
   'use strict';
    
   function work(sec, callback){//템플릿
       setTimeout(function(){
        callback(new Date().toISOString());
       }, sec * 1000);
   }
   
   work(1, function(result){
       console.log('첫번째 작업', result);

        work(1, function(){
            work(1, function(){
                console.log('세번째 작업', result);
            });

            console.log('두번째 작업', result);
        });
   });
   //덜 겹쳐진 순서대로 나온다. (1->2->((3))) 
 </script>  
</body>
</html>

text 정리

[노드(node)]

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다.
HTML DOM은 노드들을 정의하고 그 사이의 관계를 설명해주는 역할을 합니다.
HTML 문서의 정보는 노드트리라고 불리는 계층적 구조에 저장됩니다.
노드트리는 최상위 레벨인 루트 노드로부터 시작하고,
가장 낮은 레벨인 텍스트 노드까지 내려갑니다.
HTML DOM을 이용하여 노트 트리에 포함된 모든 노드에 접근할 수 있습니다.

노드의 종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소(태그)의 노드, 속성 노드를 포함하는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 모든 텍스트
주석 노드(comment node) : HTML 모든 주석

노드간의 관계
parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

노드 추가
appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData() : 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가

노드 생성
createElement() : 새로운 요소 노드를 만듬
createAttribute() : 새로운 속성 노드를 만듬
createTextNode() : 새로운 텍스트 노드를 만듬

노드 제거
removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거. 성공적으로 노드가 제거되면 노드를 리턴. 노드가 제거될 때 제거되는 노드의 모든 자식들도 다같이 제거
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거

노드 복제
cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성

[복제할 노드].cloneNode(자식노드 복제여부);
자식노드 복제여부 : 전달될 값이 true면 복제되는 노드의 모든 속성과 자식 노드도 함께 복제되고, false면 속성 노드만 복제하고 자식 노드는 복제하지 않음

노드 교체
replaceChild() : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있음
replaceData() : 텍스트 노드의 텍스트 데이터를 교체할 수 있음
 
* 동기와 비동기
프로그램이 동작하는 상태에서 완전히 해당 내용을 끝내고 다음으로 제어를 넘기는 방식을 동기식, 
동작이 끝나지 않은 상태에서도 제어권을 넘긴 후 프로그램을 계속 진행하면 비동기식이라고 합니다.

예외 처리(Exception)
프로그램이 실행되고 있는 런타임시에 에러가 발생할 경우 처리할 수 있는 프로그램 구간을 의미합니다.

try {
    예외 상황이 발생할 수 있는 문장
    ....
    ....
}catch(e){
    예외 상황이 발생했을 경우 처리할 문장(e는 Exception 객체)
}finally{
    예외 상황이 발생하거나 발생하지 않아도 무조건 실행될 문장(생략가능)
}

 

'코리아 IT아카데미 > node.js~~~' 카테고리의 다른 글

2022_0126 | node ejs, jade, remail(0124)  (0) 2022.01.26
2022_0124 | 0119와 내용 중복  (0) 2022.01.26
2022_0119 | 미들웨어 실행, postman, Nodemon, Router 미들웨어, Router 객체 생성  (0) 2022.01.26
2022_0117 | FileSystem 모듈, http 모듈, 시스템 이벤트, 익스프레스 모듈  (0) 2022.01.25
2022_0114 | 노드 오류와 예외처리  (0) 2022.01.25

관련글

티스토리툴바