1주차에 웹페이지를 만들고 꾸미는데 유용한 기본기들을 많이 배웠지만, 나는 이제 겨우 html, css, javascript를 구분하고 기본적인 css를 떠듬떠듬 할 수 있는 상태이다.
javascript는 배웠지만... 그저 약속된 이해할 수 없는 괄호와 ''들 사이에서 넋을 놓아버렸다.
이런 상태로 2주차에선 기본적인 javascript를 복습하고 일종의 javascript 라이브러리인 jQuery를 이용하여 좀 더 간단히 javascript를 사용하는 법을 배웠다.
jQuery의 예시는 아래와 같다.
javascript : document.getElementById("element").style.display = "none";
jQuery :
$('#element').hide();
element와 hide를 제외한 부분이 jQuery 기본 식.
<자주 사용하는 jQuery>
1. 태그 내 html입력// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
- 버튼 넣기
let temp_html = '나는 추가될 버튼이다!';
$('#cards-box').append(temp_html);
3.버튼의 텍스트 바꾸기
// 가리키고 싶은 버튼에 id 값을 준다음
포스팅 박스 열기
$('#btn-posting-box').text('포스팅 박스 닫기');
- input박스의 값 가져오기
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
데이터를 가지고 있는 '서버'에서 사용자가 보는 '클라이언트로' 데이터를 가져오는 과정에 대해 공부했고
jQuery를 import한 상태에서 데이터를 가져오는 Ajax를 배웠다.
아래는 Ajax의 기본 골격이다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
👉 리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
👉 리마인드
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}
jQuery와 Ajax를 이용하여 데이터를 불러오면서 작동하는 웹페이지를 만드는 것이 2주차의 최종목표였다. 물론 if, for등과 같은 기본적인 javascript또한 적용해보았다. 2주차 과제에서는 1주차에 배웠던 css도 일부 사용했다.
쉽지않았고 아직 jQuery, Ajax를 구분해 사용하고 기본적인 javascript사용이 어설프지만 아주 조금은 감을 잡은 것 같다.
