[jQuery] 제이쿼리 메소드(+cs 공부정리)

성장을 즐기는 개발자, 최호경·2023년 3월 19일

API PORT REST API TCP/IP URI cors host http https jquery url 메소드 스키마 제이쿼리 프로토콜

jQuery 메소드

클릭 이벤트

        $("#btn").click(() => {
          console.log("Have a nice day!");
        });

마우스엔터 이벤트

	    $(".coloredArea").mouseenter(() => {
          console.log("Mouse Enter!");
        });

마우스호버

        $(".coloredArea").hover(
          () => {
            console.log("Mouse Enter!");
          },
          () => {
            console.log("Mouse Out!");
          }
        );

on

선택한 요소에 대해 다중 이벤트 처리기를 연결해줍니다.

        $("p").on({
          mouseenter: function () {
            $(this).css("background-color", "lightgray");
          },
          mouseleave: function () {
            $(this).css("background-color", "lightblue");
          },
          click: function () {
            $(this).css("background-color", "yellow");
          },
        });

토글(hide)

        $(".coloredArea3").click(() => {
          $("#btn").fadeToggle();
        });
      });

오늘의 개발지식

CORS

cors는 Cross-Origin Resource Sharing 정책을 의미합니다. 브라우저에서는 보안적인 이유로 cross-origin 요청들을 기본적으로 제한합니다. 따라서 cross-origin 요청을 실행하기 위해서는 서버의 동의가 필요하기 때문에, 동의하면 허락하고 동의하지 않으면 브라우저에서 거절하는 이 매커니즘을 cors라고 합니다.

다음 조건에 하나라도 충족하면 cross-origin 요청이라고 할 수 있습니다.
1. 프로토콜이 다르다. ex) http, https
2. 도메인이 다르다. ex) domain.com , other-domain.com
3. 포트 번호가 다르다. ex) 8080, 3000

cors가 필요한 이유

cors 정책이 없이 모든 곳에서 데이터를 마구잡이로 요청할 수 있게 되면, 다른 사이트에서 기존 사이트를 악의적으로 흉내낼 수 있게 됩니다. 규모 있는 기업 사이트인 척 하며, 개인 정보를 탈취할 수 있고 이상한 정보를 입력시켜서 기존 사이트를 공격할 수도 있습니다. 따라서 서버가 허용할 때만 데이터를 요청할 수 있게끔 보호하기 위한 목적으로 꼭 필요합니다.

API

API(Application Programming Interface)는 한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 정해진 방법을 의미합니다. 주로 서버와 클라이언트가 서로 데이터를 주고 받을 때 사용하고, 소스 코드로 구성되어 있습니다. 코드 안에는 다음과 같은 속성을 가지고 있습니다.
1. 요청을 할 URL(어떤 데이터인지에 대한 내용, 상세정보)
2. 요청 방식(get, post 등)
3. 통신에 성공했을 때 할 동작

웹 브라우저 상단의 주소창이 바로 API 요청코드를 작성하는 공간이 됩니다. -> URL

일반 사용자들이 웹 서칭을 할때 수많은 데이터를 주고 받지만 한번에 코드나 URL을 작성하지는 않습니다. 왜냐하면 페이지 내에 있는 다양한 UI/UX와 버튼 같은 기능 등을 사용하여, 알아서 url을 보내 API를 호출해주기 때문이죠. 결국 모든 프로그램은 API를 가질 수 있고, 다양한 목적에 맞게 사용할 수 있습니다.

REST API

REST API는 Representational State Transfer API로, 다음 구성으로 이루어져 있습니다.

Resource(자원) - URI
Verb(자원에 대한 행위) - HTTP Method(GET, POST, PUT, DELETE)
Representation

URI vs. URL

URI는 특정 리소스를 식별할 수 있는 통합 자원 식별자(Uniform Resource Identifier)를 의미합니다. 웹에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀸스라고 할 수 있습니다.

URL(Uniform Resource Locator)는 웹 주소이며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약입니다. URL은 URI의 서브셋으로 URI가 더 포괄적인 개념이라고 할 수 있습니다.

두 개념의 가장 큰 차이는 url은 위치를 가리키고, uri는 식별하기만 한다는 것입니다. 인터넷에 존재하는 모든 자료가 서로 같은 이름을 가질 수 없게 만들기 위해 구분해주는 역할을 합니다.

URI의 일반적인 구조

scheme: //user:password @host:port /path ?query #fragment

:(콜론)은 두 개념을 쌍으로 묶었다는 의미입니다. //(대쉬)는 어떤 시작을 알리는 의미입니다.

scheme은 접근 프로토콜을 가리키는 것으로, HTTP, HTTPS, FTP, 이메일, SIP, 전화 등이 있습니다. 사용하는 scheme에 따라서 해당 통신 규약을 사용하여 데이터를 주고받겠다는 의미입니다.

host & port

host는 웹 서버의 호스트명으로, 도메인명 또는 IP 주소를 표현됩니다. 도메인명으로 쓰면 컴퓨터 내부에서 이를 ip주소로 변경하여 사용합니다.

포트 번호(port)는 들어오는 트래픽을 컴퓨터 내에서 실행되고 있는 프로그램에 적절하게 분배시키기 위해 할당하는 숫자를 의미합니다. 이 포트번호는 논리적인 접속장소이며, 인터넷 프로토콜인 TCP/IP를 사용할 때는 클라이언트 프로그램이 네트워크의 특정 서버 프로그램을 지정하는 방법으로 사용합니다.

웹 프로토콜인 http와 같이 TCP/IP의 상위 프로토콜을 사용하는 응용프로그램에서는 미리 지정된 포트번호를 가지고 있습니다. 아니면 다른 응용프로세스 프로그램들은 매번 접속할 때마다 포트번호가 동적으로 부여되죠. 서버 프로그램이 처음 시작되면, 지정된 포트번호로 바인드가 되고 그 서버를 사용하기 위한 모든 클라이언트 프로그램은 지정된 포트번호에 바인드해야 합니다.

TCP/IP

Internet Protocol Suite는 인터넷에서 컴퓨터들끼리 서로 정보를 주고받는데 쓰이는 통신규약(프로토콜)을 모아놓은 것입니다. 여러 프로토콜 중에서 TCP(Transmission Control Protocol)와 IP(Internet Protocol)를 가장 많이 사용하기 때문에, 둘을 묶어서 TCP/IP 프로토콜 슈트라고 부르는 것이죠.

이를 사용하면 IP 주소 체계를 따르고 IP 라우팅을 이용해 목적지에 도달하며, TCP의 특성을 활용해 송신자와 수신자의 논리적 연결을 생성하고 신뢰성을 유지할 수 있도록 하겠다는 것을 의미합니다. 덕분에 데이터를 제대로 보내고 받았는지에 대해 확인이 가능합니다.

스키마

스키마(schema)는 영어단어 자체는 계획이나 도식을 가리키며, 좀 더 구체적이고 확정된 것을 스킴(scheme)이라고 합니다.

따라서 DB schema는 자료를 저장하는 구조와 표현법을 정의한 것이고, XML 스키마는 XML 문서의 내용, 구조, 형식을 규정하는 명세를 의미합니다.

HTTP vs. HTTPS

HTTPS(https://)는 SSL(Secure Socket Layer) 인증서를 사용하는 HTTP(http://)입니다. SSL 인증서는 일반 HTTP 요청 및 응답을 암호화합니다. 따라서 https가 http보다 더 안전한 보안용 프로토콜이라고 할 수 있습니다. https를 사용한 웹 페이지를 통해 전송되는 모든 데이터는 HLS(전송 계층 보안) 프로토콜이라고 하는 추가적인 보안 계층이 있습니다. 이 덕분에 모든 유형의 데이터는 변경되거나 손상될 수 없으며 제 3자로부터 보호된다고 합니다. https가 적용된 웹 사이트는 url의 도메인 이름 앞에 자물쇠 아이콘이 있는지를 확인하여 구분할 수 있습니다.

프로토콜

프로토콜은 여러 컴퓨터끼리 데이터 통신을 원활하게 하기 위해 정해놓은 통신 규약을 의미합니다. 신호 송신의 순서, 데이터 표현법, 오류 검출법 등이 포함되어 있습니다.

HTTP는 HyperText Transfer Protocol로 웹 서버 및 웹 브라우저 상호 간의 데이터 전송을 위한 응용계층 프로토콜입니다. 특정 웹 사이트에 액세스하기 위해서는 프로토콜 변형이 필요한데, 이때 웹 사이트의 URL을 작성하여 웹 서버에 명령을 내려줍니다.