스파르타코딩 웹개발일지2

2022.08.19

 

 

이번 주는 jQuery를 이용해 공부했다.

jQuery는 편리한 javascript를 미리 작성해둔 라이브러리이다.

jQuery를 이용하면 편하다!!

 

 

그 예로 val이 있다.

 

$('#id내용').val('입력하고픈 말(안쓰면 적혀있는 값을 불러온다)')

 

내용이나 박스 같은 것을 없애고 싶다면 위를 .hide()로 바꿔준다. 다시 생기게 하고 싶다면 .show()

 

 

아래를 보면 백틱 ` 을 사용했다. 물결표 아래에 있는 것! 자꾸 ' 이것과 헷갈린다. 헷갈려서 잘못 쓰면 큰일이니까 주의하자!

나 역시도 계속 처음에 실수를 했다ㅎㅎ

 

let temp_html = `<li>${페이지에 넣고싶은 내용을 가진 변수}</li>`

 

아래와 같이 내용이 담긴 변수를 넣어주고 싶은 태그에 넣고 해당 id에 append를 해주니 버튼을 누를 때마다 페이지에 내용이 생성됐다. 이걸로 나만의 일기장이나 메모 같은 것을 만들어 봐야겠다.

 

$('#id부분').append(temp_html)

 

 

만약에 내용을 생성할 때 이전 것들을 없애며 생성시키고 싶다면

ajax가 실행되기 전인 윗줄에다가 아래 내용을 추가해준다.

 

$('#id부분').empty()

 

ajax는 jQuery가 임포트되었을 때 작동하는데, 웹 개발 기법 중 하나인 듯하다.

 

 

다시 한번 더 for문!

 

for (let i = 0; i < rows.length; i++) {

}

 

저 안에 내용 입력!

0에서부터 rows의 길이까지 i를 증가시키며 반복!

 

 

시간이 점차 지나니까 까먹게 된다. Tab은 기억했는데 탭을 다시 당겨주는 shift + Tab을 기억 못 했다. 순간 당황했다.

 

 

이번 주 강의에서 현재 서울시에 거치되어있는 따릉이의 실시간 거치수를 알아봤다. 직접 업데이트를 할 때마다 실시간으로 바뀌는 작업을 해줬다는 게 뿌듯했다. 강의를 들으며 배워가고 직접 연습해가는 과정이 점차 손에 익어간다. 실시간 업데이트 코드를 다루는 게 재밌다.

 

 

그다음으로는 이미지를 활용한 연습을 했다.

만약 버튼을 누를 때마다 이미지와 텍스트를 바꾸고 싶다면?!

 

 

이미지 바꾸기:

 

$("#아이디값").attr("src", 이미지URL);

 

 

텍스트 바꾸기: 

 

$("#아이디값").text("바꾸고 싶은 텍스트");

 

이미지 관련 코드도 해보고 싶었는데 이번 스파르타 코딩 웹 개발 강의에서 다뤄줘서 좋았다. 알려주신 위 두 개는 꼭 기억해야겠다. 코드로 봤을 때 이미지 바꾸는 게 좀 더 복잡해 보인다.(아주 살짝)

 

 

과제로 저번에 만든 팬페이지에 날씨를 추가했는데, 과제와 별도로 정말 팬페이지에 정이 들어서 나만의 메모를 입력할 수 있게 만들려고 한다.

더 나아가기 위해 배운 것들을 가지고 좀 더 연구해봤다.

계속 시행착오를 가지며 메모를 입력해 기록을 할 수 있게 해 놨는데.. 문제점이 있다.

바로 저장이 안 된다는 점! 새로고침 하면 다시 원상 복구된다ㅠㅠ

나중에 저장하는 법을 배우면 꼭 활용해야겠다. 점차 더욱 수정하다 보면 뿌듯한 결과물이 나오지 않을까?

그리고 다 지우기를 하면 모든 내용이 지워지는데, 그게 아니라 특정 박스만 지울 수 있는 법도 고민해 봐야겠다ㅠㅠ

우선 지금까지 해놓은 것을 깃허브에 올려놔야겠다!

최종적으로 저장할 수 있게 만들어서 멋있는 웹페이지를 만들 것이다, 파이팅!