웹개발 종합반 2주차: JQuery, Ajax 기초

📜 오늘 새로 배운 내용

• 수강일자: 2022.10.20~21
• JQuery 기초 배우기 (임포트 하기, 숨기기, 보여주기, HTML로 만들어주기)
• 서버-클라이언트 통신 이해하기 (JSON 방식의 이해)
• Ajax 기초 배우기 (임포트 하기, 서울시 OpenAPI 활용하기)
• 날씨API를 이용해서 현재 기온 표시하기

📝 수업 내용 메모

◻ JQuery

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

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

• 위 두 코드는 똑같이 동작하지만 두 번째 코드가 더 간단해보이는 이유는 '변수'를 지정했기 때문이다.
• if 문에서는 == (비교 연산자, 좌측과 우측의 값이 같은지 다른지 확인한다)를 사용한다. = (할당 연산자, 좌측에 우측 값을 할당한다)와 ==는 쓰임이 다르기 때문에 반드시 == 를 사용해야 실행된다.
  
  

function q2() {
	$('#input-q1').val()
    let txt = $('#input-q1').val()
    if (txt.includes('@') == true){
		alert(txt.split('@')[1].split('.')[0])
    }else{
        alert('이메일이 아닙니다.')
    }
}
	// 1. input-q2 값을 가져온다.
	// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
	// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
	// 4. alert(도메인 값);으로 띄우기
	// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

• includes(): 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환하는 메서드 (이때 결과값은 문자열이 아님)

선택한 요소의 내용이 지워지는 JQuery 메서드

$('#names-q1').empty()

◻ AJAX

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){ //
    console.log(response)
  }
})

• success: 성공적으로 응답이 도착하면, response 값에 서버의 결과 값을 담아 함수를 실행한다.

💡 이슈/고민 또는 이를 해결한 내용

• 변수를 지정하면 더 깔끔한 코드를 작성할 수 있다.
• 서울시 미세먼지 API를 활용할 때 if문을 작성하다가 Uncaught SyntaxError: Unexpected token ')' 라는 에러가 계속 떠서 고생했다. 애꿎은 괄호만 썼다 지웠다 했는데 알고 보니 key 값의 스펠링이 틀려서였다. (...) 복사를 정확하게 하자!

⭐TO-DO LIST

• JS 100제 (https://www.notion.so/JS-100-94d97d294dd14c9b911a02c840fa9f2d) 풀기
• 모던 JavaScript 튜토리얼 사이트(https://ko.javascript.info/)공부하기