기술면접 답변

프론트엔드

웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요.

1. HTMl 파싱
2. CSS 파싱
3. 렌더트리 구축
4. 레이아웃 계산
5. 페인팅

HTML 파싱: 브라우저는 html코드를 읽고 DOM*문서객체모델을 생성← html태그 인식하고 이를 DOM트리 구조로 변환/ 각 요소는 노드로 표현

CSS 파싱: CSS 코드를 읽고 CSSOM을 생성

렌더트리 구축: 생성된 DOM과 CSSOM을 결합하여 렌더트리 구축/ 브라우저가 화면에 그릴 요소*(텍스트,이미지,동영상,폼 등)만 포함하고 표시되지 않는 요소(태그의 내부 요소, display: none)나 스타일 정보가 없는 요소는 제외시킴

• DOM트리에서 렌더링에 필요한 요소들만 추출하여 렌더트리 생성
• 자주 변경되지 않는 특성 → 브라우저는 렌더트리를 캐싱해 동일한 페이지의 재렌더링이 더 빠르게 처리될 수 있도록 최적화

레이아웃 계산: 렌더트리의 각 노드가 화면에서 차지하는 위치와 크기 같은 레이아웃 정보를 계산

페인팅: 브라우저는 렌더트리의 각 노드를 화면에 그림

• 레이아웃 계산 후 화면에 표시하기 위한 픽셀값을 계산
• 페인팅 최적화를 위해 레이어 생성, 이후 변경 영역만을 다시 그리는 리페인트를 사용하기도 함

💡 리액트의 브라우더 렌더링 과정

Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요. RESTful API 가 아닌 것들은 어떤게 있나요?

• Restful API: 자원(URI)/행위(HTTP 메서드)/표현(payload)의 요소로 구성
  • REST: 클라이언트가 서버에 접근하는 방식을 규정한 아키텍쳐
  • Restful(REST의 기본 원칙; URI는 리소스를 표현하는데 집중, HTTP 요청 메서드로 행위에 대한 정의 을 지킨 서비스 디자인) API: REST를 기반으로 서비스 API를 구현한 것
• PATCH → 일부 수정 (페이로드 O)
• PUT → 리소스 전체 수정(교체) (페이로드 O)
• DELETE ; 모든 or 특정 리소스 삭제 (페이로드 x)
• GET ; 모든 or 특정 리소스 취득 (페이로드 x)
• POST ; 리소스 생성 (페이로드 O)

백엔드

객체지향 프로그래밍(OOP)에 대해 설명해주세요. 알고있는 원칙이나 키워드를 언급해주세요

• 객체를 프로그래밍에 반영하여 소프트웨어를 개발. 클래스를 정의하고 객체를 생성하여 사용 →코드 재사용성, 유지보수성 향상
• 클래스:
  • 객체를 정의하기 위한 템플릿
  • 속성(객체가 갖는 데이터) + 동작(메서드; 객체가 수행하는 기능)
• 객체:
  • 클래스 기반의 실제로 생성된 인스턴스.
  • 데이터(속성; 객체의 상태) + 메서드(객체의 행동)

특징:

1. 캡슐화 : 객체의 상태와 동작을 하나로 묶어 클래스 내부에 캡슐화 ← 클래스 외부에서 접근 불가 ⇒ 메서드를 통해서만 데이터 조작
   1. 객체의 내부 구조를 숨김;정보 은닉
   2. 외부에 필요한 기능만 노출
   3. 객체 보호 및 유지보수 용이
2. 상속: 이미 존재하는 클래스 기반의 새로운 클래스 생성
   1. 코드 재사용성 향상
3. 다형성: 다른 클래스라면 동일한 이름의 메서드, 연산자 생성 가능
   1. 코드 유연성, 확장성 향상

REST API란 무엇인가요? (모두가 답변) 프로젝트에 REST API를 사용한 이유가 무엇인가요? (프로젝트에 REST API를 사용하셨을 경우에만 추가 답변), REST API 말고 다른 비교할만한 것을 알고 있나요?

• REST API의 캐싱 기능
  • HTTP 캐싱 기능을 이용하여 서버-클라이언트 간의 요청과 응답을 캐싱 → 서버 부하 감소 및 응답 시간 단축

    💡 캐싱 구현 방법
    REST API에서는 HTTP 캐시의 다양한 기능을 이용하여 캐싱을 구현할 수 있습니다. 가장 기본적인 방법은 HTTP 헤더를 이용하여 캐시의 유효기간을 설정하는 것입니다. 예를 들어, "Cache-Control" 헤더를 이용하여 캐시의 유효기간을 설정할 수 있습니다. 이 헤더에 "max-age" 값을 설정하면, 캐시의 유효기간을 초 단위로 지정할 수 있습니다.
    또한, REST API에서는 HTTP 응답에 ETag(Entity Tag)라는 값도 포함됩니다. ETag는 HTTP 응답의 내용을 고유하게 식별하는 값으로, 클라이언트는 ETag를 이용하여 캐시된 응답이 유효한지 여부를 판단할 수 있습니다. 클라이언트가 동일한 리소스에 대해 요청을 보낼 때, 서버는 ETag 값을 이용하여 해당 리소스가 수정되었는지 여부를 확인합니다. 리소스가 수정되지 않은 경우에는 ETag 값이 변경되지 않으므로, 서버는 이전에 캐시된 응답을 클라이언트에게 반환합니다.
    이 외에도, REST API에서는 캐시의 동작을 더욱 세밀하게 제어할 수 있는 다양한 HTTP 헤더와 지시자가 제공됩니다. 이를 이용하여 클라이언트와 서버 간의 네트워크 대역폭을 최적화하고, 응답 속도를 높일 수 있습니다.

• GraghQL: 페이스북 개발 API 쿼리 언어.
  • 클라이언트가 필요한 데이터를 직접 요청하고 받아오는 쿼리 기능 제공 → 유연
  • 단일 요청으로 여러 개의 데이터를 요청 가능 → 성능 향상에 도움