프론트엔드 기술면접 답변 정리 (CS)

챗 지피티와 함께 한 기술 면접 대비!

CS

1. 브라우저 렌더링 원리

• 브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 리소스를 가져와서 화면에 표시하는 과정입니다. 먼저, 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 그리고 CSS 파일을 로드하고 파싱하여 스타일 규칙을 만들고, DOM 트리에 적용하여 렌더 트리를 생성합니다. 이후에는 렌더 트리를 기반으로 각 요소의 위치와 스타일을 계산하고, 렌더링 엔진은 화면에 픽셀로 변환하여 페이지를 그립니다.

2. www.google.com 주소 입력 시 발생하는 일

• 주소창에 www.google.com을 입력하면, 브라우저는 DNS(Domain Name System)를 사용하여 도메인 이름을 IP 주소로 변환합니다. 그리고 변환된 IP 주소를 사용하여 해당 서버에 HTTP 요청을 보냅니다. 서버는 요청을 받고, 요청에 따른 HTML, CSS, JavaScript 등의 리소스를 응답으로 전송합니다. 브라우저는 이를 받아서 파싱하고 렌더링하여 사용자에게 표시합니다.

3. 웹 프로토콜

• 웹 프로토콜은 인터넷에서 정보를 주고받기 위한 규약이며, 웹 브라우저와 웹 서버 간의 통신을 위해 사용됩니다. 가장 일반적으로 사용되는 웹 프로토콜은 HTTP(Hypertext Transfer Protocol)입니다. HTTP는 클라이언트가 서버로부터 정보를 요청하고, 서버가 클라이언트에게 정보를 응답하는 방식으로 동작합니다.

4. HTTP와 HTTPS의 차이점

• HTTP는 웹 상에서 데이터를 주고받을 때 사용되는 프로토콜로, 데이터 전송 시 암호화되지 않습니다. 반면에 HTTPS는 HTTP의 보안 버전으로, 데이터를 암호화하여 안전하게 전송합니다. HTTPS는 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 암호화된 연결을 설정하고, 인증서를 통해 서버의 신원을 확인합니다.

5. RESTful API

• RESTful API는 Representational State Transfer의 약자로, 웹 서비스를 위한 아키텍처 스타일입니다. RESTful API는 자원(URI)을 표현하고, 해당 자원에 대한 상태(State)를 주고받는 방식으로 동작합니다. HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하며, 일관된 인터페이스를 제공합니다.

6. GET과 POST의 차이

• GET과 POST는 HTTP 프로토콜에서 사용되는 메소드입니다. 주요한 차이점은 다음과 같습니다:
• GET은 서버로부터 데이터를 요청하여 응답을 받는데 사용되며, 데이터를 URL의 쿼리 파라미터로 전송합니다. POST는 서버로 데이터를 제출하거나 전송하는데 사용되며, 요청 본문에 데이터를 담아 전송합니다.
• GET은 브라우저의 기록에 저장되며, URL에 데이터가 노출될 수 있습니다. POST는 브라우저의 기록에 저장되지 않으며, 데이터가 요청 본문에 포함되므로 노출되지 않습니다.
• GET은 캐싱이 가능하고, 브라우저에서 캐시된 응답을 사용할 수 있습니다. POST는 캐싱되지 않으며, 항상 새로운 요청을 보냅니다.
• GET은 데이터의 길이에 제한이 있으며, URL에 데이터를 담기 때문에 노출되므로 보안에 취약할 수 있습니다. POST는 데이터의 길이에 제한이 없으며, 요청 본문에 데이터를 담아 전송하므로 보안성이 더 높습니다.

7. 브라우저 저장소 (로컬 스토리지, 세션 스토리지, 쿠키의 차이):

• 로컬 스토리지(Local Storage): 클라이언트의 웹 브라우저에 데이터를 영구적으로 저장합니다. 데이터는 도메인과 관련되어 있으며, 사용자가 직접 삭제하지 않는 이상 지속됩니다.
• 세션 스토리지(Session Storage): 클라이언트의 웹 브라우저에 데이터를 세션 단위로 저장합니다. 세션은 브라우저가 열려 있는 동안 유지되며, 브라우저를 닫으면 데이터가 삭제됩니다.
• 쿠키(Cookie): 클라이언트의 웹 브라우저에 데이터를 저장합니다. 쿠키는 도메인과 관련되어 있으며, 설정된 만료일까지 유지됩니다. 서버와 클라이언트 간의 상태 정보를 유지하거나 사용자를 식별하는 데 사용될 수 있습니다.

8. JWT

• JWT는 JSON Web Token의 약자로, 웹 토큰 기반의 인증 방식입니다. JWT는 클라이언트와 서버 간의 정보를 안전하게 전송하기 위해 사용됩니다. 토큰은 서명된 JSON 형식으로 표현되며, 클라이언트에서 서버로 전송되어 인증 및 권한 부여에 사용됩니다.

9. CORS

• CORS는 Cross-Origin Resource Sharing의 약자로, 웹 애플리케이션에서 다른 도메인의 리소스를 요청하는 메커니즘을 제어하는 보안 정책입니다. 웹 브라우저는 동일 출처 정책(Same-Origin Policy)에 따라 리소스 요청을 제한하며, CORS를 사용하여 동일 출처 이외의 리소스에 대한 요청을 허용할 수 있습니다.

10. MVC와 MVVM 패턴의 차이

• MVC(Model-View-Controller) 패턴은 애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)로 구분하여 개발하는 방식입니다. 모델은 데이터를 나타내고, 뷰는 사용자 인터페이스를 표시하며, 컨트롤러는 데이터와 뷰 간의 상호 작용을 관리합니다.
• MVVM(Model-View-ViewModel) 패턴은 MVC 패턴의 확장으로, 뷰와 모델 사이에 뷰모델(ViewModel)이 추가됩니다. 뷰모델은 뷰를 표현하기 위한 데이터와 동작을 캡슐화하고, 뷰와 모델 간의 데이터 바인딩을 통해 데이터의 변화를 자동으로 반영합니다.

11. OOP (Object Oriented Programming)

• OOP는 객체 지향 프로그래밍의 약자로, 프로그램을 객체들의 집합으로 모델링하는 프로그래밍 패러다임입니다. OOP는 데이터와 해당 데이터를 처리하는 메소드를 하나의 단위인 객체로 캡슐화하여 프로그램을 구성합니다. 객체는 상태(State), 행위(Behavior), 식별자(Identity)를 가지며, 상속, 다형성, 캡슐화 등의 개념을 활용하여 유연하고 재사용 가능한 코드를 작성할 수 있습니다.

12. CSR과 SSR의 차이:

• CSR(Client-Side Rendering): 웹 애플리케이션의 초기 로딩 시 서버로부터 HTML, CSS, JavaScript 파일을 받아와 클라이언트에서 렌더링하는 방식입니다. 서버는 데이터만을 제공하며, 클라이언트에서 렌더링 로직을 실행하여 동적으로 페이지를 생성합니다. 초기 로딩 속도는 빠르지만, 초기 로딩 시 아무 내용도 보여주지 않고 JavaScript 파일이 다운로드되어야 정상적인 페이지가 표시됩니다.
• SSR(Server-Side Rendering): 웹 애플리케이션의 초기 로딩 시 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 서버는 클라이언트에게 완전한 페이지를 제공하므로 초기 로딩 시 빠르게 내용이 표시됩니다. 하지만 동적인 부분이 있을 경우 서버에 추가적인 요청이 필요하며, 서버 부하가 증가할 수 있습니다.

13. SPA와 MPA의 차이:

• SPA(Single-Page Application): 단일 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 서버로부터 새로운 페이지를 받아오지 않고, 필요한 데이터만을 비동기적으로 로드하여 동적으로 페이지를 갱신합니다. 초기 로딩 시 필요한 리소스를 모두 받아오기 때문에 초기 로딩 속도는 느릴 수 있지만, 사용자 경험과 애플리케이션의 반응성이 향상됩니다.
• MPA(Multi-Page Application): 여러 개의 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 서버로부터 새로운 페이지를 요청하여 전체 페이지를 다시 로드합니다. 각 페이지는 독립적인 HTML 파일로 구성되어 있으며, 서버와의 통신이 발생하기 때문에 전체적인 로딩 속도는 느릴 수 있습니다.

14. Git

• Git은 분산 버전 관리 시스템으로, 소스 코드의 변경 이력을 관리하고 협업 작업을 위해 사용됩니다. Git은 로컬 저장소와 원격 저장소를 제공하여 여러 개발자가 동시에 작업하고 변경 사항을 공유할 수 있습니다. Git은 브랜치를 통해 작업을 분리하여 병렬적으로 개발하고, 변경 이력을 추적하며 필요한 경우에는 이전 상태로 되돌릴 수 있는 기능을 제공합니다.

15. 웹팩과 바벨

• 웹팩(Webpack): 웹 애플리케이션의 자원(HTML, CSS, JavaScript, 이미지 등)을 모듈로 관리하고, 이를 번들링하여 최적화된 형태로 제공하는 도구입니다. 웹팩은 의존성 그래프를 생성하여 필요한 모듈을 로드하고, 로더(Loader)와 플러그인(Plugin)을 통해 자원을 처리하며, 최종 번들을 생성합니다.
• 바벨(Babel): 최신 버전의 JavaScript 코드를 구형 브라우저에서도 동작할 수 있는 호환성 있는 코드로 변환하는 도구입니다. 바벨은 ECMAScript 2015+ 문법을 이전 버전의 JavaScript로 변환하거나, JSX와 같은 확장 문법을 JavaScript로 변환하는 역할을 수행합니다.

16. 깊은 복사와 얕은 복사의 차이점:

• 깊은 복사(Deep Copy): 원본 객체의 모든 값을 복사하여 완전히 독립적인 새로운 객체를 생성합니다. 즉, 복사된 객체와 원본 객체는 서로 영향을 주지 않습니다.
• 얕은 복사(Shallow Copy): 원본 객체의 참조 값만을 복사하여 새로운 객체를 생성합니다. 복사된 객체와 원본 객체는 같은 참조 값을 가지고 있기 때문에 한쪽의 변경이 다른 쪽에도 영향을 줄 수 있습니다.

17. 크로스 브라우징

• 크로스 브라우징은 웹 애플리케이션이 다양한 브라우저와 버전에서 동일한 동작과 레이아웃을 제공하는 것을 의미합니다. 다른 브라우저들은 서로 다른 HTML, CSS, JavaScript의 해석 방식과 기능 지원을 가지고 있기 때문에, 크로스 브라우징을 위해서는 이러한 차이를 고려하여 개발하고 테스트해야 합니다.

18. Semantic HTML

• Semantic HTML은 웹 문서의 구조와 의미를 더 명확하게 표현하기 위해 의미론적인 요소를 사용하는 것을 의미합니다. 예를 들어, <header>, <nav>, <section>, <article>, <footer> 등의 요소를 사용하여 웹 문서의 구조를 설명하고, <h1>, <p>, <ul>, <table> 등의 요소를 사용하여 적절한 의미를 전달합니다. Semantic HTML은 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는데 도움을 줄 수 있습니다.

19. 라이브러리와 프레임워크:

• 라이브러리(Library): 개발자가 필요에 따라 호출하여 사용할 수 있는 기능들의 집합입니다. 라이브러리는 개발자가 제어 흐름을 가지고 있으며, 필요한 기능을 선택적으로 사용할 수 있습니다.
• 프레임워크(Framework): 미리 정의된 규칙과 구조에 따라 개발자가 코드를 작성해야 하는 개발 환경입니다. 프레임워크는 개발자에게 필요한 기본 구조와 기능을 제공하며, 개발자는 프레임워크의 규칙에 따라 코드를 작성해야 합니다. 프레임워크는 애플리케이션의 흐름을 제어하고, 개발 생산성을 향상시킬 수 있습니다.

면접 질문 레퍼런스
https://velog.io/@kim_unknown_/프론트엔드-개발자-면접-질문-모음