Web 프론트엔드 (9) / Jquery 도구, Ajax

 

지난 시간까지 JavaScript 기초 문법 공부를 마무리했었다.

이제 Jqeury의 Ajax를 이용해 서버 api를 받아오는 방법을 짧게 배워보자.

 

 

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

CHAPTER4 : 만능 언어 자바스크립트, JS

 

[서버와 통신할 수 있는 Jquery 도구, Ajax]

 

웹사이트에 들어가면 우리는 흔히 다양한 데이터들이 자동으로 화면에 나타나는 것을 볼 수 있다.

이는 서버와의 통신을 통해, 웹사이트가 시작되면 서버에서 데이터를 받아오도록 코드를 작성해주어야 한다.

이처럼 Ajax는 서버에서 데이터를 간편하게 받아올 수 있도록 Jquery에서 제공되는 함수이다.

직접 코드를 작성해보며 익혀보자.

 

 

 

 

1. 웹사이트에 들어가면 console 띄우기

 

 

웹사이트가 시작되자마자 콘솔을 띄우는 기능을  만들어보았다.

 

$(document).ready(function(){

 

    console.log("원하는 문구 작성");   })

 

함수안에 함수를 선언하는 꽤 독특한 방식이다.

Jquery에서 $document는 웹서비스가 기본적으로 제공해주는 현재 만들어진 웹사이트의 정보가 담긴 변수이다. 

ready는 꽤 직관적으로 보인다. 정보를 바로 준비해두고 웹사이트가 시작되면 보여주겠다! 는 느낌이다.

함수 안에 함수가 들어가는 구조는 그렇게 흔히 볼 수 있는 것은 아니라고 한다.

웹사이트가 시작되면 가장 기본적으로 띄워줄 부분을 담당하는 코드이기 때문에 꽤 유용하다.

이 구조 자체는 한번 외워두면 좋을 것 같다.

 

 

 

 

 

ajax의 기본구조는 다음과 같다.

$.ajax를 통해 Jquery에서 ajax함수를 호출해준다.

내용은 객체로 구성되어 있어 정보에 대한 key값 : value값이 쌍을 이루고 있다.

또한 정보를 불러오기에 성공했을때 호출되는 sucess:function과 실패했을때 호출되는 error:function이 있다.

sucess:function에서는 json(앞에서 불러온 데이터)를 받아온다. 

여기서는 추가로 가져온 값을 콘솔에 띄워주도록 log함수를 사용하였다.

 

url이 들어가는 이유는 이 강의를 들을때 맨처음에 이론에서 배웠던 내용과 관계가 있다.

서버 개발자는 API(기능)를 개발하고 그것을 주소 형태로 넘겨준다.

때문에 url을 통해 데이터를 받아오는 것이다.

또한 아이디/비밀번호와 같이 서버에 데이터를 post하는 방식이 아닌, 

단순히 데이터를 가져오기 때문에 type은 GET으로 한다.

 

 

 

 

 

또한 부트스트랩 버전과 Jquery에 url에 따라 에러가 추가적으로 날 수 있다.

- 만약, Jquery를 import하는 코드에 다음과 같이 slim이라는 문구가 있다면 삭제해준다.

https://code.jquery.com/jquery-3.5.1.slim.min.js

slim은 최대한 용량을 가볍게 하기 위해 비교적 무거운 ajax가 삭제되어 있다.

 

 

 

- 그래도 실행이 안된다면 부트스트랩에서 Jqeury를 추가해주는 코드를 살펴보고

integrity나 crossorigin 등의 속성이 있다면 삭제해준다.

보통 부트스트랩 버전이 4일 경우 부트스트랩 코드 자체에 Jquery가 포함되어 있다.

부트스트랩만 단독으로 사용할 때를 가정한 코드이기 때문에 만약 ajax를 사용하고 싶다면 해당 부분을 지워주어야 한다. 

 

- 그래도 안된다면 오타가 있나 살펴보자.

30분동안 콘솔에 결과도 오류메시지도 나오지 않아서 뭐가 잘못됐는지 한참 헤맸다.

결과는 success에서 c를 빼트려 sucess라고 쓴 오타 때문이었다.

 

 

 

 

 

ajax가 정상적으로 동작했다면 다음과 같이 웹사이트 콘솔에서 받아온 데이터가 나타나는 것을 볼 수 있다.

 

이제 실행시 데이터를 받아오는 첫단계를 성공했으니 가져온 데이터를 활용하거나,

아니면 스타일을 덧입혀 웹사이트에 적절히 배치해주는 과정이 남았다!

 

 

 

 

 

 

 

 

 

 

 

여기까지 프론트엔드 이론은 끝이 났다.

다음 시간에는 지금까지 배운 것들을 총! 집합해서

영화 사이트를 만들어보는 실습을 진행할 예정이라고 한다.

분명 코딩이 (사실 내 손가락이) 한번에 뚝딱 만들어주진 않고

엄청 많은 에러를 만들어 내겠지만..

그래도 기대를 잔뜩 갖고 다음으로 넘어가보자.

 

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교