[면접 질문 정리] - CS 지식 질문

REST API, REST ful

-      REST API는 REST를 기반으로 서비스 API를 구현한 것입니다. REST라는 것은 자원의 표현, 즉 이름으로부터 자원의 정보를 주고받는 것을 의미합니다. 그래서 자원을 URI로 표현하고 자원에 대한 행위는 HTTP Method로 표현하는 것이 REST API입니다.

-      REST ful이라는 것은 REST의 원리를 잘 따르는 시스템입니다. 자원을 URI로 표현하고 행위에 맞는 적절한 HTTP Method를 사용한 것이 REST ful한 메소드입니다.

-      REST ful하지 않은 예시로 CRUD 기능을 모두 POST만으로 처리한 것을 말할 수 있습니다.

 

 

정보들이 주고 받는데 쓰이는 개발자들에게 널리 알려진 형식으로 , Rest규칙을 따르는 API를 말합니다. 이때 REST란 Web과 같은 분석 하이퍼 미디어 시스템을 위한 아키텍쳐 스타일(제약 조건의 집합)을 말하며, API란 응용 프로그램을 사용할 수 있도록 인터페이스를 말합니다. REST API는 "형식"이기 때문에 기술에 제한받지 않습니다.

 

REST : Representational State Transfer

즉, '자원(resource)의 대표의 상태를 전달.

Web과 같은 분석 하이퍼 미디어 시스템을 위한 아키텍쳐 스타일(제약 조건의 집합)

 

API : Application Programming Interface

즉, 응용 프로그램을 사용할 수 있도록 인터페이스를 제공을 뜻합니다. ;

 

브라우저에 url 치면 일어나는 일

1. 브라우저 주소창에 maps.google.com을 입력한다.
2. 브라우저가 maps.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다.
3. 만약 요청한 URL(maps.google.com)이 캐시에 없다면, ISP의 DNS 서버가 DNS 쿼리로 maps.google.com을 호스팅하는 서버의 IP 주소를 찾는다.
4. 브라우저가 해당 서버와 TCP 연결을 시작한다.
5. 브라우저가 웹서버에 HTTP 요청을 보낸다.
6. 서버가 요청을 처리하고 응답을 보낸다.
7. 서버가 HTTP 응답을 보낸다.
8. 브라우저가 HTML 컨텐츠를 보여준다.

클라이언트(브라우저)로부터 온 요청을 받고, 해당 요청에 따라 필요한 데이터를 생성하거나 가져옵니다. 이 데이터는 보통 HTML 문서, CSS, JavaScript, 이미지 및 기타 리소스 등이 포함될 수 있습니다.

 

 

-      첫 번째는 브라우저 DNS 서버에서 도메인명으로 IP 주소를 가져오게 됩니다. 그리고 HTTP Request 메시지 작성을 하구요. 그리고 OS의 프로토콜 스택에 메시지 전송을 의뢰하게 됩니다. 그럼 프로토콜 스택이 Lan에 제어정보를 붙인 패킷을 Lan 어댑터에 넘기게 되고요. Lan 어댑터는 이것을 전기신호로 변환시켜 Lan 케이블로 송출하게 됩니다. 그럼 송신한 패킷은 허브, 스위치, 라우터를 경유해서 이제 프로바이더에게 전달이 됩니다. 그 후 패킷은 수많은 엑세스 회선을 통해서 POP를 거쳐 인터넷 핵심부에 들어가게 되고 많은 고속 라우터들 사이로 패킷이 상대방 서버까지 도달하게 됩니다. 서버측에 Lan이 도착하게 되면 방화벽이 패킷을 검사하게 되고 그리고 이상이 없을 경우에 캐시 서버가 먼저 응답 데이터가 있는지 확인하게 됩니다. 이상 없을 시 웹서버에 전송하고 패킷이 웹서버에 도착하면 이제 프로토콜 스택은 패킷을 추출해서 WAS에 전달하게 됩니다. 그럼 WAS는 응답 메시지를 만들어서 다시 클라이언트에게 보내게 되는데 이때는 이미 말씀드린 방법대로 다시 클라이언트에게 전달하게 됩니다.

 

 

홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정) 

브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다.

 

 

-  1. DOM, CSSOM생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다 → 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. (html이 여기서 파싱된다)
      DOM Tree와 CSSOM Tree가 만들어진다
       2. Render Tree생성: DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. 
      3. Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다.(reflow 단계) 레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다. 
      4. Paint: Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리게 된다.(repaint 단계) 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다. (가령 그라데이션, 그림자 효과 > 단색 배경) 

 

Get과 Post의 차이

Get과 post의 차이

-      Get은 서버에서 어떤 데이터를 가져와서 보여줄때 사용합니다. 어떤 값이나 내용, 상태등을 바꾸지 않는 경우에 사용을 하는것입니다.

-      이에비해, Post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다

 

 

절차지향과 객체지향 차이점

절차지향은 데이터를 중심으로 함수를 구현합니다. 이에 반해 객체지향은 기능을 중심으로 메서드를 구현하게 됩니다.

 

절차지향(Procedural Programming)이란?

절차지향 프로그래밍이란 물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되며 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법입니다. 대표적인 절차지향 언어에는 C언어가 있습니다

장점

• 컴퓨터의 처리구조와 유사해 실행속도가 빠름

단점

• 유지보수가 어려움
• 실행 순서가 정해져 있으므로 코드의 순서가 바뀌면 동일한 결과를 보장하기 어려움
• 디버깅이 어려움

 

객체지향(Object Oriented Programming)이란?

객체지향의 정의를 살펴보면 객체지향이란 실제 세계를 모델링하여 소프트웨어를 개발하는 방법입니다. 객체지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각하게 됩니다. 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음으로 봐야 한다.

 

특징)

1. 캡슐화

• 캡슐화란 관련된 데이터와 알고리즘(코드)이 하나의 묶음으로 정리된 것으로써 개발자가 만들었으며, 관련된 코드와 데이터가 묶여있고 오류가 없어 사용이 편리합니다. 데이터를 감추고 외부 세계와의 상호작용은 메소드를 통하는 방법인데, 라이브러리로 만들어 업그레이드하면 쉽게 바꿀 수 있습니다.
  • 메소드: 메시지에 따라 실행시킬 프로시저로서 객체지향 언어에서 사용되는 것. 객체지향 언어에서는 메시지를 보내 메소드를 수행시킴으로써 통신(communication)을 수행

2. 상속

• 상속은 이미 작성된 클래스를 이어 받아서 새로운 클래스를 생성하는 기법으로 위에서 말한 기존 코드를 재활용해서 사용하는 것을 의미합니다. 객체지향 방법의 큰 장점중 하나입니다.

3. 다형성

• 다형성이란 하나의 이름(방법)으로 많은 상황에 대처하는 기법입니다. 개념적으로 동일한 작업을 하는 함수들에 똑같은 이름을 부여할 수 있으므로 코드가 더 간단해지는 효과가 있습니다.

장점

• 코드의 재활용성이 높음
• 코딩이 절차지향보다 간편함
• 디버깅이 쉬움

단점

• 처리속도가 절차지향보다 느림
• 설계에 많은 시간소요가 들어감

 

 

프로세스와 스레드의 차이점은?

프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 스레드는 이 프로세스 안에서 실행되는 흐름 단위를 말한다. 

프로세스는 최소 하나의 스레드를 보유하고 있으며, 각각 별도의 주소공간을 독립적으로 할당 받는다.(code, heap, stack)

스레드는 이중에 stack만 따로 할당받고 나머지 영역은 스레드끼리 서로 공유한다.

 

# 요약

프로세스 : 자신만의 고유 공간과 자원을 할당받아 사용

스레드 : 다른 스레드와 공간과 자원을 공유하면서 사용

 

 

쿠키,세션, 토큰, 웹스토리지 차이

-      HTTP는 상태와 연결에 대한 정보를 저장하지 않아 이를 도와주는 것이 쿠키와 세션입니다.

1. 쿠키(Cookie)

클라이언트(브라우저)에 저장되는 키와 같이 들어있는 텍스트 파일이다.

클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

-      우선 쿠키는 사용자 정보가 기록된 텍스트 파일인데요. 브라우저에 저장되면서, 통신할 때 HTTP 헤더에 포함되어 전송되게 됩니다. 그리고 HTTP 통신 중에 쿠키 정보가 노출될 수 있기 때문에 보안에 취약하다는 특징을 가지고 있습니다.

 

2. 세션(Session)

-      세션은 사용자의 정보를 서버에 저장합니다. 이때 브라우저가 종료될 때까지 유지하게 됩니다. 그리고 서버에 저장되기 때문에 보안이 강하다는 특징을 가지고 있습니다.

 

사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.

 

세션의 단점 : 서버가 과부화 할 수 있다.

 

 

 3. 토큰 방식 (token, JWT)

토큰은 클라이언트의 인증이 유효한지 검증할때 사용한다는 차이가 있습니다.

토큰은 서버에서 만료여부를 관리한다는 차이도 있습니다. 그래서 클라이언트는 어떤 요청을 하기 전 서버가 발급한 토큰을 서버로 보내며, 서버가 이를 유효한지 아닌지 판단한다는 차이가 있습니다.

 

4. 웹 스토리지(Web Storage)

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소

간단한 Key-Value 스토리지 형태

쿠키와 달리 자동 전송의 위험성이 없음

 

HTTP 응답코드

-      100번대는 조건부 응답이며 요청을 받아 지금 처리하고 있음을 의미합니다.

-      200번대는 Successful Response로 Request가 성공적으로 처리되었음을 의미합니다.

-      300번대는 Redirect로 클라이언트를 지정된 위치로 이동하게 하는 것입니다. (예시 co.kr => com)

-      400번대는 클라이언트의 오류로 HTTP 요청이 잘못되거나 권한이 없을 때 나타나게 됩니다.

500번대는 서버의 오류로 서버가 요청을 제대로 수행하지 못할 때 발생하게 됩니다.

 

HTTPs

-      HTTP의 3가지의 문제점을 보완하기 위해 만들어진 프로토콜입니다.

-      3가지의 문제점은 평문 통신을 해서 도청이 가능하고, 통신 상태를 확인하지 않아 위장이 가능하고, 완전성을 증명할 수 없어 변조가 가능합니다. 이 세가지를 보완하기 위해 사용하는 것이 HTTPS입니다.

-      HTTP에서 통신하는 소켓을 암호화 프로토콜을 사용해서 TCP와 통신하도록 하게 됩니다. 암호화 프로토콜을 사용함으로써 암호화, 증명서, 변조를 방지할 수 있습니다.

- 하이퍼텍스트 전송 프로토콜(HTTP)은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜입니다. 

 

 

 

DOM

 

DOM 이란 무엇인가요?

Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미합니다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 됩니다.

 

 

최적화나 성능개선 방법

1.     요청에 대해 빠르게 응답하자

- CDN(Content Delievery Network) 이용하기

- 리다이렉트 피하기

 

2.     요청, 응답수를 줄이자.

- 분리된 파일들을 병합

- HTTP request 수를 줄인다.

 

3. 요청, 응답의 크기를 줄이자.

- CSS sprite

- Gzip 압축

- 이미지 최적화

 

 

DOM 과 가상 DOM이란? 

- Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다. 가상돔은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다. 

 

 

SPA, CSR, SSR 차이

• SPA
  [싱글 페이지 렌더링]
  SPA는 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션
  => 하나의 페이지에서 실행됨.
• CSR
  [클라이언트 사이드 렌더링]
  최초 로드시 필요한 파일들을 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 랜더링을 해주는 방식
  => 기본 틀만 받고, 브라우저에서 동작으로 DOM을 그림

단점: 초반에 뼈대만 다운받기 때문에, SEO에 취약, 초기 화면의 렌더링 속도가 느리다
장점: 렌더링 속도가 빠름

• SSR
  [서버 사이드 렌더링]
  요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식
  => 이미 다 만들어진 DOM을 받음

 

디자인 패턴

옵저버 패턴 구현 방식

여러 가지 방법이 있지만 프록시 객체를 써서 하곤 합니다. 프록시 객체를 통해 객체의 속성이나 메서드 변화 등을 감지하고 이를 미리 설정해 놓은 옵저버들에게 전달하는 방법으로 구현합니다.

프록시 서버를 설명하고 사용 사례에 대해 설명해보세요.

프록시 서버란 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 서버를 말합니다. 주로 서버 앞단에 둬서 캐싱, 로깅, 데이터 분석을 서버보다 먼저 하는 서버로 쓰입니다. 이를 통해 포트 번호를 바꿔서 사용자가 실제 서버의 포트에 접근하지 못하게 할 수 있으며, 공격자의 DDOS 공격을 차단하거나 CDN을 프록시 서버로 캐싱할 수 있으며 nginx를 이용해 Node.js로 이루어진 서버의 앞단에 둬서 버퍼 오버플로우를 해결할 수 있습니다.

MVC 패턴을 설명하고 MVVM 패턴과의 차이는 무엇인지 설명해보세요.

MVC 패턴은 모델, 뷰, 컨트롤러로 이루어진 디자인 패턴입니다. 앱의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다는 점과 재사용성과 확장성이 용이하다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰의 관계 또한 복잡해지는 단점이 있습니다.

MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴입니다. 여기서 뷰모델은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.

 

 

 

 

 

네트워크

OSI 7계층과 TCP/IP 4계층의 차이점

TCP/IP 계층과 달리 OSI 계층은 애플리케이션 계층을 세 개로 쪼개고 링크 계층을 데이터 링크 계층, 물리 계층으로 나눠서 설명하는 것이 다르며, 인터넷 계층을 네트워크 계층으로 부른다는 점이 다릅니다.

 

 

 

Cors

CORS는 Cross-Orgin Resource Sharing(상호 출처 자원 공유)의 약자로, 다른 출처간에 리소스를 공유할 수 있도록 한다. 현재 접속중인 도메인의 출처와 다른 출처에 리소스를 요청 및 접근을 허가하는 웹 브라우저 보안 정책의 일환입니다.  웹 어플리케이션은 리소스가 자신의 출처(domain, protocol, port)와 다를때 Cross-Origin HTTP 요청 을 실행합니다.

 

클라이언트에서 해결하기

1. 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피하기
2. jsonp 방식으로 json 데이터 가져오기

서버에서 해결하기

요청을 받는 벡엔드쪽에서 이를 허용할 다른 출처들을 미리 명시한다.

 

 

스코프란? 스코프체인이란 무엇인가요?

  - 스코프는 어떤 변수들에 접근할 수 있는 유효범위로 코드 어디서든 참조할 수 있는 전역스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역스코프가있다. 함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있으니 전역변수에 영향을 끼칠 수 없다. 내부함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾는다. 이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부른다.

 

SEO, 검색 엔진 최적화

 

검색 엔진 최적화는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 

 

 

CDN , Content Delivery Network

 

데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크입니다. 

 

 

 

프레임워크와 라이브러리

📚 프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다.

애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다.

 

📚 라이브러리

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.