[TIL] 내배캠 3일차

3일차에는 웹개발 강의 3주차에서 배운 내용을 정리했다.

Fetch란?

인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미한다.

Fetch에 기본 구조는 아래 코드와 같다.

<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
			console.log(data)
	})
</script>    

Fetch를 활용한 응용코드이다.

• script 태그안에 새로운 $(document).ready(function() { ... }) 함수 작성
• fetch 함수를 사용하여 주어진 URL에서 데이터를 가져오기
• .then(res => res.json()) 반환 된 응답(response)내용을 JSON 형식으로 만들기
• .then(data => { ... }) JSON 데이터를 가져온 후
• temp 값을 변수에 담는다!
• 선택자 선택 후 temp의 값을 문자열로 삽입

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#msg').text(temp);
    })
})

JSON이란?

자료형 Dictionary와 유사하며 Key:value형태로 된 데이터이다.

Http method

클라이언트가 서버에 요청할때 메서드의 타입을 통해 데이터를 요청하게 된다. 주로 get과 post 방식으로 데이터를 전달한다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회

• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원 가입, 회원 탈퇴, 비밀번호 수정
  

3주차를 공부하며...

데이터를 서버로 요청하고 수정해서 다시보낼 때 사용되는 메서드에 개념이나, JSON(데이터)에 대해 배울 수 있었다.