6주차부터는 우리가 직접 하나의 웹을 만들어볼 수 있는 twittler 기간이 시작되었다!
twittler는 그동안의 과제와는 다르게 하나의 서비스를 직접 구현해볼 수 있는 과제이다보니 가장 기대가 됐다.
6주차에는 HTML과 CSS에 대해 배우며 내가 나타내고자 하는 바를 어떻게 웹에 표현할 수 있는지(HTML), 또 그것을 보기 좋게 하기 위하여 어떻게 디자인할 수 있는지(CSS)에 대해 알아보았는데, 그렇다면 7주차에는 어떤 것들을 배우게 될까?
이번 주차에는 6주차에 배운 내용을 토대로 웹을 더욱 동적으로 만들기 위한 내용과 문법들을 배워보았다.
그럼 먼저 7주차 화요일 세션에 배운 내용들을 살펴보도록 하겠다.

- DOM(Document Object Model)

<body>
    <div id="practice" class="highlight red">
        여기 엘리먼트가 하나 있습니다.
        <span>자식도 있습니다.</span>
        <span>자식이 여럿 있습니다.</span>
    </div>
</body>

위와 같은 HTML 구조에서, div#practice에 대해 다음과 같이 표현할 수 있다.

속성 속성에 대한 값
태그 이름 div
id practice
class highlight, red
안쪽에 담긴 내용 여기 엘리먼트가 하나 있습니다. <span>자식도 있습니다.</span> <span>자식이 여럿 있습니다.</span>
부모 엘리먼트 body
자식 엘리먼트 span, span

또, 위의 HTML 엘리먼트를 Javascript로 표현한다면 아래와 같이 나타낼 수 있을 것이다.

{
  tagName: 'DIV',
  id: 'practice',
  classList: ['highlight', 'red].
  textContent: '여기 엘리먼트가 하나 있습니다. 자식도 있습니다. 자식이 여럿 있습니다.',
  parentElement: body,
  children: [
    {
      tagNmae: 'SPAN',
      textContent: '자식도 있습니다'
    },
    {
      tagName: 'SPAN',
      textContent: '자식이 여럿 있습니다'
    }
  ]
}

---> 그래서 Document Object Model이란 무엇일까?

  • 위 내용처럼 HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델이다.
  • 트리 구조라고 말한다. (HTML 문서와 Javascript 객체는 둘 다 트리 구조이다.)
  • document라는 전역변수로 접근이 가능하다.

하지만, 주의해야할 것은 DOM이 Javascript는 아니라는 것이다.
단지, DOM 구조 접근을 Javascript를 이용하여 하는 것이라는 것을 알아두자!

- Javascript를 이용해 엘리먼트를 확인하는 방법

vue image
Javascript를 이용해 엘리먼트를 확인하는 방법은 다음과 같다.
먼저 화면에 보이는 것처럼 하나의 엘리먼트를 선택하면, 그 엘리먼트는 $0이라는 변수에 담긴다.
그리고, console 창에 $0을 입력하면 선택한 엘리먼트를 콘솔에서 볼 수 있다.

- 엘리먼트를 객체의 형태로 볼 수 있는 방법: console.dir

vue image
선택한 엘리먼트를 객체의 형태로 볼 수 있는 방법은 console 창에 console.dir($0)라고 입력하는 것이다.
그러면 위에 보이는 화면처럼 엘리먼트가 객체의 형태로 표시되는 것을 볼 수 있다.

- 엘리먼트 객체에는 어떤 내용이 담겨 있을까?

엘리멘트 객체에는 다양한 내용들이 담겨 있지만, 그 중에서 우선적으로 몇 가지만 살펴보도록 하겠다.

속성 속성 이름
엘리먼트에 담긴 내용 innerHTML, innerText, textContent
form 입력 값 value
자식 엘리먼트 children
자식 노드 childNodes
data-* 속성에 담긴 값 dataset
이벤트 onclick, onyup 등

1. innerHTML, innerText, textContent

내가 만들고 있는 twittler를 띄운 후, 콘솔 창에 직접 각 속성 이름을 입력하여 어떤 값이 출력되는지 볼 수 있었다.
vue image
innerHTML을 입력할 경우에는, HTML 자체가 리턴된다.
vue image
innerText는 렌더링된 글자만을 가져오고, textContent는 공백 등을 모두 포함하여 가져온다.
---> innerHTML, innerText, textContent 중 innerHTML과 textContent가 더 많이 사용된다.

또, innerHTML과 같은 경우에는 값을 읽을 수 있을 뿐만 아니라 쓸 수도 있다.
vue image
$0.innerHTML = "twittler";라고 입력해주었더니, 왼쪽 화면에 보이는 것처럼 inputvalue 안의 값이 twittler로 바뀌었다.

또한 innerHTML은 HTML을 직접 넣어줄 수도 있다. 반면, textContent는 HTML을 넣어줄 수는 없다
vue image
innerHTML을 사용했을 때에는, 왼쪽 화면과 같이 HTML로 렌더링되는 것을 볼 수 있다.
vue image
textContent을 사용한 경우에는 HTML로 렌더링되지는 않는다.

2. value

vue image
messagebox에 '안녕하세요!'라고 작성한 후 콘솔창에 $0.value를 입력하면, messagebox에 입력한 값이 출력된다.
vue image
value를 이용해 콘솔 창에서 직접 값을 입력해줄 수도 있다.

3. element vs. node

<body>
  <div id="practice" class="highlight red">
    여기 엘리먼트가 하나 있습니다.
    <span>자식도 있습니다.</span>
    <span>자식이 여럿 있습니다.</span>
  </div>
</body>
속성 속성 이름
자식 엘리먼트 children span, span
자식 노드 childNodes text, span, text, span, text

div#practice에 대해 살펴보면, 이 때의 자식 엘리먼트는 span, span이다.
그런데 자식 엘리먼트로 표현했을 때에는 '여기 엘리먼트가 하나 있습니다.'라는 내용을 알 수가 없다.
이 때, 자식 노드는 '여기 엘리먼트가 하나 있습니다.'라는 내용도 알 수 있게 해준다.

4. dataset

<div data-user="steve" data-role"moderator" data-user-id="1">
  Steve Lee
</div>
$0.dataset.user // 'steve'
$0.dataset.role // 'moderator'
$0.dataset.userId // '1'

HTML에 입력된 값을 Javascript에서 dataset을 이용해 가져올 수 있다.


다음으로는 이벤트(onclick, onkeyup 등)에 대해 살펴볼 예정인데,
이번 주에 배운 내용들이 정말 많아서 글이 너무 길어질 것 같아 다음 게시글에 이어서 작성하도록 하겠다 :)