[멋쟁이사자처럼] 프론트엔드스쿨 7기 - 31일차 기록 및 복습 (JSON, DOM)

---

목차

1. JSON

2. DOM

3. 직무분석

---

1.  JSON

1-1. JSON(JavaScript Object Notation)

- 자바스크립트 객체 형식으로 데이터를 표현하는 문자 기반의 표준 포맷

- 문자형 또는 숫자형으로 입력해야하면 쌍따옴표를 생략할 수 없다.

- 다른 방식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용된다.

- 쉽게 말해 텍스트로 표현된 정보의 덩어리이다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기 - Web 개발 학습하기 | MDN

 

1-2. 탄생 배경

- 프로그래머들은 언어마다 다른 표현방식 때문에 정보를 전달하는데 애를 먹는다.

- 배열 데이터의 표현 방식은 자바스크립트와 C언어는 다르다.

- 숫자와 문자열은 언어마다 표현방식이 같은데 이를 이용해서 만든 대표적인 데이터 폼이 XML 이다.

- XML 도 마크업 언어이다. (태그를 사용함)

- 후에 복잡한 구조를 더 단순히 하고자 탄생한 것이 JSON 이다.

 

1-3. JSON 메서드

- JSON.parse() : JSON문자열을 자바스크립트 객체로 변환

- JSON.stringify() : 자바스크립트 객체를 JSON 문자열로 변환

const json = '{"result": true, "count":42}';
const obj = JSON.parse(json);
console.log(obj);

- 배열도 지원한다.

const json2 = '[1,2,3,[1,2,3]]';
const arr = JSON.parse(json2);
console.log(arr);
console.log(arr instanceof Array); // [인스턴스] instanceof [생성자 함수]

- JSON 문자열로 반환하기

const obj2 = { result: true, conut: 42 };
const json3 = JSON.stringify(obj2);
console.log(json3);
console.log(typeof json3);

- 얕은 복사는 데이터가 저장된 있는 주소를 참조

- 깊은 복사는 참조를 하지 않고 데이터 값만 복사한 복제

// JSON을 이용한 깊은 복사
// l 객체를 문자열화 했다가 다시 객체로 변환하기 때문에 새로운 객체를 생성하는것과 동일합니다. 하지만 함수는 제대로 복사가 불가능하다는 단점이 있습니다. 제대로된 깊은 복사를 위해서는 structuredClone 메소드를 사용해야합니다.
let l = [10, 20, 30];
let a = JSON.parse(JSON.stringify(l)); // 문자열을 토대로 새로운 객체 생성
a[0] = 1000;

console.log(l);

// Ajax 통신을 통해 슈퍼히어로 Json 데이터를 받아봅시다!

- 하지만 이제 새로운 StructuredClone() 함수가 나왔다
(https://developer.mozilla.org/ko/docs/Web/API/structuredClone)

let l2 = { ten: 10, twenty: 20, thirty: { forty: 40 } };
// let a2 = JSON.parse(JSON.stringify(l));
let a2 = structuredClone(l2);
a2[0] = 1000;

console.log(l);

- Ajax 통신을 통해 슈퍼히어로 Json 데이터를 받아온다.

- Ajax 통신은 절차적으로 실행되지 않고 비동적으로 실행된다.

let jsonObj = {};

function xhrRequest() { // Ajax
    const requestObj = new XMLHttpRequest();
    requestObj.open('GET', 'heros.json'); // 포트를 연다 ('통신방법', '서버 주소')
    requestObj.send(); // 서버에 보내기
    requestObj.onreadystatechange = () => {  // 서버와 클라이언트 통신 상태가 변경되면 실행함 (비동기)
        if (requestObj.readyState === 4 && requestObj.status === 200) { // 클라이언트 상태 && 서버 상태
            jsonObj = JSON.parse(requestObj.responseText);
        }
    }
}
xhrRequest();

- 최신 Ajax 는 다른 비동기 키워드를 사용한다.

async function fetchRequest() {
    const response = await fetch();
    const jsonData = await response.json();
}

2. DOM

2-1. DOM (Document Object Model)

window 객체 (브라우저) 출처: WENIV (제주코딩베이스캠프)

- JavaScript가 돌아가는 플랫폼은 호스트(host)라고 부른다. 호스트는 브라우저, 웹서버 등이 될 수 있다.

- 각 프랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, JS 명세서에서는 이를 호스트 환경(host environment)라고 부른다.

- 호스트 환경은 랭귀지 코어(ECMAScript)에 더하여 플랫폼에 특정되는 객체와 함수를 제공한다.

- 예를들면 웹 브라우저는 웹 페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공한다.

- 위 그림은 호스트 환경이 웹 브라우저일 때, 사용할 수 있는 기능을 개괄적으로 보여준다.

- 최상단엔 window 라 불리는 '루트' 객체가 있다. window 객체는 2가지 역할을 한다.

   (1) 전역 객체

   (2) '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공한다.

- BOM* API 를 이용한 객체 탐색 (window.location, window.navigator, window.devicePixelRatio)
* Browser Object Model, BOM은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다. (출처: 모던 JavaScript)

console.log(window.navigator.userAgent); // 현재 사용 중인 브라우저 정보
console.log(window.navigator.platform); // 브라우저가 실행 중인 운영체제 정보
console.log(window.location); // 현재 URL

- alert/confirm/prompt 역시 BOM의 일부이다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이다.

- 문서 객체 모델 (Document Object Model, DOM)은 HTML 문서의 내용을 트리 형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 웹 페이지 내의 모든 콘텐츠를 객체로 나타내며 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node)라고 한다.

- document 객체는 페이지의 기본 '진입점' 역할을 한다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 생성할 수도 있다.

- document == HTML 문서

document.head
document.body
document.body.childNodes
document.body.childNodes[1]
document.body.childNodes[1].tagName
document.body.childNodes[1].innerText
document.body.childNodes[1]. //점만 찍어서 얼마나 많은 애트리뷰트가 있는지 확인해보세요.
document.body.childNodes[2]
document.body.childNodes[2].data

 

2-2. DOM 트리에 접근하기

- document 객체를 통해 HTML 문서에 접근이 가능하다. DOM 트리의 진입점 역할을 수행한다.

// 해당하는 Id를 가진 요소에 접근하기
document.getElementById();

// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();

// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");

// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");

- 원하는 DOM 요소 찾아보기 (진입점을 무조건 dom 에서 시작하지 말자)

<body>
    점심 식단
    <article id="container">
        <ul>
            <li>탕수육</li>
            <li class="item-second">유산슬</li>
            <li>짜장면</li>
        </ul>
    </article>
    저녁 식단
    <article>
        <ul>
            <li>된장국</li>
            <li class="item-second">김치찌게</li>
            <li>해장국</li>
        </ul>
    </article>
    <script>
        const lis = document.getElementsByTagName('li');
        const lis2 = document.getElementsByClassName('item-second');

        const container = document.getElementById('container');
        const innerLis = container.getElementsByTagName('li');
    </script>
</body>

- querySelector();  는 탐색결과의 첫번째를 선택한다.

- querySelectorAll();  탐색결과 모두를 선택한다.

- document.getElementsBy~ 의 리턴값 : HTMLCollection

- document.querySelector() 의 리턴값 : NodeList

- HTMLCollection과 NodeList 는 모두 배열과 비슷한 객체(array-like object) 형태를 가집니다. 때문에 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다는 공통점이 있지만, 가장 큰 차이점은 해당 객체에 포함될 수 있는 (1) DOM 요소의 유형입니다.

 > HTMLCollection은 HTML만 포함하지만,

 > NodeList는 모든 유형의 DOM 요소 즉, text, 주석 등을 모두 포함합니다.

또 다른 차이점은 (2) 객체를 구성하는 값이 변경 가능한지 여부입니다. HTMLCollection은 실시간으로 업데이트되며, 해당 객체의 각 속성에 대한 변경 사항이 즉시 반영됩니다. 반면에, NodeList는 정적이므로 해당 객체에 대한 변경 사항은 즉시 반영되지 않습니다.

마지막으로 (3) 사용할 수 있는 메소드가 다릅니다. NodeList는 forEach 같은 배열 메소드를 사용할 수 있지만 HTMLCollection은 또 다른 기능을 지원합니다.

- 프로그램이 의도한 대로 움직여야하므로 Live DOM 으로 실시간 반영이 필요하면 HTMLCollection을 사용하고,

- 원래 의도대로 그대로 있길 바라면 NodeList를 사용한다.
(성능 문제가 생길 수 있기 때문에 querySelector 를 통해 NodeList 사용을 권장한다.)

- react.js 탄생 배경도 DOM 의 위와 같은 일관성 없는 모습이기 때문이다.

 

2-3. DOM 제어 명령어

- target.addEventListener( type, listener (콜백) 함수 ) 문법의 형태

- 이벤트 리스너에 들어가는 콜백 함수를 이벤트 핸들러(event handler)라고도 한다.

<body>
    <button>Hello!</button>
    <script>
    // 이벤트의 타입에는 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지합니다.
	// listener 함수의 인수에는 이벤트에 대한 정보가 담겨있습니다.

	const myBtn = document.querySelector("button");

	myBtn.addEventListener('click', function(){
	console.log("hello world");
	})
    </script>
</body>

- classList 객체를 통해 요소의 class 속성을 제어할 수 있다.

- 실습

See the Pen DOM-Color-Changing-btn by redcontroller (@redcontroller) on CodePen.

실습 내용

- NodeList API: forEach 는 IE에서 지원을 하지 않는다. (babel 쓰지 않으면 사용 불가)

 

2-4. 다음 시간

- 이벤트의 흐름이 조금 이해하기 어려울 것

 

5. 잡담

5-1. 함께 보는 직무분석

- 모집기간이 한정되어야 연락이 빠르다. 수시모집은 보내도 응답이 없거나 느리다.

- 자격요건에 경력을 요구하더라도 지원해라, 나머지 요건만 채워라

- 팀장님 마다 사용하는 프레임워크가 다르다.

- 인프라는 신경 안써도 된다.