2주차 수업내용 정리

▶ jQuery, Ajax

 

jQuery : Javascript를 미리 작성해둔 것(라이브러리)

           자바스크립트로 작성하면 길고 복잡하게 써야 되는 부분을 간편하고 직관적으로 사용 가능함

Ajax : Ajax는 jQuery를 임포트 한 페이지에서만 작동함

 

>>> jQuery 수업내용 정리

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

// jQuery CDN

<script src ="https://www.w3schools.com/jquery/jquery_get_started.asp"></script>

bootstrap을 안쓰는 경우엔 별도로 import 해 줘야 jQuery를 쓸 수 있음

$('#id이름').val(); // 박스에 들어가 있는 값을 가져옴

$('#id이름').val('박스에 넣을 값'); // 박스 안에 들어가 있는 값을 '박스에 넣을 값'으로 바꿀 수 있음

---

// 크롬 개발자도구 콘솔 창에 쳐보기

// id 값이 post-box인 곳을 가리키고, hide()로 안 보이게 한다.

(=css의 display 값을 none으로 바꾼다)

$('#post-box').hide();

// show()로 보이게 한다.

(=css의 display 값을 block으로 바꾼다)

$('#post-box').show();

$('#아이디값').text('바꿀텍스트내용') => #아이디값 안에 있는 텍스트 내용을 바꿀 때 사용

---

let temp_html = `<button>나는 추가될 버튼이다!</button>`;

// `` : 작은따옴표가 아니고 탭키 위에 있는 backtick(`)

$('#cards-box').append(temp_html); 

 

>> 응용하기

// 주의: 홑 따옴표(')가 아닌 backtick(`)으로 감싸야합니다.

// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.

// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.

let img_url ='https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';

let link_url = 'https://naver.com/';

let title = '여기 기사 제목이 들어가죠';

let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산...';

let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `

${title}

${desc}

${comment}

`;

$('#cards-box').append(temp_html);

 

 

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

 

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라

가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

 

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

 

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

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

 

GET 방식으로 데이터를 전달하는 방법

 

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

ex) OO은행XX 지점       창구 번호                   내 주민번호 / 이름 등 정보

 

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

& : 전달할 데이터가 더 있다는 뜻입니다.

예시) 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)
  }
})

URL을 입력하면 console.log(response)에 URL 주소에 있는 데이터들이 들어감

 

*** jQuery에서 img 주소 변경하기

$('아이디').attr('src','주소정보')

 

 

2주 차 수업 들으면서 느낀 점

jQuery, Ajax 모두 처음 배우는 내용이라 어렵지 않을까 싶었는데 javascript가 더 어렵게 느껴졌다.

미세먼지 API, 따릉이 API로 필요한 정보를 가져와 화면에 출력시키는 부분은 사실 어렵긴 했지만

해냈을 때의 성취감이 너무 좋았다.

퀴즈 시간 10분 ~ 15분 주신다고 하셔서 화면 정지시켜놓고 문제 풀면 기본 30분이 지나있을 때도 있어서

'내가 잘하고 있는 건가?' 싶을 때도 있었는데 해설 영상 안 보고 내가 어떻게든 해 냈을 때의 성취감이 너무 중독성 있었다.

아직 문제를 해결하려면 시간이 많이 걸리기도 하고 안될 때도 많지만 문제 푸는 게 너무 즐겁다.

앞으로 3주 차 수업이 남아있는데 끝까지 이 즐거움을 가져가고 싶다.