프론트엔드 면접 질문 & 답 CS Part

CS

• 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나?

  1. 사용자가 웹 브라우저를 통해 google.com 을 입력하면 URL 주소 중 도메인 네임 부분을 DNS 서버에서 검색합니다.
  2. DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다.
  3. 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.

     TCP (Transmission Control Protocol) 연결은 인터넷에서 네트워크 기반으로 작동하는 프로토콜로, 데이터의 안정적인 전송을 보장하는 연결 기반 프로토콜이다.

  4. 서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.
  5. 브라우저는 response를 받아 파싱하여 화면에 렌더링합니다.

• DNS에 대해 설명

  1. DNS는 Domain Name System의 약자이며 인터넷에서 컴퓨터나 장치가 특정 웹사이트를 찾을 때, 웹사이트의 IP 주소를 찾기 위해 사용되는 시스템
  2. 컴퓨터는 사람들이 기억하기 쉬운 도메인 이름을 이해하지 못하기 때문에 이 도메인 이름을 IP주소로 변환하여 컴퓨터가 웹 사이트에 액세스할 수 있도록 한다. 일반적으로 사용자의 컴퓨터 또는 장치가 DNS 서버에 쿼리를 보내는데 이를 기반으로 웹사이트의 IP 주소를 반환한다.

• REST API에 대해 설명

  1. REST(Representational State Transfer) API는 웹 서비스를 구현하기 위한 아키텍처 스타일 중 하나로, HTTP 프로토콜을 이용한 데이터 전송을 지원하는 API
  2. HTTP 메서드(GET, POST, PUT, DELETE 등)을 이용해 자원에 대한 행위를 나타낼 수 있다.
     예를 들면, GET 메서드를 이용해 /users 자원을 요청하면, 해당 자원의 정보를 읽어올 수 있다.
  3. REST API에서는 자원에 대한 표현을 사용해 데이터를 주고받는다. 예를 들면 JSON, XML, HTML 등의 형식으로 표현될 수 있다.

• GET, POST 차이

  1. GET 메서드
     GET 메서드는 서버에서 데이터를 가져오기 위해 사용한다. 즉, 클라이언트에서 서버로 데이터를 요청하는데 사용된다. GET 요청은 URL을 통해 전송되고, 데이터는 URL의 쿼리 문자열(query string)에 포함된다. 쿼리 문자열은 key-value 쌍으로 이루어져 있다. GET 요청은 데이터를 URL에 노출시켜 보안에 취약하기 때문에 비밀번호나 개인정보같은 데이터는 GET으로 전송하면 안된다.
  2. POST 메서드
     POST 메서드는 서버로 데이터를 제출하기 위해 사용한다. 클라이언트에서 서버로 데이터를 전송할 때, GET 메서드처럼 URL에 데이터를 노출하지 않는다. 대신, POST 요청은 HTTP 요청 메시지의 본문(body)에 데이터를 포함시켜 전송한다. GET처럼 URL에 데이터를 포함시키지 않아 보안성은 높지만 시간이 더 오래걸린다.

• 객체 지향 프로그래밍(Object Oriented Programming)이란?

  컴퓨터 프로그래밍 패러다임 중 하나로 현실 세계의 객체들을 모델링하여 프로그램을 작성하는 방식이다.
  객체 지향 프로그래밍은 데이터와 해당 데이터를 처리하는 함수들을 하나의 논리적인 단위인 '객체'로 묶어서 다룬다. 객체 지향 프로그래밍은 3가지 특징을 가진다.

  1. 캡슐화(Encapsulation): 객체의 데이터와 함수를 하나의 묶음으로 캡슐화해 외부에서 직접 접근하지 못하도록 한다. 이를 통해 객체의 내부 구현을 숨길 수 있고, 결합도를 낮출 수 있다.
  2. 상속(Inheritance): 기존 클래스를 재사용해 새로운 클래스를 만들 수 있다. 코드의 재사용성을 높이고, 객체 간 계층 구조를 형성할 수 있다.
  3. 다형성(Polymorphism): 동일한 메서드 호출에 대해 서로 다른 클래스의 객체가 다르게 동작할 수 있게 하는데 이는 코드의 유연성을 높일 수 있다.

• 자료구조 stack과 queue에 대해 설명

  스택(stack)과 큐(queue)는 데이터를 저장하는 자료구조이다.

  1. 스택(stack)
     스택은 데이터를 일시적으로 저장하기 위한 자료구조로, 데이터를 차곡차곡 쌓아 올린 형태를 가진다.
     이 구조 때문에 마지막으로 추가된 데이터가 가장 먼저 제거되는 Last-In-First-Out(LIFO)구조를 가진다. 스택에 새로운 데이터를 추가하면, 해당 데이터는 스택의 가장 위에 위치하고, 제거할 때는 가장 위에 위치한 데이터가 제거된다.
  2. 큐(queue)
     큐는 데이터를 일시적으로 저장하기 위한 자료구조로, 데이터를 먼저 추가한 것이 제거되는 First-In-First-Out(FIFO) 구조를 가진다. 큐에 새로운 데이터를 추가하면, 해당 데이터는 큐의 가장 뒤에 위치하고, 제거할 때는 가장 앞에 위치한 데이터가 제거된다. 큐는 대기열(queue)을 구현하거나, BFS(Breadth-First Search)등 다양한 알고리즘에서 사용된다.

• 프로세스와 스레드에 대해 설명

  프로세스와 스레드는 컴퓨터에서 실행되는 작업의 단위이다.

  1. 프로세스(Process)
     프로세스는 실행 중인 프로그램을 의미하며, 메모리 공간과 CPU 시간 등의 시스템 자원을 할당받아 실행된다. 각각의 프로세스는 독립적인 메모리 공간을 가지기 때문에, 서로 영향을 미치지 않는다.
     프로세스 간 통신(IPC, Inter-Process Communication)을 통해 데이터를 공유할 수 있다.
  2. 스레드(Thread)
     스레드는 프로세스 안에서 실행되는 작은 단위의 실행 흐름이다. 프로세스 안에서 스레드를 생성하면, 해당 프로세스의 메모리 공간을 공유하면서 실행된다. 스레드는 각각 독립적인 실행 흐름을 가지고 있으며, 멀티 스레딩을 사용하면 프로그램의 성능을 향상시킬 수 있다.

  프로세스는 서로 다른 프로그램을 동시 실행할 때, 스레드는 하나의 프로그램 내에서 동시에 실행해야 하는 작업이 많을 때 사용된다.
  프로세스 간 통신은 비용은 크지만 안정적이고, 스레드는 경량화되있어서 작업 전환이 빠르지만 안정성 문제가 있다.

• SPA와 MPA의 차이

  1. SPA(단일 페이지 애플리케이션)는 단일 HTML 페이지에서 동적으로 콘텐츠를 업데이트하는 웹 애플리케이션이다. SPA는 일반적으로 JavaScript를 사용해 클라이언트 측에서 렌더링되며, 페이지를 다시 로드하지 않고도 새로운 콘텐츠를 표시할 수 있다. 대표적인 SPA 프레임워크로는 Angular, React, Vue.js등이 있다.
  2. MPA(다중 페이지 애플리케이션)는 여러 개의 HTML 페이지를 사용해 웹 애플리케이션을 만드는 방식이다. 각 페이지는 서버에서 렌더링되며, 새로운 페이지를 요청할 때마다 전체 페이지가 다시 로드된다. MPA는 일반적으로 정적인 콘텐츠를 제공하는 웹 사이트에서 사용된다.

  SPA는 사용자 경험을 개선하고 빠른 반응성을 제공하는 것이 장점이지만, 초기 로딩 속도가 느리고 검색 엔진 최적화(SEO)가 어렵다는 단점이 있다. 반면 MPA는 초기 로딩 속도가 빠르고 SEO에 유리하지만, 사용자 경험이 떨어지는 단점이 있다.

• Git에 대한 설명

  Git은 분산형 버전 관리 시스템으로 코드 기반의 변경 사항을 추적할 수 있다.
  Git은 변경 사항을 효율적으로 병합하고 충돌을 해결할 수 있으며, 이를 통해 안정적이고 협업적인 방식으로 작업할 수 있다.

• API란?

  API는 Application Programming Interface의 약자로, 응용 프로그램에서 다른 소프트웨어와 상호 작용하기 위한 인터페이스를 제공하는 방법을 말한다. 즉, API는 소프트웨어 간의 커뮤니케이션을 가능하게 하는 일종의 규약이나 약속이다.
  API를 사용하면 소프트웨어 개발자들은 기존의 서비스나 데이터를 활용하여 새로운 애플리케이션을 더 빠르고 쉽게 개발할 수 있다.

• MVC, MVP, MVVM

  모두 소프트웨어 디자인 패턴으로, 사용자 인터페이스와 비즈니스 로직을 구성하는 방법을 제시한다.
  *MVC (Model-View-Controller) 패턴은 어플리케이션을 3개의 구성 요소인 모델(Model), 뷰(View), 컨트롤러(Controller)로 나누어 설계한다.

  ⭐️ 모델: 데이터와 관련된 비즈니스 로직을 처리합니다.
  ⭐️ 뷰: 사용자 인터페이스를 나타내며, 모델의 상태를 표시합니다.
  ⭐️ 컨트롤러: 사용자의 입력과 이벤트를 처리한다.

  MVP (Model-View-Presenter) 패턴은 컨트롤러 대신에 프레젠터(Presenter)를 사용하여 뷰와 모델 간의 의존성을 제거한다.

  ⭐️ 모델: 데이터와 관련된 비즈니스 로직을 처리합니다.
  ⭐️뷰: 사용자 인터페이스를 나타내며, 모델의 상태를 표시합니다.
  ⭐️프레젠터: 뷰에서 발생한 이벤트를 처리하고, 모델의 업데이트를 담당하며, 뷰에 데이터를 업데이트한다.(뷰와 모델의 의존성을 줄이고 테스트 용이성을 높임)

  MVVM (Model-View-ViewModel) 패턴은 뷰모델(ViewModel)을 사용하여 뷰와 모델 간의 의존성을 분리한다.

  ⭐️모델: 데이터와 관련된 비즈니스 로직을 처리합니다.
  ⭐️뷰: 사용자 인터페이스를 나타내며, 뷰모델에 바인딩되어 뷰모델의 상태를 표시합니다.
  ⭐️뷰모델: 사용자 인터페이스의 상태와 동작을 캡슐화하고, 뷰와 모델 사이의 통신 처리.(양방향 데이터 바인딩으로 개발 생산성, 유지보수성 향상)
  

• 런타임에러와 컴파일에러의 차이

  런타임 에러는 프로그램이 실행되는 동안 발생하는 에러이다. 주로 프로그램 실행 중 잘못된 연산이나 잘못된 데이터 유형 등이 발생하는 경우이다. 이 에러는 프로그램이 중단된다.

  컴파일 에러는 코드를 컴파일 할 때 발생하는 에러이다. 코드에 문법적인 오류가 있거나, 변수나 함수를 참조할 때 그것이 존재하지 않는 등의 오류가 있는 경우 발생할 수 있다. 컴파일러는 이러한 오류를 발견하고 코드를 컴파일하지 않는다. 따라서 프로그램이 실행되기 전에 발견되며, 오류를 수정하고 다시 컴파일해야 한다.

  컴파일 에러와 런타임 에러는 모두 프로그래밍에서 발생하는 오류지만, 발생 시기와 원인이 다르다. 컴파일 에러는 코드 작성 중에 발생하고, 컴파일시 발견된다. 반면, 런타임 에러는 프로그램 실행 중 발생되며, 코드의 논리적 오류나 잘못된 데이터 처리 등의 문제로 발생할 수 있다.

• 자바스크립트와 타입스크립트 차이

1. 타입 시스템: JavaScript는 동적 타입 언어이므로 변수의 타입이 런타임에 결정된다. TypeScript는 정적 타입 언어로, 변수의 타입을 선언하고 컴파일 시점에 타입 체크를 수행한다.

2. 컴파일러: JavaScript는 스크립트 언어이므로 브라우저나 Node.js 같은 환경에서 인터프리터를 통해 바로 실행된다. TypeScript는 컴파일 언어이므로 코드를 JavaScript로 변환해주는 TypeScript 컴파일러가 필요하다.

3. 에러 처리: TypeScript는 컴파일러가 타입 체크를 수행하므로 코드에서 발생하는 오류를 미리 잡을 수 있다. JavaScript는 런타임에 에러가 발생하기 때문에 디버깅이 어렵다.

4. 확장성: TypeScript는 JavaScript에 타입 시스템과 클래스 기능 등을 추가한 것이므로 JavaScript 코드를 TypeScript로 쉽게 변환할 수 있다.

5. 생산성: TypeScript는 정적 타입 체크와 코드 어시스트 기능 등으로 코드의 안정성과 가독성을 높이고 개발자의 생산성을 향상시킨다.

• JWT
  JWT란 JSON Web Token을 의미하는데 인증 및 권한 부여 목적으로 사용되는 일종의 토큰이다.
  JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성된다
  1. 헤더(Header): 서명을 생성하는 데 사용되는 토큰 유형 및 해싱 알고리즘에 대한 정보가 포함
  2. 페이로드(Payload): 토큰이 전달하는 클레임 또는 데이터가 포함
  3. 서명(Signature): 전송 중에 토큰이 변조되지 않았는지 확인하는 데 사용
  JWT는 일반적으로 웹 어플리케이션 및 API에서 클라이언트와 서버 간에 사용자 데이터를 안전하게 전송하는 수단으로 사용된다. 토큰은 서버에서 생성되어 클라이언트로 전송된다. 그런 다음 클라이언트는 사용자 이름과 암호를 계속 확인하지 않더라도 사용자를 인증하고 권한을 부여할 수 있도록 한다.
  
  
• CORS
  CORS (Cross-Origin Resource Sharing) 오류는 한 도메인에서 실행 중인 웹 애플리케이션이 다른 도메인의 리소스에 액세스하려고 할 때 발생합니다. 기본적으로 웹 브라우저는 이러한 유형의 요청을 보안 조치로 제한하여 악성 웹 사이트가 민감한 정보에 액세스하거나 사용자의 동의 없이 작업을 수행하는 것을 방지합니다.
  
  교차 도메인 요청을 허용하려면 리소스를 호스팅하는 서버는 요청하는 도메인을 "Access-Control-Allow-Origin" 헤더에 명시적으로 포함 해야 합니다. 이 헤더가 없거나 요청하는 애플리케이션의 도메인을 포함하지 않은 경우 브라우저는 요청을 차단하고 CORS 오류를 생성합니다.