[TDL] 04/29 Today's-Done-List

- JS 기본 문법

• 객체를 배열로 리턴하는 메서드들
  • Object.keys() : keys의 배열을 제공하는 것과 동일한 순서로 반환.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

• Object.values() : values의 배열을 제공하는 것과 동일한 순서로 반환.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

• Object.entries() : keys와 values를 배열 안에 배열을 품고 있는 2차원 중첩 배열 형태로 반환.

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

 

• 자주 쓰지만, 원본 배열을 훼손하는 배열 메서드 (주의해서 사용)
  • unshift => 배열의 앞에 요소 추가
  • push => 배열의 끝에 요소 추가
  • shift => 배열의 앞에 요소 제거
  • pop => 배열의 끝에 요소 제거
  • splice => 배열의 인덱스를 기반으로 요소 추가 및 삭제
• 원본 배열을 유지하고, 새로운 배열을 조작하는 배열 메서드
  • concat : 둘 이상의 배열을 병합하여 새로운 배열을 생성.
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
  • map : 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새로운 배열을 생성.
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  • filter => 제공된 함수로 구현된 테스트를 통과하는 요소들을 포함해서 새로운 배열을 생성.
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
  • reduce => 배열에 있는 모든 요소의 합을 반환. (누적 합계를 구할 때 용이)
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
• 비 ASCII 문자 정렬
  • 영어가 아닌 다른 언어의 문자열을 정렬하기 위해서는 String.localeCompare() 적용

const items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair'];
const korean = ['안', '녕', '하', '세', '요'];

items.sort(function (a, b) {
  return a.localeCompare(b);              // ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']
});

korean.sort(function (a, b) {
  return a.localeCompare(a);              // ['안', '녕', '하', '세', '요']
});

korean.sort(function (a, b) {
  return a.localeCompare(b);              // ['녕', '세', '안', '요', '하']
});

---

- JavaScript youtube

• youtube 검색 기능
  • keyup, click event를 호출되는 search함수 생성
  • 검색(input) 창에 적히는 모든 문자열을 소문자로 변환.
  • 반복문을 돌면서 모든 list의 타이틀을 가져온다.
  • indexOf() 배열 메서드를 조건문에 사용하여, 만약 검색한 결괏값이 해당 list안에 존재하면
    list안의 해당 타이틀(index)만 'flex'로 변경해주고 그렇지 않으면 none을 적용해준다.
    (indexOf()에서 output이 -1일 경우에는 false로 결괏값이 없다는 표시. 즉, -1 보다 커야 결괏값을 받을 수 있다.)
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
  • indexOf() 뿐 아니라, includes()등 다양한 메서드들을 적용할 수 있다.

const $search = get('#search')
const $list = getAll('.contents.list figure')
const $searchButton = get('.btn_search')

const search = () => {
    let searchText = $search.value.toLowerCase()
    for (let index = 0; index < $list.length; index++) {
      const $target = $list[index].querySelector('strong')
      const text = $target.textContent.toLowerCase()
      if (-1 < text.indexOf(searchText)) {
        $list[index].style.display = 'flex'
      } else {
        $list[index].style.display = 'none'
      }
    }
 }
 
const init = () => {
$search.addEventListener('keyup', search)
$searchButton.addEventListener('click', search)
}

 

• picture태그 안 source의 srcset 요소 속성 값 재설정
  • picture태그 안의 picture에 mouseover, mouseout event를 걸고
  • 그 이벤트 함수에서 source를 셀렉하여 해당 요소의 속성 값을 설정한다.
  • mouseOver를 하면 확장자 webp를 가진 움직이는 짤로 설정하고
    mouseOut를 하면 확장자 jpg를 가진 그냥 사진으로 설정.
  • webp란?
    
    • 투명한 이미지로 사용 가능한 Google이 만든 차세대 이미지
    • webp는 PNG보다 26% 더 작은 파일 크기를 제공하는 동시에 투명도와 동일한 품질을 제공
    • webp는 PNG 이미지보다 파일 크기로 인해 더 빠르게 로드된다.
    • https://insanelab.com/blog/web-development/webp-web-design-vs-jpeg-gif-png/

const onMouseOver = (e) => {
    const webplay = e.target.parentNode.querySelector('source')
    webplay.setAttribute('srcset', './assets/sample.webp')
  }

  const onMouseout = (e) => {
    const webplay = e.target.parentNode.querySelector('source')
    webplay.setAttribute('srcset', './assets/sample.jpg')
  }

  const init = () => {
    for (let index = 0; index < $list.length; index++) {
      const $target = $list[index].querySelector('picture')
      $target.addEventListener('mouseover', onMouseOver)
      $target.addEventListener('mouseout', onMouseout)
    }
  }
  init()

 

• hash값을 사용하여 DOM 이벤트 동작
  https://developer.mozilla.org/ko/docs/Web/API/URL/hash
  
  • init함수에 list의 각 요소를 반복문을 돌려서 click event가 작동되면 hashChange함수가 호출된다.
  • list의 타이틀을 뽑아서, window.location.hash에 view& 와 함께 할당해주고,
    getViewPage로 페이지를 전환시킨다.
  • getViewPage에 내가 url에 hash값으로 넘겨준 list의 타이틀을 decode 해서 view& 뒤로 split 해줘서
    제대로 된 list의 타이틀을 viewPage에 넣어준다.
  • 현재 url에 view가 붙어있다면 : 상세페이지
    현재 url에 view가 붙어있지 않다면 : 메인 페이지
  • 각 페이지에 console.log(window.location.hash)를 할 경우 메인 페이지 : undefined
    상세페이지 : 각 list 타이틀의 hash값  ex) #view&Lorem%20Ipsum%20Powerful%20movie
  • 따라서 조건문을 생성하여 만약에 indexOf()로 hash안에 view를 찾으면, 상세페이지
    찾지 못하면, 메인 페이지로 보낸다.

const hashChange = (e) => {
    e.preventDefault()
    const parentNode = e.target.closest('figure')
    const viewTitle = parentNode.querySelector('strong').textContent
    window.location.hash = `view&${viewTitle}`
    getViewPage()
  }

  const getViewPage = () => {
    const viewTitle = get('.view strong')
    const urlTItle = decodeURI(window.location.hash.split('&')[1])
    viewTitle.innerText = urlTItle

    get('.list').style.display = 'none'
    get('.view').style.display = 'flex'
  }

  const getListPage = () => {
    get('.view').style.display = 'none'
    get('.list').style.display = 'flex'
  }
  
  const init = () => {
    for (let index = 0; index < $list.length; index++) {
      $list[index].addEventListener('click', hashChange)
    }
    window.addEventListener('hashchange', () => {
      const isView = -1 < window.location.hash.indexOf('view')
      if (isView) {
        getViewPage()
      } else {
        getListPage()
      }
    })
  }
  init()

---

17:50 오후 회고 스터디 (만족도 : 6)

계획보다 많이 못했음.

---

- 자료구조 / 알고리즘 (Js ver.) 강의

최근 배열 관련 알고리즘을 풀고 있는데 초반에 반복문, 조건문만 풀 때와 당연히 다른 수준이라고는 생각했지만,
생각보다 너무 어려워서 점점 풀기가 싫어지는 요즘이다... 근데 아직 초보단계 문제라는 게 함정
그래도 하루에 한 문제라도 꾸준히 풀다 보면, 언젠가는 내손으로 완벽히 푸는 날이 오지 않을까 싶다~

---

22:50 저녁 회고 스터디 (만족도 : 6)

오후보단 집중이 잘 됐지만, 그래도 집중도가 안 좋다... 큰일이다 큰일
5월부터는 진짜 진짜 마음을 다 잡고서 목표한 것은 최대한 달성해보자!

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]