What I Learned Today
서버와 클라이언트 통신
- JSON 이란?
JSON - MDN 참고
웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)하며,
Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이고 JSON이 Javascript 객체 문법과 매우 유사하지만 딱히 Javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공된다.
JSON은 문자열 형태로 존재하며, key:value 로 이루어져 있다.
-
GET
데이터 조회(Read)를 요청할 때 사용
ex. 목록 조회 -
POST
데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 사용
ex. 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 데이터 전달 하기
ex. https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: code=161967
ex. google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달한다는 것으로
q=아이폰(검색어), sourceid=chrome(브라우저 정보), ie=UTF-8(인코딩 정보)
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻
jQuery
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것.
-
jQery라는 라이브러리는 왜 필요할까?
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야 하는 문제가 있어 생기게 되었다. -
jQery Vs Javascript
Query는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이며 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것으로 그렇기 때문에 쓰기 전에 임포트를 해야한다.
그렇다면 임포트 가 무엇일까? 미리 작성된 자바스크립트 코드를 가져오는 것을 임포트 라고 부른다.
Ajax(Asynchronous JavaScript and XML)
- 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
- 최근에는 XML 보다 JSON을 더 많이 사용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.
Ajax 코드 해설
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
❗️$ajax 코드 설명
-type: "GET" → GET 방식으로 요청한다.
-url: 요청할 url
-data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
-
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2 -
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },
-
success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}Key Concepts
#반목문 for문
for문
#for in 문
for in 문
#property 의 정의
프로퍼티
#자바스크립트 객체 지향 기본기
객체 지향 기본기
Code Snippets
서울의 날씨 가져와서 페이지에 ajax로 적용해보기🤓
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function(response){
$('#temp').text(response['temp'])
}
})
});
</script>
Challenges Experienced
음...jQery 까지는 이해가 되었으나 ajax 가 이해가 안된다. 더 쉽게 하기 위해 쓰는 코드인데 왜그럴까..익숙하지 않아서 그런걸까 좀 더 코드를 쓰면서 적용시켜봐야겠다.
