CS분야

1. 브라우저의 렌더링 과정은 어떻게 되나요?

• 순서를 간단히 말하면 HTML/CSS파싱 -> 렌더 트리 생성 -> 레이아웃 -> 페인팅 -> 합성 순서로 진해됩니다. 먼저, 브라우저는 서버에서 받은 HTML을 파싱해서 DOM 트리를 만들고, CSS를 파싱해 CSSOM트리를 생성합니다. 이를 결합해 화면에 표시될 요소만 포함한 렌더 트리를 구성하비다. 이후 레이아웃 단계에서 각 요소의 크기와 위치를 계산하고, 페인팅 단계에서 계산된 정보를 기반으로 색상, 그림자, 이미지 같은 시각적 스타일을 픽셀 단위로 그립니다. 마지막으로 합성 단계에서 여러 레이어를 GPU를 이용해 하나의 화면으로 조합합니다. 참고로, JavaScript가 DOM이나 CSSOM을 변경하면, 브라우저는 필요에 따라 다시 계산하는 리플로우 또는 리페인트를 수행합니다.

2. HTTP와 HTTPS의 차이는 무엇인가요?

• HTTP와 HTTPS는 모두 웹에서 데이터를 주고받는 프로토콜이지만, 보안 측면에서 큰 차이가 있습니다. HTTP는 데이터를 암호화하지 않고 전송하기 때문에 중간에서 데이터를 가로채거나 변조할 위험이 있습니다. 반면 HTTPS는 SSL/TLS 암호화 방식을 사용해 데이터를 암호화하고 서버의 신원을 인증하며 데이터가 중간에 변경되지 않았음을 보장하는 무결성을 제공합니다. 즉, HTTPS는 HTTP에 보안 계층이 추가된 방식으로 로그인 정보, 결제 정보처럼 민감한 데이터를 안전하게 전송할 수 있습니다.

3. HTTP 메서드(GET, POST, PUT, PATCH, DELETE)의 차이점은?

• GET은 서버에서 데이터를 조회하는데 사용되며, 요청 데이터는 URL에 포함됩니다. 서버의 상태를 변경하지 않는 안전한 메서드입니다. POST는 서버에 새로운 데이터를 생성하거나 처리 요청을 보낼 때 사용됩니다. 요청 본문에 데이터를 담고, 서버 상태가 변경됩니다. PUT은 리소스를 전체를 덮어쓰기 방식으로 업데이트합니다. 대상 리소스가 없으면 생성하기도 합니다. PATCH는 리소스의 일부만 수정할 때 사용합니다. PUT과 달리 변경할 속성만 전송합니다. DELETE는 리소스를 삭제할 때 사용합니다.

4. 쿠키(Cookie), 세션(Session), 로컬스토리지(LocalStorage), 세션스토리지(Session Storage)의 차이점은?

• 쿠키, 세션, 로컬스토리지는 모두 브라우저에 데이터를 저장하는 방법이지만 저장 위치, 전송 방식, 유지 기간, 보안 목적이 다릅니다. 먼저, 쿠키는 브라우저에 저장되며, HTTP 요청마다 자동으로 서버에 전송되는 작은 데이터입니다. 주로 세션 ID나 인증 정보 저장에 사용되며, 용량이 작고 보안 설정(HttpOnly, Secure, SameSite)이 중요합니다. 세션은 데이터가 서버에 저장되고, 브라우저에는 세션 ID만 쿠키로 보관합니다. 서버에서 관리하기 때문에 쿠키보다 보안성이 높지만,서버 메모리/스토리지 사용량이 증가합니다. 로컬 스토리지는 브라우저에 영구 저장되며 탭을 닫아도 유지됩니다. 서버로 자동 전송되지 않기 때문에 사용자 환경 정보, UI 상태, 캐시 데이터 저장에 적합합니다. 반면 보안 목적의 토큰 저장은 권장되지 않습니다. 세션스토리지는 같은 브라우저 탭에서만 유지되며, 탭을 닫으면 제거됩니다. 페이지 이동 중 필요한 임시 데이터에 사용됩니다.

5. CORS는 무엇이고, 왜 발생하나요?

• CORS는 다른 출처의 리소스 요청을 제어하기 위한 브라우저 보안 정책입니다. 브라우저는 보안을 위해 기본적으로 같은 출처에서만 요청을 허용하는 동일 출처 정책을 가지고 있습니다. 그래서 프론트엔드와 API 서버가 도메인, 포트, 또는 프로토콜이 다르면 브라우저가 보안상 요청을 차단하게 되는데 이러한 상황을 CORS 에러라고 부릅니다. CORS 문제를 해결하려면 서버에서 Access-Control-Aloow-Origin 헤더 등을 통해 허용할 출처를 명시하여 브라우저가 요청을 허용하도록 해야 합니다.

6. REST API란 무엇인가요?

• REST 아키텍처 스타일을 기반으로 리소스를 URL로 표현하고, HTTP 메서드를 통해 해당 리소스에 대한 CRUD 동작을 정의하는 API 설계 방식입니다. REST의 핵심은 리소스 중심이며 각 자원은 고유한 URL로 식별되고 GET, POST, PUT, PATCH, DELETE 같은 표준 HTTP 메서드를 사용해 각각 조회, 생성, 수정, 삭제를 수행합니다. REST API는 서버가 이전 요청의 상태를 기억하지 않는 무상태성을 가지며 서버와 클라이언트가 명확히 분리되어 있고 캐싱이 가능해 확장성과 성능이 좋습니다.

7. 브라우저의 캐시(Cache)는 어떻게 동작하나요?

• 브라우저 캐시는 이전에 받은 리소스를 저장해두었다가, 다음 요청 시 서버에 다시 요청하지 않고 로컬에서 불러오는 방식입니다. 이를 통해 네트워크 비용과 로딩 시간을 줄여 성능을 개선합니다.

8. 이미지나 리소스 최적화 방법은?

• 이미지나 리소스 최적화는 파일 크기와 네트워크 전송량을 줄여 로딩 속도를 개선하는 기법입니다. 주로 WebP 같은 최적화된 이미지 포맷 사용,
  화면에 보일 때만 로드하는 Lazy Loading 적용, 이미지 크기 리사이징,
  그리고 웹폰트 최적화(예: font-display: swap) 등을 활용합니다.

9. 코드 스플리팅(Code Splitting)과 Lazy Loading은 무엇인가요?

• 코드 스플리팅은 번들을 여러 조각으로 나누고 필요한 순간에만 로드하여 초기 번들 크기를 줄이는 기법입니다. Lazy Loading은 특정 컴포넌트나 리소스를 사용자에게 필요할 때 가져오는 방식으로,코드 스플리팅을 구현하는 대표 방법입니다.

10. 렌더링 성능을 개선하는 방법은?

• 렌더링 성능을 개선한다는 것은 불필요한 연산과 리렌더링을 줄여 브라우저의 작업 부담을 낮추는 것입니다. React에서는 React.memo, useMemo, useCallback 등을 사용해 불필요한 컴포넌트 렌더링을 최소화하고, 상태를 적절히 분리해 렌더링 범위를 줄이는 것이 효과적입니다. 브라우저 레벨에서는 DOM 변경을 최소화하고, 레이아웃(Reflow) 비용이 큰 작업을 줄이며, 애니메이션은 transform과 opacity 중심으로 처리해 페인트 비용을 줄이는 방식이 사용됩니다.