프론트엔드 면접 정리 - 전반

£€€.T.$·2023년 8월 1일
면접

⭐ 브라우저 렌더링 과정을 설명해주세요.

⭐ CSR과 SSR의 차이는 무엇인가요?

CSR : 클라이언트인 부라우저가 렌더링을 처리하는 방식. 즉 서버가 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 것

  • 장점
    : 네이티브 앱과 비슷한 빠른 인터렉션을 구현 할 수 있다
  • 단점
    : 첫 페이지 로딩 속도가 다소 느리다
    : 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요하다

SSR : 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식. 클라이언트에서 요청이 들어올 때마다 매번 서버에 새로운 화면을 만들어 제공 하는 것.
즉 서버가 화면을 그리는 주체가 된다.

  • 장점
    : 첫 페이지 로딩 속도가 빠르다.
    : 검색엔진최적화가 가능하다.
  • 단점
    :초기 로딩 이후 페이지 이동시 속도가 다소 느리다.

⭐ CORS와 해결 경험을 말씀해주세요.

CORS : 다른 출처간에 리소스를 공유할 수 있도록 해주는 것

토큰 헤더 전송시 CORS 가 발생하여 백엔드 내부 프로젝트 WebSecurityConfig 파일 내의 SecurityFilterChain 내부에
.and
.cors()

를 추가하였다.

⭐ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요

쿠키 : 클라이언트(브라우저)에 저장된다

세션 : 서버측에서 관리한다

보안 : 저장 위치 때문에 쿠키는 스니핑 당할 우려가 있지만 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에 세션이 보안성이 더 좋다. 그러나 속도는 쿠키가 더 빠르다

웹스토리지 : 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소. 쿠키와 달리 자동 전송의 위험성이 없다. 오리진(도메인, 프로토콜) 단위로 접근이 제한되는 특성 때문에 CSRF로 부터 안전하다. 로컬스토리지와 세션 스토리지가 있다.

로컬스토리지 : 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성). 단 동일한 브라우저를 사용할 때만 해당

세션스토리지 : 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거된다.

쿠키는 만료일자가 넘으면 삭제되고 세션은 서버가 종료되거나 브라우져를 종료하면 삭제됩니다. 웹스토리지의 로컬 스토리지는 삭제를 할때까지 유지 할 수 있다.

⭐ 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?

⭐ 토큰 기반 인증 방식에 대해 설명해주세요

세션/ 토큰방식
로그인하면 서버가 입장권을 주고 뭐 할때마다 입장권을 요구한다. 입장권에 문제가 없다면 하려던 것을 계속 허락해준다. 토큰은 입장권의 정보가 많이 들어있다. 이메일 발급일 유효기간등이 대표적이다. 유효기간만 확인하여 바로 허락해주기 때문에 처리가 매우 빠르다.

⭐ JWT 토큰을 쿠키에 저장했을 때 취약점에 대해 설명해주세요

  1. 헤더의 알고리즘 부분이 none일 때 입장권을 서버에 보내서 입장이 가능할 경우가 있기 때문에 잘 만들어야 한다.

  2. 디코딩이 매우 쉽기 때문에 민감한 유저의 정보는 담지 않아야 한다

  3. 시크릿키를 너무 짧게 하면 맞추기 너무 쉽다. 브루트 포스 어택이 대표적이다 암호키를 무직위로 계속 입력해서 해킹을 시도하는 방법.

쿠키는 보안성이 낮기 때문에 탈취의 가능성이 있다.

  1. 탈취 시 유효기간이 다 될 때까지 기다릴 수 밖에 없다

⭐ 크로스 브라우징에 대해 설명해주세요

적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다.

최대한 많은 종류의 웹 브라우저에서 정상적으로 작동하는 웹페이지를 만드는 방법론 중 하나다

웹사이트 성능 최적화에는 어떤 방법이 있나요?

  • style은 상단, js는 하단에서 불러온다
  • 웹팩(Webpack) 사용
  • js의 공백 줄이기
  • html 작성시 불필요한 div를 제거
  • css 최적화
  • 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성
  • 사용하지 않는 css 제거
  • SEO (검색엔진최적화)
  • 라이브러리 의존도 낮추기

웹팩이란?

웹팩은 모듈 번들러로 프런트엔드 프레임워크에서 가장 많이 사용되고 있다. 쉽게 말해서 웹팩은 웹을 구성하고 있는 HTML, CSS, JAVASCRIPT 등을 모두 각각의 모듈로 보고 이를 조합해서 하나로 만들어주는 도구라고 생각하면 된다. 모듈 번들러라는 단어가 어려울 수 있지만, 쉽게 이야기하면 모듈 변환기라고 생각해도 좋다.

⭐ REST API에 대해 설명해주세요.

REST는 HTTP 프로토콜을 통해 API를 설계하기 위한 아키텍처 스타일이다.
REST API는 HTTP 요청을 통해 통신하여 데이터 생성, 읽기, 업데이트 및 삭제 기능을 완료한다. CRUD 작업이라고도 한다.
이해도 쉽고 관리도 쉬운 작성 방법론 같은 거 라고 생각하면 편하다.

요청 구조에는 HTTP 메서드(앞서 언급한 CRUD), 엔드포인트, 헤더 및 본문의 네 가지 주요 구성 요소가 포함된다.

HTTP 메서드 는 리소스로 수행해야 하는 작업을 설한다. POST, GET, PUT, DELETE.

끝점 (endpoint)에는 리소스를 찾을 수 있는 방법과 위치를 나타내는 URI(Uniform Resource Identifier)가 포함되어 있습니다. URL 또는 Uniform Resource Location은 전체 웹 주소를 나타내는 가장 일반적인 URI 유형입니다.

헤더 (header) 에는 클라이언트 및 서버와 관련된 데이터가 포함됩니다. 헤더에는 인증 데이터(API 키, 이름, 서버가 설치된 컴퓨터에 속하는 IP 주소, 응답 형식에 대한 정보)가 포함됩니다.

본문 (parameter)은 추가하려는 데이터와 같은 추가 정보를 서버에 보내는 데 사용됩니다.

⭐ SEO에 대해 설명해주세요.

검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말한다.

HOW?

잘 정리된 글이 있다 꼭 읽어보자!

문법에 맞는 HTML 작성하기
사이트 제목을 기재하고, div 태그를 사용해 줄을 바꾸고, strong과 em 태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성하는 것은 결과적으로 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 유사한 내용의 웹 문서가 있을 경우 상대적으로 이러한 문서의 순위가 높아집니다.

구체적인 페이지 제목 만들기
HTML 문서의 헤더에 들어가는 페이지 제목(title)은 구체적이고 간결하게 구성해, 검색 결과 화면에서 텍스트가 잘리지 않도록 합니다.
– 유인 키워드 반복 삼가 (예) café, ca fe, 카페, 카 페
– 반복적이고 틀에 박힌 제목 삼가
– 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈( – ), 콜론( : ), 막대(ㅣ)

(예) 가비아 – 도메인등록, 도메인연장, 도메인이전, 도메인예약, 부가서비스

모든 페이지가 유입 페이지가 되도록 사이트 구성
사용자가 꼭 홈페이지의 메인 페이지만 방문하는 것은 아닙니다. 가령, Google에서 키워드나 내용으로 검색하면, 검색 결과에는 원하는 정보가 있는 콘텐츠 페이지가 나타나고, 클릭하면 해당 페이지로 유입됩니다.

홈페이지 내 어떤 페이지로 방문이 유입될지 모르기 때문에 모든 페이지에는 메인 페이지로 이동할 수 있는 링크를 설치해 전체 사이트의 ‘동선’을 개선하는 것이 무엇보다 중요합니다. 이것이 곧 사용자 편의성과도 연결되는 것입니다.

⭐ 리플로우와 리페인트에 대해 설명해주세요

리플로우 (reflow)
DOM 요소의 기하학적 속성이 변경될때, 브라우저 사이즈가 변할때, 스타일시트가 로딩되었을때 발생하는 변화들을 다시 계산 해주는 작업을 뜻하고 레이아웃(Layout) 이라고도 한다.

리페인트 (repaint)
변경된 요소를 실제로 화면에 그려주는 작업을 리페인트라고 한다. 그래서 리플로우가 발생하면 필연적으로 리페인트가 실행된다.
리페인트도 굉장히 무거운 작업이긴 하지만 리플로우 처럼 모든 요소들에 대한 기하학적 정보들을 계산해주는 작업은 아니기 때문에 리플로우 보다는 상대적으로 훨씬 가벼운 작업이다.

리플로우 리페인트 읽어보기

인용

2-3. Reflow, Repaint 최소화
물론, 리플로우와 리페인트는 완전히 피할 수 없습니다. 그러나 최적화할 수 있다면 최대한 줄이는 게 현명한 선택이겠죠! 따라서 우리는 최적화에 대한 고민을 해야 합니다.

Repaint의 경우, Visibility를 DOM API을 통해 조절했을 때 자식 노드들까지 다 검색하기 때문에 성능 저하를 발생시킬 수도 있다고 합니다.

특히 Reflow는 더 심각한 성능 저하를 만들기도 해요. 리플로우는 해당 요소의 자식요소와 부모/조상 요소역시 레이아웃 계산을 진행해버리니까요.

따라서 둘을 유발하는 스타일 속성 조정은, 만약 성능이 중요시되는 애플리케이션이라면 고려해볼만한 최적화 요소입니다.

⭐ 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

웹 브라우저에 주소를 입력하게 되면, 먼저 'google.com'에 해당하는 DNS서버를 조회하여 IP정보를 얻어온다.

또한, 생략된 포트 번호를 파악하기 위해 https의 포트인 443을 찾아내 http 요청 메시지를 생성한다.

요청을 보내기 전, 먼저 소켓 라이브러리를 통해 IP와 포트정보를 사용해 3-way-handshake를 통해 연결을 확립한다.


3-way-handshake

요청 메시지가 전송 계층에 전달되어 TCP헤더가 붙게 되고 => 세그먼트

네트워크 계층에 전달되어 IP헤더가 붙게 된다 => IP 패킷

브라우저는 만들어진 패킷을 서버에 전달하게 되고, 서버는 받은 패킷의 헤더를 제거하고 해석을 하고 요청을 처리한다.

처리된 결과를 통해 HTTP 응답 메시지를 생성하고 브라우저와 같이 헤더를 붙여 패킷을 만든다.

만들어진 응답 메시지를 다시 브라우저에 전송하게 되고 브라우저는 해당 패킷을 해석해 HTML을 화면에 랜더링하게 된다.

⭐ HTTP에 대해 설명해주세요

HTTP는 HyperText Transfer Protocol의 약자로 주로 HTML과 같은 HyperText문서를 주고 받기 위해 만들어졌고, 최근에는 HTML뿐 아니라 모든 웹 관련 API통신에 이용하고 있는 통신 프로토콜입니다.
HTTP 프로토콜은 비연결성(Connectionless)과 무상태성(Stateless)의 특징을 가지는 통신 프로토콜입니다.

비연결성(Connectionless): 처음 연결을 맺은 후 요청(Request)과 한번의 응답(Response)이후 연결이 종료됩니다. 매 요청마다 다시 연결을 맺습니다.
매번 연결을 맺어 느려지는 것을 보완하기 위해 KeepAlive와 같은 속성을 활용할 수 있습니다.
무상태성(Stateless): 프로토콜에서 Client의 상태를 기억하지 않습니다.
Client의 상태를 보관하기 위해 쿠키나 세션, JWT토큰 등을 이용하여 Client의 상태를 유지합니다.

비연결성과 무상태성이라는 특징은 통신을 하기위한 소프트웨어 구조를 단순하게 만들어주어 몇몇 성능적 이슈에도 불구하고 가장 인기있는 통신 프로토콜이 되게 해주었습니다.

⭐ HTTP의 Status Code에 대해 설명해주세요

HTTP Status Code 란 간단하게 말하자면 클라이언트가 서버에게 요청을 보낼 때 그 요청의 결과가 어떻게 되었는지를 알려주는 것입니다. 이를 통해 요청을 했을 때 그 요청이 성공적인지 혹은 에러가 발생했는지를 알 수 있습니다!

대표적인 예
100 (Continue) : 진행중임을 나타내는 Status code 입니다. 현재까지의 진행 상태에 문제가 없으며 클라이언트가 계속해서 요청을 해도 된다는 의
200(Ok) : 서버가 요청을 성공적으로 처리했을 시

400번대의 status code는 클라이언트의 request에 에러가 있음을 알려주는 status code입니다.
400번대의 status code는 너무 많기 때문에 자주 볼 수 있는 코드에 대해서 정리해보도록 하겠습니다.
400(Bad Request) : 말 그대로 클라이언트의 request가 유효하지 않은 상태를 의미합니다.
401(Unauthorized) : 클라이언트가 권한이 없어 작업을 진행하지 못할때입니다. 이 요청은 인증이 필요합니다. 보통 서버는 로그인이 필요한 페이지에 대해 이 요청을 제공할 수 있습니다.
403(Forbidden) : 서버가 요청을 거부할 때 입니다. 예를 들어 사용자가 리소스에 대한 필요 권한을 가지고 있지 않을 때를 의미합니다.
404(Not Found) : 서버가 요청한 페이지(resource)를 찾지 못했을 때입니다. 서버에 존재하지 않는 페이지에 대한 요구를 할 때 다음과 같은 status code가 반환됩니다.
405(Method Not Allowed) : 클라이언트의 요청이 허용되지 않은 메서드인 경우입니다. (예를 들어 POST 방식으로만 request가 가능한데 이를 지키지 않고 GET으로 보냈을 때)
409(Conflict) : 서버가 요청을 수행하는 중에 충돌이 발생했을 때 입니다.
414 : 요청하는 URL(일반적으로는 URL)이 너무 길었을 때의 status code 입니다.
419(Too Many Requests) : 사용자가 일정 시간 동안 너무 많은 request를 보냈을 때 입니다.

더 많은 정보

⭐ HTTP와 HTTPS의 차이점에 대해 설명해주세요.

HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있습니다. 반면, HTTPS는 모든 데이터를 암호화된 형태로 전송합니다. 사용자가 민감한 데이터를 제출할 때 제3자가 네트워크를 통해 해당 데이터를 가로챌 수 없음을 확신할 수 있습니다.

profile
£€€.T.$
Be {Nice} Be {Kind}
이전 포스트

프론트엔드 면접 정리 - JavaScript

다음 포스트

SQLD 공부

0개의 댓글