2022-01-24 TIL

한 것

1. Chapter 2 마무리

TIL

1. 서버-클라이언트 통신

   • Web API
     • 서버에 요청을 보내고 응답을 받기 위해 정의된 명세(Web Application Programming Interface)
     • 브라우저에 주소를 치고 엔터를 누르면 HTML 정보나 data정보(JSON 형식)를 (서버에서) 보내주는데 이 주소가 API. 엔터를 치면 요청이 가고 서버는 응답으로 보내줌.
   • JSON(JavaScript Object Notation)
     • 브라우저-서버 간 통신에서 데이터를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷. 본래는 자바스크립트에서 파생되었지만 편의성 때문에 모든 언어/플랫폼에서 사용하게 됨.
     • JSON은 자료형 리스트(배열), 딕셔너리(객체) 섞어놓은 것처럼 생겼다.
   • GET 요청, 전달
     • 클라이언트가 요청 할 때에도, 타입이라는 것이 존재
     • GET → 통상적으로 데이터 조회(Read)를 요청할 때 ex) 영화 목록 조회
     • POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)요청 할 때 ex) 회원가입, 회원탈퇴, 비밀번호 수정
     • GET 방식으로 데이터 전달 → 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 → ? : 여기서부터 전달할 데이터가 작성된다는 의미, & : 전달할 데이터가 더 있다는 뜻 → 위 구글 주소는 google.com의 search 창구에 다음 정보를 전달 → q=아이폰 : 검색어, sourceid=chrome : 브라우저 정보, ie=UTF-8 : 인코딩 정보
   • 예시
     • https://movie.naver.com/movie/bi/mi/basic.naver?code=161967라는 주소가 있음
     • “?” 기준으로 두 부분으로 쪼갤 수 있음. 앞부분이 “서버주소”, 뒷부분이 “영화번호”
     • 영화 번호를 다른 것으로 바꿔보면 다른 영화 정보가 나온다. 즉 서버에 161967번 영화를 보여달라고 요청을 보내면 서버에서 알아듣고 해당 정보를 보내줌.
     • code라는 이름으로 영화번호를 주자라는 것은 누가 정한 것? → 프론트엔드 백엔드 개발자들이 서로 미리 정해둔 약속이다. 프론트에선 code라는 이름으로 영화번호 주면 됨? 백에서 오케이, 그럼 code로 들어온다고 생각하고 코딩할게

   1. Ajax

      • Asynchronous JavaScript and XML → 비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법
      • $.ajax는 jQuery를 임포트한 페이지에서만 동작 가능(jQuery로 Ajax를 사용하면 코드가 간결하고 더 직관적인 것 뿐. Ajax통신 기법은 jQuery로만 할 수 있는게 아님)
      • $.ajax 기본골격

      $.ajax({
        type: "GET",
        url: "여기에URL을입력",
        data: {},
        success: function(response){
          console.log(response)
        }
      })
      
      /*
      	type: "GET", → GET 방식으로 요청한다.
      	url: 요청할 url,
      	data: {},요청하면서 함께 줄 데이터 (GET 요청시엔 비우기)
      	success: 성공하면 response 값에 서버의 결과 값을 담아서 함수 실행(여기선 결과 값 출력)
      */