Frontend 개발자가 되기 위해 기본기도 다지고, 앞으로 있을 기술 면접을 대비해 중요한 개념들을 질문, 답변의 형태로 정리했습니다.

질문들은 이 블로그를 참고했습니다.

CS, JS, React, Frontend로 나뉘며 각 편은 계속해서 내용을 붙여나갈 예정입니다. 이 글은 그 중 CS 관련 내용을 정리한 글입니다.

브라우저 주소창에 주소를 입력하면 어떤 일이 일어나나요?

참고할만한 Web.dev 글

가장 먼저 웹사이트의 IP주소를 알아야 합니다. 이를 위해 첫째로 DNS Cache를 확인하고, 다음으로 로컬에 있는 hosts 파일을 확인하고, 마지막으로 DNS 서버에 질의합니다.

IP주소를 획득하면 TCP연결을 먼저 진행합니다. TCP 연결이 성공하면 HTTP request가 나가서 response를 받게 됩니다.

이후 웹 브라우저의 렌더링 엔진이 이 응답을 브라우저상에 렌더링하게 됩니다.

렌더링 엔진에 대해 설명해주세요.

렌더링 엔진은 HTML, XML, 이미지 등 웹 서버로부터 받은 응답을 브라우저상에 보여주는 역할을 합니다. 예를 들어 HTML 문서를 응답받으면 렌더링 엔진의 HTML parser와 CSS parser를 이용해 파싱되고, DOM과 CSSDOM 트리로 변환되고, 렌더 트리로 결합합니다.

그 다음, 렌터 트리에 명시돼 있는 각 노드의 정확한 위치를 가지고 layout을 그린 후, 브라우저의 UI Backend Layer를 이용해 페인팅을 진행해 웹페이지를 화면에 표시합니다.

크롬은 Blink, 사파리는 Webkit을 사용하며 렌더링 엔진마다 CSS문법이 다르기도 합니다.

URL과 URI는 어떻게 다른가요?

uriurlurn

URI, Uniform Resource Identifier는 URL과 URN을 포함하는 개념입니다.

URI는 인터넷에서 특정 아이템을 식별할 수 있는 string이며 URL이 이에 포함됩니다. URL(Uniform Resource Locator)은 특정 아이템의 identifier와 그 아이템으로 접근할 수 있는 방법(cheme)이 명시된 string입니다.

예를 들어, google.com은 URI이고, https://google.com은 URI이자 URL입니다.

DNS에 대해 설명해주세요.

DNS, Domain Name Service는 분산형 DB 구조를 가지고 있는 서버로, 도메인 네임을 가지고 Host의 IP를 찾아주는 역할을 합니다.

Protocol이란 무엇인가요?

프로토콜이란 컴퓨터 사이 데이터 통신을 위한 규약을 말하는데, Application Layer, Transport Layer, Internet Layer, Network Interface Layer(Link Layer)의 네 스택으로 나뉩니다.

HTTP에 대해 설명해주세요.

HTTP, Hyper Text Transfer Protocol은 인터넷 프로토콜 중 하나입니다. HTTP는 Protocol의 네 레이어 중 Application Layer에 속합니다.

HTTP는 세가지 특징이 있습니다.

  • 클라이언트 서버 구조, 즉 서버에 요청을 보내고, 응답을 기다렸다가 서버로부터 응답을 받는 구조를 가지고 있습니다.
  • 서버가 프로토콜의 상태를 보존하지 않는 무상태 프로토콜입니다. 때문에 로그인처럼 상태를 유지할 필요가 있는 경우에는 쿠키나 세션 등을 이용해야 합니다.
  • 연결을 유지하지 않는 비연결성을 가지고 있습니다.

HTTP 메세지는 Request와 Response로 구성되는데, 이는 각각 start-line, header, empty line, message body로 이뤄져 있습니다.

그 중 start-line만 설명하면 아래와 같습니다.

Request

  • Request-Line(Request): Method SP Request-URI SP HTTP-Version CRLF
    • SP=공백, CRLF=줄바꿈
    • Method 종류: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  • Status-Line(Response): HTTP-version SP Status-Code SP Reason-Phrase CRLF
    • Status-Code 종류
      • 1xx: Informational
      • 2xx: Success
      • 3xx: Redirection
      • 4xx: Client Error
      • 5xx: Server Error

TCP/IP 연결이란 무엇인가요?

IP, Internet Protocol은 Internet Layer에 속하는 프로토콜로, 지정한 IP 주소에 패킷 단위로 데이터를 전달하는 프로토콜입니다. 패킷에는 출발지의 IP, 목적지의 IP, 전송할 데이터 등이 포함됩니다. 그러나 IP 프로토콜은 패킷을 받을 상대가 없거나, 중간에 패킷이 사라지거나, 같은 IP를 사용하는 여러 어플리케이션이 통신하면 구분할 수 있는 방법이 없다는 한계가 있습니다.

이를 해결하기 위해 TCP를 사용합니다 TCP, Transmission Control Protocol은 Transport Layer에 속하는 프로토콜로, 연결지향형 프로토콜입니다. 3-Way-Handshake, 데이터 전달의 보증, 순서를 보장한다는 특징이 있어 신뢰할 수 있는 프로토콜이라고 불립니다.

3-Way-Handshake는 먼저 클라이언트에서 서버로 TCP 연결 요청을 보내고, 서버에서 ACK, 즉 acknowledgment(확인) 응답을 보내면 다시 클라이언트에서 서버로 ACK 응답을 보내는 과정으로, 이를 통해 TCP는 연결을 보장해줍니다.

REST API에 대해 설명해주세요.

Redhat Docs

REST API(=RESTful API)는 HTTP를 사용하는, REST 아키텍처 스타일을 지키는 어플리케이션 프로그래밍 인터페이스이자 가이드라인입니다. 다양한 포멧을 사용할 수 있지만 보통은 JSON 포멧을 사용합니다.

REST API를 설계할 때는 HTTP Method에 맞게, 확장성을 지니도록 잘 설계해야 합니다.

객체 지향 프로그래밍이란 무엇인가요?

OOP, Object Oriented Programming은 프로그래밍 패러다임중 하나로 컴퓨터 프로그램을 여러 객체들의 모임으로 만들고자 하는 것입니다. 각 객체가 서로 데이터를 주고받고 처리하며 프로그램이 작동합니다.

객체지향 프로그래밍은 프로그램의 확장성과 유지보수성에 좋은 영향을 주고, 객체를 재사용하기 용이하며, 강한 응집력과 약한 결합력을 유지하는 데 도움이 되기 때문에 많이 사용됩니다. 기본적으로 클래스, 객체, 메소드와 메세지로 구성됩니다.

  • Class: 같은 종류로 분류될 수 있는 것들을 모아둔 것으로, 클래스 외부에 있는 요소들과 독립적으로 디자인됩니다. field와 method를 가집니다.
  • Object: 클래스의 Instance로, 클래스에서 정의된 내용들을 사용할 수 있습니다.
  • Method, Message: 클래스로부터 생성된 객체를 사용하는 방법으로, 메소드로는 객체의 속성을 조작하고 메세지로 객체간 통신이 이뤄집니다.

OOP는 다음의 특징을 가지고 있습니다.

  • 추상화: 실생활의 문제들처럼 객체를 추상화해 설계합니다.
  • 상속, 다중 상속: 새로운 클래스가 기존의 클래스를 상속받거나 파생될 수 있습니다. 하나의 클래스가 두개 이상의 클래스로부터 상속받을 수 있습니다. 코드의 재사용성와 유연성을 높여줍니다.
  • 다형성: 한 요소에 여러 개념을 넣어 놓을 수 있다는 의미로, 대표적으로 메소드 오버라이딩이나 오버로딩이 있습니다. 오버라이딩은 같은 이름의 메소드가 여러 클래스에서 각기 다른 기능을 하는 것을 말하고, 오버로딩은 같은 이름의 메소드가 인자의 개수나 자료형에 따라 다른 기능을 하는 것을 말합니다. 추가적으로 클래스 관점에서는 여러 클래스를 상속에 따라 한가지 이름으로 부를수도 있습니다. 이를 통해 객체간 관계를 조직적으로 나타낼 수 있습니다.
  • 캡슐화: 내부의 구현은 감추고, 모듈 내에서 응집도를 높이며 모듈간의 결합도를 떨어뜨립니다.

그러나 이같은 장점에도 처리 속도가 느리다는 단점이 있어 프로그램을 설계하는 데에 많이 신경써야 합니다.

최근에는 함수형 프로그래밍이라는 패러다임이 떠오르고 있는데, 함수형 프로그래밍은 프로그램을 상태값을 지니지 않는 함수값들의 연속으로 보는 관점입니다.

Process와 Thread의 차이는 무엇인가요?

프로세스는 OS로부터 자원을 할당받는 작업의 단위이고, 스레드는 이렇게 할당 받은 자원을 이용해 실행하는 단위로 한 프로세스 내에 여러 스레드가 있을 수 있습니다. 어플리케이션 하나가 프로세스이고, 그 안에서의 처리가 스레드입니다.

Multi Process와 Multi Thread에 대해 설명해주세요.

Multi Process는 하나의 프로그램을 여러 개의 프로세스로 구성해 각 프로세스가 하나의 작업을 처리하는 것입니다. 이렇게 함으로서 하나의 프로세스에서 오류가 발생해도 프로그램은 계속해서 동작할 수 있다는 장점이 있으나 context switching을 하는 과정에서 비용이 발생합니다.

Multi Thread는 프로그램을 여러 개의 스레드로 구성하고 각 스레드가 작업을 처리하는 것입니다. 상대적으로 속도가 빠르고 스레드간 자원을 공유할 수 있다는 장점이 있으나 디버깅이 어렵고, 동기화 관련한 이슈가 발생할 수 있으며 스레드 하나라도 오류가 발생하면 전체 프로세스에 문제가 생긴다는 단점이 있습니다.

Thread Safe란 무엇인가요?

Thread Safe는 여러 스레드가 동시에 사용돼도 안전하다는 것을 의미합니다. 더 자세히 말하면, 특정 함수 혹은 변수가 여러 스레드에서 호출돼도 하나의 스레드에서 호출됐을 때와 같은 결과가 보장되어야 한다는 의미입니다.

함수가 함수 바깥에 위치하는 전역 변수를 참조하면 Thread Safe하지 않을 수 있습니다.

Context Switching이란 무엇인가요?

CPU에서 여러 프로세스를 돌아가며 작업을 처리하는 과정을 뜻합니다. 동작중인 프로세스가 대기를 하면서 프로세스의 context 즉 상태를 보관하고 대기하다가 다시 실행할 때 복구에 걸리는 시간이 이 Context Switching에 들어가는 비용입니다.

동기(synchronous)와 비동기(asynchronous)에 대해 설명해주세요.

동기 방식은 하나의 스레드로 여러 요청을 순서대로 처리하는 방식이고, 비동기 방식은 스레드를 여러개 만들어 여러 요청을 번갈아가며 처리하는 방식입니다.

자바스크립트와 연결지어 설명을 이어나가보겠습니다. 먼저, JS는 싱글 스레드 언어입니다. 때문에 시간이 걸리는 작업을 하나 처리해야 할 때 다른 서비스들이 실행이 중단돼버립니다. 이는 웹페이지의 사용성에 치명적이므로 WebAPI에서는 비동기적 처리를 가능케 해줍니다.

JS Engine(대표적으로 V8)에는 하나의 힙과 하나의 콜 스택이, JS 런타임 웹 브라우저의 WebAPI에는 이벤트 루프와 콜백 큐가 존재합니다. 이 call stack에 요청이 stack 형태로 쌓이고, Web API에서 이 코드에 대한 처리를 비동기로 처리합니다.

비동기 함수에는 setTimeout(), setInterval(), HTTP 요청, 이벤트 헨들러 등이 있으며 각 함수들은 callback pattern을 사용해 이 콜백 함수에 넣어준 내용이 각 함수의 실행이 끝날 때 실행됩니다.