• 이 글은 웹개발 종합반 강의를 수강하고 공부한 내용을 정리하는 용도로 작성되었습니다.
• 추가학습이 필요한 부분은 ❓이렇게 표시하고 학습 이후 글을 업로드 합니다.

[💡 학습 목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

jQuery

1. jQuery란?
   HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
   ❓라이브러리

2. 임포트하기

   • head 안에 넣는다.

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

   • id 값을 통해 특정 버튼/인풋박스/div/ 등을 가리켜서 조작한다.

3. 자주 쓰는 jQuery

   • input 박스의 값을 가져와보기

     <div class="form-floating mb-3">
       <input id="url" type="email" class="form-control" placeholder="name@example.com">
       <label>영화URL</label>
     </div>
     // 크롬 개발자도구 콘솔창에서 쳐보기
     // id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
     $('#url').val();
     
     // 입력할때는?
     $('#url').val('이렇게 하면 입력이 가능하지만!');

   • div 보이기 / 숨기기

     <div class="mypost" id="post-box">
       <div class="form-floating mb-3">
           <input id="url" type="email" class="form-control" placeholder="name@example.com">
           <label>영화URL</label>
       </div>
       <div class="input-group mb-3">
           <label class="input-group-text" for="inputGroupSelect01">별점</label>
           <select class="form-select" id="inputGroupSelect01">
               <option selected>-- 선택하기 --</option>
               <option value="1">⭐</option>
               <option value="2">⭐⭐</option>
               <option value="3">⭐⭐⭐</option>
               <option value="4">⭐⭐⭐⭐</option>
               <option value="5">⭐⭐⭐⭐⭐</option>
           </select>
       </div>
     </div>
     // 크롬 개발자도구 콘솔창에 쳐보기
     // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
     $('#post-box').hide();
     
     // show()로 보이게 한다.
     $('#post-box').show();

   • 태그 내 동적 html 입력하기(예를 들어, 포스팅되면 → 카드 추가)
     - 카드가 붙는 div 에 id를 추가해주는 것이 핵심!

     • 카드 넣어보기

       					let title = '영화 제목이 들어갑니다';
       					let temp_html = `<div class="col">
       							            <div class="card h-100">
       											<div class="card-body">
       							                    <h5 class="card-title">${title}</h5>
       												<p>⭐⭐⭐</p>
       											</div>
       										</div>
       									</div>`;
       					$('#cards-box').append(temp_html);
       				
       					```

     • 버튼 넣어보기

       let temp_html = `<button>나는 추가될 버튼이다!</button>`;
       					$('#cards-box').append(temp_html);

       주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 한다.
       숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력된다.
       백틱을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있다.

서버-클라이언트 통신 이해하기

API

❓API 는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

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

  👉 GET
  https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

  위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
  "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

  * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
  * 영화 정보: code=161967
  
  👉 GET 방식으로 데이터를 전달하는 방법

  ?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
  & : 전달할 데이터가 더 있다는 뜻입니다.

  예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

     위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
     q=아이폰                        (검색어)
     sourceid=chrome        (브라우저 정보)
     ie=UTF-8                      (인코딩 정보)
  

Ajax

👉 Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

• Ajax 기본 코드

  			$.ajax({
  				type: "GET",
  				url: "여기에URL을입력",
  				data: {},
  				success: function(response){
  					console.log(response)
  				}
  			})
  		```
  

• $ajax 코드 설명

  • type: "GET" → GET 방식으로 요청한다.
  • url: 요청할 url
  • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

      👉 리마인드
      GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
      http://naver.com?param=value&param2=value2 
      
      POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
      data: { param: 'value', param2: 'value2' },

  • success: 성공하면, 서버에서 준 결과를 response라는 변수에 담아서 함수를 실행한다.