1. JQuery의 뜻과 기본 사용법

• Javascript를 이용하면 브라우저에 동작을 추가할 수 있다.
  • HTML이 뼈대고 CSS가 꾸미기라면 Javascript는 동작 추가
  • CSS에 부트스트랩이 있어서 편리하게 디자인을 추가할 수 있었다면, javascript엔 JQuery가 있다.
    • Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만
      1. 코드가 복잡해짐
      2. 브라우저간에 호환성에 문제가 생김
         = 그래서 JQuery를 사용한다!!

• JQuery = 미리 작성된 Javascript.

  • 미리 작성됐기 때문에 가져오기 전 "임포트"를 해야한다.

  • jquery를 사용할때 코드는 보다 직관적으로 변한다.

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

  • 헤드와 헤드 사이에 위에 있는 코드를 넣으면 된다고 한다 (임포트한다).

• JQuery를 적용할 때도 CSS처럼 원하는 요소에 닉네임을 지정한다.

  • CSS: [class =""] > [.""]
  • JQuery: [id = ""] > [$('#"")]

• CSS와 JQuery를 동시에 적용시키려면 태그에 클래스와 아이디를 둘 다 추가해야 한다.

2. 서버-클라이언트 통신이란?

JASON을 이해해야한다.

• JSON은 Key, Value로 이뤄져있음. (Dictionary와 리스트형이 합쳐진 모양)
  
• 위 사진에서:
  • Key: ":" 이전에 있는 친구들 (RealtimeCityAir, row 등)
  • Value: "{}" 안에 들어있는 친구들

클라이언트의 요청

• GET: 통상적으로! 데이터 조회(Read)를 요청할 때
  • ex.) 영화 목록 조회
  • https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
    • 위 주소는 "?"를 기준으로 크게 두 부분으로 나뉜다.
    • "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호]다.
  • 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
  • 영화 정보: code=161967

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

3. Ajax로 API 호출 (아주 기본적인 정리)

• Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.
• Ajax의 기본 골격:

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

• 여러가지 연습을 해봤는데 아직 한참 부족한듯하다.
• 보고 배끼는 수준에 가까운 것 같은데, 똑같이 계속 연습하면서 점점 구조를 익혀가야겠다.

아직 뭐가 뭔지 잘 이해가 안가지만 적어도 기본적인 느낌은 이해가 가는 것 같다.
왜 개발자는 구글링을 잘 해야하는지 알 것 같다... 매번 구글에 검색하고 코드를 찾아내서 옳바르게 조합할 수 있는게 기본적인 걸음인거 같은데...
갈 길이 매우 멀구먼..