프론트엔드 기술면접 정리 1

기술면접이 제일 어려울꺼 같아 일주일에 1~2번 정리해서 외우고 가야겠다.. 🥲

cs

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

• 입력된 주소를 기반으로 DNS서버에 요청을 보내고 입력된 도메인 이름에 대한 IP주소를 찾아 브라우저에게 응답합니다
• 브라우저는 DNS 서버로부터 받은 IP주소를 사용하여 해당 서버로 HTTP요청을 보내고  www.google.com이 HTTP 요청의 Host 헤더 필드에 포함됩니다.

GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

• google서버는 브라우저로부터 받은 HTTP요청을 처리하고 HTML,CSS,JS,이미지등의 파일을 응답으로 보냅니다
• 브라우저는 google서버로부터 받은 응답받아 렌더링 엔진을 사용해  HTML,CSS,JS등을 해석해 화면에 출력합니다

🧩브라우저는 어떻게 동작하나요?

 

• 서버에서 응답으로 받은 데이터를 HTML파싱합니다
• HTML을 파싱한 결과로 DOM Tree를 만듭니다
• 파싱하는 중 CSS파일링크를 만나면 CSS파일을 요청해 받아옵니다
• CSS 파일을 읽어서 CSSOM을 만듭니다
• DOM Tree와 CSSOM을 결합해 Render Tree를 만듭니다
  => 렌더링 엔진이 화면에 보여줄 최종 결과물로 실제그려지는 모든요소를 포함
• Render Tree는 브라우저 창에 실제로 그려지는 최종 결과물로, 각각의 노드들이 어디에 위치하고 어떤 스타일을 적용받을지 결정됩니다.
• Layout 과정에서는 렌더 트리의 각 노드가 실제 화면상에서 어떤 크기와 위치를 가지는지 계산합니다
• 화면에 실제 픽셀을 Paint 합니다

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

• 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여  객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말합니다
• 객체지향 프로그래밍은 추상화,캡슐화 상속성 다형성을 가지고있습니다
• 추상화란 객체의 공통적인 속성과 기능을 추출하여 정의 하는것을 말합니다.
• 캡슐화란 외부에 드러나지 않도록 정보를 은닉할수 있고 독릭접으로 역할을 할수 있도록 데이터와 기능을 하나로 묶어 관리할수 있다는 것입니다
• 상속성이란 상위 클래스의 모든속성과 연산을 하위 클래스가 물려받는 것입니다
• 다형성이란 하나의 변수명.함수명 등이 상황에 따라 다른 의미로 해석될수 있어 유연성 가독성 재사용성을 높일수 있습니다
  =>오버라이딩(Overriding) - 부모클래스의 메소드와 같은 이름을 사용하며 매개변수도 같되 내부 소스를 재정의하는 것
     오버로딩(Overloading) - 같은 이름의 함수를 여러 개 정의한 후 매개변수를 다르게 하여 같은 이름을 경우에 따라 호출하여
     사용하는 것

💡꼬리질문?

- 장점

• 코드 재사용이 용이합니다
• 남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있습니다
• 유지보수가 쉬움니다
• 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는 반면 객체 지향 프로그래밍에서는 수정해야 할 부분이 클래스 내부에 변수 혹은 메서드로 존재하기 때문에 해당 부분만 수정하면 됩니다
• 클래스 단위로 모듈화시켜서 개발할 수 있으므로 대형 프로젝트처럼 여러 명, 여러 회사에서 프로젝트를 개발할 때 업무 분담하기가 편리합니다

- 단점

• 절차지향 프로그래밍에 비해 실행 속도가 느립니다(클래스별로 객체별로 설계하고 상속 등의 구조또한 설계하기 때문)
• 객체가 많으면 필요한 메모리 양이 증가합니다

-클래스와 인스턴스(객체)는 무엇인지

• 클래스는 객체를 생성하기위한 설계도이며 (속성과 객체의 동작을 나타내는 메서드로 구성) 인스턴스는 클래스를 바탕으로 생성된 실체화된 객체입니다
• 클래스는 객체의 속성(attribute)과 행위를 정의하며, 객체를 생성하기 위한 청사진역할을 합니다. 이러한 속성과 행위는 클래스 내에 변수와 메서드로 구현됩니다.
• 인스턴스는 클래스를 이용하여 생성된 구체적인 객체를 말합니다. 즉, 클래스로부터 객체를 생성할 때, 그 객체는 해당 클래스의 인스턴스가 됩니다. 이러한 인스턴스는 각각 고유한 속성을 가지며, 이러한 속성은 객체의 변수에 저장됩니다.

 

🧩프로세스와 스레드는 무엇인가요 

• 프로세스는 운영체제에서 실행중인 프로그램을 의미하며 각각의 프로세스는Code,Data,Stack,Heap구성된 독립적인 메모리 공간과  실행환경을 가집니다
• 스레드는 프로세스 내에서 실행하는 작업 단위를 의미하며  Stack 메모리 영역을 제외한 다른 메모리 영역을 같은 프로세스 내에 다른 스레드와 공유합니다

💡꼬리질문?

종류	멀티 프로세스	멀티 스레드
장점	-하나의 프로세스가 죽어도 다른 프로세스에는 영향을 끼치지 않음	- 프로세스를 생성하여 자원을 할당하는 시스템 콜이 줄어들어 자원을 효율적으로 관리 가능 - Code, Data, Heap 영역을 공유하기 때문에 데이터를 주고 받는 것이 간단해지고 자원 소모가 적음 - 스레드 사이 작업량이 작아 문맥교환이 빠르며 시스템 처리량 증가
단점	- 각각 독립된 메모리 영역을 갖고 있어 작업량이 많을수록 오버헤드가 발생하고 문맥 교환(Context Switching)으로 인한 성능 저하를 유발 - 프로세스 사이의 통신이 복잡(IPC)	- 프로그램 디버깅이 까다로움 - 하나의 스레드에 문제가 생기면 전체적인 프로세스에 영향을 끼침 - 동기화 문제 발생(전역 변수를 이용하기 때문) - 단일 프로세스 시스템에서 효과를 기대하기 어려움 - 다른 프로세스에서 스레드 제어 불가

-오버헤드:어떤 처리를 하기 위해 간접적인 처리 시간 및 메모리 등이 추가적으로 사용되는 현상

-문맥교환(Context Switching):운영체제에서 프로세스가 실행되는 동안, 현재 실행중인 프로세스의 상태 정보를 저장하고 다음 실행할 프로세스의 상태 정보를 불러와 CPU의 제어를 전환하는 과정

 

 

🧩GET  POST차이를 설명해주세요.

• GET 요청은 데이터를 요청할 때 사용하며, 서버의 리소스를 수정하거나 업데이트하지 않습니다. 반면에 POST 요청은 서버의 리소스를 생성, 수정, 삭제 또는 업데이트할 때 사용합니다.
• GET 요청은 URL에 매개변수를 추가하여 데이터를 전송하며, POST 요청은 요청 바디에 데이터를 추가하여 전송합니다. 또한 POST 요청은 URL에 데이터가 포함되지 않기 때문에 보안상 안전합니다.
• GET 요청은 보통 작은 양의 데이터를 요청할 때 사용하며, POST 요청은 데이터 길이 제한이 없어 대량의 데이터를 보낼 때 사용합니다.
• GET 요청은 요청하는 페이지에서 캐시된 데이터를 가져와 사용할 수 있으며, 브라우저 히스토리에 기록되어 이전 페이지를 이동할 수 있습니다. 반면에 POST 요청은 브라우저 히스토리에 기록되지 않아 이전 페이지로 이동할 수 없습니다.
• GET과 POST는 각각 요청 방식, 데이터 전송 방식, 보안성, 데이터 양 등의 차이점을 가지고 있으며, 이러한 차이점을 고려하여 적절한 요청 방식을 선택해야 합니다.

GET VS POST

	GET	POST
캐시	⭕️	❌
브라우저 기록	⭕️	❌
북마크 추가	⭕️	❌
데이터 길이 제한	⭕️	❌
HTTP응답코드	200(Ok)	201(Created)
언제 사용하는가	리소스 요청	리소스 생성
리소스 전달 방식	쿼리스트링	HTTP Body
idempotent(멱등성)	⭕️	❌

idempotent(멱등성):연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질