[TIL 2024. 02. 02]

오늘 한 일

-웹개발 2주차 완.

-웹개발 3주차

 

+)2.2에 못 쓴 TIL을 2.5에 씀.

 

오늘의 리뷰

-함수(): 기본적으로 같은 동작을 반복하는 것!

-기존의 텍스트를 다른 텍스트로 변경 or 텍스트 넣기

: 지정해서, text()

 

-문자열(태그같은 문자열 포함=가짜 태그..)을 html로 붙이고 싶을 때

: 백틱 사용

-> 더하려면 더하려는 html을 만들어야.

백틱을 사용하면 지금은 그냥 문자열인 <p>돼지감자</p>이 temp_html에 가서, 진짜 html처럼 붙음.

let temp_html = `<p>돼지감자</p>`
$('#q1').append(temp_html)

 

[결론]

지정해서 text(), 지정해서 append(), 지정해서 empty(--비워둠--)

 

-더하려는 문자열이 리스트에 있는 경우

let a = fruits[0]
let temp_html = <p>${a}</p>
$('#q2').append(temp_html)

우리는 리스트에 있는 걸 다 붙이고 싶으므로, foreach문 활용하면 됨.

 

 

people.foreach(a-> {
let temp_html = `<p>${a['name']}는 ${a['age']}살입니다.`</p>
$('#q2').append(temp_html)
} );

people.foreach(a-> {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.`</p>
$('#q2').append(temp_html)
} );

위의 둘은 동치임. 보기 좋게 풀어쓴 것과 아닌 것의 차이일 뿐.

 

-jQuery 자체가 toggle(), va() 등을 내장하고 있음.

->toggle()을 개발자 도구로 보면, id값 자체가 사라진 게 아니라, style로 display:none;이 붙는 것 뿐.

style로 붙었다가 아니었다가.

 

-가지고 온다=오른쪽의 값을 왼쪽 변수에 넣어준다=프로그래밍에서의 =의 의미

즉, let 변수 = ~

 

-부트스트랩을 사용했기 때문에 이미 id값이 붙어있음.

단, 여기서는 id값이 전부 같아서 각자를 지정해줄 수 없는 문제가 있음

-> 각자의 id값을 새롭게 특정해줌으로써 문제 해결. 본질은 "지정"해주기!

 

-input내용으로 card 붙이기_좀 더 긴 html 붙이기

1. input 내용 받아서 (어디서 받을지 지정해야)

2. 붙일 html내용을 정하고(넣고, 백틱사용)

3. 카드 붙이기 (어디에 붙일지 지정해야)

-> 테스트 해보면 카드가 붙음. 하지만 새로고침하면 다 리셋됨.

 

왜냐하면 input해서 붙인 카드 정보는_이 브라우저와 별개인 DB에 저장된 정보가 아니기 때문.

즉, 이것이 우리가 서버를 써야 하는 이유임!

우리가 쓴 데이터를 적재하고, 다시 받아와서 사용하기 위해서는 DB가 필요함.