프론트엔드 면접 | CSR과 SSR의 개념 및 장/단점, SEO와 SEO 진행 방식, 개발자 도구 활용 경험 ...

huizhen·2024년 3월 6일
0

프론트엔드 # 면접

목록 보기
2/3
post-thumbnail

+ 전반적인 질문들에 프로젝트에서 한 경험도 같이 넣으면 더 좋은 답변일 것 같다.

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.

먼저, 클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 페이지를 렌더링하는 방식.
초기 로딩 속도가 느릴 수 있으나,
사용자 인터랙션에 대한 반응이 빠름.

반면, 서버 사이드 렌더링(SSR)은 서버 측에서 페이지를 렌더링하고 클라이언트에 전송하는 방식.
초기 로딩 속도가 빠르며 SEO(검색 엔진 최적화, Search Engine Optimization)에 유리하나,
서버 부하가 클 수 있고 렌더링 이후의 상호작용이 느림.

그로 인해 클라이언트 사이드 렌더링은 사용자 인터랙션이 중요한 SPA(Single Page Application)나 대화형 앱에 적합.
서버 사이드 렌더링은 정적 콘텐츠, SEO가 중요한 앱에 적합.

SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.

SEO는 검색 엔진 최적화로,
웹 사이트나 웹 페이지가 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 의미.

검색 엔진에서 상위 노출은 가시성이 높아지기에 더 많은 유기적인 트래픽을 유도하고 사용자에게 노출되는 기회를 가져다주기 때문에 중요.

진행 방법으로는 여러가지가 있는데 4가지만 예를 들자면, 메타 태그 최적화, 사이트 구조 개선, 모바일 최적화, 속도 최적화 등.

  1. 메타 태그 최적화 : 페이지의 제목 태그, 설명 태그, 헤더 태그 등을 최적화하여 검색 결과에서 잘 표시되도록 합니다.
  2. 사이트 구조 개선 : 사용자와 검색 엔진이 쉽게 내비게이션할 수 있는 웹사이트 구조를 구축합니다.
  3. 모바일 최적화 : 모바일 친화적인 디자인과 사용자 경험을 제공하여 모바일 검색에서 노출될 수 있도록 합니다.
  4. 속도 최적화 : 웹사이트의 로딩 속도를 개선하여 사용자 경험을 향상시키고 검색 엔진 순위에 긍정적인 영향을 미칩니다.

프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.

프론트엔드 개발 과정에서 웹 브라우저의 개발자 도구는 필수 도구 중 하나.
레이아웃 구성요소 체크, 코드 디버깅, 성능 최적화, 브라우저 호환성 테스트 등 다양한 작업에서 사용.

특히 개발자 도구 내에서 CSS 스타일을 실시간으로 편집하고 웹 페이지 레이아웃을 조정할 때 자주 활용.
콘솔의 오류 메시지를 통해 JavaScript 코드 디버깅을 주로 수행.

마지막으로 서버로부터 데이터를 주고 받는 과정에서 정상적인 신호를 보내는지, 서버와 쿠키와 헤더를 통해 토큰을 정상적으로 주고 받는지 체크할 때도 활용.


레퍼런스

검색엔진 최적화(SEO)란 무엇일까? 완벽 가이드

2개의 댓글

comment-user-thumbnail
2024년 3월 10일

4일전이 마지막인데.. 분발해주세요

1개의 답글

관련 채용 정보