[HoC] 다섯 번째 워크샵 - HTML & CSS & JavaScript

minjulee97·2019년 11월 20일
0

Hacker on Campus

  • 일시: 5주차 [2019.11.19.화]
  • 장소: 성신여대
  • 인원: 5명

1. DOM

5주차 스터디에서는 DOM의 정의와 DOM을 조작하는 방법에 대해 알아보았다.

DOM(Document Object Model)

  • DOM이란?
    DOM은 HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델로서 트리 구조로 되어있다.

  • JavaScript를 이용해 엘리먼트를 확인하는 방법: console.log($0)
    원하는 엘리먼트를 클릭한 후 콘솔창에 console.log($0)를 입력하면, 해당 엘리먼트의 내용을 확인할 수 있다.

  • 엘리먼트를 객체의 형태로 볼 수 있는 방법: console.dir($0)
    원하는 엘리먼트를 클릭한 후 콘솔창에 console.dir($0)를 입력하면, 해당 엘리먼트에 어떤 속성들이 담겨있는지 객체의 형태로 확인할 수 있다.

  • 엘리먼트 객체에 담겨있는 다양한 속성들

속성속성 이름
태그 이름tagName
idid
class 문자열className
엘리먼트에 담긴 내용innerHTML, innerText, textContent
form 입력값value
자식 엘리먼트children
이벤트onclick, onkeyup 등
  • 엘리먼트를 선택하는 방법
    $0를 이용해 특정 엘리먼트를 선택하고 가져올 수 있지만 이것보다 더욱 간편한 방법이 있다.
    바로, JavaScript를 이용하는 것이다.

    - 태그를 이용: getElementsByTagName
    - id를 이용: getElementById
    - class를 이용: getElementsByClassName
    - selector를 이용: **querySelector/ querySelectorAll**
    index.html
    ```html
    <div id="comment">안녕하세요</div> <!-- 1번 엘리먼트 -->
    <div class="black">검정색</div> <!-- 2번 엘리먼트 -->
    ```
    script.js
    document.getElementById('comment'); // 1번 엘리먼트를 가져온다. 
    document.getElementsByClassName('black'); // 2번 엘리먼트를 가져온다.
    document.querySelector('#comment'); // 1번 엘리먼트
    document.querySelector('.black'); // 2번 엘리먼트
    ```

DOM 조작

  • innerHTML: innerHTML 속성을 이용해 직접 HTML 태그를 입력할 수 있다.
    index.html
<div id="target">변경 전</div>

script.js

let target = document.getElementById('target');
target.innerHTML = '<span>변경 후</span>;

index.html

<div id="target">
	<span>변경 후</span>
</div>
  • 메소드: 메소드를 이용해 엘리먼트를 생성하거나 삭제하는 등 다양한 기능을 구현할 수 있다.
    • 엘리먼트 생성
      index.html
<div id="target">변경 전</div>

script.js

let target = document.querySelector('#target');
let newSpan = document.createElement('SPAN'); // span 엘리먼트 생성
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan); // target의 자식 엘리먼트로 newSpan 엘리먼트를 추가

index.html

<div id="target">변경 전
	<span>변경 후</span>
</div>
- 엘리먼트 삭제

index.html

<div id="target">변경 전</div>

script.js

let target = document.querySelector('#target');
target.remove();

index.html

// div#target 엘리먼트는 삭제된다.

2. 네이버 댓글 입력하기

지난 주에는 과제로 html과 css를 이용해 네이버 댓글 창의 목업을 만들어올 수 있게 하였다.
그렇게 각자 만들어 온 네이버 댓글 창에다가, 이번 주차에 배운 DOM과 관련된 내용을 토대로 해서 댓글을 입력한 후 출력하는 것까지 도전해볼 수 있게 실습을 진행하였다.

3. 조원들의 의견

이제 다음 주만 지나면 7주차와 8주차에는 해커톤을 진행하게 된다.
스터디의 중반 쯤에 와있는 지금, 팀원들에게 그동안 스터디를 진행하면서 어떤 점이 어려웠는지 또 어떤 점을 보완했으면 좋겠는지 물어보고 싶었다. 그래서 이번 주차 스터디를 마친 후 이러한 부분들에 대해 물어보는 시간을 가졌고 팀원들은 여러가지 의견을 내주었다.

1) 진도가 빠르다
2) 어려운 내용들이 많다
3) 복습 또는 예습을 위한 여러 자료들을 공유받고 싶다

1), 2) 진도가 빠르고 어려운 내용들이 많다
모든 팀원들이 스터디의 진도가 상당히 빠르다고 이야기해주었다. 물론 한정된 시간동안 정해진 분량을 공부해야 하다 보니 스터디가 빠르게 진행될 것임을 미리 말씀드리긴 했지만, 내가 생각해도 워크샵 내용이 결코 쉬운 내용이 아닌데도 불구하고 진도가 상당히 빠른 것 같다. 그래서 비전공자인 스터디원의 입장에서는 그동안 따라오기가 많이 벅찼겠다는 생각이 들었다.

👌 이에 대한 해결책은 정해진 진도대로 스터디를 나가긴 하나, 팀원들의 전체적인 수준에 맞게 앞으로 남은 3주차의 진행 방향을 결정하기로 했다. 따라서, 마지막 2주차 동안 진행될 해커톤 또한 우리가 구현하기 힘든 기능들을 시도하는 것보다는 지금까지 배운 내용을 충분히 복습하면 만들어낼 수 있는 것들을 구현하는 방향으로 진행할 예정이다. (만약 스터디원 중에 그래도 더 도전적인 과제를 해결하고 싶다는 요청이 있으면, 해커톤을 함께 진행할 본인의 팀원들과 상의해서 결정하게 할 생각이다.)

3) 복습 또는 예습을 위한 여러 자료들을 공유받고 싶다
매주 스터디가 끝나고 나면 해당 주차에 배운 내용을 복습할 수 있는 자료나 사이트를 단체 카톡에 올려드리곤 했다. 그런데, html과 css를 배우는 주차에 들어서면서 공부할 수 있는 자료들을 많이 못 올려드렸는데 스터디원 중 한 분이 html, css, JavaScript를 복습할 수 있는 강의나 자료를 많이 올려주셨으면 좋겠다고 말씀하셨다.

👌 그래서 앞으로는 해당 주차의 스터디가 끝나면 그 날 배운 내용을 복습하실 수 있도록, 내가 공부하고 있는 사이트나 코드스테이츠 Student Ambassador notion에 올라와 있는 좋은 자료들을 곧바로 올려드릴 예정이다.

4. 마무리

이제 HoC 스터디도 벌써 중반쯤 왔다.
5번의 워크샵을 마친 후 느낀 점은, 처음에는 잘할 수 있을지 고민하기도 했지만 일단 시작만 한다면 어떻게든 다 해낼 수 있다는 거였다. 팀원분들도 열심히 배우려고 노력하셔서 스터디장으로서 정말 뿌듯하고, 나도 이 스터디를 통해 JavaScript 확실히 복습하고 한층 더 깊게 이해할 수 있게 되어 기쁘다. 남은 3주차도 힘내서 스터디원들과 함께 이 스터디를 끝까지 잘 이끌어나가야겠다👏

0개의 댓글