웹개발 2주차 : JQuery & Ajax

1. JQuery

간단하게, 직관적으로 만든 Javascript. 일종의 사용자 정의 함수인데 인터넷에 공유되어서 다함께 쓸 수 있는 그런 것

JQuery를 이용, 요소 지정 시에는 <id=""> 태그를 써 준다. (CSS에서 class 지정 후 값을 주는 것과 같은 원리)

 

- JQuery 불러오기

$('# ID NAME ').val()

ID NAME이라는 ID에 JQuery를 먹일건데 val()이라는 쿼리를 맥일거시다

$('#input-q1').val()

 

불러오기만 해서는 안된다. 새로운 이름을 지정해줘야지 (let~)

let input1 = $('#input-q1').val()

 

그 다음 원하는 방식으로 변수를 사용하기

if (input1 == '') {
    alert('입력하세요!')
} else {
    // 4. alert(입력값) 띄우기
    alert(input1)
}

 

cf) 이름 지정하지 않고 바로 사용해도 가능은 하다. 예를 들어...

function q1() {
    if ($('#input-q1').val() == '') {
        alert('입력하세요!')
    }
}

이런 식으로.

하지만 MATLAB 때와 마찬가지로 비효율적인 코딩일 듯?

 

- JQuery 이용해 html 수정하기

 

1) 임시 html을 만든다.

let temp_html = `<li>${input3}</li>`
let temp_html = `<button>'버튼'</button>`

등등 html의 형태로 텍스트 변수 만들어줌

(cf. temp_html : 임시적인 html이라고 html을 닮은 텍스트에 이름 붙여준거. 다른 이름으로 바꿔도 노상관이지만 직관적이고 좋은 이름인 것 같다)

 

2) ID와 JQuery 이용하여 임시 html을 html화 시켜준다.

$('#names-q1').append(temp_html)

.append: 붙여줘

 

2. 서버-클라이언트 통신 : JSON과 AJAX

- JSON(JavaScript Object Notation)

서버 > 클라이언트로 데이터 보낼 때 일반적으로 사용하는 데이터 형식.

List & Dictionary의 조합 형태로 되어 있음

 

- AJAX(Asynchronous Javascript And Xml)

클라이언트와 서버 간 데이터를 주고 받는 기술/ 통신 방식.

$.ajax({
    //ajax 코드. 복붙해서 사용하면 된다
    type: "GET",
    url: "가져올 데이터가 있는 url",
    data: {},
    success: function (response) {
    	//실행할 내용
    }
})

 

3. 기억해야 할 것

console.log() : DevTools의 콘솔창에 ()안에 있는 것을 표출해주는 함수. 코드의 중간 진행 상황 볼 때 사용.

>> 중간 진행 상황을 자주 확인할수록 좋다.

 

4. 깨달은 것

웹개발할 때 파이썬을 쓰는 이유로 '결과를 바로 확인할 수 있어서'라고 보았는데 그 이유를 알 것 같다.

매트랩은 코드를 다 짜고나서 실행해서 결과보고.. 오류뜨고.. 오류찾고..

만약에 중간 결과를 보고 싶으면 코드가 멈추도록 걸어놓고 변수 일일히 확인해보면서 찾았어야 했는데.

 

웹개발의 기본(?)은 검색과 복붙인듯.

코드는 거의 외우지 않는다. 기본 골격과 원리를 잘 이해하고 응용을 많이 해보자~!~