📌 CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.
CORS란?
브라우저에서는 보안적인 이유로 cross-origin HTTP요청들을 제한한다, 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하게 된다. 서버가 OK하면 브라우저는 요청을 허락하고, OK하지 않으면 브라우저에서 거절한다.
이렇게 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS라 한다.
브라우저에서는 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘이다.
Cross-Origin
cross-origin은 다음 중 한 가지라도 다른 경우를 말한다.
1. 프로토콜 -> http와 https의 프로토콜이 다르다.
2. 도메인 -> domain.com과 other-domain.com은 다르다.
3. 포트 번호 -> 7777포트와 3000포트는 다르다.
CORS에러와 해결 방법
Warning !
Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
'https://myhomepage.com'에서 'https://localhost:3000' 출처로 가져올 수 있는 액세스가 CORS 정책에 의해 차단되었습니다. 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 필요에 적합한 경우, 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져오십시오.
CORS에러가 났을 때의 메세지이다. 앞서 말한 CORS의 의미를 토대로 에러를 확인하면, 결국 서버의 허용이 필요하다는 것이다. 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재하여 클라이언트에게 응답하면 된다. 이건 프론트가 어떻게 하질 못한다...
그래도 해결해야겠다! 싶다면
1. Chrome 확장 프로그램 이용
Chrome에서는 CORS 문제를 해결하기 위한 확장 프로그램을 제공해준다.
본 링크에서 'Allow CORS: Access-Control-Allow-Origin' 크롬 확장 프로그램을을 설치 해준다. 그럼 localhost 환경에서 API 테스트 시, CORS 문제를 해결할 수 있다.
2. 프록시 사이트 이용
Proxy란 클라이언트와 서버 사이의 중계 대리점이라고 보면 된다. 즉, 프론트에서 직접 서버에 리소스를 요청했더니 서버에서 따로 설정을 안해줘서 CORS에러가 뜬다면, 모든 출처를 허용한 서버 대리점을 통해 요청하면 된다..
3. 서버에서 Access-Control-Allow-Origin 헤더 세팅
가장 정석적인 방법이다. 직접 서버에서 HTTP헤더 설정을 통해 출처를 허용하게 설정하는 것이다. 서버의 종류도 노드 서버, 스프링 서버, 아파치 버서 등 여러가지가 있으니, 이에 대한 각각의 해결 방법이 있다.
📌 SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.
검색 엔진 최적화
SEO는 '검색엔진 최적화(Search Engine Optimization)' 또는 '검색엔진 최적화 전문업체(Search Engine Optimizer)'의 약어이다. 비즈니스, 웹 사이트의 소유주들이 자신의 정보를 노출이 많이 되도록 최적화시키는 것이다. 검색 엔진은 웹 페이지의 콘텐츠를 살펴보고 판단하기 위해 크롤링하는 로봇인 웹 크롤러를 사용한다.
개선 방법
1. 문법에 맞는 HTML작성
- 시멘틱 태그를 이용해 홈페이지를 마크업한다.
- 잘못된 마크업을 사용했는지 Google Rich Result Test를 이용해 디버깅한다.
2. 고유하고 정확한 페이지 제목 만들기
- 클릭률을 높일 수 있도록 눈길을 사로잡는 문구를 사용한다.
- 페이지마다 고유한 title태그를 사용한다.
- 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 -, :, | 등을 사용한다.
3. 메타 태그 사용하기
- 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성한다.
- 모든 페이지를 작성할 수 없는 상황이라면, 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성해야 한다.
- 설명에 콘텐츠 관련 정보를 포함한다.
4. anchor 태그를 활용한 적절한 키워드 매칭
- div, button 태그 보다는 a 태그를 이용한다.
- a href 요소가 없으면 Google은 URL을 크롤링하지 않는다.
5. 이미지 최적화
- img 또는 picture 태그를 사용한다.
- CSS를 사용하여 색인을 생성하지 않는다.
- alt 속성을 사용한다.
6. 사이트를 모바일 친화적으로
- 반응형 웹 디자인을 적용한다.
- meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알린다.
- Google Mobile Friendly로 모바일 페이지를 테스트해서 내 홈페이지가 휴대기기와 원활히 호환되는지 확인한다.
7. HTTPS 적용하기
- 동일 사이트일 때, http보다 https 보안 프로토콜을 사용하는 웹 사이트에 SEO 점수를 추가적으로 부여한다.
8. 페이지 로딩 속도 높이기
- 속도가 느리면 잠재 고객을 유지시킬 수 없으며 이는 이탈률이 높아지는 결과를 초래하므로 페이지 로딩 속도를 높인다.
