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

- JS 기본 문법

• undefined & null
  • js에서 '없음'을 나타내는 두 개의 값이지만
    undefined는 정의되지 않은 경우, null은 존재하지 않는 값을 의미한다.
  • 프로그래머 입장에서 명시적으로 부재를 나타내고 싶다면 null을 사용
  • https://helloworldjavascript.net/pages/160-null-undefined.html

---

- JavaScript to-do-list

 

• 수정 버튼 클릭 시 해당 텍스트의 끝쪽에 focus

그냥 단순히 저 요소에 focus()를 줄 경우에는 앞쪽에 focus가 된다.
그래서 뒤쪽에 포커싱을 주고 싶을 경우에는
1. 해당 input의 value를 먼저 상수에 저장해놓고
2. 포커싱을 준 뒤에
3. value값을 공백으로 만들면 

이러한 상태가 되겠지?
4. 그 뒤에 저장해두었던 value값을 다시 뿌려주면 텍스트가 밀어내서 포커싱이 뒤쪽으로 가게 됨.

  const changeEditMode = (e) => {
    const $item = e.target.closest('.item')
    const $label = $item.querySelector('label')
    const $editInput = $item.querySelector('input[type="text"]')
    const value = $editInput.value

    if (e.target.className === '수정버튼') {
      $editInput.focus()
      $editInput.value = ''
      $editInput.value = value
    }
  }

• 취소 버튼 클릭 시 기존의 텍스트로 되돌리기

개발자 도구로 Elements를 살펴보면 label의 text값과 input의 value값은 동일함.
수정 버튼을 누르고 수정할 경우에는 input의 값을 변경하는 것이므로 input 값은 변하겠지만
수정을 해서 confirm버튼을 누르기 전까지 label의 값은 동일하므로 editInput에 label의 text값을 재할당 해준다.

  const changeEditMode = (e) => {
    const $item = e.target.closest('.item')
    const $label = $item.querySelector('label')
    const $editInput = $item.querySelector('input[type="text"]')

    if (e.target.className === '취소버튼') {
      $editInput.value = $label.innerText
    }
  }

---

17:50 오후 회고 스터디 (만족도 : 7)
초반에 문법 공부할 때 집중 못했는데 뭐를 좀 만들기 시작하니까 확실히 집중도 있게 한 것 같음.
그렇지만 문법 공부를 또 안 하는 건 좀 아닌 거 같은데... 어떻게 해야 하나~

---

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

쉬운 문제들이라 다 풀리긴 하는데, 해답? 소스들을 보면 너무 짧은 코드로 간단하게 풀어버려서....
긴 내 코드들을 보면 조금 허무한 기분이다ㅠ 그래도 답은 맞으니까 기분은 좋다만 찝찝~하다~

---

22:50 저녁 회고 스터디 (만족도 : 9)
아직까지는 풀 수 있는 문제들이어서 그런지 집중이 잘 됐다!

---

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