🌓 Pre) 웹개발 종합반_2

Genie Knows Everything·2021년 6월 12일

항해 99 _ Lecture 일지

목록 보기

3/11

웹개발 종합반 2주차 수업 자료

링크 : https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d

- let :

선언하는 것은 함수(function) 밖에서 해야한다. 그렇지 않으면 함수가 끝나면서 같이 사라진다.

- jQuery :

이전에는 브라우저의 코드가 모두 달라 호환성의 문제가 생겼음.
이 호환성의 문제를 해결하기 위해 jQuery 재단에서 전체 브라우저 코드에 대한 메타 분석을 진행하여 같은 기능이지만 각기 다른 코드에 대한 통일 작업을 진행하였음.
그렇게 탄생한 것이 jQery 이다. 즉, 미리 작성된 JavaScript문인 것(library 이다).
import 하지 않으면 사용 할 수 없다.

jQuery를 불러오는 문 <head 내에 삽입>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

CSS와 동일하게 jQuery도 특정하지 않으면(가리키지) 않으면 조작 할 수 없다.
변수 지정시

CSS는 class
jQuery는 id

를 사용한다.

📕

브라우저 개발자 모드에서 id의 값 가져올 때,
$('#post-url').val(); : id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다. val 안의 값을 바꾸면 그 값으로 바꿔줌. val은 input 박스에만 사용하는 것~!!!

div 보이기 / 숨기기
$('#post-box').hide(); : id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').show(); : show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)

CSS 관련
$('#post-box').css(); : css()값을 가져오거나 ()안에 적힌 값을 반환한다. 내용 입력을 통해 기존의 값을 바꾸는 것도 가능하다. ('display') 를 치면 현재 보이는지 안보이는지에 대한 값을 반환한다. 이처럼 .css() 는 현재 화면에 보이는 값을 반환해준다.
$('#post-url').text(); : 인풋 박스가 아닌 것의 값을 가져와주거나 내용을 바꿀 수 있다.

- 브라우저 통신의 이해

서버 -> 클라이언트 통신 : 'JSON' (페이지 없이 js로 값을 받아오는 법)
클라이언트 -> 서버 통신 : 'GET' 요청 (데이터 조회(read)를 요청할 때)
클라이언트 -> 서버 통신 : 'POST' 요청 (데이터 생성(cread), 변경(update), 삭제(dlete)를 요청할 때)

📕 은행이라고 가정
서버 : 은행
클라이언트 : 은행을 찾아온 고객
(뭐하러 오셨어요? )
API : 은행 창구
GET : 조회하러 왔어요 고객
POST : 투자 등 다양한 업무 하러 왔어요 고객
=> 고객의 타입에 따라 가져와야 하는것 / 처리해야 하는 것 / 처리 결과가 다름.

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

빨간색 : 서버 주소 (우리은행 용산지점)
파란색 : 창구 이름(API) (우리은행 용산지점의 입출금 창구)
노란색 : 구분 기준점
검정색 : 기준점 뒤로 클라이언트가 가지고 가는 데이터 (주민등록, 번호, 계좌 내 금액 등)

-> 그런 이런 code 값은 누가 정하는가? 요청하는 클라이언트와 요청을 받는 서버가 미리 약속한 것. code로 가져오면 내가 code에 맞는 값을 줄께
브라우저 주소창에 엔터를 치는 행위 자체가 GET하는 것.

- Ajax

자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식

Ajax는 jquery를 import한 페이지에서만 작동한다.

Ajax의 동작방식
요청 : 브라우저는 서버에 정보를 요청한다. (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현하고 있다.)
[ 서버의 동작 : 서버는 응답으로 데이터를 전달한다. (XML, JSON) ]
응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.
Ajax의 구조

Genie Knows Everything

😜💖

이전 포스트

🌒 Pre) 웹개발 종합반_1

다음 포스트