웹 개발 종합반 2주차 요약
JQuery와 Ajax
JQuery
HTML요소를 자바스크립트로 조작하기 쉽게 만들어둔 라이브러리 기능이다.
|
1
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
cs |
우선 임포트 과정을 거친 다음에야 쓸 수 있다.
표기는 아래처럼 $().기능명();으로 작동한다. 아래 코드는 대상ID를 보여주는 기능으로 가리는 기능은 hide();로 사용하면된다.
|
1
|
$('#대상ID').show();
|
cs |
모든 JQuery를 외울 필요는 없지만 일부 자주 쓰이는 기능은 미리 메모해두는 것이 좋지 싶다. 나중에 시간이 날 때 마다 따로 기록을 해둬야겠다.
Ajax
Ajax는 자바스크립트를 이용한 정보 교환 기법으로 여기서는 서버와의 정보 교환 용도로 쓰인다.
|
1
2
3
4
5
6
7
8
|
$.ajax({
type: "GET"(혹은 "SET"),
url: "URL",
data: {},
success: function(response){
console.log(response)
}
})
|
cs |
숙제 진행과 관련되서, 날씨 관련 API를 받아와서 써먹는 것이었는데 나는 여기서 기온 말고 날씨까지 값을 받아오는 것을 보고 이를 활용할 방법을 찾아봤다. API에서 받아오는 값은 단순한 수치 %로 표기되기에, 기준을 잡고 일정 % 이상이면 맑음, 흐림 등을 표현하는 방법을 찾아봤다. 아래는 게임 개발할 때 자주 쓰던 방식을 써먹어서 만든 코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<script>
$(document).ready(function ()
{
$.ajax
({
type: 'GET',
url:'뭐시기뭐시기블라블라',
data:{},
success:function(response)
{
let temp = response['temp'];
let clouds = response['clouds'];
let a = parseInt(clouds);
if (a >= 100)
{
clouds = '비 혹은 눈';
}
else if (a >= 80)
{
clouds = '얕은 비 혹은 눈';
}
else if (a >= 60)
{
clouds = '짙은 구름';
}
else if (a >= 40)
{
clouds = '구름';
}
else if (a >= 20)
{
clouds = '맑음 혹은 약간 구름';
}
else if (a >= 0)
{
clouds = '맑음';
}
let city = response['city'];
$("#cloudsID").text(clouds);
$("#tempID").text(temp + '도');
}
})
});
</script>
|
cs |
받아오는 값에 따라 else if로 차례차례 출력값을 조정하는 코드이다. 이 코드를 짤 때 겪었던 문제는 받아오는 cloud값이 int가 아니라 string이어서 if 비교를 해도 원하는 출력값이 나오질 않았다. 이건 게임 개발할 때 겪어봤던 문제였기에 구글링으로 parseInt를 찾아내어 값을 변환시켜 해결하였다. 그나저나 이렇게 단순한 수치야 이 방식으로 해결되지만 분류해야하는 값이 많아진다면 무작정 else if로 하지말고 깔끔하게 int로 떨어지게 나눈다음 switch 구문을 만들어 해결하는 것이 좋을 것 같다. if 여러번 쓰는 것보다야 switch 하나 쓰는 것이 보기도 좋고 성능도 깔끔할테니 말이다. 위 코드를 바꿔본다면 parseInt한 값을 20으로 나누고 나머지를 버려 0, 1, 2, 3, 4, 5 중 정해진 하나로 확실히 떨어지게 만들고 switch로 각 값에 맞는 출력값이 나오도록 하고, 디폴트 값으로 어떤 버그나 추가 사항에 의해 생기는 예외사항을 처리할 수 있게 만드는 것이 방법이라고 할 수 있겠다. 지금은 복습할 것이 많으니 따로 만들지는 않겠지만 머리 속으로 짜보는 것으로 대신한다.