[면접 질문] 면접 준비를 하면서 정리하였던 내용

 

이제 곧 취업한지 한달이 다 되어간다.

 

일을 시작하면서 공부량이 확연하게 줄은 나를 위해 

스터디를 준비하였고, 5월 7일 늦게 공부를 시작한

 

내가 파일을 정리하다 찾은 면접질문 내용들이다.

 

 

 

---

 

 

🔥 CS

 

 

 

🌠 프로세스가 뭔가요?

프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다

 

 

🌠 스레드가 뭔가요?

스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다.

※ 스레드는 프로세스 안에 포함되어 있기 때문이다.

 

 

🌠 싱글 스레드와 멀티 스레드

1. 싱글 스레드 : 하나의 프로세스에서 하나의 스레드 실행

2. 멀티 스레드 : 프로그램을 다수의 실행 단위로 나누어 실행.

 

 

---

 

🌠 HTTP 개요

- 인터넷에서 클라이언트와 서버가 데이터를 주고받을 수 있는 프로토콜(규칙)이다.

- HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이다.

클라이언트 - 다른 프로그램에게 서비스를 요청(Request)하는 프로그램. (컴퓨터, 핸드폰, 노트북등)

서버 - 그 요청에 대해 응답(Response)을 해주는 프로그램

 

 

---

 

🌠 쿠키, 세션을 왜 쓰나요?

- HTTP는 항상 연결되어있는 것이 아닌 필요할 때마다 요청을 보내고 응답을 반는 비연결성이라는 특징을 가지고 있다.

 

- 이는 클라이언트가 응답을 받으면 서버는 접속을 끊는다는 것인데, 연결이 끝나면 상태 정보가 유지되지 않는 특성이 있다.

 

- 유지되지 않는 로그인 정보를 유지하기 위한 방법이 쿠키와 세션이다.

 

 

🌠 쿠키가 뭔가요?

- HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.

 

- 쿠키: 클라이언트에 파일로 저장되어 있다.

 

 

🌠 세션이 뭔가요?

- HTTP 세션이란 클라이이언트가 웹서버에 연결된 순간부터 웹 브라우저를 닫아 서버와의 HTTP 통신을 끝낼 때 까지의 기간 이다.

 

- 세션: 서버에 저장되어 있다.

 

 

---

 

🌠 CORS가 뭔가요?

- 현재 ① 자신이 속한 출처(Origin)를 기준으로 ② 다른 출처(Origin)에 API를 요청하게 되면 브라우저에서 이 요청으로 넘어오는 경과가 안전한지 판단하게 되는데,

 

응답을 보내는 출처가 ① 자신이 속한 출처가 아닌, ② 다른 출처여도 서로 예상되는 출처라면 요청에 대해 허용해주는 응답 헤더를 보내, 브라우저가 응답 결과를 보여줍니다. (보안을 위한 일)

 

 

---

 

🌠 바벨이란?

- 바벨은 자바스크립트에서 지원하는 최신 문법 (ES6, ES7, ES8, ES9, ...) 들을 최대한 많은 브라우저 환경에서 호환이 가능하도록 변환해주는(트랜스파일링해주는) 언어입니다.

 

 

 

 

 

---

🌟 자바스크립트

 

 

🧸 자바스크립트란

- 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.

 

- 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

 

 

---

 

🧸 호이스팅이 뭔가요?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

- var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

- let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.(TDZ: Temporal Dead Zone)

 

변수 호이스팅 = undefined

함수 호이스팅 = 함수 선언문. console.dir(함수선언문) // fuc(a,b)

함수 표현식 console.dir(함수표현문) //undefined

 

 

 

---

 

🧸 함수 선언문과 함수 표현식은 어떤 차이가 있나요?

- 함수 참조

console.dir(add); // ƒ add(x, y)

console.dir(sub); // undefined

 

- 함수 호출

console.log(add(2, 5));

// 7 why? 함수 선언문은 표현식이 아닌 문으로, 런타임 이전에 js 엔진에 의해 실행된다.

 

console.log(sub(2, 5));

// TypeError: sub is not a function, why? 함수 표현식(표현식인 문)은 런타임에 값을 할당하기 때문에 sub는 현재 undefined로만 초기화된 상태이다.

 

 

① 함수 선언문

function add(x, y) { return x + y; }

 

② 함수 표현식

var sub = function (x, y) { return x - y; }

 

 

🧸 생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명

 

// 1. 생성자 함수 선언
function Circle(radius) {

// 3. 인스턴스 초기화
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
// 4. 인스턴스 생성시에 생성자 함수를 호출할 때 넣은 인수를 this 바인딩을 통해 프로퍼티에 할당한 뒤, 인스턴스를 반환한다
}

// 2. 인스턴스 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성

 

 

---

 

🧸 객체지향 프로그래밍은 무엇을 의미하나요?

객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나, 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.

 

※ 객체지향 프로그래밍의 특징- 추상화, 캡슐화, 상속, 다형성

 

 

---

 

 

🧸 프로토타입이 뭔가요?

프로토타입은 상속을 구현하기 위해 사용됩니다. 쉬운 예시로 붕어빵을 만들기 위한 붕어빵 틀이라고 생각하면 좋습니다.

 

기본적인 틀(프로토타입)에 우리가 원하는 앙금(인스턴스를 만들 때 생성자 함수에 들어갈 인수)을 넣어 기존에 만들어 놓은 프로퍼티에 바인딩하여 인스턴스(붕어빵)을 반환합니다.

 

 

 

🧸 this가 뭔가요?

- this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.

- this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.(인스턴스 생성시에 생성자 함수를 호출할 때 넣은 인수를 this 바인딩을 통해 프로퍼티에 할당한 뒤, 인스턴스를 반환한다)

- this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

- 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

 

 

---

 

🧸 실행 컨텍스트

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

 

 

---

 

🧸 브라우저

- 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

 

 

 

🧸 브라우저 동작과정 ★★★★★

1. 클라이언트에서 불러오고 싶은 파일을 서버에 요청.

2. 서버에서 응답으로 받은 HTML 데이터를 파싱.

3. HTML 마크업을 바탕으로 DOM 트리를 생성.

4. CSS 마크업을 바탕으로 CSSOM 트리를 생성.

5. DOM트리와 CSSOM트리를 결합하여 렌더 트리를 형성

6. 렌더 트리에서 레이아웃을 실행

7. 개별 노드를 화면에 페인트

 

 

 

🧸 브라우저의 렌더링 과정에 자바스크립트 ★★★★★

1. DOM을 생성해 나가다가 자바스크립트 파일을 로드하는 <script> 태그나 자바스크립트 코드를 콘텐츠로 담은 <script> 태그를 만나면 DOM 생성을 일시 중단.

2. <script> 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 서버에 요청하여 로드한 자바스크립트 파일이나 <script> 태그 내의 자바스크립트 코드를 파싱하기 위해 ② 자바스크립트 엔진에 제어권을 넘긴다.

3. 자바스크립트 파싱과 실행은 ① 브라우저 렌더링 엔진이 아닌 ② 자바스크립트 엔진이 처리

4. ② 자바스크립트 엔진은 자바스크립트를 해석하여 AST(Abstract Syntax Tree: 추상적 구문 트리)를 생성

5. 리플로우와 리페인트

 

 

---

 

🧸 DOM이 뭔가요?

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.

 

 

---

 

🧸 AJAX(Asynchronous(비동기식) Javascript And Xml)

AJAX -> 백영역에서 서버와 통신 -> 웹페이지 일부분만 갱신(비동기)

 

- 자바스크립트를 사용하여 ① 브라우저가 ② 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 을 말한다.

- 실질적으로 XML보다 주로 JSON을 많이 사용하다.

 

 

🧸 사용하는 이유

단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.

 

즉, 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

 

---

 

🧸 JSON 이 뭔가요?

JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷입니다.

자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있습니다.

 

 

 

🧸 API (Application Programming Interface)

프로그램과 또 다른 프로그램 데이터를 주고 받기 위한 방법을 의미합니다.

 

 

---

 

🧸 동기식(Synchronous) VS 비동기식(Asynchronous)

- 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식.

- 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행

① setTimeout/ setInterval ② HTTP 요청 ③ 이벤트 핸들러

 

 

🧸 자바스크립트에서 콜 스택

 

 

 

🧸 자바스크립트 싱글스레드 극복하는 요소 (비동기)

- 싱글스레드, 콜스택으로 인한 단점을 극복하기 위해, 런타임(자바스크립트를 구동하는 환경)에서 Web API, Event Loop, Callback Queue등이 활용.

* 런타임 환경은 웹브라우저, 또는 Node.js입니다

 

 

- Web API : 브라우저에서 제공되는 API이다. 자바스크립트 엔진에서 지원 하지 않는 setTimeout, HTTP 요청, DOM 이벤트 등을 지원한다

 

- Task Queue : 이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 곳이다. 이벤트 루프가 정한 순서대로 줄을 서 있으며, 콜백 큐라고 부르기도 한다.

 

- Event Loop : 이벤트 발생 시 호출 할 콜백 함수들을 관리하고, 홏루된 콜백 함수의 실행 순서를 결정한다.

 

 

---

 

 

🧸 콜백 함수(Callback Function)

- 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다.

 

 

🧸 promise (ES6)

- 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

-콜백지옥과 다른 안 좋은 가독성을 보여주는 Promise의 예시 프로미스 체이닝

 

 

🧸 async/await (ES8)

- ES8에서 async / await를 도입하였고, 덕분에 비동기 코드를 동시적으로 깔끔하게 처리할 수 있게 되었습니다.

- async/await 문법은 ES8에 해당하는 문법으로 Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기존의 비동기 처리 방식인 콜백 함수와 프러미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

 

 

---

 

🧸 AXIOS

- axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리

- 비동기로 HTTP 통신을 할 수 있으며 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용.

 

 

 

🧸 HTTP Methods ★★★★★

 

1. GET : 어떠한 데이터를 서버로부터 받아(GET)올때 주로 사용하는 Method. ★

주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없습니다.

- 요청을 캐시 할 수 있다. 브라우저 기록에 남는다. 북마크 추가 가능. 민감한 데이터처리 시 사용 X, 길이제한 O, 데이터만 요청

 

2. POST : 데이터를 생성/수정/삭제 할때 주로 사용되는 Method ★

- 요청 캐시 될 수 없다. 브라우저 기록에 남지 않는다. 북마크 추가 불가, 길이 제한 X

 

3. Delete : REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.

 

4. PUT : REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용됩니다.

- POST와 PUT의 차이점은 PUT 요청이 멱등적이라는 것입니다. 즉, 동일한 PUT 요청을 여러 번 호출하면 항상 동일한 결과가 생성됩니다. 반대로 POST 요청을 반복적으로 호출하면 동일한 리소스를 여러 번 생성하는 부작용이 있습니다.

 

 

🧸 GET 과 POST 간의 차이점

 

1. GET

- 이름 그대로 어떠한 데이터를 서버로부터 받아(GET)올때 주로 사용하는 Method

- 데이터 생성/수정/삭제 없이 받아오기만 할때 사용됨

 

2. POST

- 데이터를 생성/수정/삭제 할때 주로 사용되는 Method

- 데이터를 생성 및 수정 할때 많이 사용하기 때문에 대부분의 경우 request body가 포함되서 보내진다.

 

 

 

 

 

 

---

🌎 리액트

 

🧵  리액트를 사용하는 이유

1. 컴포넌트 기반의 화면구성

 

2. Virtual DOM으로 인한 충분히 빠른 속도

※ 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함 => 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교) => 바뀐 부분만 실제 DOM에 적용이 됨

 

3. SPA(싱글 페이지 애플리케이션)

- component를 사용해서 유지보수가 용이

(필요한 부분의 component만 렌더링 된다. 최적화된 렌더링이 가능)

- 생태계가 넓고, 다양한 라이브러리 사용 가능

- virtual DOM을 활용하여 빠른 렌더링이 가능

- 리액트 네이티브를 활용하여 앱 개발 가능

 

 

---

 

🧵 Hooks의 종류

Hooks는 리액트 버전 16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다

 

 

---

 

🧵 MPA VS SPA

1. MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다.

매번 전체 페이지가 다시 렌더링 된다.

그래서 MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

 

2. SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다.

SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다.

그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.

 

 

🧵  SSR vs CSR

 

1. SSR (Server Side Rendering)

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

 

2. CSR (Client Side Rendering)

SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.

즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.

 

 

 

 

 

---

https://tlsdnjs12.tistory.com/40

[면접] 멸망의 첫 번째 프론트엔드 면접 후기

 

 

https://tlsdnjs12.tistory.com/41

[면접] 열정이 넘치던 2시간 동안 진행 한 두 번째 프론트엔드 면접 후기