CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해주세요.
❌CORS 에러란?
CORS은 악명 높은 에러로, 웹 개발을 하다 보면 반드시 한 번쯤은 마주하게 된다는 공포의 에러 메시지.
CORS는Cross-Origin Resource Sharing의 줄임말로교차-출처 리소스 공유라고도 한다.
CORS는 한 도메인이 도메인 간의 요청을 가진 다른 도메인의 리소스에 액세스할 수 있게 해주는 보안 메커니즘으로 최신 브라우저에서 구현된동일 출처 정책때문에 등장하게 되었음.
동일 출처 정책이란?
동일한 출처의 리소스에만 접근하도록 제한하는 정책을 말함. 여기서 말하는 출처라는것은
프로토콜,호스트명,포트가 같다는 것을 의미한다.
💥CORS 에러 해결방법
서버측 해결방법
01.서버에서 CORS 헤더 추가하기
서버에서 CORS 요청을 허용하기 위해 적절한 HTTP 헤더를 설정하는 방법.
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // 모든 도메인 허용
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
app.listen(3000);
02.프리플라이트 요청 처리
특정 요청(특히 POST, PUT, DELETE 요청)은 브라우저가 먼저 OPTIONS 요청을 보내어 서버의 CORS 정책을 확인. 서버가 이 OPTIONS 요청에 대해 적절한 응답을 반환해야 함.
03.서버 설정 파일 수정
Apache나 Nginx와 같은 서버를 사용하는 경우, 서버 설정 파일에서 CORS 헤더를 추가할 수 있음.
클라이언트 측 해결 방법
01.프록시 서버 사용
클라이언트 측에서 직접 CORS 문제를 해결하기 어려운 경우, 중간에 프록시 서버를 두어 요청을 중계할 수 있음.
02.JSONP 사용
JSONP는 CORS 제한을 우회하는 구식 방법입니다. 하지만, 보안상의 이유로 JSONP는 최근 웹 개발에서는 추천되지 않음.
SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해주세요
💯'SEO란?
Search Engine Optimization의 약자이며,검색 엔진 최적화라고도 함.
웹사이트나 웹페이지의 가시성을 향상시키기 위해 검색엔진 결과 페이지(SERP)에서 순위를 높이는 일련의 전략과 기법을 말함.
🔱온사이트 & 오프사이트
SEO 검색엔진최적화를 위해서는 온사이트(on-site)와 오프사이트(off-site)를 모두 최적화해야한다.
온사이트(on-site)는 내 웹 사이트의 ‘내부’를 관리하는 영역이며, 오프사이트(off-site)는 내 웹 사이트의 ‘외부’ 를 관리하는 영역이다. 개발자의 영역은 온사이트 영역이기 때문에 온사이트만 설명하도록 하겠음.
💥온사이트 최적화
- 이미지 최적화
이미지 파일 크기를 줄이기, 명확한 파일 이름,Alt태그를 사용하여 이미지에 대한 설명 명시
- URL 최적화
간결하고 설명적인 URL 구조를 사용(검색 엔진과 사용자가 페이지의 내용을 쉽게 이해할 수 있음)
- 제목 태그 및 메타 설명 최적화
<title>(너무 긴 텍스트 사용 x, 모든 웹페이지의 이름이 같지 않도록 주의, 주요 키워드 삽입)
<description> 해당 웹페이지의 설명을 요약한 한 두줄의 잘 읽히는 문장을 잘 적어넣는 게 중요.
(반복적이지 않은, 다른 내용의 키워드로 작성되는 편이 좋다)
<robot> 웹페이지 별 검색 로봇의 접근 여부를 설정할 때 활용하는 태그 (로봇 태그의 속성을 어떻게 정의하느냐에 따라 검색 로봇이 웹페이지를 크롤링학도 색인할 수 있는 권한을 받거나 받지 못할수도 있다고 함)
<canonical> 여러 url을 가진 웹페이지가 있을 때, 해당 페이지의 대표 url을 설정할 수 있는 태그.
(한 페이지의 대표되는 url을 지정함으로써, 검색 로봇이 웹페이지를 크롤링할 때 중복 url로 인한 페널티가 적용되게 하지 않게끔 도와주는 역할을 함)
오픈 그래프(Open Graph) 태그 활용
오픈 그래프 태그는 웹페이지의 링크가 카카오톡이나 기타 sns에서 공유될 때 어떻게 노출될지를 정의해주는 역할을 함.
검색엔진 최적화 과정에서 해당 웹페이지가 sns에서 얼마나 공유되고 있는지(혹은 얼마만큼 트래픽이 일어나고 있는지) 판단하는 기준이 되어 검색 상위노출을 위한 품질 평가에도 영향을 주기 때문에 중요한 역할을 함.
