Javascript의 WebAPI 기초 - [AI + 웹개발 취업캠프, 정보통신산업진흥원(NIPA)]

wish17·2023년 7월 27일
AI교육AI웹개발취업캠프IT개발캠프JavaScriptNIPAwebapi개발자부트캠프개발취업캠프백엔드유데미정보통신산업진흥원취업캠프프로젝트프론트엔드
0

[NIPA] Ai + 웹개발

목록 보기
9/23

직접 제작한 그림, 사진이 아닐 경우 출처를 링크로 첨부합니다.
해당 그림, 사진을 클릭해서 확인하세요.

Javascript의 WebAPI 기초문법

Web API의 Document 객체

Document 객체

  • 웹 페이지 그 자체를 의미
  • 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작

Document 메소드

  • Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

HTML 요소의 선택

메소드설명
document.getElementsByTagName(태그이름)해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name속성값)해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)해당 선택자로 선택되는 요소를 모두 선택함.

HTML 요소의 생성

메소드설명
document.createElement(HTML요소)지정된 HTML 요소를 생성함.
document.write(텍스트)HTML 출력 스트림을 통해 텍스트를 출력함.

HTML 이벤트 핸들러 추가

메소드설명
document.getElementById(아이디).onclick = function(){ 실행할 코드 }마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함.

HTML 객체의 선택

객체설명
document.body<body>요소를 반환함.
document.cookieHTML 문서의 쿠키(cookie)를 반환함.
document.domainHTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함.
document.forms<form>요소를 모두 반환함.
document.images<img>요소를 모두 반환함.
document.linkshref 속성을 가지는 <area>요소와 <a>요소를 모두 반환함.
document.referrer링크(linking)되어 있는 문서의 URI를 반환함.
document.title<title>요소를 반환함.
document.URLHTML 문서의 완전한 URL 주소를 반환함

DOM의 요소를 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다.
자바스크립트에서 특정 HTML 요소를 선택하는 방법은 아래와 같다.

DOM (Document Object Model)

  • 웹 페이지를 프로그래밍 언어로 조작할 수 있게 해주는 인터페이스
  • 웹 페이지의 구조를 표현하는 방법으로, HTML과 XML 문서를 계층적인 트리 구조로 표현한다.
    • 이 트리의 각 노드는 객체를 나타내고, 객체는 속성(properties), 메서드(methods), 그리고 이벤트(events)를 가질 수 있다.
  • DOM을 이용하면 자바스크립트와 같은 스크립팅 언어를 통해 웹 페이지의 내용과 구조를 동적으로 변경할 수 있다.
  • 웹 페이지에 interactive한 기능을 추가하기 위해 주로 사용한다.

HTML 태그 이름(tag name)을 이용한 선택

  • document.getElementsByTagName() 메서드를 사용하면, 해당 HTML 태그 이름을 가진 모든 요소를 선택할 수 있다.
  • 반환 값으로 NodeList를 반환한다.
var paragraphs = document.getElementsByTagName('p'); // 모든 <p> 태그를 선택함

아이디(id)를 이용한 선택

  • document.getElementById() 메서드를 사용하면, 해당 아이디를 가진 요소를 선택할 수 있다.
  • HTML 문서 내에서 아이디는 유일해야 하므로, 이 메서드는 단일 요소를 반환한다.
var uniqueElement = document.getElementById('my-id'); // 아이디가 'my-id'인 요소를 선택함

클래스(class)를 이용한 선택

  • document.getElementsByClassName() 메서드를 사용하면, 해당 클래스를 가진 모든 요소를 선택할 수 있다.
  • 반환 값으로 NodeList를 반환한다.
var elementsWithClass = document.getElementsByClassName('my-class'); // 클래스가 'my-class'인 모든 요소를 선택함

name 속성(attribute)을 이용한 선택

  • document.getElementsByName() 메서드를 사용하면, name 속성값이 일치하는 모든 요소를 선택할 수 있다.
  • 반환 값으로 NodeList를 반환

CSS 선택자(selector)를 이용한 선택

  • document.querySelector()와 document.querySelectorAll() 메서드를 사용하면, CSS 선택자에 일치하는 요소를 선택할 수 있다.
  • querySelector()는 일치하는 첫 번째 요소를, querySelectorAll()은 모든 요소를 선택한다.
var firstElement = document.querySelector('.my-class'); // 클래스가 'my-class'인 첫 번째 요소를 선택함
var allElements = document.querySelectorAll('.my-class'); // 클래스가 'my-class'인 모든 요소를 선택함
  1. HTML 객체 집합(object collection)을 이용한 선택
  • HTML 문서의 일부 요소 집합은 이미 미리 정의된 HTML 컬렉션으로 접근할 수 있다.
    • ex) document.forms를 사용하면 문서 내의 모든 <form> 요소에 접근할 수 있다.
  • HTML 객체 집합을 이용한 선택 방법은 주로 HTML 문서의 특정 유형의 요소 집합에 접근할 때 사용된다.
var allForms = document.forms; // 문서 내의 모든 <form> 요소를 선택함

HTML DOM의 Node

  • HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.
    HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.
이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.
자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함 된 모든 노드에 접근할 수 있다.

HTML 문서를 구성하는 대표적인 노드의 종류

노드 종류설명
문서 노드
(document node)		HTML 문서 전체를 나타내는 노드임.
요소 노드
(element node)		모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임.
속성 노드
(attribute node)		모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.
텍스트 노드
(text node)		HTML 문서의 모든 텍스트는 텍스트 노드임.
주석 노드
(comment node)		HTML 문서의 모든 주석은 주석 노드임.

노드 간의 관계를 이용하여접근하는방법

Node PropertyDescription
parentNode해당 노드의 부모 노드를 참조한다.
childNodes해당 노드의 자식 노드들의 리스트를 참조한다.
firstChild해당 노드의 첫 번째 자식 노드를 참조한다.
lastChild해당 노드의 마지막 자식 노드를 참조한다.
nextSibling해당 노드의 바로 다음에 위치한 형제 노드를 참조한다.
previousSibling해당 노드의 바로 이전에 위치한 형제 노드를 참조한다.
nodeName해당 노드의 이름을 반환한다. 요소 노드의 경우, 이는 태그 이름이다.
nodeValue해당 노드의 값을 반환한다. 이 값은 노드의 유형에 따라 달라진다. 예를 들어, 텍스트 노드의 경우, 이는 노드의 텍스트 내용이다.
nodeType해당 노드의 유형을 나타내는 코드를 반환한다. 예를 들어, 요소 노드의 경우, 이 값은 1이다.

childNodes 프로퍼티 주의사항 참고

<!DOCTYPE html>
<html>
<body>
    <p id="paragraph">Hello World!</p>
    <p>OpenAI is great!</p>
    <p>ChatGPT is really smart!</p>
    <script src="script.js"></script>
</body>
</html>
// 첫 번째 p 요소를 선택한다.
var p = document.getElementById("paragraph");

// parentNode 프로퍼티
console.log(p.parentNode.nodeName);

// childNodes 프로퍼티
console.log(p.childNodes.length);

// firstChild 프로퍼티
console.log(p.firstChild.nodeValue);

// lastChild 프로퍼티
console.log(p.lastChild.nodeValue);

// nextSibling 프로퍼티
console.log(p.nextSibling.nodeName);

// previousSibling 프로퍼티
console.log(p.previousSibling);

// nodeName 프로퍼티
console.log(p.nodeName);

// nodeValue 프로퍼티
console.log(p.firstChild.nodeValue);

// nodeType 프로퍼티
console.log(p.nodeType);

노드 간의 관계를 이용하여접근하는방법

노드 리스트(node list)

HTML 문서의 요소들을 배열처럼 다루는 객체

  • 특정 요소나 조건에 따라 선택된 모든 노드를 저장하며, 이들은 순서대로 접근 가능하다.
  • getElementsByTagName() 메소드나 childNodes 프로퍼티를 이용해 노드 리스트를 얻을 수 있다.
  • 노드 리스트는 실시간으로 업데이트 된다. 이는 원본 HTML 문서가 변화할 때 노드 리스트도 그 변화를 바로 반영한다는 것을 의미한다.
  • 노드 리스트 내의 각 노드는 0부터 시작하는 인덱스를 이용해 접근할 수 있다. 이는 배열과 유사한 방식으로 노드를 다룰 수 있게 한다.
var pList = document.getElementsByTagName("p"); // 모든 <p> 요소를 선택
for (var i = 0; i < pList.length; i++) { // 선택된 모든 <p> 요소를 순회
    console.log(pList[i].textContent); // 각 <p> 요소의 텍스트 내용을 출력
}

과제

1. 노드 최신화가 콘솔창에 반영되는 것에 관한 고찰

html 문서 앞에 <script> 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element를 가져와졌는지 이유에 대해서 알아보시오.

<!DOCTYPE html>
<html lang='ko'>
<head>
    <meta charset='UTF-8'>
    <title>JavaScript DOM Element</title>
    <script>
        //HTML 태그 이름을 이용한 선택
        console.log('aaa')
        var selectedItem = document.getElementsByTagName('li');     // 모든 <li> 요소를 선택함.
        console.log(selectedItem) // 얘는 로그 찍히는 것 처럼 보인다.
        console.log(selectedItem.length) // 얘는 안찍힌다.
        for (var i = 0; i < selectedItem.length; i++) { // 실제로 selectedItem.length를 받아오지 못해서 색도 안바뀐다.
            selectedItem.item(i).style.color = 'red';
            console.log(selectedItem.item(i));
        }
    </script>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
    <ul>
        <li>첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
        <li>네 번째 아이템이에요!</li>
        <li>다섯 번째 아이템이에요!</li>
    </ul>
    <script>
        // 원래 여기에 적는게 맞다.
    </script>
</body>
</html>

위 코드의 경우 var selectedItem = document.getElementsByTagName('li');을 body가 로드되기 전에 읽어지는 헤더에 적어 뒀기 때문에 원래대로라면 객체를 찾아오지 못해야한다. 그리고 실제로 selectedItem.length를 받아오지 못해서 색도 안바뀌며 selectedItem.length는 콘솔창에 0으로 찍히는 것을 확인할 수 있다.

그런데 헤더에 위치한 console.log(selectedItem)는 정상적으로 값을 가져와 5개의 <li>를 콘솔창에 나타내고 있다. 도대체 왜 그럴까??

(1) Answer

HTML 문서는 위에서 아래로 해석되는데, 이는 스크립트 코드도 마찬가지다. <script> 태그를 HTML의 <head>에 위치시키면, 그 스크립트는 HTML 문서의 나머지 부분이 아직 로드되지 않은 상태에서 실행된다. 따라서 <head> 태그 내에 위치한 JavaScript 코드가 실행되는 시점에서는 아직 <body> 태그 내의 DOM 요소들이 생성되지 않았으므로, 해당 DOM 요소를 선택하거나 조작할 수 없다.

이 코드의 경우, <head> 내부에 위치한 스크립트는 아직 <body> 내부의 <li> 요소들이 생성되지 않은 상태에서 document.getElementsByTagName("li")를 호출하므로, 선택된 요소가 없다. 그래서 console.log(selectedItem)의 출력 결과는 비어있는 NodeList가 되며 console.log(selectedItem.length)는 0으로 콘솔창에 남는다.

즉, console.log(selectedItem)과 console.log(selectedItem.length) 두가지 모두 다 읽어지는 당시에는 값을 제대로 가져오지 못하는게 맞다!!

하지만 노드 객체는 웹 페이지의 상태에 따라 실시간으로 변경된다. 따라서 페이지가 로딩됨에 따라 selectedItem 노드 객체의 값은 최신화 된다. 하지만 console.log()는 일반적으로 실행되는 시점에서의 값을 출력하기 때문에 최신화 된 노드 객체의 값이 안보이는게 정상인데 왜 보이는걸까?

console.log()는 일반적으로 실행되는 시점에서의 값을 출력하는 것이 맞지만 console.log(selectedItem)은 HTMLCollection 객체에 대한 참조를 출력하는 것으로, 이 참조는 실시간으로 동적인 페이지 상태를 반영한다. (브라우저의 기능)
(selectedItem.length은 객체가 아니라 숫자 데이터 타입의 값이라 동적 상태를 반영하는 기능을 브라우저가 지원하지 않는다.)

따라서 브라우저의 기능 떄문에 웹 개발자 도구의 콘솔에서 로그가 호출된 시점 이후에 로드된 DOM 요소들이 업데이트 되어 볼 수 있는 것이다!!!

  • 객체 타입의 값은 동적 반영이 된다!!

2. Web-API 실습

Web-API를 이용하여 본인의 웹사이트의 기능을 구현한 후 코드와 작동되는 화면을 영상 또는 스크린샷을 찍어서 첨부하기

Answer

https://eunjin.site
배포 주소에서 직접 확인 가능합니다.

<script>

  $(document).ready(function () {
  show_comment();
});
function save_comment() {
  let name = $('#name').val()
  let comment = $('#comment').val()

  $.ajax({
    type: "POST",
    url: "https://eunjin.site/comments",
    data: {'name': name, 'comment': comment},
    success: function (response) {
      alert(response["msg"])
      window.location.reload()
    }
  });
}
function show_comment() {
  $('#comment-list').empty()
  $.ajax({
    type: "GET",
    url: "https://eunjin.site/comments",
    data: {},
    success: function (response) {
      let rows = response;
      for (let i = 0; i < rows.length; i++) {
        let name = rows[i].name;
        let comment = rows[i].comment;

        let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
        $('#comment-list').append(temp_html)
      }
    }
  });
}
</script>

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
#정보통신산업진흥원 #NIPA #AI교육 #프로젝트 #유데미 #IT개발캠프 #개발자부트캠프 #프론트엔드 #백엔드 #AI웹개발취업캠프 #취업캠프 #개발취업캠프

profile
wish17
.
이전 포스트

JavaScript, NodeJS 기초 (3) - [AI + 웹개발 취업캠프, 정보통신산업진흥원(NIPA)]

다음 포스트

childNodes 프로퍼티 주의사항

0개의 댓글