면접대비 질문 정리: 웹, HTML, CSS

면접질문 참고

• https://nomadcoders.co/community/thread/3979
• [diary] 프론트엔드 신입 면접 준비하기
• [면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)
• 프론트엔드 면접질문 중요도별 정리
• [Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성)

 

1. 브라우저 작동 원리 (주소창에 google.com을 입력하면 일어나는 일)

(사용자가 브라우저에 주소를 입력한 후에 서버로부터 전송된 데이터가 화면에 보이기까지 그 일련의 과정을 설명할 수 있어야 합니다.)

 

✅ 답변

브라우저에 도메인을 입력하면, 브라우저는 해당 IP 주소를 얻기 위해 DNS(Domain Name System) 서버에 요청을 보내 IP주소를 받아옵니다. IP 주소를 받은 브라우저는 해당 요청을 IP 주소와 일치하는 서버로 전달합니다. 이때 서버와의 통신은 HTTP 프로토콜을 사용하여 이루어지고, 모든 데이터는 TCP/IP 프로토콜을 이용해 전송됩니다. 다음으로 서버는 웹 사이트의 파일들을 데이터 패킷이라 불리는 데이터의 덩어리들로 브라우저에 전송해 주고, 웹 브라우저는 이렇게 받은 데이터를 기반으로 페이지를 화면에 렌더링하게 됩니다.

 

참고: 

• https://www.reason-to-code.com/blog/why-do-they-ask-about-browser-rendering/
• https://tkdev.tistory.com/86

 

2. 브라우저 렌더링 원리

✅ 답변

렌더링 엔진(webkit, gecko)이 HTML, CSS, JS로 렌더링할 때는 Critical Renderding Path(CRP)라는 프로세스를 거칩니다.

각 단계를 설명해 보자면 첫번째로 HTML을 파싱한 후 DOM트리를 구축하고 두번째로는 CSS를 파싱해 CSSOM 트리를 구축합니다. 이후에 JS를 실행하고 DOM과 CSSOM을 조합해서 렌더트리를 구축합니다. 그 후에 뷰포트를 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하고 최종적으로 이렇게 계산한 위치와 크기를 기반으로 화면에 그림을 그리게 됩니다.

 

참고: https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md

 

 

3. CORS 에러의 정의와 특징, 해결 방법

✅ 답변

CORS란 Cross-origin-Resource-Sharing의 준말이며 해석하면 교차 출처 자원 공유입니다.

데이터를 주고받는 과정에서 브라우저는 웹 어플리케이션에서 외부 출처(origin)로의 HTTP 요청을 제한합니다. 따라서 도메인 이름이 서로 다른 사이트 간 API 요청이 이루어질 때 개발자가 공유 가능한 도메인을 따로 설정해주지 않는다면 데이터 전송 과정에서 에러가 발생합니다.

CORS 에러가 발생했을 때의 해결방법은 첫번째로, 서버 코드에서 Access-Control-Allow-Origin 헤더에 알맞은 외부 사이트 주소를 등록해 주는 것입니다. 두번째로 프론트엔드에서 CORS 에러를 해결하는 방법으로는 package.json에서 proxy 주소를 설정해 주거나 http-proxy-middleware를 설치해 setupProxy 파일에 주소를 설정해 주는 방법이 있습니다.

 

참고: https://ksmfou98.github.io/Interview/%EA%B8%B0%EC%88%A0%20%EB%A9%B4%EC%A0%91%204%ED%83%84/

 

 

4. 클라이언트 사이드 렌더링과 서버 사이드 렌더링

각각의 특징, 장단점 등

 

✅ 답변

클라이언트 사이드 렌더링과 서버 사이드 렌더링은 웹 애플리케이션을 구축하는 데 사용되는 두 가지 주요한 렌더링 방식입니다. 각각의 특징, 장단점을 말씀드리자면

 

CSR의 경우 Client-Side Rendering의 약자로, 브라우저(클라이언트)에서 렌더링을 처리합니다. 초기 로딩 시에 클라이언트 측에서 HTML, JS, 필수 리소스들을 다운로드하고, 이후에 클라이언트 측에서 자바스크립트를 사용하여 동적으로 컨텐츠를 업데이트합니다. 이후에 사용자의 요청이 올 때마다 서버에서 데이터를 가져와서 동적으로 컨텐츠를 업데이트합니다.

CSR의 장점은 화면에서 변화가 일어나는 만큼의 데이터만 요청하기 때문에 웹 서버 호출을 최소화할 수 있어 서버 부담이 적고 초기 로딩 속도는 느리지만 이후에는 빠른 UX를 제공한다는 장점이 있습니다.

하지만 최초 로딩 시 HTML이 비어 있어 SEO(Search Engine Optimization) 측면에서 유리하지 않다는 단점이 있습니다.

 

SSR의 경우 Server-Side Rendering의 약자로, 서버 측에서 초기 페이지 렌더링을 완료한 후에 클라이언트에 전달하는 방식 입니다. 따라서 초기 로딩 속도가 빠른 편이고 SEO(Search Engine Optimization) 측면에서 유리하다는 장점이 있지만, HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 발생한다는 단점이 있습니다. 

 

이 두 가지 방식은 프로젝트의 요구 사항, 성능, SEO 등을 고려하여 선택하고 종종 두 가지 방식을 혼합하여 사용하기도 합니다.

 

 

참고:

• https://manon-kim.tistory.com/entry/%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC
• https://amyhyemi.tistory.com/224
• https://tinyurl.com/27x9otzh

 

5. REST API란?

우선 REST는 REpresentational State Transfer의 약자로, 전반적인 웹 어플리케이션에서 상호작용하는 데 사용되는 웹 아키텍쳐(애플리케이션을 설계, 제작하는 데 사용하는 패턴과 기술의 총칭) 모델입니다. 웹 애플리케이션 상에 존재하는 모든 리소스에 대해 고유 URI를 부여하고 HTTP Method(GET, POST, PUT, DELETE)를 이용해 CRUD 명령을 적용하는 개념입니다.

API란 Application Programming Interface의 약자로, 여러 응용 프로그램의 상호 통신 방법을 규정하고 데이터 교환을 도와주는 매개체입니다.

REST API라는 것은 REST 원칙을 적용하여 서비스 API를 설계한 것을 말하고, 대부분의 서비스가 REST API를 제공하고 있습니다.

 

참고: 

• REST(Representational State Transfer)란?
• REST API란?
• API란? API의 정의와 종류 그리고 장단점

 

6. 양방향 바인딩, 단방향 바인딩

7. 쿠키가 HTTP 어느 파트에 있는지?

8. header, body 구분

9. 로그인 페이지 구현 - 아이디, 비밀번호를 서버로 전송 후 체크하고 세션이나 쿠키로 ~ HTTP 헤더, JSON Body 관련 이야기

10. 네트워크 예외처리 - status code, try catch, axios 네트워크 라이브러리 공통 에러처리 방법

11. CSS에서 position이란?

12. CSS에서 margin과 padding이란?

13. CSS의 Box-model

14. 브라우저 저장소의 차이점 ( LocalStorage,SessionStorage,Cookie )