41+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

코드가 복잡한 JS에서는 유틸리티 함수를 만들어두면 매우 편하다.

// CSS 속성 이름을 전달하면 CSS 스타일 값을 반환해주는 함수

function getStyle(element, propertyName, pseudoElement) {
  const elementStyles = getComputedStyle(element, pseudoElement)
  const propertyValue = elementStyles.getPropertyValue(propertyName)
  return propertyValue
}

// CSS 스타일을 설정하는 함수

function setStyle(element, propertyName, propertyValue) {
  // 요소에 스타일 적용(쓰기)
  element.style.setProperty(propertyName, propertyValue)
  return element
}

// 이 둘을 합친 함수

function css(element, propertyName, propertyValue, pseudoElement) {
  // [스타일 쓰기] 속성 값이 전달되었을 때
  if (propertyValue) {
    // 스타일 쓰기
    const styledElement = setStyle(element, propertyName, propertyValue)
    return styledElement
  } 
  // [스타일 읽기] 속성 값이 전달되지 않았을 때
  else {
    // 스타일 읽기
    const propertyValue = getStyle(element, propertyName, pseudoElement)
    return propertyValue
  }
}

 

속성은 HTML 태그에 추가된 값으로 태그를 브라우저가 해석해 DOM 요소 생성 과정에서 사용된다.

• 빌트인 속성 : id, class, contenteditable 속성처럼 HTML에서 기본 제공되는 속성이다.
• 커스텀 속성 : 요소에 대한 정보를 임의로 사용자가 지정할 수 있다.
  • 정의할 때는 date- 접두사로 시작해야 한다.
  • 소문자, 숫자, 하이픈, 밑줄, 마침표, 콜론만 포함 가능하다.
  • 대문자를 사용할 수 없다.
• checked 속성 : 요소가 checked 속성을 포함한 경우 항상 참인 상태

 

• 빌트인 또는 커스텀 속성을 설정하는 이유
  • 빌트인 속성
    • HTML 요소에 기능을 추가
    • 기본적으로는 선택 사항이며 필요한 경우 설정할 수 있다.
  • 커스텀 속성
    • 사용자가 지정한 속성으로 지정한 정보를 쓰거나 읽을 수 있다.
    • 복잡한 컴포넌트를 만들 때 유용하다.

 

그러면 어떻게 사용할까?

// 속성 읽기 : getAttribute() 메서드를 사용한다.
const 속성값 = 요소.getAttribute('속성이름')
const 커스텀속성값 = 요소.getAttribute('data-속성이름')

// 속성 설정 : setAttribute() 메서드를 사용한다.
요소.setAttribute('속성이름', 속성값)
요소.setAttribute('data-속성이름', 속성값)

// 속성 제거 : removeAttribute() 메서드를 사용한다.
요소.removeAttribute('속성이름')
요소.removeAttribute('data-속성이름')

// 다만 커스텀 속성은 더 쉬운 dateest 속성을 사용할 수 있다.

// 커스텀 속성 쓰기
요소.dataset.속성이름 = '값'

// 커스텀 속성 읽기
요소.dataset.속성이름 // '값'

 

The Problem I Faced

JS를 배울 때 초반은 그래도 할만했는데 DOM과 BOM을 배우며 살짝 어려움이 느껴졌다.

 

What I Tried to Do

강사님께 질문을 많이 하고 팀원들과도 활발하게 회고를 해야겠다는 생각이 들었다.

 

How I Solved It

매일 수업이 끝나고 회고를 하고 있다.

 

So

 

Aha Moments

Chrome 엔진에서 이런 기능이 있었다...!

접근성을 위배하지 않도록 색상의 대비율을 보여준다.. 대박이다!

흰색 물결 위로 가면 대비율이 낮아지므로 사용자는 배경과 글의 색을 구분할 수 없게 된다.

하지만 물결 아래로 갈수록 대비율은 높아지고 눈에 잘 보이게 된다.

AA와 AAA는 접근성 대비율값 기준이다. AAA는 아니더라도 AA만 넘으면 그럭저럭 괜찮다고 한다.

크롬 개발자도구 색상표