웹 개발 하다보면 꼭 한번은 마주친다는 에러메세지... 왜 발생하는지 알고, 어떻게 해결하는지 아는게 중요하겠다!
❓ CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.
🤚 CORS
- CORS(Cross-Origin Resource Sharing)는 한 도메인이 도메인 간의 요청을 가진 다른 도메인의 리소스에 액세스할 수 있게 해주는 보안 메커니즘이다.
- 이는 최신 브라우저에서 구현된 동일 출처 정책 때문에 등장하게 되었다.
- 동일 출처 정책?!
- 말 그대로 동일한 출처의 리소스에만 접근하도록 제한하는 정책을 말한다.
- 여기서 출처라는 것은 프로토콜, 호스트명, 포트 등이 같다는 것을 의미한다.
- 동일 출처 정책의 경우에 브라우저에서 자동으로 쿠키가 첨부된다는 특징이 보안상의 문제를 발생시킬 수 있겠다는 이슈가 발생했다.
- 이렇게 등장하게 된 동일 출처 정책으로 인해 CORS가 발생하게 된 것이다.
☑️ 참고 - https://velog.io/@jh100m1/CORS-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94%EA%B1%B4%EB%8D%B0
🤚 CORS 해결 방법
- 프론트단에서 CORS 에러를 발견했다면 백엔드 서버에게 Access-Control-Allow-Origin에 유효한 값을 포함해서 달라고 요청해야 한다.
- 와일드 카드인 * 를 사용하여 Access-Control-Allow-Origin에 헤더를 세팅하면 모든 출처에서 오는 요청을 받겠다는 의미이므로 당장은 편하겠지만 보안적으로 심각한 이슈가 발생할 수 있다.
- 그러니
Access-Control-Allow-Origin: 특정주소 와 같이 출처를 명시해주도록 한다.
koa.js로 백엔드 서버 만들때 cors 패키지를 불러와서 사용했던 기억이 있다.
- proxy 서버를 사용하는 방법도 있다.
- 프록시 서버는 클라이언트가 프록시 서버 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해준다. 쉽게 말해 브라우저와 서버 간의 통신을 도와주는 중계서버라고 이해하면 된다.
❓ SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.
🤚 SEO
- SEO(Search Engine Optimization)는 검색 엔진 최적화를 의미하며, 웹사이트가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 오르도록 최적화하는 작업을 말한다.
- SEO의 목표는 사용자가 검색한 키워드와 관련된 웹사이트를 검색 엔진이 더 잘 이해하고, 사용자에게 표시하도록 돕는 것이다.
- 주요 목표는 다음과 같다.
- 검색 엔진 가시성 향상: 검색 결과 상위에 노출되어 더 많은 사용자 유입 유도한다.
- 웹사이트 트래픽 증가: 유기적인 검색을 통한 방문자 확보한다.
- 사용자 경험 개선: 정보 구조와 웹사이트 성능 최적화를 통해 방문자가 더 쉽게 정보를 얻도록 지원한다.
이러쿵 저러쿵해도 결국엔 검색 플랫폼의 검색창에서 나의 서비스를 검색했을 때, 상위에 보이도록 하는 것!!
🤚 SEO 개선을 위한 작업
1. 키워드 리서치
- 목표 키워드 선정:
Google Keyword Planner, Ahrefs, 또는 SEMrush 같은 도구를 사용해 적절한 키워드 찾는다.
- 사용자 의도 파악:
사용자가 무엇을 검색하는지 이해하고 콘텐츠에 반영한다.
2. 고품질 콘텐츠 작성
- 유용한 정보 제공:
사용자의 질문에 답변하고 문제를 해결하는 고품질 콘텐츠 작성한다.
- 키워드를 자연스럽게 포함:
강제로 삽입하지 않고, 읽기 자연스러운 방식으로 포함시킨다.
3. 메타 태그 최적화
- 제목 태그 (Title Tag):
페이지 주제를 간결하고 명확히 나타낸다.
- 메타 설명 (Meta Description):
클릭을 유도하는 흥미로운 요약 내용을 제공한다.
4. 웹사이트 성능 최적화
- 이미지 최적화:
파일 크기를 줄이고, WebP 형식 사용한다.
- 코드 압축:
HTML, CSS, JavaScript 파일을 최소화한다.
- 캐싱 활성화:
페이지 로딩 속도 개선한다.
5. 모바일 친화적인 디자인
- 반응형 웹 디자인으로 모든 디바이스에서 최적의 사용자 경험 제공한다.
6. 백링크 전략
- 신뢰할 수 있는 사이트와 협력:
게스트 포스팅, 파트너십을 통해 백링크 확보한다.
- 링크 분석:
Google Search Console을 사용해 백링크 상태 확인한다.
7. 정기적인 SEO 모니터링
- 도구 활용:
Google Analytics와 Google Search Console을 통해 트래픽 및 SEO 상태 모니터링을 통해 정보를 수집한다.
- 경쟁 분석:
경쟁 웹사이트의 키워드 및 백링크 전략 연구한다.