[TIL] 23_1124 jQuery적용, Fetch개념

-강의 -코딩이 처음이어도 쉽게 배우는 웹개발 A to Z
-3주차 7번째 강의까지 보고나서

1-jQuery 적용

-여러 제이쿼리 기능이 있어

-toggle()함수로 열고 닫아서 보여주고 사라졌을 땐, css의 display값이 none이 붙어.

-값을 가져 온 걸 붙여주고 새로운 내용물을 생성했어.

-html의 내용을 javascript에 가져와서 변수를 지정하고
내용을 저장했는데 문자열로 넣을 수 있어.

이때 가져온 html내용을 백틱(`)으로 감싸서 저장해줬어.

 

- 이렇게 백틱으로 감싸는 방식을 "템플릿 리터럴"이라고 해.

-태그같지만 템플릿 리터럴로 인해 문자열이 된 거야.

-html내용을 변수에 템플릿 리터럴로 저장할 때 플레이스 홀더를 이용해서 표현식을 넣었어.

 

*템플릿 리터럴 : 이중 따옴표나 작은 따옴표 대신 백틱(` `)를 이용해.

 

-플레이스 홀더 쓰는 법

-$와 {}(중괄호)를 이용해.

$({표현식})

 

=> 이 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달 돼.
기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜주고.

 

*참고사이트 : MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)

 

 

2-클라이언트 <-> 서버의 개념

-서버

-카톡을 주고 받을 때, "내가" 보낸 메세지가 받는 사람에게 직접 가는 게 아니고,

"서버"에 어떤 데이터를 "보내서" "받은 사람"이 그 데이터를 "받아와서" 보는거야.  

 

-서버에서 클라이언트로 뭔가의 데이터를 줄 때,

아무렇게 짠 방식으로 주면 클라이언트가 데이터와 설명이 
어디서부터 어디까지인지 인지할 수 없으니 데이터의 교환을 위한 표준 형식이라는 게 존재해.

그게 json형식이야.

 

3-GET방식

-데이터를 교환하는 형식

-요청을 하는 타입은 GET요청

예)

-주소로 알아보자

https://movie.daum.net/moviedb/main?movieId=68593

 

 

-서버의 위치 : movie.daum.net

 

/moviedb/main?movieId=68593

=> 물음표를 기준으로

-창구의 이름: /moviedb/main

-창구에 가져가는 데이터: movieId=68593

 

-68593은 현재 "명량"이라는 영화의 자료를 보여주는데

-68590라고 고쳐쓰고 보면 "찰리 앤드 더 엔젤"이라는 다른 영화의 자료를 보여줘

=> 이렇게 끝에 가져가는 데이터만 다른데 이렇게 url로 데이터를 가져가는 걸 GET방식이라고 해

 

 

 

4-Fetch 개념 및 연습

-서버에서 데이터를 받아오는 함수야.

-fetch함수의 기본 골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})

 

 

-서버에서 데이터를 공개한 공공 데이터들을 이용해서 볼 수 있는데,
가져다가 내 웹페이지에 써먹을 수 있어.

 

느낀 것

1- 항상 사용할 기능을 분석하고 javasript를 어떻게 작동시킬 지 과정을 기획하면
코드를 순서대로 쓰기 좋아서 좋은 것 같아. 

 

2-주석을 달아서 기능을 나누고 설명을 적어두면 알아보기 편해.

 

3-javascript에서 쓰이는 함수는 정말 많다 ㅇ<-<