면접 대비 정리

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

https://superohinsung.tistory.com/85

1. 사용자가 웹브라우저 검색창에 www.google.com을 입력한다.
2. 웹브라우저는 캐싱된 DNS 기록들을 통해 해당 도메인 주소와 대응하는 IP주소를 확인한다. 캐싱된 기록이 없을 경우 다음 단계로 넘어간다.
3. 웹브라우저가 HTTP를 이용하여 DNS에게 입력된 도메인 주소를 요청한다.
   •  DNS란?
     • Domain Name System Server.
     • URL의 이름들과 IP주소를 저장하고 있는 데이터베이스. 
     • 숫자로 된 IP주소 (ex> 127.0.0.1) 대신 사용자가 사용하기 편하도록 주소를 매핑해주는 역할. 
   • TCP/IP
4. DNS가 웹브라우저에게 찾는 사이트의 IP주소를 응답한다.
5. 웹브라우저가 웹서버에게 IP주소를 이용하여 html 문서를 요청한다.
6. 웹 어플리케이션 서버(WAS)와 데이터베이스에서 우선 웹페이지 작업을 처리한다.
   • 웹서버 혼자 모든 로직을 수행하고 데이터를 관리한다면 과부하의 위험이 있기 때문에 웹 어플리케이션이 조력자 역할을 함. WAS는 사용자의 컴퓨터나 장치에 웹 어플리케이션을 수행해주는 미들웨어. 
   • 브라우저로부터 요청을 받으면 웹서버는 페이지의 로직이나 데이터베이스의 연동을 위해서 WAS에게 이들의 처리를 요청한다. 그러면 WAS는 이 요청을 받아 동적인 페이지처리(js, ts)를 담당하고, DB에서 필요한 데이터 정보를 받아서 파일을 생성한다.
7. 6번의 작업 처리 결과를 웹 서버로 전송한다.
8. 웹 서버는 웹브라우저에게 html 문서 결과를 응답한다.
   • 서버 응답 status 코드
     • 1XX : 정보만 담긴 메세지
     • 2XX : response 성공
     • 3XX : 클라이언트를 다른 URL로 리다이렉트
     • 4XX : 클라이언트 측에서 에러 발생
     • 5XX : 서버 측에서 에러 발생
9. 웹 브라우저는 화면에 웹 페이지 내용물을 출력한다.

2. 브라우저 렌더링 과정

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

https://d2.naver.com/helloworld/59361

브라우저란?

• 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Internet Explorer 등을 말함.
• 사용자가 선택한 자원을 서버로부터 받아와서 유저에게 보여줌.
• 자원의 주소는 URI(Uniform Resource identifier)에 의해 정해짐.
• 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠 등도 포함된다.
• 받아온 자원들은 렌더링 과정을 통해 유저에게 보여지게 됨.

 

브라우저 렌더링이란?

• 서버로부터 HTML, CSS, Javascript 등 작성한 파일을 받아 브라우저에 뿌려주는 것

 

브라우저 렌더링 동작 과정

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree(DOM, CSSOM)를 만든다. (Parsing)
   • 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 말한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(Parsing Tree) 또는 문법 트리(Syntax Tree)라고 부른다.
2. 두 트리를 결합하여 Render Tree를 만든다. (Style)
3. Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
4.  계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
   • 웹 인터랙션으로 인해 Layout 과정을 다시 수행하는 것을 리플로우, Paint 과정을 다시 수행하는 것을 리페인트라고 함.
   • 웹 인터랙션은 웹 상에서 움직임이 있거나 유저와 상호 작용을 할 수 있는 화면 및 액션.
5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

3. GET과 POST의 차이

https://noahlogs.tistory.com/35

GET

• 클라이언트에서 서버로 정보를 요청하기 위해 사용되는 메서드.
• GET 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(query string)이라고 한다. URL 끝에 "?"을 붙이고 변수명1=값1&변수명2=값2...형식으로 이어붙이면 된다.

POST

• 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드.
• 전송할 데이터를 HTTP 메세지 body부분에 담아서 서버로 보냄.
• 길이 제한이 따로 없어서 용향이 큰 데이터를 보낼 때 사용하거나 보안이 필요하여 데이터가 외부적으로 드러나면 안되는 상황에 사용한다. 그렇지만 데이터를 암호화하지 않으면 body의 데이터도 결국 볼 수 있긴 하다.

GET과 POST의 차이점

• GET은 서버의 리소스에 데이터 요청 시, POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용.
• GET은 URL 파라미터에 요청하는 데이터를 담아서 보내기 때문에 HTTP 메세지에 body가 없다. POST는 HTTP 메세지의 body에 데이터를 담아서 전송.
• GET 요청은 여러 번 하더라도 결과가 달라지지 않지만, POST는 리소스를 새로 생성하거나 업데이트할 때 사용되므로 결과가 달라질 수 있다.

4. REST API란?

REST 기반으로 서비스 API를 구현한 것.

 

• REST(Representational State Transfer)
  • 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것.

5. 객체 지향 프로그래밍이란?

객체지향 프로그래밍이란?

 

객체 지향 프로그래밍이 뭔가요? (꼬리에 꼬리를 무는 질문 1순위, 그놈의 OOP)

객체란?

• 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미
• 값을 저장할 변수와 작업을 수행할 메소드를 서로 연관된 것들끼리 묶어서 만든 것을 객체라 할 수 있다.

객체 지향 프로그래밍이란?

• OOP, Object-Oriented Programming
• 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법
• 언어 : C++, C#, Java, Python, JavaScript, Ruby, Swift

객체 지향 프로그래밍의 특징

1. 추상화
   • 불필요한 정보는 숨기고 중요한 정보만 표현함으로써 프로그램을 간단하게 만드는 것
   • 객체에서 공통된 속성과 행위를 추출하는 것
2. 캡슐화
   • 데이터 구조와 데이터를 다루는 방법들을 결합시켜 묶는 것(변수와 함수를 하나로 묶는 것을 뜻함)
   • 장점
     • 코드 재사용성 증가
     • 접근제어자를 통한 정보은닉 가능.
       객체가 외부에 노출하지 말아야할 정보 또는 기능을 접근제어자를 이용하여 제어 권한이 있는 객체에서만 접근하도록 설정할 수 있다.
3. 상속
   • 부모클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고 기능의 일부분을 변경해야할 경우 상속받은 자식클래스에서 해당 기능만 다시 수정(정의)하여 사용할 수 있게 하는 것.
   • 장점
     • 재사용으로 인한 코드가 줄어듦
     • 범용적 사용 가능
     • 자료와 메서드의 자유로운 사용 및 추가가 가능
   • 단점
     • 상위 클래스의 변경이 어려워짐
     • 불필요한 클래스가 증가할 수 있음
     • 상속이 잘못 사용될 수 있음
4. 다형성
   • 하나의 변수명, 함수명 등이 다른 의미로 해석될 수 있다. 즉, 오버라이딩, 오버로딩이 가능하다.
     •  오버라이딩(Overriding) : 부모클래스의 메서드와 같은 이름, 매개변수를 재정의하는 것. 
     • 오버로딩(Overloading) : 같은 이름의 함수를 여러 개 정의하고, 매개변수의 타입과 개수를 다르게 하여 매개변수에 따라 호출될 수 있게 하는 것.

 객제지향 프로그래밍의 장단점

장점	단점
- 코드 재사용이 용이 - 유지보수가 쉬움 - 대형 프로젝트에 적합	- 처리 속도가 상대적으로 느림 - 객체가 많으면 용량이 커질 수 있음 - 설계 시 많은 시간과 노력이 필요

클래스와 인스턴스

• 클래스 : 집단에 속하는 속성(Attribute)와 행위(behavior)을 변수와 메서드로 정의한 것. 객체를 만들기 위한 메타데이터라고 할 수 있음
• 인스턴스(객체) : 클래스에서 정의한 것을 토대로 실제 메모리에 할당된 것. 실제 프로그램에서 사용되는 데이터.
• 클래스가 붕어빵틀이면 붕어빵 하나하나는 인스턴스.

브라우저 저장소의 차이점

자료구조 중 stack과 queue에 대해 설명해보기

프로세스와 스레드란?

HTTP와 HTTPS의 차이점

HTTP

• HyperText Transfer Protocol
• 서버와 클라이언트 사이에 요청과 응답을 주고 받는 프로토콜로 우리가 흔히 웹 브라우저 주소창에 입력하는 웹 주소인 URL을 통해 요청과 응답이 이루어짐.
• 실제 전송은 TCP를 통해 이루어지며 포트는 80번 이용.

DOM이란?

• Document Object Model

SPA, CSR, SSR