항해 99 - 웹개발 종합반 - WIL - 2
1. 배운 내용
1) Javascript 문법에 익숙해진다.
2) jQuery로 간단한 HTML을 조작할 수 있다.
3) Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
배운 것을 가볍게 정리하자면
JQuery: Javascript의 라이브러리, 즉 함수 모음
특정한 기능을 일일히 Javascript 코드로 짜면 매우 비효율적일 것이다. 그래서 전문가들이 필요한 기능을 구현해놓고 그것을 모아놓은 것이 JQuery이다.
JQuery를 특정 페이지에서 쓰기 위해선 해당 페이지에 JQuery를 import 해야한다.
Ajax: (지금까지 배운 것을 기준으로 하자면) Javascript로 클라이언트와 서버가 통신할 수 있도록 해주는 라이브러리
Ajax역시 jQuery를 임포트한 페이지에서만 동작 가능하다.
은행창구와도 같은 API를 통해 데이터를 신청하는 데 그 방식엔 GET과 POST 방식이 있다.
POST는 아직 배우지 않아 기록하지 않기로 한다.
[GET 방식으로 데이터를 전달하는 방법]
?: 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달함
q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
출처: 스파르타 코딩클럽 - 웹개발 종합반 2주차
이러한 개념들을 바탕으로 오픈API를 활용하여 랜덤 고양이 사진을 보여주는 페이지, 서울 시 따릉이 주차 현황 등을 구현해보았다.
이 과정에서 흔히 쓰이는 코드 패턴들을 배워볼 수 있었다. 가령 아래와 같이 Ajax 콜로 호출한 데이터 중 필요한 것만 추출, 기존 페이지에 추가, 보기좋게 출력하는 패턴이 있다.
$.ajax({
type: "GET",
url: "오픈 API가 들어갈 부분, 서울 시 따릉이 API",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let station = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let parking = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (parking < 5) {
temp_html =
`<tr class="low">
<td>${station}</td>
<td>${rack}</td>
<td>${parking}</td>`
} else {
temp_html =
`<tr>
<td>${station}</td>
<td>${rack}</td>
<td>${parking}</td>`
}
$('#names-q1').append(temp_html)
}위와 같이 JQuery에서 ``(Backtick)이라는 것을 쓰게되면 기본적으로는 따옴표처럼 문자열을 표시해주지만, ``안에 들어가 있는 것에 ${넣어줄 값 or 변수명}으로 값을 그때 그때 넣어줄 틀을 만들어 줄 수도 있다.
이렇게 배운 것들을 토대로 아래와 같은 페이지를 만들었다.
2. 수강 후기
1주차에는 Javascript를 아주 가볍게만 다루었었고 2주차는 본격적으로 다루었다. 꽤 어려운 부분들이 많았으나 차근차근 해결해나가는 맛이 있었고, 프론트엔드의 실질적인 부분을 배워서 뿌듯했다 :)
정말 겉으로만 알던 프론트엔드를 좀 더 알게되었다. 항상 프론트엔드가 서버와 교류할 땐 무엇을 하는 건지 몰라 막막했는데
JQuery와 Ajax를 알고 나니 이젠 HTML코드도 좀 더 읽기 수월할 것 같다.
비록 GET이라던가 Ajax 등 배운 것에 대해 100% 이해한 것은 아니지만 앞으로 코딩을 해나가며 차근차근 알아가보고자 한다.
다음 주차 내용이 기대된다!