항해99 사전 스터디 2주차
나에게 있어서 JQuery는 익숙하지 않다.
예전에 맛보기로 배워는 보았지만, 나는 JQuery보다 바닐라 자바스크립트를 더 열심히
공부하였기 때문이다.
JQuery가 사용하기 편하고 자바스크립트보다 간단한 것은 사실이다.
하지만 과거 나는 편하고 간단한 것에 익숙해지면 안된다는 생각과 기본에 충실하자는
마인드 때문에 JQuery를 공부하지 않았던 것 같다.
뿐만 아니라 과거에 JQuery가 용량이 커서 무겁다, 속도가 느려진다 등등 말이 많았다.
하지만 지금 생각해보면 구지 외면할 필요가 있었을까 싶다.
몇 가지 배운 것을 짚고 넘어가 보려고 한다.
JQuery
어떤 input의 값을 가져올 때, 자바스크립트에서는
function printName() {
const name = document.getElementById('name').value;
}이런식으로 가져오게 된다. 안에 내용을 보면 굉장히 길고 복잡하다.
그러나 JQuery는 간단하고 상당히 짧다.
function printName() {
$('#name').val();
}얼마나 간단한가!
이러니 전세계 사람들이 JQuery 열광하는 것이다.
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}위의 간단한 작동을 자바스크립트로 한다고 하면 document.getElementById로 버튼을 가져와서, 버튼에 addEventListener를 붙이고... 어후, 생각만해도 복잡하다.
하지만 아무리 복잡해도 무엇보다 자바스크립트를 잊어서는 안된다.
API
API에 대한 정말 많고 많은 설명이 있다. 하지만 스파르타 코딩클럽의 설명이 너무 정확한것 같다.
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼.
개발자 면접에서도 자주 물어보는 것중 하나다. API와 REST API 두개의 개념을 확실히
알아둘 필요가 있다.
Ajax
Ajax는 간단하게 말해서 서버와 통신하기 위해 객체를 사용하는 것을 말한다.
JSON,XML,HTML 그리고 일반 택스트 형식 등을 포함해서 다양한 포맷을 주고 받을 수 있지만, 나는 JSON 형태를 가장 많이 주고 받아 보았다.
사실 Ajax보다 더 중요한 것은 GET과 POST에 대한 이해이다.
GET은 데이터를 조회 할 때, 즉 네이버 뉴스를 클릭하면 뉴스가 불러오는 것은 GET이다. 즉 조회(Read)가 된다.
POST는 데이터를 생성(Creat), 변경(Update), 삭제(Delete)를 요청 할 때, 즉 네이버 회원탈퇴를 한다고 하면 POST가 되는 것이다.
이걸 정확히 이해해야 나중에 심화 과정을 들어가서 로그인 기능 등을 구현할때 해매지 않는다.
나의 기억상 과거에 내가 가장 많이 사용한 것은 fetch와 then 그리고 catch이다.
const componentDidMount = () => {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((result) => console.log(result))
.catch((err) => console.log(err));
};fetch와 then 이것을 처음 배울 때는 너무 어려웠다. 사용하는 것조차 이해가 안갔다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})하지만 위의 Ajax를 배울때는 달랐다. 왠지 모르게 fetch then보다도 너무 친숙하고
이해가 잘 되었다. 조금 아쉬웠던 점은 ajax로 객체를 받을 때 에러를 잡는 것을 알려주지 않아서 그 부분이 아쉬웠다.
아직 멀었지만, 나중에 react를 배우면 axios를 배운다는 것도 간과해서는 안될 것 같다.
axios도 fetch랑 다를게 없다. get과 then 그리고 catch이다.
사실 react에는 React-Query 너무도 편한 라이브러리가 있다는 것은 비밀...
2주차 과제
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Marvel 팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Do Hyeon', sans-serif;
}
.mytitle{
height: 250px;
width: 100%;
background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.annihil.us/u/prod/marvel/i/mg/b/f0/5a6a3c922daf3/clean.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost{
max-width: 500px;
width: 95%;
margin: 20px auto 0 auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.inputButn{
display: flex;
padding-top: 20px;
}
.recordbtn{
background-color: rgba(0,0,0,0.8);
padding: 8px;
color: white;
border: none;
border-radius: 10%;
}
.recordbtn:hover{
color: #FF2E63;
}
.myquote{
max-width: 500px;
width: 95%;
margin: 30px auto 0px auto;
margin-bottom: 50px;
}
.card{
border: 1px solid rgba(0,0,0,0.4);
box-shadow: 0px 0px 3px 0px gray;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.card:hover{
padding: 10px;
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/내가 사는 곳",
data: {},
success: function (response) {
let text = response['temp'];
$('#temp').text(text);
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>MAVEL 팬명록</h1>
<p>현재 기온: <span id="temp">00.0</span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<div class="inputButn">
<button class="recordbtn">응원 남기기</button>
</div>
</div>
<div class="myquote">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>제발 코믹스에도 신경 많이 써주세요.</p>
<footer class="blockquote-footer">김OO</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>엑스맨도 마블에 합류하게 해주세요.</p>
<footer class="blockquote-footer">이OO</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>어나힐레이션 컨퀘스트도 드라마말고 영화로 출시해주세요.</p>
<footer class="blockquote-footer">박OO</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>2주차 과제는 날씨에 온도를 불러와서 보여주는 것이었다.
P.S. 전국적으로 갑자기 영하로 기온이 떨어지면서 너무 추워졌다. 아무래도 나의 계절 겨울이 온 것 같다. 눈만 오면...
