1️⃣ CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.
CORS(Cross-Origin Resource Sharing) 에러는 웹 브라우저가 다른 도메인에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 브라우저는 동일 출처 정책을 따르며, 이를 통해 스크립트가 다른 출처의 리소스에 무단으로 접근하지 못하도록 제한합니다.
동일 출저 정책 : 웹 사이트의 도메인, 프로토콜, 포트 번호가 모두 같아야 요청을 허용하는 보안 정책.
만약 요청을 받는 서버가 CORS 설정을 통해 특정 도메인의 요청을 허용하지 않는다면, 브라우저는 요청을 차단하고 CORS 에러를 발생시킵니다.
CORS 에러에 대한 경험
이전 직장에서 개발 서버와 운영 서버 모두 동일한 API 서버를 사용했지만, API 서버가 개발 서버의 요청을 허용하도록 CORS 설정이 되어 있지 않아, 개발 서버에서는 정상적으로 데이터를 가져올 수 없었던 기억이 있습니다.
CORS 에러의 발생하는 상황
웹 사이트와 API 서버의 도메인이 다른 경우가 일반적입니다.
- 웹 사이트 도메인 : http://mywebsite.com
- API 서버 도메인 : http://api.example.com
이런 경우, API 서버에서 `Access-Control-Allow-Origin` 헤더를 적정히 설정하지 않았다면 브라우저가 보안 정책 때문에 요청을 차단합니다.
CORS 에러 메시지의 예시
해결 방법
1. 서버 측에서 CORS 설정 변경
CORS 에러를 해결하려면 요청을 받는 서버에서 설정을 해야 합니다.
- 특정 도메인 허용
Access-Control-Allow-Origin: http://mywebsite.com
- 모든 도메인 허용(개발 환경에서 주로 사용)
Access-Control-Allow-Origin: *
2. 프록시 서버 사용
프록시 서버를 만들어 동일 출처에서 요청하는 것처럼 동작하게 우회할 수 있습니다.
- 현재 웹 사이트와 같은 도메인에 API 요청을 받는 프록시 서버를 만듭니다.
- 이 프록시 서버가 외부 서버로 데이터를 요청하고, 받은 데이터를 클라이언트(브라우저)로 전달합니다.
2️⃣ SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.
SEO(Search Engine Optimization)는 검색 엔진 최적화를 뜻합니다.
이는 웹 사이트가 구글, 네이버, 빙 등 검색 엔진에서 더 높은 순위에 표시되도록 웹 사이트를 최적화하는 작업을 의미합니다.
검색 엔진은 웹 사이트를 크롤링하고, 콘텐츠를 분석하여 순위를 결정합니다.
SEO의 목표는 검색 엔진의 알고리즘에 맞게 사이트를 최적화하여 검색 결과에서 더 많은 방문자를 유도하는 것입니다.
HTML, React, Next.js에서 SEO 개선 작업
HTML
- 메타 태그 설정 : `<title>`와 `<meta description>`에 주요 키워드 포함
- 헤딩 태그 사용: `<h1>`은 한 번만 사용, 논리적 계층 유지
- 이미지 최적화 : `alt` 속성 추가, 파일명에 키워드 포함.
- URL 최적화 : 짧고 간결하며 키워드 초함.
- 모바일 친화성 : 반응형 디자인 설정 (viewport 태그)
React
- React Helmet 활용 : 동적으로 메타 태그(title, description) 설정
- SSR, SSG 적용 : 클라이언트 사이드 렌더링(CSR) 한계 극복
- 라우팅 최적화 : 페이지별 고유 제목/설명, 404 페이지 구현
Next.js
- `<Head>` 컴포넌트 사용 : 메타 태그(title, description) 설정
- SSR, SSG : `getStaticProps`와 `getServerSideProps`로 크롤링 최적화
- 이미지 최적화 : `next/image` 컴포넌트 사용
'Weekly Paper' 카테고리의 다른 글
| [Weekly Paper] 서버 상태와 클라이언트 상태의 차이 (0) | 2025.01.09 |
|---|---|
| [Weekly Paper] 세션 기반 인증과 토큰 기반 인증 비교 (1) | 2024.12.05 |
| [Weekly Paper] Next.js 사용 이유 (3) | 2024.11.19 |
| [Weekly Paper] 타입스크립트 사용 이유와 동작 원리 (0) | 2024.11.11 |
| [Weekly Paper] React Life Cycle, 렌더링 방식 (CSR, SSR, SSG) (5) | 2024.10.15 |