[내일배움캠프/2주차] 웹개발 강의 3주차

<목차>

1. JQuery 적용

2. fetch로 서버에 데이터를 주고 받기

---

JQuery 적용

 

<toggle 토글>

-두 가지 상태를 전환하는 동작

-어떤 속성이나 상태를 켜거나 끄는 동작

function.openclose() {
    $('#postingbox').toggle()
}

----postingbox를 열고 닫을 수 있게 함
----function은 head 안의 script 안에 사용

 

-예시의 postingbox 처럼 불러와서 무언가를 실행하기 위해서는 div 안에 id를 지정해준 다음 id 선택자를 가져와서 사용

<div class="posting" id="postingbox">

 

<onclick>

-클릭 이벤트: 양식을 제출하거나 웹페이지의 특정 콘텐츠를 변경하기 위해 버튼을 클릭한 경우 특정 기능을 수행

-여러개 사용할 경우 누적이 되는게 아닌 덮어쓰기, 마지막에 실행한 값만 보여줌

 

사용방법1. div 안에 사용 후 js에서 호출

js
function hello() {
    alert('안녕');
}
----div 클릭시 hello 함수를 호출하여 '안녕'이라는 창이 뜨게 하기

div
<div class="hi" onclick="hello()">
-----onclick 이벤트에 hello 함수 정의

 

사용방법2. js만 사용

1. html div에 id를 지정

2.js에서 element에서 onclick 이벤트가 일어나면 호출

window.onload = function () {
    var el = document.getElementById("지정한 id");
    el.onclick = hello;
}
function hello() {
    alert('안녕');
}

 

-이 두가지 방법 외에 여러가지 방법이 있는데, 가장 많이 쓰이는 두가지를 정리함.

 

<.val()>

-jquery 메서드 중 하나로 선택한 요소의 값을 가져오는 역할

let image = $('#image').val();

-변수 image에 id가 image인 요소의 value(값)을 가져옴

 

<append>

-선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.

$('#image').append(temp_html);

-image 요소 뒤에 새로운 html요소인 temp_html를 추가할 수 있다.

 

클라이언트 & 서버

 

<JSON>

-사람이 읽을 수 있고 시스템에서 구문을 분석할 수 있는 방식으로 데이터를 저장하고 교환하기 위한 형식

-서버-->클라이언트

-ex) 서울시 미세먼지 openAPI

-key:value 로 이루어져 있음

 

<GET vs POST>

*GET

-보통 데이터 조회(read)를 요청할 때 사용

-클라이언트-->서버

-ex) 무언가의 목록 조회

-https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=안녕

위 주소로 예를 들면 "?"가 쪼개지는 지점.

? 기준으로 앞은 서버주소, 뒤는 전달할 데이터

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

-& : 전달할 데이터가 더 있다는 의미

-이 방식은 프론트엔드 개발자와 백엔드 개발자가 미리 정해놓은 방식

 

*POST

-주로 데이터 생성(create), 변경(update), 삭제(delete)를 요청할 때 사용

-ex) 비밀번호, 회원가입

-data: {} 이러한 형태로 데이터를 가져감

-ex) data: {param:'value', param2:'value2'}

 

 

fetch

-짧은 코드로 데이터를 가져올 수 있음

-인터넷을 통해 데이터를 요청하고 받아오는 과정

-fetch의 기본뼈대(굵은 글씨)

fetch("url 입력")
----입력된 url로 웹 통신을 요청한다. 만약에 괄호 안에 url 외에 다른 것이 없다면 get 방식
.then(res => res.json())
----통신 요청을 받은 데이터는 res라는 이름으로 json화 한다.
.then(data => {
    console.log(data)
})
----json 형태로 바뀐 데이터를 data 라는 이름을 붙여 사용한다.

 

<forEach> -반복문

-배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드

-map() 메서드와 거의 비슷하지만 return 값이 없다

rows.forEach((a) => {
})
---데이터 리스트의 길이만큼 반복하기

 

ex. console에 구별 미세먼지 데이터 찍어보기

rows.forEach(a => {
    let gu_name = a['msrste_nm'];
    let gu_mise = a['index_mvl'];

    console.log(gu_name, gu_mise);
})

 

<fetch 코드에 css 속성 넣기>

-` 백택 사용

let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`