본문 바로가기
📖 나의 개발일지 (WIL&TIL)

[19일차] 오늘의 개발일지(TIL)

by 따따시 2022. 11. 24.

프로젝트때문에 정신이 없지만 모던자바스크립트 읽는 것을 소홀하게 하고 싶지 않다.

시간을 쪼개서라도 한줄이라도 더 알고싶은 마음!

나는 부트캠프에 공부를 하고 취업할 때 조금이라도 더 잘 알아듣고 해낼 수 있는

개발자가 되고 싶어서 들어온거지, 몸이 편하려고 온 건 절대 아니다.

나한테 주어진 시간들에 최대한 많은 것들을 얻어가고 싶다.

 

 

📖 오늘 모던자바스크립트 학습한 내용 

  • elem.getAttribute(name) – 속성값을 가져옴
  • elem.setAttribute(name, value) – 속성값을 변경함
<body>
  <div id="elem" about="Elephant"></div>

  <script>
    alert( elem.getAttribute('About') ); // (1) 결과값 : Elephant

    elem.setAttribute('Test', 123); // (2) 속성 추가하기 / elem에 test=123 추가됌

    alert( elem.outerHTML ); // (3) 추가된 속성 확인!!

    for (let attr of elem.attributes) { // (4) 속성 전체 나열하기
      alert( `${attr.name} = ${attr.value}` );
    }
  </script>
</body>
 

새롭게 알게된 내용

  1. getAttribute('About') – 첫 번째 글자가 대문자여도, HTML 안에서는 모두 소문자가 된다. 속성은 대·소문자를 구분하지 않는다
  2. 어떤 값이든 속성에 대입할 수 있지만, 최종적으론 문자열로 바뀐다. 숫자 123이 문자열 "123" 으로 바뀐것
  3. outerHTML을 사용하면 직접 추가한 속성을 비롯한 모든 속성을 볼 수 있다.
  4. attributes가 반환하는 컬렉션은 열거가 가능하다. 컬렉션에 담긴 각 객체의 name, value 프로퍼티를 사용하면 속성 전체에 접근할 수 있다.

 

🥸 비표준 속성 요소  -> 이거 프로젝트할때 응용 많이할 것 같은데!!!!!

 

비표준 속성은 요소에 스타일을 적용할 때 사용되기도 한다. 

아래 예시에선 주문 상태(order state)를 나타내는 커스텀 속성 order-state를 사용해 주문 상태에 따라 스타일을 변경

--> 프로젝트에서도 userId가 일치하는 게시물만, 수정|삭제 버튼 뜨게 하려고 할때 이렇게 조건식 걸면 되지 않을까?

<style>
  /* 스타일이 커스텀 속성 'order-state'에 따라 변한다 */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>

<div class="order" order-state="pending">
  A pending order.
</div>

<div class="order" order-state="canceled">
  A canceled order.
</div>

이렇게 커스텀 속성을 사용하는 게 .order-state-new, .order-state-pending, order-state-canceled같은 클래스를 사용하는 것보다 선호되는 이유는??

 

--> 속성은 클래스보다 다루기 편리하다는 점 때문, 속성의 상태는 아래와 같이 쉽게 변경할 수 있다. 

// 새 클래스를 추가하거나 지우는 것보다 더 쉽게 상태(state)를 바꿀 수 있다
div.setAttribute('order-state', 'canceled');

 

but, 커스텀 속성에도 문제가 발생할 수 있다고 한다.

비표준 속성을 사용해 코드를 작성했는데 나중에 그 속성이 표준으로 등록되게 되면 문제가 발생한다. HTML은 살아있는 언어이기 때문에 개발자들의 요구를 반영하기 위해 지속해서 발전한다. 따라서 이런 경우 예기치 못한 부작용이 발생할 수 있다고 한다.

 

이런 충돌 상황을 방지하기 위한 속성인 data-* 를 사용하기

’data-'로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 된다. 

dataset 프로퍼티를 사용하면 이 속성에 접근할 수 있다.

요소 elem에 이름이 "data-about"인 속성이 있다면 elem.dataset.about을 사용해 그 값을 얻을 수 있다. 

예시:

<body data-about="Elephants">
<script>
  alert(document.body.dataset.about); // Elephants
</script>

 

data-order-state 같이 여러 단어로 구성된 속성은 카멜 표기법(camel-cased)을 사용해 dataset.orderState으로 변환된다.

이런 특징을 사용해 주문 상태에 관한 예시를 다시 작성하면 다음과 같습니다.

 
 
<style>
  .order[data-order-state="new"] {
    color: green;
  }

  .order[data-order-state="pending"] {
    color: blue;
  }

  .order[data-order-state="canceled"] {
    color: red;
  }
</style>

<div id="order" class="order" data-order-state="new">
  A new order.
</div>

<script>
  // 읽기
  alert(order.dataset.orderState); // new

  // 수정하기
  order.dataset.orderState = "pending"; // (*)
</script>

 

💜 data-* 속성은 커스텀 데이터를 안전하고 유효하게 전달해준다.

💜 data-* 속성을 사용하면 읽기 뿐만 아니라 수정도 가능하다. 속성이 수정되면 CSS가 해당 뷰를 자동으로 업데이트해준다. 위 예시에서 (*)로 표시한 줄에서 색이 파란색으로 바뀐다.

 

 속성과 함께 쓰이는 메서드 

  • elem.hasAttribute(name) – 속성 존재 여부 확인
  • elem.getAttribute(name) – 속성값을 가져옴
  • elem.setAttribute(name, value) – 속성값을 변경함
  • elem.removeAttribute(name) – 속성값을 지움

 

요소 생성하기

DOM 노드를 만들때 사용하는 메서드는 두 가지이다.

document.createElement(tag)

--> 태그 이름(tag)을 사용해 새로운 요소 노드를 만듦

let div = document.createElement('div');

document.createTextNode(text)

--> 주어진 텍스트(text)를 사용해 새로운 텍스트 노드를 만듦

let textNode = document.createTextNode('안녕하세요.');

개발을 할 땐 위 예시(메시지가 들어가는 div)처럼 주로 요소 노드를 만들게 된다.

 

메시지 생성하기

메시지가 들어갈 div는 세 단계로 만들 수 있다.

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

이렇게 세 단계를 거치면 요소가 만들어진다.

만들어진 요소를 실제 태그에 삽입하려면, 요소 삽입 메서드 append를 사용한 코드 document.body.append(div)를 사용하기

 
 
<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

  document.body.append(div);
</script>

여기서는 document.body에서 append를 호출했지만 다른 요소에도 append 메서드를 호출해 요소를 넣을 수 있다.

 

  • node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입
  • node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입
  • node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입
  • node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입
  • node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체

 

insertAdjacentHTML/Text/Element

또 다른 다재다능한 메서드 elem.insertAdjacentHTML(where, html)를 사용하기

elem.insertAdjacentHTML(where, html)에서 첫 번째 매개변수는 elem을 기준으로 하는 상대 위치로, 다음 값 중 하나여야 한다.

  • 'beforebegin' – elem 바로 앞에 html을 삽입
  • 'afterbegin' – elem의 첫 번째 자식 요소 바로 앞에 html을 삽입
  • 'beforeend' – elem의 마지막 자식 요소 바로 다음에 html을 삽입
  • 'afterend' – elem 바로 다음에 html을 삽입

두 번째 매개변수는 HTML 문자열로, 이 HTML은 이스케이프 처리되지 않고 ‘그대로’ 삽입된다.

<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>안녕하세요.</p>');
  div.insertAdjacentHTML('afterend', '<p>안녕히 가세요.</p>');
</script>

 

최종 HTML은 아래와 같다.

<p>안녕하세요.</p>
<div id="div"></div>
<p>안녕히 가세요.</p>

임의의 HTML을 페이지에 삽입할 땐 이 방법을 사용하면 된다.

 

 

elem.insertAdjacentHTML(where, html)은 두 가지 형제 메서드가 있다.

  • elem.insertAdjacentText(where, text) – insertAdjacentHTML과 문법은 같은데, HTML 대신 text를 ‘문자 그대로’ 삽입한다
  • elem.insertAdjacentElement(where, elem) – 역시 같은 문법인데, 요소를 삽입한다는 점이 다르다

실무에선 대부분 insertAdjacentHTML을 사용한다고 한다. 요소 삽입 메서드를 사용하면 코드 길이가 줄어들고, 노드나 텍스트 조각을 쉽게 삽입할 수 있다. 

 

요약

  • 노드 생성 메서드:
    • document.createElement(tag) – 태그 이름을 사용해 새로운 요소를 만듦
    • document.createTextNode(value) – 텍스트 노드를 만듦(잘 쓰이지 않음)
    • elem.cloneNode(deep) – 요소를 복제함. deep==true일 경우 모든 자손 요소도 복제됨
  • 노드 삽입, 삭제 메서드:
    • node.append(노드나 문자열) – node 끝에 노드를 삽입
    • node.prepend(노드나 문자열) – node 맨 앞에 노드를 삽입
    • node.before(노드나 문자열) –- node 이전에 노드를 삽입
    • node.after(노드나 문자열) –- node 다음에 노드를 삽입
    • node.replaceWith(노드나 문자열) –- node를 대체
    • node.remove() –- node를 제거
    문자열을 삽입, 삭제할 땐 문자열을 ‘그대로’ 넣으면 된다
  • ‘구식’ 메서드:
    • parent.appendChild(node)
    • parent.insertBefore(node, nextSibling)
    • parent.removeChild(node)
    • parent.replaceChild(newElem, node)
    이 메서드들은 전부 node를 반환한다.
  • html에 HTML을 넣으면 메서드 elem.insertAdjacentHTML(where, html)은 where 값에 따라 특정 위치에 HTML을 삽입함
    • "beforebegin" – elem 바로 앞에 html을 삽입
    • "afterbegin" – elem의 첫 번째 자식 요소 바로 앞에 html을 삽입
    • "beforeend" – elem의 마지막 자식 요소 바로 다음에 html을 삽입
    • "afterend" – elem 바로 다음에 html을 삽입
    문자열이나 요소 삽입에 쓰이는 유사 메서드 elem.insertAdjacentText와 elem.insertAdjacentElement도 있는데, 잘 쓰이지는 않음

 

  • 페이지 로딩이 끝나기 전에 HTML을 삽입해주는 메서드:
    • document.write(html)
    문서 로딩이 끝난 상태에서 이 메서드를 호출하면 문서 내용이 지워짐. 오래된 스크립트에서 볼 수 있음
 
 
 
프로젝트 남은 시간에 알고리즘도 한문제라도 풀어봐야지
부트캠프에서 진짜 많이 얻어서 갈테야!!!!!!!

올해가 가기전 버킷리스트 하나에 '개발 레벨업 지대로 하기' 무조건 넣는다!!!!

저작자표시

'📖 나의 개발일지 (WIL&TIL)' 카테고리의 다른 글

[WIL] 오늘이 주말이었나?! 계속되는 프로젝트 작업 개발일지  (1) 2022.11.26
[20일차] 오늘의 개발일지 (TIL)  (0) 2022.11.25
[18일차] 프로젝트 주는 정말 정신없당!!! 오늘의 개발일지(TIL)  (0) 2022.11.23
[17일차] 오늘의 개발일지(TIL)  (2) 2022.11.22
[16일차] 월요팅! 페이스 조절도 필요한 오늘의 개발일지(TIL)  (1) 2022.11.21

관련글

댓글

티스토리툴바