TIL(22.01.22.SAT)

기미노·2022년 1월 23일

ajax jquery 스파르타코딩 웹개발종합반2주차

01. 2주차 배울 것

jQuery, Ajax

💡
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청
2) Javascript 복습 - 홀짝 판별 onclick 함수 만들어보기
- 짝/홀수 판단하는 방법
  - %(나머지 연산)를 이용한다.
```
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1
```
    이해에 도움되는 출처 https://brunch.co.kr/@doselfcoding/50
- 짝/홀수 onclick 함수
```
    <script>
        let count = 1;
        function guy() {
            if (count % 2 == 0) {
                alert('짝');
            } else {
                alert('홀');
            }
						count += 1;
        }
    </script>
```
  - += 와 == 수식 알아보기
    - +=란
      - 기초 연산자로 분류
      - 왼쪽 변수에 오른쪽 값을 더하고 그 결과를 왼쪽 변수에 할당한다.(결과값이 변수에 따라 다름) ex. a+=b(a=a+b를 의미)
    - ==란
      - 비교 연산자로 분류.
      - 두 개의 값이 같은지 판단하는 연산자로 같으면 true, 다르면 false 결과값 산출.(결과값이 true or false)임
    - 이해에 도움이되는 출처 https://corytips.tistory.com/162
3) Javascript 만으로 충분할까?
- 예를 들어 div 박스를 하나 감추고 싶다면? 버튼의 색깔을 바꾸고 싶다면? 이런 것들 쉽게 해주는 것이, jQuery!

02. JQuery 시작하기

1) jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 즉, 라이브러리 느낌.
  
  🔥 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
  1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
  jQuery라는 라이브러리가 등장!!
- jQuery와 Javascript -비교
  
  🔥 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
  
  Javascript로 길고 복잡하게 써야 하는 것을
```
document.getElementById("element").style.display = "none";
```
  jQuery로 보다 직관적으로 쓸 수 있음
```
$('#element').hide();
```
2) jQuery 사용하기
- 임포트란
  
  미리 작성된 코드 파일or 데이터를 가져오는 것
- JQuery 임포트 하기
  
  🔥 jQuery CDN 부분을 참고해서 임포트 할 것: (링크)
  - head안에 넣는다!!
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
- jQuery를 사용하는 방법
  
  🔥 $(’#id명’).명령어( )
  
  🔥 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있음.
  예) 특정 인풋박스의 값을 → 가져와줘!
  예) 특정 div를 → 안보이게 해줘!
  css에서는 선택자로 class를 썼으나,
  jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨.

03. JQuery 다뤄보기

모든 jQuery를 외워야 하나?

🔥 아니요!!! 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, jQuery가 할 수 있는 일은 무척 많은데....? (언제 외우니?)
그러니, 필요할 때에 필요한 기능을 구글링

자주쓰는 jQuery들 다뤄보기

1. input 박스의 값(value)을 가져와보기
- 예시
```
<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('입력해봐요')
1. div 보이기 / 숨기기
- 숨기기
  - id 값이 post-box인 곳을 가리키고, hide()로 숨기기
    
    🔥 $('#post-box').hide( );
- 보이기
  - show()로 보이기
    
    🔥 $('#post-box').show( );

태그 내 html 입력하기

div안에,동적으로 html을 넣고 싶을 땐?(예, 포스팅되면 → 카드 추가)
- 1.html 형식으로 작성한 문자열을 2. JQuery로 진짜 html형식으로 전환
  - temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨)
    🔥 let temp_html = html 뼈대
    - 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다.
    - backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다
      🔥 let txt = 아자! 화이팅
      let temp_html =뼈대 ${txt} 뼈대
  - 문자열 처리된 html 뼈대를 html 형식으로 전환
    
    🔥 $('#id명').append(temp_html)

예시

카드가 붙는 div 에 id를 추가해주는 것이 핵심!

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

1) 버튼을 넣어보기

// temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨)
// 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다.
let temp_html = `<button>나는 추가될 버튼이다!</button>`; 

//따라서 문자열 처리된 html 뼈대를 html 형식으로 전환
$('#cards-box').append(temp_html);

2) 버튼 말고, 카드를 넣어보기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

바꾸기
- 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
- 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

04. 서버-클라이언트 통신의 이해

1) 서버→클라이언트: "JSON"을 이해하자
- 크롬 익스텐션 JSONView
  - 좀 더 예쁘게 JSON을 볼 수 있음.
  - Jsonview
```
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
```
- JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 유사
  
  🔥 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
  그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다
  ＊JSON이란 dictionary와 list가 합쳐진 것이구나 정도로 이해하자!
2) 클라이언트→서버: GET 요청 이해하자

🔥 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 (인코딩 정보)

05. Ajax 시작하기

정의
- js를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능. 즉, 서버에 데이터를 비동기 방식으로 요청하는 것!
- 비동기 방식에 대한 설명 출처 https://velog.io/@surim014/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¶m2=value2
    POST 요청은, data : {} 에 넣어서 데이터를 가져감
    data: { param: 'value', param2: 'value2' }
  - success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
```
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}
```

2) Ajax 통신의 결과값을 이용

개발자도구 콘솔에 찍어보기

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		// 값 중 도봉구의 미세먼지 값만 가져와보기
		let dobong = response["RealtimeCityAir"]["row"][11];
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

모든 구의 미세먼지 값을 찍어보기

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

기미노

인풋보다는 아웃풋을 중점적으로

이전 포스트

TIL(22.1.21.FRI)

다음 포스트

TIL(22.01.22.SAT)

01. 2주차 배울 것

02. JQuery 시작하기

03. JQuery 다뤄보기

04. 서버-클라이언트 통신의 이해

05. Ajax 시작하기

TIL(22.1.21.FRI)

TIL(22.1.23.SUN)

0개의 댓글