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
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
| Servlet, JSP) 43번째 회고 (0) | 2024.05.31 |
|---|---|
| Servlet, JSP) 42번째 회고 (0) | 2024.05.30 |
| jQuery) 40번째 회고 (0) | 2024.05.29 |
| JS, jQuery) 39번째 회고 (0) | 2024.05.29 |
| JS) 38번째 회고 (0) | 2024.05.25 |
