on my way

CS 스터디 02-3 컴퓨터 언어: Front-End 본문

카테고리 없음

CS 스터디 02-3 컴퓨터 언어: Front-End

wingbeat 2024. 11. 18. 20:04
반응형

Front-End Link

  • 브라우저의 작동 원리
  • CORS
  • 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링
  • RESTful API
  • HTTP
  • 호이스팅
  • 클로저란
  • ==과 ===의 차이
  • TDD
  • 비동기 함수란?

예상 면접 질문과 답변

1. 브라우저의 작동 원리

Q: 브라우저가 웹 페이지를 렌더링하는 과정을 설명해보세요.
A:

  1. URL 입력: 사용자가 URL을 입력하면 브라우저는 DNS 서버를 통해 해당 URL의 IP 주소를 조회합니다.
  2. HTTP 요청: 조회된 IP 주소로 서버에 HTTP(S) 요청을 전송합니다.
  3. 응답 수신: 서버는 요청에 대한 응답으로 HTML, CSS, JS, 이미지 등의 데이터를 브라우저에 전달합니다.
  4. 렌더링 과정:
    • HTML 파싱: HTML을 DOM(Document Object Model)으로 변환합니다.
    • CSS 파싱: CSS를 CSSOM(CSS Object Model)으로 변환합니다.
    • DOM + CSSOM 결합: 렌더 트리를 형성하여 화면에 나타낼 요소를 계산합니다.
    • JS 실행: JS 파일은 실행을 위해 파싱됩니다. 이 과정에서 필요한 경우 DOM 및 CSSOM이 수정됩니다.
    • 레이아웃 계산 및 페인팅: 각 요소의 크기와 위치를 계산하고, 픽셀로 변환해 화면에 출력합니다.

부가 설명: 브라우저는 비동기 방식으로 리소스를 처리하며, JS 실행 시 렌더링이 차단되는 경우도 발생할 수 있습니다(렌더 블로킹).

2. CORS

Q: CORS란 무엇이고, 왜 필요한가요?
A:
CORS(Cross-Origin Resource Sharing)는 한 도메인에서 실행 중인 애플리케이션이 다른 도메인의 리소스에 접근할 때 발생하는 보안 메커니즘입니다. 브라우저는 보안상의 이유로 기본적으로 다른 출처의 리소스 요청을 제한합니다.

CORS는 서버가 특정 도메인에 리소스 접근 권한을 부여하도록 HTTP 헤더를 통해 브라우저에 알리는 방식입니다.

부가 설명:

  • 동작 방식: 서버는 Access-Control-Allow-Origin 헤더를 사용해 허용된 도메인을 명시합니다.
  • 예시: 한 도메인에서 다른 도메인의 API를 호출할 때, 호출받은 서버가 CORS를 설정하지 않았다면 브라우저가 차단합니다.

3. 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)

Q: SSR과 CSR의 차이점을 설명해보세요.
A:

  • SSR(Server-Side Rendering):
    • HTML이 서버에서 렌더링되어 클라이언트로 전송됩니다.
    • 클라이언트는 받은 HTML을 브라우저에 표시합니다.
    • 초기 로딩 속도가 빠르고 SEO에 유리합니다.
  • CSR(Client-Side Rendering):
    • HTML, CSS, JS를 클라이언트로 전송한 후 브라우저가 JS를 실행해 렌더링합니다.
    • 첫 로딩 시간이 길지만, 이후 페이지 간 전환이 빠릅니다.

부가 설명:

  • SSR은 SEO가 중요한 서비스(예: 블로그)에 적합하고, CSR은 사용자 상호작용이 많은 SPA(Single Page Application)에 적합합니다.

4. RESTful API

Q: RESTful API란 무엇인가요?
A:
RESTful API는 REST(Representational State Transfer) 아키텍처 스타일을 준수하는 API입니다. 주요 특징은 다음과 같습니다:

  • HTTP 메서드 사용: GET, POST, PUT, DELETE 등을 활용해 자원을 처리합니다.
  • 자원(Resource) 중심: URL은 자원을 나타내며, 행위는 HTTP 메서드를 통해 표현됩니다.
  • 무상태성(Stateless): 각 요청은 클라이언트의 상태를 서버에 저장하지 않습니다.

예시:

  • GET /users: 사용자 목록 조회
  • POST /users: 새로운 사용자 생성

5. HTTP

Q: HTTP란 무엇이고, 주요 특징을 설명하세요.
A:
HTTP(HyperText Transfer Protocol)는 클라이언트와 서버 간 데이터 전송을 위한 프로토콜입니다.

  • 무상태성(Stateless): 요청 간 상태를 저장하지 않습니다.
  • 메서드 기반: GET, POST, PUT, DELETE 등을 지원합니다.
  • 확장성: HTTPS를 통해 보안성을 강화할 수 있습니다.

6. 호이스팅

Q: 호이스팅(Hoisting)이란 무엇인가요?
A:
호이스팅은 JS 엔진이 코드 실행 전에 변수와 함수 선언을 끌어올리는 동작을 말합니다.

  • 변수 선언(var)과 함수 선언은 스코프의 최상단으로 끌어올려집니다.
  • 초기화는 선언 이후에 수행됩니다.

예시:

console.log(a); // undefined
var a = 10;

7. 클로저란

Q: 클로저(Closure)란 무엇인가요?
A:
클로저는 함수와 함수가 선언된 렉시컬 환경의 조합입니다. 내부 함수가 외부 함수의 변수를 참조하고, 외부 함수가 종료된 이후에도 참조를 유지할 수 있습니다.

예시:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

8. ==과 ===의 차이

Q: ==과 ===의 차이를 설명해보세요.
A:

  • ==: 동등 연산자로, 두 값을 비교하기 전에 형 변환(Type Conversion)을 수행합니다.
  • ===: 일치 연산자로, 값과 데이터 타입 모두를 비교합니다.

예시:

console.log(5 == '5'); // true
console.log(5 === '5'); // false

9. TDD

Q: TDD(Test-Driven Development)란 무엇인가요?
A:
TDD는 테스트 주도 개발로, 코드를 작성하기 전에 테스트 케이스를 먼저 작성하고 이를 만족하는 코드를 작성하는 개발 방식입니다.

  1. 테스트 작성: 실패할 테스트를 작성합니다.
  2. 코드 작성: 테스트를 통과하는 최소한의 코드를 작성합니다.
  3. 리팩토링: 코드 품질을 개선합니다.

장점:

  • 코드 품질 향상
  • 디버깅 시간 단축
  • 변경 사항에 대한 빠른 피드백

10. 비동기 함수란?

Q: 비동기 함수란 무엇이며, 어떻게 동작하나요?
A:
비동기 함수는 작업이 완료될 때까지 코드 실행을 차단하지 않고 다른 작업을 수행할 수 있는 함수입니다.

예시:

  • 콜백: 함수의 인자로 다른 함수를 전달.
  • Promise: 작업 완료 시점에 결과를 반환.
  • async/await: Promise를 간결하게 표현.

예시 코드:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
반응형