Fri Feb 18 10:11 작성중...

숙제부터 냅다 제출하고 보는 패기

JQuery

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다.

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것. 그렇게 때문에, 쓰기 전에 임포트를 해야한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Javascript로 길고 복잡하게 써야하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있다.

$('#element').hide();

inspect의 console 창에서
$('#element').val() 를 입력하면,

👉 id 값이 element인 곳을 가리키고, val()로 값을 가져온다.

jQuery를 사용하는 방법

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.

예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!

css에서는 선택자로 class를 썼고, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

JQuery + Javascript 조합 연습

function q1() {
	// 1. input-q1의 입력값을 가져온다.
    let txt = $('#input-q1').val();
    // 2. 만약 입력값이 빈칸이면 if(입력값 == '')
    if (txt == '') {
    //3. alert('빈칸입니다') 띄우기
       alert('빈칸입니다')
    } else {
    // 4. alert(입력값) 띄우기
       alert(txt)
    }

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

function q3() {
	// 1. input-q3 값을 가져온다.
	let txt = $('#input-q3').val();
	if (txt == '') {
		alert('이름을 입력하세요');
		return;
	}
	// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
	let temp_html = `<li>${txt}</li>`;
  	//
	// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery$('...').append(temp_html)을 이용하면 굿!)
	$('#names-q3').append(temp_html);
}

function q3_remove() {
	// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
	$('#names-q3').empty();
        }

서버-클라이언트 통신 이해하기

1) 서버 → 클라이언트: "JSON" 이해하기

• JSON은 Key:Value 로 이루어져 있다. 자료형 Dictionary와 유사하다.
• 서울시 Open API 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어있고, 그 안에 row라는 키 값에서는 리스트형 value가 들어 있다.
  

2) 클라이언트 → 서버 : GET 요청 이해하기

API는 은행 창구와 같은 것!

클라이언트가 요청 할 때에도, '타입'이 존재

GET → 통상적으로, 데이터 조회(Read)를 요청할 때
Post → 통상적으로, 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn?
영화 정보: code=161967

👉 GET방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시)google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!

• q=아이폰 → (검색어)
• sourceid=chrome → (브라우저 정보)
• ie=UTF-8 → (인코딩 정보)

Ajax

👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

Ajax 기본 골격

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

Ajax 코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

• type: "GET" → GET 방식으로 요청한다.

• url: 요청할 url

• data: 요청하면서 함께 줄 데이터(GET 요청시엔 비워두자)

  👉 리마인드
  GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
  http://naver.com?param=value&param2=value2

  POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
  data: { param: 'value', param2: 'value2' },

• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

  👉 결과가 어떻게 response에 들어가나요? → 받아 들여야 한대
  (대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 모른대)

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}

🌸나머지는 스파르타 연습 예아~🌸