2022. 4. 18. 23:31ㆍ3층 1구역 - 개발의 장/웹개발 일지(풀스택)
1주차에는 뼈대인 HTML과 꾸며주는 CSS에 대해 배우고 실습 했었다.
2주차는 자바스크립트를 좀 더 풍부하게 만들어주는 JQuery, Ajax에 관해 배우고 실습했다.
JQuery란?
HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것.
Javascript로도 해결이 가능하지만 코드가 복잡해지고, 브라우저 간 호환성 문제도 고려해야 하기 때문에
JQuery 라는 일종의 라이브러리가 생기게 되었다.
JQuery를 사용하기 위해 전문 개발자분이 짜둔 코드를 가져와야 하며, '구글크롬' 기준으로 이러한 코드를 '임포트'
해와야 한다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
이렇게 가져온 후, CSS에서는 'class' 라고 지정해주었다면, JQuery에서는 'id' 라고 지정해주어야 한다.
지정이 완료되면 '영화 기록하기' 버튼을 누르면
<button onclick="open_box()">영화 기록하기🍂</button>포스트 박스가 나오게 하겠다.
function open_box(){
$('#post-box').show()
}'닫기' 버튼을 누르면
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>포스트 박스가 숨겨지게 하겠다.
function close_box(){
$('#post-box').hide()
}<script></script>안에 'function' 값을 넣어주면 된다.
<script>
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
</head>
<!--div는 구역, div 옆에 class="mytitle 이라는 변수를 주고 꾸미기 가능-->
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="open_box()">영화 기록하기🍂</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="url" placeholder="name@example.com">
<label for="floatingInput">영화 URL</label>
</div>
<!-- Input group의 Custom forms 참고-->
<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 class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>이러한 코드가 완성되어 포스트 박스를 열고 닫고 할 수 있게 된다.
Ajax를 하기 전, 서버-클라이언트 통신에 대해 이해할 필요가 있다.
내(클라이언트)가 은행(서버)을 가서 업무를 보고자 하는 은행창구(API)를 선택하듯, '타입'이란 게 존재한다.
GET 방식
데이터 조회를 요청할 때 쓰는 방식이다.
POST 방식
데이터 생성, 변경, 삭제를 요청할 때 쓰는 방식이다.
나는 여기서 GET방식에 대해 공부했다.
내가 '기생충' 이라는 영화에 대해 데이터를 요청할 때
"?"를 기점으로 서버 주소와 영화 정보로 나뉘게 된다.
https://movie.naver.com/movie/bi/mi/basic.naver?code=161967 < 기생충 영화 정보
서버 주소 : https://movie.naver.com/movie/bi/mi/basic.naver
영화 정보 : code=161967
따라서, 내가 '이러한 서버에서 이 영화에 대한 정보를 받고 싶다!' 라고 요청하는 것이
GET 방식 이라는 것이다.
Ajax는 다음과 같다.
먼저 JQurey를 임폴드 해오고,
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
AJax 코드를 가져온다.
$.ajax({
type: "GET", <<<나는 GET 방식으로 요청합니다.
url: "여기에URL을입력", <<<요청할 데이터의 url를 입력
data: {}, <<<요청하면서 함께 줄 데이터(GET 요청시엔 비우기)
success: function(response){ <<< 서버에서 준 결과를 response라는 변수에 대입
}
})
AJax를 통해 인천에 실시간 기온을 알아보도록 하자.
<div class="title">
<h1>윤종신 팬명록</h1>
<p>현재기온 : <span id="temp">00.0</span>도</p>
</div><script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/incheon",
data: {},
success: function (response) {
let temp = response ['temp']
$("#temp").text(temp)
}
})
})
</script>let temp = response ['temp'] >> temp 라는 변수에 api에서 받아온 'temp' 를 보여주세요.
$("#temp").text(temp) >>> <span id="temp">00.0</span>에서 id="temp ->$("#temp")에 temp변수를 텍스트화 해주세요.
결과적으로 서버에서 현재 인천의 기온을 받아와서 내가 만든 팬명록 아래에 인천의 현재기온이 실시간으로
표시되게 된다.
1주차는 뼈대와 꾸미는 것을 하여 쉽다고 느꼈지만, 2주차에 들어오고 자바스크립트에 관해 본격적으로 다뤄보니 많이 어렵게 느껴졌다. 강의 한 번듣고, 실습 한 번 해보고가 아니라 여러번의 강의듣기, 실습도 필요하다고 느껴지는
2주차였다.
'3층 1구역 - 개발의 장 > 웹개발 일지(풀스택)' 카테고리의 다른 글
| [스파르타 코딩 클럽]과 함께하는 웹개발 종합반 - 4주차 (0) | 2022.04.28 |
|---|---|
| [스파르타 코딩 클럽]과 함께하는 웹개발 종합반 - 3주차 (0) | 2022.04.21 |
| [스파르타 코딩 클럽]과 함께하는 웹개발 종합반 - 1주차 (0) | 2022.04.12 |
| [스파르타 코딩 클럽]과 함께하는 웹개발 종합반 - 0주차 (0) | 2022.04.09 |