jQuery) 41번째 회고

유쨈미 2024. 5. 29. 22:53

1. CORS (Cross-Origin Resource Sharing)

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 브라우저가 도메인 간 리소스 요청을 안전하게 수행할 수 있도록 허용하는 보안 기능이다. CORS는 서버가 특정 도메인에서 오는 요청만 허용할 수 있도록 설정할 수 있는 HTTP 헤더를 사용하여 구현한다.

💡 CORS 동작 방식

Preflight Request
CORS 요청이 이루어지기 전에 브라우저는 OPTIONS 메소드를 사용하여 서버에 사전 요청(preflight request)을 보낸다. 이는 서버가 실제 요청을 허용하는지 확인하기 위한 것이다.
Server Response
서버는 CORS 설정에 따라 적절한 헤더를 포함하여 응답한다.
이 응답을 통해 브라우저는 요청이 허용되는지 여부를 확인한다.
Actual Request
서버가 사전 요청을 허용하면, 브라우저는 실제 요청을 보낸다.
Server Response
서버는 실제 요청에 응답하며, 응답에는 적절한 CORS 헤더가 포함되어야 다.

💡 CORS 헤더

Access-Control-Allow-Origin
요청을 허용할 도메인을 지정한다.
ex) Access-Control-Allow-Origin: <http://mywebsite.com>
Access-Control-Allow-Methods
허용할 HTTP 메소드를 지정한다.
ex) Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers
요청에서 사용할 수 있는 헤더를 지정한다.
ex) Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials
자격 증명(쿠키, HTTP 인증)을 포함한 요청을 허용할지 여부를 지정한다.
ex) Access-Control-Allow-Credentials: true

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이

inpa.tistory.com

- 출처 : inpa

2. Same Origin Policy (SOP) 정책과 Cross-Origin Resource Sharing (CORS) 정책

1️⃣ Same-Origin Policy

Same-Origin Policy는 웹 브라우저의 보안 기능 중 하나로, 웹 페이지가 자신이 로드된 도메인과 동일한 출처(origin)의 리소스만 접근할 수 있도록 제한하는 정책이다. 이 정책은 웹 사이트 간의 악의적인 스크립트 공격을 방지하기 위해 존재한다.

💡 Same-Origin Policy의 정의

동일한 출처는 다음 세 가지가 모두 일치하는 경우를 말한다

프로토콜
ex) http, https
호스트
ex) www.example.com
포트
기본 포트는 생략 가능.
ex) 80, 443

예를 들어, http://www.example.com과 https://www.example.com은 프로토콜이 다르기 때문에 동일한 출처가 아니다. 마찬가지로, http://www.example.com:80과 http://www.example.com:81은 포트가 다르기 때문에 동일한 출처가 아니다.

📌 제한 사항

DOM 조작
한 도메인의 스크립트가 다른 도메인의 페이지의 DOM을 조작할 수 없다.
Cookie
한 도메인의 스크립트가 다른 도메인의 쿠키에 접근할 수 없다.
XMLHttpRequest
한 도메인의 스크립트가 다른 도메인의 리소스를 XMLHttpRequest로 요청할 수 없다.

2️⃣ Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS)는 Same-Origin Policy의 제한을 완화하여, 특정 도메인에서 다른 도메인에 대한 리소스 요청을 허용할 수 있도록 하는 정책이다. 서버는 클라이언트가 특정 리소스에 접근할 수 있도록 허용할 도메인을 명시적으로 지정한다.

💡 CORS 헤더

Access-Control-Allow-Origin
허용할 출처를 지정한다. 모든 출처를 허용하려면 *를 사용한다.
Access-Control-Allow-Methods
허용할 HTTP 메서드를 지정한다.
Access-Control-Allow-Headers
허용할 요청 헤더를 지정한다.
Access-Control-Allow-Credentials
자격 증명(쿠키 등)을 포함한 요청을 허용할지 여부를 지정한다.

💻 예시 코드

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'http://www.example.com', // 허용할 출처
    methods: 'GET,POST',              // 허용할 메소드
    allowedHeaders: 'Content-Type',   // 허용할 헤더
    credentials: true                 // 자격 증명 허용
}));

app.get('/data', (req, res) => {
    res.json({ message: 'CORS enabled!' });
});

app.listen(3000, () => {
    console.log('CORS-enabled server listening on port 3000');
});

3. y=ax+b모델

데이터 사이의 선형 관계를 설명하는 수학적 모델로, 기울기와 y 절편을 통해 독립 변수와 종속 변수 간의 관계를 나타낸다. 이 모델은 주로 데이터 분석과 예측에 사용된다.

💡 구성 요소

y
종속 변수(응답 변수)
x
독립 변수(예측 변수)
a
기울기(slope)
b
y 절편(y-intercept)

💡 해석

기울기(a)
x가 1 단위 증가할 때 y가 변하는 양을 나타낸다.
기울기가 양수이면 x가 증가할 때 y도 증가하며, 기울기가 음수이면 x가 증가할 때 y는 감소한다.
y 절편(b)
x가 0일 때 y의 값을 나타낸다. 즉, 그래프가 y축과 교차하는 지점이다.

1.3 머신러닝

데이터 분석에서는 여러 그룹을 비교하거나 변수들 간의 관계를 파악하고 통계학에서는 분석을 통해 얻은 가설의 일반화 가능성을 검토한다고 설명했습니다. 반면 머신러닝(Machine Learning)은 새

diseny.tistory.com

- 출처 : diseny

4. Suggest

자동 완성(Suggest) 기능은 사용자가 입력 필드에 텍스트를 입력할 때 미리 정의된 목록에서 관련 항목을 제안하는 기능이다. 이는 검색 엔진, 웹 애플리케이션의 폼 및 다양한 입력 필드에서 사용자 경험을 향상시키기 위해 자주 사용된다.

💡 구현 방식

클라이언트 측
사용자가 입력할 때마다 입력된 값을 서버로 전송하여 관련된 제안 목록을 가져온다.
이 작업은 보통 Ajax를 사용하여 비동기적으로 수행된다.
서버 측
서버는 입력된 값을 기준으로 제안 목록을 생성하고 클라이언트로 응답한다.

💻 클라이언트 측 예제

1️⃣ HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search" placeholder="Search..." autocomplete="off">
    <ul id="suggestions"></ul>

    <script src="script.js"></script>
</body>
</html>

2️⃣ JavaScript (jQuery)

$(document).ready(function() {
    $('#search').on('input', function() {
        let query = $(this).val();
        if (query.length > 2) {
            $.ajax({
                url: 'https://api.example.com/suggest',
                method: 'GET',
                data: { q: query },
                success: function(data) {
                    let suggestions = $('#suggestions');
                    suggestions.empty();
                    data.forEach(item => {
                        suggestions.append('<li>' + item + '</li>');
                    });
                },
                error: function(error) {
                    console.error('Error fetching suggestions:', error);
                }
            });
        } else {
            $('#suggestions').empty();
        }
    });
});

🚀 요약

CORS
웹 브라우저가 도메인 간의 리소스 요청을 안전하게 수행할 수 있도록 하는 보안 기능이다.
서버는 특정 도메인에서 오는 요청을 허용하기 위해 적절한 CORS 헤더를 설정한다.
Suggest
사용자가 입력 필드에 텍스트를 입력할 때 관련 항목을 제안하는 기능이다.
클라이언트 측에서는 Ajax를 사용하여 입력된 값을 서버로 전송하고, 서버는 관련 제안을 생성하여 클라이언트에 응답한다.

JavaScript-Suggest

SuggestSuggest란 검색어를 입력하면 자동으로 검색어를 추천하는 시스템이다.아래 예제는 DB에 있는 내용을 검색해주는 Suggest기능을 구현한 예제이다.아래 사진은 현재 DB에 있는 자료이다.Html 실제

wjddyd66.github.io

- 출처 : wjddyd66

[JavaScript] 자바스크립트 input 자동완성(input autocomplete)

자바스크립트로 input의 자동완성을 구현해보도록 하겠습니다. # https://www.w3schools.com/howto/howto_js_autocomplete.asp 를 참고하였습니다. - head 부분 따로, Jquery를 사용하지않고, 자바스크립트만으로 구현

minaminaworld.tistory.com

- 출처 : minaminaworld

Auto-Suggest Control(검색어 자동완성)

출처 : http://cptcho.tistory.com/8 메일을 정리하다가 아주 좋은 녀석을 발견했다. 포털사이트의 검색어 자동완성과 같은 기능을 쉽게 구현하게 해주는 스크립트 컴포넌트이다. 자세한건 http://www.codepr

littlecarbb.tistory.com

- 출처 : littlecarbb

저작자표시 비영리 변경금지 (새창열림)