function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}어제 Jquery quiz를 풀면서 강사님을 따라 만든 코드가 이해가 잘 안되어서 하나하나 다시 복습을 해보도록 했다.
(아직은 부트캠프처럼 시간이 촉박한 강의가 아니니 하나하나 자세히 이해하고 가는게 좋다고 판단했다.)
우선 이코드를 완성하면 다음과 같은 화면이 구현되는데 무엇 때문에 작동하는지 차근차근 알아봐야겠다..;;
1. 우선 txt라는 변수명에 인풋박스3 제이쿼리를 변수선언 한다.
2. 우선은 변수명 temp_html 이 뭘까? 에 굉장히 꽂혀있었다. 분명히 단순히 변수선언을 하는 명령문인데 temp_html 과 ``은 함께 쓰인다. 이런식으로 나와서 이해가 안되었다. 그래서 변수명을 무작위로 바꿔보고 동작시켜보니 역시나 temp_html은 단순한 변수명이었다.
function q3() {
let txt = $('#input-q3').val();
let korea = `<li>${txt}</li>`
$('#names-q3').append(korea)
}temp_html을 korea로 바꿔도 똑같이 작동함.
그렇다면 백틱(``)은 무엇일까?
백틱과 따옴표의 공통점: 변수의 값을 문자열로 만들어 준다는 것
백틱과 따옴표의 차이점: *백틱은 따옴표의 업그레이드 버전*
백틱은 탬플릿 리터럴이라는 기능을 제공하는데, 이것은
여러 줄 문자열을 나타내는 데 사용할 수 있으며 “보간”을 사용하여 변수를 삽입 할 수 있다.
더 중요한 것은 변수 이름뿐만 아니라 JavaScript 표현식을 포함 할 수 있다는 것.
그렇다면 제이쿼리가 들어간 ${txt}에 따옴표('')로 문자열을 정의하면 오류가 난다는 셈인데 한번 시도해 보았다.
let korea = '<li>${txt}</li>'
제이쿼리를 포함한 변수에 백틱이 아닌 따옴표를 쓰자,
제이쿼리를 문자열로 판단하는 따옴표는 제이쿼리의 기능을 구현하지 못하였다!! 여기서 완벽히 이해완료 ㅠㅠ(에러가 이해시키는구나!!) 그냥 문자열을 만들어준다 라고 이해하고 넘어갔으면 언젠가 났을 에러를 미리 경험한 셈
다음은 .append 인데 .append()는 선택한 요소 끝에 컨텐츠를 추가하는 것 으로 이해하면 된다.
(.prepend()는 선택한 요소 앞에 컨텐츠를 추가)
$('#names-q3').append(korea)즉, id 'names-q3' 뒤에 컨텐츠를 추가한다는 것인데 id 지정 된 곳을 가보니,
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>이런 태그가 입력되어 있었다. Html 다 까먹어서 <ul></ul>, <li></li> 를 복습하자면,
<ul></ul> 은 unordered list의 약자로 <li></li>의 부모 태그라고 보면 된다.
그래서 쭉 리스트가 나오는 것이다 이 뒤에 <li>${txt}</li> 인풋 박스에 입력값이 더해지는 것.
마지막으로 다지우기 버튼
function q3_remove() {
$('#names-q3').empty()
}