14주차 위클리 페이퍼

Q1) CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

CORS는 Cross-Origin Resource Sharing의 약자이다. 우선 CORS를 이해하기 위해서 몇가지 개념을 먼저 알고 있어야 한다.

(1) Origin(출처)이란?

어떤 사이트를 접속할 때 인터넷 주소창에 URL이라는 문자열을 입력해 접근하게 된다.

즉, 출처(Origin)라는 것은 Protocol과 Host, Port까지 모두 합친 URL을 의미한다고 생각하면 된다. 자바스크립트로 간단하게 현재 사이트의 Origin을 알아낼 수도 있다.

console.log(location.origin)

(2) 동일 출처 정책(Same-Origin Policy)

SOP(Same Origin Policy) 정책은 말 그대로 동일한 출처에 대한 정책을 의미한다. 이 SOP 정책은 '동일한 출처에서만 리소스를 공유할 수 있다'라는 규칙을 가지고 있다. 즉, 동일 출처(Same-Origin) 서버에 있는 리소스는 자유롭게 가져와 사용할 수 있지만, 다른 출처(Cross-Origin) 서버에 있는 이미지나 영상 같은 리소스는 가져와 사용하지 못한다.

보통 다음과 같은 이유로 인해 동일 출처 정책이 필요하다.

1. 사용자가 악성 사이트에 접속한다.
2. 이때 해커가 몰래 심어놓은 악의적인 자바스크립트가 실행되어, 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보낸다.
3. 그럼 포털 사이트에서 해당 브라우저의 쿠키를 이용하여 로그인을 하는 등 상호작용에 따른 개인 정보를 응답값으로 받은 뒤, 사이트에서 해커 서버로 개인 정보를 보낸다.
4. 이외에도 사용자가 접속중인 내부망의 IP와 Port를 가져오거나, 사용자 브라우저를 Proxy처럼 악용할 수 있다.

이러한 경우를 방지하기 위해, SOP 정책으로 동일하지 않는 다른 출처의 스크립트가 실행되지 않도록 브라우저에서 사전에 방지하는 것이다.

(3) CORS(Cross-Origin Resource Sharing) 동작 원리

클라이어트에서 HTTP 요청의 헤더에 Origin을 담아 전달한다. 기본적으로 웹은 HTTP 프로토콜을 이용하여 서버에 요청을 보내게 되는데, 이 때 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보내게 된다.

그 다음으로 서버는 응답헤더에 Access-Control-Allwo-Origin을 담아 클라이언트로 전달한다. 이 후 서버가 이 요청에 대한 응답을 할 때 응답 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 '해당 리소스를 접근하는 것이 허용된 출처 url'을 내려보낸다.

이후 응답을 받은 브라우저는 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 차단할지 말지를 결정한다. 만약 유효하지 않다면 그 응답을 사용하지 않고 버린다.(CORS 에러) 유효하다면 다른 출처의 리소스를 문제없이 가져오게 된다.

(4) 해결 방법

• Chrome에서는 CORS 문제를 해결하기 위한 확장 프로그램을 제공해준다.

  Allow CORS: Access-Control-Allow-Origin

• 프록시 사이트를 이용한다. 프론트에서 직접 서버에 리소스를 요청했더니 서버에서 따로 설정을 안해줘서 CORS 에러가 뜬다면, 모든 출처를 허용한 서버 대리점을 통해 요청을 하면 되는 것이다.

  heroku 프록시 서버
  cors-proxy-app-raravel
  cors.sh

• 직접 서버에서 HTTP 헤더 설정을 통해 출처를 허용하게 설정하는 것이 가장 정석과 같은 방식이다. 서버의 종류도 노드 서버, 스프링 서버, 아파티 서버 등 여러가지가 있다. 각 서버의 문법에 맞게 HTTP 헤더를 추가해주면 된다.

---

Q2) SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.

(1) 검색엔전 최적화(SEO)

검색엔진 최적화(SEO: Search Engin Optimization)는 한 마디로 내가 만든 웹 사이트를 구글이나 네이버와 같은 검색결과 상단에 노출시킬 수 있도록 최적화해주는 방법이다. SEO를 잘 설계하면 검색엔진 검색결과 상단에 노출되어 무료 트래픽을 얻을 수 있게 된다. 기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다.

(2) SEO 개선 방법

• 구체적인 페이지 제목
  HTML 문서의 헤더에 들어가는 페이지 제목은 구체적이고 간결하게 구성해, 검색 결과 화면에서 텍스트가 잘리지 않도록 해야 한다. 유인 키워드 반복, 반복적이고 틀에 박힌 제목 등은 지양하고 제목의 시작이나 끝에 사이트 일므을 포함하고 나머지 제목은 (-, :, |) 등으로 연결한다.

• 메타 태그 활용
  구글 등 메타 태그 정보를 검색 알고리즘 평가 대상에서 제외하는 검색엔진이 증가한다고 하지만, 메타 정보는 검색엔진의 검색 결과에도 표시되고 있기 때문에 되도록 포함시키는 것이 좋다.

• 이미지에 alt 속성 기재
  alt 속성이란, 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트이다. alt 속성을 붙이면 HTML 코딩과 유용성 측면에서도 좋고, 시각장애인용 스크린리더가 사용될 때 이미지 대신 alt 속성 값을 읽어 대략 어떤 이미지인지 파악할 수 있도록 도움을 준다. 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 종해 인덱싱 작업을 하기 때문에 SEO에도 좋다.

• 이미지 map에 중요한 링크 사용 피하기
  이미지 맵은 <map>, <area> 태그를 이용해 한 장의 사진에 여러 개의 링크를 설치하는 것이다. 이미지 맵은 검색엔진이 링크를 따라 이동할 때 방해가 될 수 있으므로, 중요한 링크 설치는 피하는게 좋다.

• anchor 태그를 활용한 적절한 키워드 배치
  앵커 텍스트란, 홈페이지에 삽입되는 링크 위에 있는 설명 문구를 의미한다. 앵커 태그란, 서로 다른 페이지 사이를 이동하거나 페이지 내부에서 특정한 위치로 이동할 때 사용한다. 주요한 키워드를 앵커 태그 및 앵커 텍스트에 삽입하면 SEO에 도움이 된다.

• 폰트 로딩 최적화
  @import는 폰트를 불러오는데 브라우저 로딩을 잠시 멈춰 세운다. 따라서 link 혹은 @font-face를 통한 웹 폰트 로딩을 사용하는 것을 권장한다.