2주차는 static한 홈페이지를 넘어 동적이고 더 많은 기능을 추가한 홈페이지가 되도록 구현하는 기술을 배워보고 서버-클라이언트 통신을 이해해보는 구간이다.
Javascript로 기능구현하는데 한계가 있어서 (복잡한 코드, 브라우저간 호환성) jQuery라는 라이브러리 (미리 작성된 javascript코드)로 작성하는 것이 효율적이다. 쓰기전에 임포트해주자 ().
HTML에서 style에 쓰이려면 body의 요소들을 class=""로 지정해주는데 jquery에서는 id="..."로 지정해준다. 사용할땐 $('#...')이런 식으로 e.g. $('#card-box').hide().
클라이언트 -> 서버 요청
API라는 창구에서 클라이언트가 요청하는 데이터를 전달하기 위해 ajax를 사용한다. GET방식과 POST방식 두가지 타입이 존재하며 주로 POST방식이 더 자주 사용된다고 한다.
GET방식: 데이터 조회
POST방식: 데이터 생성, 변경, 삭제
Ajax는 jQuery를 임포트한 페이지에서만 동작가능하다고 한다. 기본골격은 아래와 같은데,
$.ajax({
type:"GET이나POST 둘 중 하나",
url:"",
data:{},
success: function(response){}})
GET방식은 가져올 데이터의 API url을 적어주고 success란에 특히 어떤 데이터를 어떤 방식으로 보여줄지 적어줘서 success 부분의 코드가 길어지는 경향이 있었고, POST방식은 데이터 생성, 변경, 삭제가 주된 기능을 수행하다보니 data 란에 어떤 데이터를 보내줄지 정도만 적혀 있어서 ajax 코드는 비교적 짧은 편이지만 db와 인터렉션 하기 위해서 python 코드가 get방식보다 길어지는 편이다.
*오늘의 팁
코드를 그대로 따라 썼다고 생각했는데 안될때 고려해보자
1. 코드 정렬을 잘 했는가? Ctrl + Alt + L
2. {}나 () 짝이 다 맞는가? 코드정렬하면 파악하기 더 수월해진다
3. let temp_html= ``에서 따옴표가 아니라 백틱을 사용했는가?
안되면 당황하지 말고 다른점을 찾아보자. 답은 항상 있다!
