프론트앤드 기술면접 TOP65-(2)

3. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요.

• 의도 : : 클라이언트와 서버 사이의 상태 관리를 어떻게 하는지, 브라우저 API에 대한 이해도가 있는지 확인하는 질문.

  답변: 쿠키, 세션, 웹스토리지는 모두 웹에서 데이터를 저장하는 기술입니다. 순서대로 특징을 설명드리겠습니다.
  
  쿠키는 클라이언트와 서버간의 데이터를 저장하여 HTTP 통신에 사용합니다. htmlOnly 옵션을 통해 보안을 향상시킬 수 있는 특징을 가지고 있습니다. 주로 로그인 인증 처리에 쓰이며, 최근 본 상품, 관심 있는 주제를 저장해서 추천 서비스에 데이터를 제공하기도 합니다. 어떤 웹사이트에 처음 방문시 쿠키 정책을 묻는것은 데이터를 수집해서 맞춤 광고를 보여주려는 의도입니다.
  
  세션은 서버에서 사용자 정보를 유지하는 방법입니다. 세션이 유지되는 동안 유저의 로그인 상태도 유지됩니다.
  
  웹 스토리지는 크게 로컬 스토리지, 세션 스토리지가 많이 쓰인다.
  많은 데이터를 저장 할 수 있고 서버로 전송되지 않는다는 장점이 있습니다. 단점은 자바스크립트 코드가 탈취될 위험이 있으므로 민감한 정보는 저장하지 않는게 좋습니다. 로컬 스토리지는 브라우저를 닫아보 데이터가 유지되는 반면, 세션 스토리지는 세션 동안만 데이터가 유지되기때문에 브라우저를 닫으면 데이터는 사라집니다. 다크 모드의 여부를 판단하기위해 사용한다고 가정할때는 로컬 스토리지를 사용하는것이 좋습니다.

4. 브라우저의 렌더링 과정에 대해서 설명해주세요.

• 의도 : 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인하는 질문.

  브라우저의 렌더링 과정은 크게 아래의 단계로 이루워집니다.
  
  HTML 파싱 - CSS 파싱 - DOM 트리와 CSSOM트리 결합 - 레이아웃 계산 - 페인팅
  HTML을 파싱해 DOM 트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM 트리를 만듭니다. 이후에 두 트리를 결합하고 페이지에 렌더링 하기 위해 필요한 공간을 계산합니다. 마지막으로 레이아웃에 따라 화면에 요소를 페인팅합니다.

5. 쿼리 스트링은 주로 어디에 사용하셨나요.

• 의도 : 쿼리 스트링의 개념과 작동 방식에 대해 이해하고 있는지 확인하는 질문

  검색 기능을 구현할때 자주 사용합니다. 검색 결과에 대한 내용은 따로 페이지 주소 라우트에 따른 서버 사이드 렌더링이 필요하지 않기도 하고, 기존 페이지를 유지하면서도 화면이 바뀌었음을 알려주기 위해 사용했습니다. 이렇게 검색 기능에 쿼리 스트링을 이용하면 URL이 바뀜에 따라 브라우저의 히스토리 스택을 쌓여서 뒤로 가거나 앞으로 가기에 수월할 뿐더러 다른 사람에게 검색 결과를 공유할 때 쿼리 스트링이 들어간 URL을 공유하면 되기에 해당 URL로 접근할 경우 원하는 결과를 얻을 수 있다는 장점이 있습니다.
  

쿼리스트링의 형태

Query String 은 url 의 끝에 "?" 기호로 시작하고, key=value 형식의 매개변수 쌍을 & 로 구분하여 나열한다.

Query String의 형태(출처: https://www.semrush.com/)

간단한 예시 코드

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 검색 요청 함수
const searchFeedAxios = async ({ keyword, option, role }) => {
  try {
    const queryString = new URLSearchParams({
     [option]: keyword, // option = key, keyword = 쿼리 스트링의 value
      role: role, // role = key, role 변수의 값 = value
    }).toString(); // toString()을 호출하여 쿼리 스트링을 문자열로 변환
   
    // 요청 URL 생성하고, 생성된 쿼리 스트링을 URL 끝에 붙임
    const url = `/feeds/search?${queryString}`;
    // axios GET 요청을 보내고, 생성한 URL을 사용하여 서버에 요청을 보냄
    const response = await instance.get(url);
    // 서버에서 받은 응답을 반환
    return response;
  } catch (error) {
     // 에러가 발생하면 에러를 던져 호출한 곳에서 처리 할 수 있게함
    throw error;
  }
};

export { searchFeedAxios };

keyword, option, role 등의 매개변수를 쿼리 스트링으로 변환하여 서버에 GET 요청을 보냅니다. URLSearchParams 객체를 사용하여 간편하게 쿼리 스트링을 생성할 수 있습니다. 이를 통해 검색 결과를 요청하고, 원하는 데이터를 서버로부터 받을 수 있습니다.

6. 브라우저에 URL을 입력하면 일어나는 일에 대해 순서대로 설명해주세요.

• 의도 : 기본적인 브라우저 작동 방식에 대해 이해하고 있는지 확인하는 질문

  우리가 브라우저에 URL을 입력하면 일어나는 일을 단계별로 정리하면,
  naver.com을 주소창에 쳤다고 가정했을때 브라우저는 URL에서 프로토콜, 도메인 이름, 경로등을 분석하게 됩니다. 이후 브라우저는 도메인 이름을 IP주소로 변환하고자 DNS, 즉 도메인 네임 서버를 요청을 보냅니다. 그럼 도메인 네임 서버는 도메인에 해당하는 IP 주소를 응답으로 보내줍니다. (ex) 192.0.01) 브라우저는 TCP 네트워크 연결을 구축하여 해당 IP주소를 가진 웹서버에 접근하여 데이터를 요청합니다. 그러면 웹서버는 HTTP 응답을 브라우저에 보내고, 브라우저는 받아온 HTML, CSS, JS 코드를 화면에 렌더링하게 된다.