💡
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고,
Ajax를 이용해 다시 서버에 데이터를 요청
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1
이해에 도움되는 출처 https://brunch.co.kr/@doselfcoding/50 <script>
let count = 1;
function guy() {
if (count % 2 == 0) {
alert('짝');
} else {
alert('홀');
}
count += 1;
}
</script>
🔥 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장!!
Javascript로 길고 복잡하게 써야 하는 것을🔥 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
document.getElementById("element").style.display = "none";
jQuery로 보다 직관적으로 쓸 수 있음$('#element').hide();
임포트란
미리 작성된 코드 파일or 데이터를 가져오는 것
JQuery 임포트 하기
🔥 jQuery CDN 부분을 참고해서 임포트 할 것: (링크)
<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/.. 등을 가리키게 됨.
🔥 아니요!!! 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, jQuery가 할 수 있는 일은 무척 많은데....? (언제 외우니?)
그러니, 필요할 때에 필요한 기능을 구글링
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>
🔥 $('#url').val( );
🔥 $('#url').val('입력해봐요')
🔥 $('#post-box').hide( );
🔥 $('#post-box').show( );
🔥 let temp_html =
html 뼈대
- 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다.
- backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다
🔥 let txt = 아자! 화이팅
let temp_html =뼈대 ${txt} 뼈대
🔥 $('#id명').append(temp_html)
<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>
// temp_html 변수에 만들고자 하는 html 뼈대를 작성( 단 문자열처림 됨)
// 만들고자 하는 html 뼈대는 backtick(`)으로 감싼다.
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
//따라서 문자열 처리된 html 뼈대를 html 형식으로 전환
$('#cards-box').append(temp_html);
// 주의: 홑따옴표(')가 아닌 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("바꾸고 싶은 텍스트");
1) 서버→클라이언트: "JSON"을 이해하자
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
🔥 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다
*JSON이란 dictionary와 list가 합쳐진 것이구나 정도로 이해하자!
2) 클라이언트→서버: GET 요청 이해하자
🔥 API는 은행 창구뉘앙스~~
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라(타입에 따라)
가져와야 하는 것 / 처리해주는 것(정보=데이터에 따라)이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재!
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
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({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
🔥 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져감
data: { param: 'value', param2: 'value2' }
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}
$.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);
}
}
});