- jQuery 시작하기
- jQuery란
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리다.
- jQuery 추가하기
https://www.w3schools.com/jquery/jquery_get_started.asp
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>링크에 접속해서 구글 CDN을 통해서 Import하여 세팅 후 사용할 수 있다.
*CDN(Content Delivery Network) 약자로 물리적, 지리적 제약없이 전세계 사람들에게 빠르게 컨텐츠를 전송하는 기술이다.
구동원리로는 프록시 서버에서 시작된 웹 캐시의 클라우드화다. 자세한 내용을 추후 학습이 필요.
✍️ 배운점
jQuery를 구글 CDN을 통해서 Import 형식으로 간단하게 세팅하는 것이 가능하다. 간단한 세팅 후에는 요소들을 추가, 삭제 등 수정하고 이벤트를 실행하는 부분을 수월하게 작성할 수 있다.
기본 JS와 비교해보면 훨씬 수월하게 작업이 가능하다는 것을 경험했다.
- jQuery 다뤄보기
- jQuery의 기본적인 형태
< > 태그에 ID 값을 부여한 후에 $('#ID값').method(); 형태로 쓴다.
<div class="myPost" id="post-box">
<div class="form-floating mb-3">
<input class="form-control" id="url" placeholder="name@example.com" type="email">
<label for="floatingInput">영화URL</label>
</div>
</div>ex1)
$(’#post-box’).hide(); —> 숨김
$(’#post-box’).show(); —> 보여주기
ex2)
let temp_html = <div>추가할 항목입니다.</div>
$(’#post-box’).append(temp_html); —> temp_html 태그가 계속 추가 됨.
<div class="myPost" id="post-box">
<div class="form-floating mb-3">
<input class="form-control" id="url" placeholder="name@example.com" type="email">
<label for="floatingInput">영화URL</label>
</div>
<div>추가할 항목입니다.</div>
<div>추가할 항목입니다.</div>
</div>- 자주 쓰이는 jQuery 메소드
| $('ID값').append(추가값); | ID값 태그 내에 '추가값'을 추가한다. |
| $('ID값').val(); | ID값 태그의 값을 불러옴. |
| $('ID값').empty(); | ID값 태그의 값을 모두 지움. |
| $('ID값').attr(”src”, 이미지 URL); | ID값 태그의 이미지를 바꿀 수 있다. |
| $('ID값').text(”바꾸고 싶은 텍스트”); | ID값 태그의 텍스트를 바꿀 수 있다. |
| $(document).ready(function( ) {함수 내용}); | 페이지 로딩 시 함수 실행. |
✍️ 배운점
jQuery를 사용하면 제공하는 메소드를 통해서 이벤트를 적용할 대상을 선정하는 것이 용이하고 jQuery의 문법도 간단하기 때문에 간결한 코드작성이 가능하다.
- 서버-클라이언트 통신 이해하기
- GET 방식, POST 방식
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시 사용
예) 회원가입, 회원탈퇴, 비밀번호 수정
*서버에서 수신 받는 데이터의 형태는 JSON 형태로 수신.
JSON은 Key:Value 형태로 자료형 Dictionary와 유사한 형태.
- GET 데이터 전달 방식
인터넷 주소의 ? 부터 전달할 데이터가 있음
&를 붙이면 전달할 데이터가 추가적으로 존재
ex)
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소에서는 google.com의 search로 q=아이폰 & 추가정보1 & 추가정보2를 전달
q=아이폰 (검색어),
추가정보1 ⇒ souceid=chrome (브라우저 정보)
추가정보2 ⇒ ie=UTF-8 (인코딩 정보)
✍️ 배운점
일상에서 사용하는 웹 주소의 구조에 대해서 간략하게 살펴보았다.
접속한 도메인, url 주소, 브라우저 정보 등 생각보다 많은 것을 알 수 있었다.
- Ajax 시작하기
- Ajax 기본 구조
<script> $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }); </script>
url에 API 주소를 입력하면 데이터 수신 가능
서울시 미세먼지 OpneAPI
http://spartacodingclub.shop/sparta_api/seoulair
*수신된 값은 JSON형태이기 때문에 [’Key값’]으로 선택할 수 있다.
JSON 문서의 경우 크롬 확장 프로그램 JSONView 추가로 보기 편한 형태로 볼 수 있다.
파이어폭스 브라우저의 경우에는 기본적으로 JSON 파일을 인식하여 보여줌.
✍️ 배운점
서버 통신을 통해 수신 받은 데이터 값을 JSON 형태로 수신되는데 JSON은 자료형의 dictionary와 유사한 형태로 수신되기 때문에 key값을 선택하여서 필요한 자료를 선택할 수 있다.
- HTML 표 태그 작성 구조
<body>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>$<table> 태그로 표를 생성하고,
$<thead>태그로 표의 행과 열을 설정한다.
$<tbody>태그로 설정된 구조에 기입할 내용을 입력한다.
✍️ 배운점
여태껏 HTML로 페이지를 작성하면서 표를 만들 기회가 없어서 모르던 태그를 알게 되었다.
이를 활용해서 위에 작성한 자주 쓰이는 jQuery 메소드도 마크다운으로 표를 작성했다.
학습기록의 내용은 스파르타코딩 웹개발 종합반 강의를 바탕으로 정리했습니다.
출처 - 스파르타코딩클럽
