기술면접 준비

CS

브라우저 렌더링 원리를 설명해보세요.

브라우저 렌더링은 웹 페이지를 화면에 표시하는 과정인데요, 이는 몇 가지 단계를 거치게 됩니다.
HTML 파싱: 브라우저가 웹 페이지를 로드하면, 첫 번째로 HTML 파일을 받아옵니다. 이 파일을 읽으며 웹 페이지의 구조를 파악하고, 이를 DOM (Document Object Model) 트리라는 구조로 변환합니다.
CSS 파싱: HTML 파싱과 병행하여 CSS 파일도 받아옵니다. CSS는 HTML 요소들의 스타일을 결정하고, 이를 CSSOM (CSS Object Model) 트리로 변환합니다.
렌더 트리 생성: DOM과 CSSOM 트리를 합쳐서 렌더 트리를 만듭니다. 렌더 트리는 화면에 실제로 그려질 요소들만을 포함합니다.
레이아웃: 렌더 트리가 만들어지면, 각 요소들이 화면의 어디에 위치할지 계산하는 과정을 거칩니다. 이를 '레이아웃' 또는 '리플로우' 단계라고 합니다.
페인트: 레이아웃 단계에서 계산된 결과를 바탕으로, 화면에 요소들을 그립니다. 색상, 텍스트, 이미지, 보더 등을 실제로 그리는 작업을 '페인트' 또는 '랜더' 단계라고 합니다.
합성 및 레이어: 특정 요소가 변형, 이동, 투명도 변경 등의 이유로 다시 그려야 할 때, 전체 페이지를 다시 그리는 것은 비효율적이므로, 변화가 필요한 요소들만 따로 레이어로 관리하고 이를 합성하는 단계를 거칩니다.
위의 과정들을 거쳐 웹 페이지는 브라우저 화면에 렌더링이 완료되는 것입니다. 이 과정은 사용자가 웹 페이지를 스크롤하거나, 요소를 클릭하는 등의 동작을 취할 때마다 반복적으로 일어납니다. 따라서 성능 최적화를 위해 렌더링 과정을 이해하는 것은 매우 중요합니다.

 

RESTFUL API란?

REST는 웹 서비스 개발을 위한 설계 원칙을 말하며,

RESTful API는 REST 원칙을 따르는 API를 말합니다.

REST 원칙은 서버-클라이언트 구조, 무상태성 등이 있으며,

http 메서드를 적합하게 사용하고(기능에 적합한 URL 메서드 사용), path도 이렇게 규칙에 맞게 만드는 걸 말합니다.

단어들을 동사보다는 명사 위주로 구성하기

하위 문서들을 뜻할 때는 /(슬래쉬) 기호를 사용하기 (하위폴더 의미)

URI 경로에는 소문자가 적합함

_(underbar)대신 -(dash)를 사용하거나

마지막에 /를 포함하지 않거나 ..
여러 규칙이 존재합니다.

 

get, post 차이를 설명해주세요.

GET 메소드는 서버로부터 정보를 조회하기 위해 사용됩니다.

URL에 요청하는 데이터가 쿼리 스트링(query string) 형태로 포함이 되기 때문에, 보안에 민감한 데이터를 전송하기에는 적합하지 않습니다. GET은 멱등성을 가진다는 특징이 있습니다. 멱등성이란 동일한 요청을 여러 번 수행해도 동일한 결과가 나오는 성질을 말합니다.

 

POST 메소드는 서버로 데이터를 전송하기 위해 사용됩니다. 보통 새로운 데이터를 추가하는 데 사용됩니다.

POST 요청은 HTTP 메시지의 body에 데이터를 포함시켜 전송하므로 GET보다 많은 양의 데이터를 보낼 수 있습니다. 또, 데이터가 URL에 노출되지 않아 GET보다 보안적인 측면에서 우수합니다. POST는 멱등성이 없는 특징이 있습니다. 즉, 같은 요청을 여러 번 수행하면 서버 상태가 달라질 수 있습니다.

 

브라우저 저장소 (로컬 스토리지, 세션 스토리지, 쿠키의 차이)

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일입니다.

쿠키는 만료 날짜가 지정되며, 만료 날짜가 지나면 자동으로 삭제됩니다. 만약 만료 날짜를 지정하지 않으면, 브라우저를 닫을 때 쿠키는 삭제됩니다. 쿠키는 크기가 4KB로 제한되어 있습니다.

 

로컬 스토리지와 세션 스토리지는 웹 스토리지의 일부로, 쿠키보다 훨씬 큰 데이터를 저장할 수 있습니다.

로컬 스토리지에 저장된 데이터는 만료 날짜가 없으며, 사용자가 직접 삭제하지 않는 한 계속 유지됩니다.

세션 스토리지에 저장된 데이터는 브라우저를 닫으면 데이터가 삭제됩니다.

---

OOP (Object Oriented Programming)란 무엇인가요?

OOP는 객체 지향 프로그래밍입니다. JavaScript에서는 주로 생성자 함수나 클래스를 사용해 객체를 만듭니다. 이렇게 만들어진 객체는 재사용이 가능하며, 코드의 재사용성과 유지 보수성을 높이는 데 도움을 줍니다. 

 

객체 지향 프로그래밍의 주요 원칙에는 캡슐화, 상속, 다형성이 있습니다.
캡슐화: 객체의 구현 세부사항을 숨기고, 객체의 기능만을 외부에 공개하는 것입니다.
상속: 하나의 상위 클래스의 속성과 메서드를 하위 클래스가 받아 사용하는 것입니다.
다형성: 같은 이름의 메서드가 상황에 따라 다르게 동작하는 것입니다.

 

자바스크립트는 프로토타입 기반의 언어이기 때문에, 전통적인 클래스 기반의 객체 지향 프로그래밍과는 약간 다른 방식으로 객체 지향 프로그래밍을 지원했는데, ES6부터 클래스 문법이 도입되어, 더욱 전통적인 형태의 객체 지향 프로그래밍을 지원하게 되었습니다.

 

주소창에 http://www.google.com을 입력하면 생기는 일을 설명해주세요.

1. DNS 조회: 주소창에 http://www.google.com을 입력하고 엔터를 누르면 DNS를 통해 해당 주소의 IP주소를 찾습니다. 이전에 방문했던 사이트라면, 캐시에 저장된 IP주소를 사용합니다.

2. TCP 연결: IP 주소를 얻었다면, 이제 브라우저는 해당 IP 주소의 서버와 TCP 연결을 시도합니다.

"해당 IP 주소의 서버와 TCP 연결을 시도한다"는 말은, 우리의 브라우저가 특정 웹 서버(여기서는 http://www.google.com의 서버)와 통신할 수 있도록 연결을 설정한다는 뜻입니다.

이 과정에서 '3-way handshake'라는 과정을 거칩니다. 이제 클라이언트와 서버 사이에는 TCP 연결이 성립되며, 이를 통해 서로 데이터를 주고받을 수 있는 상태가 됩니다.

3. HTTP 요청: TCP 연결이 성공적으로 이루어지면, 브라우저는 HTTP 요청을 보냅니다. 이 요청에는 http://www.google.com의 웹 페이지를 가져오고 싶다는 정보가 담겨 있습니다.

4. HTTP 응답 및 HTML 파싱: 서버는 HTTP 요청을 받고 HTML 파일을 반환합니다. 브라우저는 이 HTML 파일을 받아서 파싱하고, DOM 트리를 구축합니다.

5. 렌더링: CSS와 JavaScript 파일을 받아서 파싱하고, 렌더 트리를 구축합니다. 이후 레이아웃 계산과 페인팅 과정을 거쳐 화면에 웹 페이지를 그립니다.

 

웹 프로토콜이란?

웹 프로토콜이란 인터넷에서 데이터를 주고받는 방법을 정의한 규칙입니다.
웹에서 가장 기본적으로 사용되는 프로토콜은 HTTP입니다. HTTP는 웹 브라우저와 웹 서버 사이에서 HTML 같은 웹 문서를 주고받을 때 사용됩니다.

 

CSR과 SSR의 차이를 설명해주세요.

CSR(Client-Side Rendering): 브라우저 측에서 HTML을 렌더링하는 방식입니다.
SSR(Server-Side Rendering): 서버 측에서 HTML을 렌더링하는 방식입니다. 

CSR로 작성된 사이트들은 일반적으로 처음 접속하면 body가 비어있는 HTML파일을 받아오고, 자바스크립트를 통해 동적으로 콘텐츠를 렌더링합니다.

검색엔진의 봇은 사이트를 돌아다니면서 HTML문서 정보를 수집하는데, 이 경우 body가 비어있는 HTML문서를 수집합니다. 구글의 봇은 자바스크립트를 실행하여 수집할 수 있지만, 대부분의 봇들은 SPA의 비어있는 문서를 수집하기 때문에 SEO(검색엔진최적화)가 잘 되지 않습니다.

SSR은 서버에서 HTML문서를 만들어서 응답하기 때문에 사용자도, 검색엔진도 완성된 HTML 파일을 받아서 검색엔진 최적화를 할 수 있습니다.

 

SPA와 MPA의 차이를 설명해주세요.

SPA는 Single Page Application으로, 하나의 HTML 페이지로 구성됩니다. MPA는 Multi Page Application으로, MPA는 각각의 뷰가 별도의 HTML 페이지로 구성되어 있습니다.

SPA는 서버로부터 데이터만을 주고받기 때문에 트래픽이 상대적으로 적습니다. 하지만 초기 로딩 시간이 길 수 있고, SEO 문제가 있을 수 있습니다. React는  SPA를 구현하는 데에 사용됩니다.

MPA는 사용자가 다른 페이지로 이동할 때마다 서버에서 새로운 HTML을 받아와 렌더링합니다. 이 방식의 장점은 SEO에 유리하다는 점과 초기 로딩 시간이 짧다는 점입니다. 하지만 페이지 이동 시마다 전체 페이지를 새로 불러와야 하므로 트래픽이 많을 수 있습니다.

 

Git을 사용해보셨나요? Git에 대해 아는 것을 말해보세요. 

Git은 분산 버전 관리 시스템입니다. 분산 버전 관리 시스템을 통해 파일의 변경이력을 각 개발자의 컴퓨터에 저장할 수 있습니다. 이는 여러 개발자들이 하나의 프로젝트에서 동시에 작업을 할 수 있게 해줍니다. Git을 통해 각 개발자는 로컬에서 작업을 수행하고, 이를 저장소에 반영(push)하거나, 다른 개발자가 작업한 내용을 자신의 로컬 저장소로 가져올(pull) 수 있습니다. 이런 방식으로 개발자들은 코드의 변경사항을 추적하고, 필요한 경우 이전 버전으로 되돌릴 수 있습니다.

Github는 Git을 이용해 작업한 프로젝트를 온라인으로 공유할 수 있는 플랫폼입니다.

 

CORS란?

CORS란 Cross-Origin Resource Sharing, 교차 출처 리소스 공유로,  웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 하는,  Same-Origin Policy를 지키기 위한 예외조항입니다.

웹 브라우저에서는 보안 이슈로 인해 같은 출처 정책(Same-Origin Policy)를 따르는데, 이는 자신과 다른 출처의 리소스에 접근하는 것을 제한합니다. 여기서 '출처'란 프로토콜, 도메인, 포트 번호를 합친 것입니다.

그러나 이 같은 제한은 웹 애플리케이션의 확장성을 방해할 수 있기 때문에, 특정 조건 하에 다른 출처의 리소스에 접근할 수 있도록 허용하는 방식이 바로 CORS입니다.

 

웹팩과 바벨이 무엇인가요?

웹팩은 모듈 번들러라고 불리며, 여러 개의 자바스크립트 파일을 하나 또는 몇 개의 파일로 묶어주는 역할을 합니다. 이는 웹 사이트의 로딩 시간을 줄이고, 코드의 관리를 용이하게 해줍니다.
바벨은 자바스크립트 컴파일러입니다. 최신 자바스크립트 문법을 사용하여 작성된 코드를 구형 브라우저에서도 동작할 수 있도록 이전 버전의 자바스크립트 문법으로 변환해줍니다. 이를 통해 개발자는 최신 자바스크립트 기능을 사용하면서도, 다양한 브라우저 환경에서의 호환성을 유지할 수 있습니다.

 

깊은복사와 얕은복사의 차이점을 말해주세요.

깊은 복사는 실제 값을 메모리에 복사하고, 얕은 복사는 주소값을 메모리에 복사합니다.

자바스크립트에서 원시값은 깊은 복사가 되고, 참조값은 얕은 복사가 됩니다.

원시값은 숫자,문자열,불린,null,undefined 등을 말하며, 참조값은 객체,배열,함수 등을 말합니다.

 

크로스 브라우징이란?

크로스 브라우징이란 웹사이트나 웹 애플리케이션의 호환성을 보장하는 작업을 말합니다. 즉, 다양한 웹 브라우저(예: 크롬, 파이어폭스, 사파리 등)에서 동일한 사용자 경험을 제공할 수 있도록 하는 것을 목표로 합니다.

 

Sementic HTML란 무엇인가요?

시멘틱 HTML은 웹 페이지의 내용의 의미를 명확하게 전달하기 위한 웹 표준입니다.

예를 들어, <header>, <footer>, <section>, <article>, <nav>, <aside> 등의 태그는 각각 페이지의 헤더, 푸터, 섹션, 기사, 내비게이션, 사이드바 등을 나타냅니다. 이와 달리 <div>나 <span>과 같은 비시멘틱 태그는 내용에 대한 정보를 전달하지 않습니다
검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있게 해서, 검색 엔진 최적화(SEO)에 도움이 됩니다.

 

JavaScript

실행 컨텍스트가 무엇인가요?

어떤 함수가 실행되면 그에 해당하는 실행 컨텍스트가 생성됩니다. 이는 함수를 호출할 때마다 해당 상황의 정보를 담은 환경을 의미하며, 이 환경 내에서 변수나 함수를 어디서 어떻게 참조할지 결정합니다.

 

호이스팅에 대해 설명해주세요. 

변수 또는 함수의 선언이 해당 범위의 최상단으로 '끌어올려지는' 것을 말합니다.

자바스크립트 엔진은 코드 실행 전에 코드를 한 번 훑어보며(이를 컴파일이라고 합니다) 변수와 함수 선언을 먼저 확인합니다. 이 때 변수와 함수 선언이 호이스팅됩니다. 즉, 이들은 자신이 선언된 위치와 상관없이 해당 범위의 최상단으로 끌어올려지는 것이죠. 

var로 선언된 변수는 호이스팅이 발생할 때 "선언"과 "초기화"가 동시에 이루어집니다. 이때 초기화는 undefined로 이루어지는데, 이는 var 변수가 선언되자마자 자동으로 undefined로 초기화되기 때문입니다. 따라서 var 변수를 선언 후 최초로 접근하면, 값이 할당되지 않았기 때문에 undefined가 반환됩니다.

 

let과 const는 선언과 초기화가 분리되어 이루어지며 초기화 전에 접근하려고 하면 참조 에러가 발생합니다.

참조에러가 발생하는 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 합니다.

 

클로저와 스코프에 대해 설명해주세요.

스코프는 변수와 함수가 접근할 수 있는 범위를 결정하는 규칙입니다. 자바스크립트에서는 블록 스코프와 함수 스코프가 있습니다. 함수를 선언할 때마다 새로운 스코프가 생성되며, 이 스코프는 그 함수 내부에서 정의된 변수에 대한 접근을 제어합니다.

 

클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있도록 하는 기능을 말합니다. 즉, 클로저는 함수와 그 함수가 접근할 수 있는 스코프의 조합이라고 볼 수 있습니다.

또, 외부함수 안에 내부함수가 있으며, 외부함수가 종료된 후에 외부함수를 변수 a에 할당하면 변수 a는 외부함수의 내부함수를 참조할 수 있습니다. 내부함수가 외부함수의 변수에 대한 참조를 클로저로 유지하기 때문입니다.

 

자바스크립트 비동기 처리(callback, promise, async/await)에 대해 설명해주세요 

콜백 함수는 어떤 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수를 말합니다.

콜백 함수의 콜백 함수의 콜백 함수를 넣어서 비동기 처리의 결과를 또 다른 비동기 처리의 인자로 전달할 수 있습니다.

콜백 함수를 반복 해서 사용하게 되면, 들여 쓰기 수준이 감당할 수 없을 정도로 깊어집니다.

프로미스는 콜백 지옥을 개선하기 위해 나온 문법이며, resolve와 reject 함수를 인자로 받는 함수를 실행시키는 객체입니다. 

프로미스가 fulfilled 상태일때 then으로 결과값을 받고, reject상태일때 catch로 결과값을 받습니다.

then으로 계속 결과값을 받다보면 then이 중첩돼 프로미스 체이닝이 발생하고, 이를 개선하기위해 async,await 문법이 나왔습니다.

함수 앞에 async를 붙이면 해당 함수는 프로미스를 반환하고, await는 프로미스가 처리될 때까지 함수의 실행을 중단시킵니다. 

async/await를 사용하면 Promise 체이닝을 피하고, 비동기 처리 코드를 마치 동기 처리처럼 작성할 수 있어 가독성이 좋아집니.

 

var, let, const의 차이점을 말해주세요. 

var, let, const는 모두 JavaScript에서 변수를 선언할 때 사용합니다. 

var로 선언된 변수는 함수 스코프를 가집니다. 즉, var로 선언된 변수는 선언된 함수 내에서만 접근이 가능하며, 함수 밖에서는 접근할 수 없습니다. 또 var로 선언된 변수는 재선언 및 재할당이 가능합니다.

let과 const으로 선언된 변수는 블록 스코프를 가집니다.  

선언된 블록 중괄호 {} 내에서만 접근이 가능하며, 블록 밖에서는 접근할 수 없습니다.

 let으로 선언된 변수는 재할당이 가능하지만 재선언은 불가능하며, const로 선언된 변수는 재선언, 재할당 모두 불가합니다.

 

React

Virtual DOM이란? Virtual DOM을 사용하는 이유는 무엇인가요?

Virtual DOM은 브라우저에서 동작하는 실제 DOM의 가벼운 복사본이라고 볼 수 있습니다.

Virtual DOM을 사용하는 주된 이유는 효율적인 렌더링을 위함입니다. 웹 애플리케이션에서 사용자 인터페이스를 업데이트할 때마다 전체 페이지를 다시 렌더링하는 것은 매우 비효율적입니다. 이를 해결하기 위해 Virtual DOM은 변화가 발생한 부분만 실제 DOM에 적용시키는 방식을 사용합니다.

Virtual DOM은 원래의 DOM 구조를 복제하여 메모리에 저장해 둔 후, 사용자 인터페이스에서 변화가 생기면 이 가상의 DOM을 먼저 업데이트합니다. 그런 다음 이전 Virtual DOM과 새로운 Virtual DOM을 비교(이를 'diffing'이라고 합니다)하여 차이점을 찾습니다. 이 차이점들만 실제 DOM에 반영합니다.

 

props와 state에 대해 설명해주세요.

props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터를 의미합니다. props는 읽기 전용으로, 컴포넌트 내부에서 변경할 수 없습니다. 이는 함수에서 매개변수를 받는 것과 유사합니다.

 

state는 간단하게 말해서 변수입니다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 해당 컴포넌트와 그 하위 컴포넌트를 재렌더링시킵니다. 이를 통해 사용자 인터페이스는 항상 최신의 상태를 반영하게 됩니다. 그래서 state를 통해 동적인 웹 애플리케이션을 구현할 수 있습니다.

 

props와 state의 주요 차이점은 소유권과 변경 가능성에서 나옵니다. props는 특정 컴포넌트에 속하지 않고, 부모 컴포넌트로부터 props를 받은 컴포넌트는 그 값을 변경할 수 없습니다. 반면에 state는 컴포넌트가 소유하며, 컴포넌트 내에서 변경할 수 있습니다.

 

React 라이프사이클에 대해서 설명해주세요.

React의 컴포넌트 라이프사이클은 크게 세 가지 단계로 나눌 수 있습니다: 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)입니다.

마운팅은 컴포넌트 인스턴스가 생성되어 DOM에 삽입되는 단계입니다.
업데이트는 props 변경 또는 state 변경에 따라 컴포넌트가 재렌더링되는 단계입니다. 
언마운팅은 컴포넌트가 DOM에서 제거되는 단계입니다. 

클래스 컴포넌트의 각 단계에서는 특정한 메소드들이 호출됩니다.

 

함수형 컴포넌트에서는 useEffect Hook을 사용해서 컴포넌트의 라이프사이클을 구현합니다.
마운팅: 함수형 컴포넌트가 처음 렌더링될 때, useEffect Hook의 콜백 함수가 호출됩니다. 이 때, useEffect의 두 번째 인자로 빈 배열([])을 전달하면, 콜백 함수는 컴포넌트가 마운트될 때만 실행됩니다.
업데이트: props나 state의 변경으로 인해 컴포넌트가 재렌더링될 때, useEffect의 콜백 함수가 호출됩니다. 이 때, useEffect의 두 번째 인자로 특정 값들의 배열을 전달하면, 그 값들이 변경될 때만 콜백 함수가 실행됩니다.
언마운팅: 컴포넌트가 언마운트될 때, useEffect의 콜백 함수에서 반환한 클린업 함수가 호출됩니다. 이 클린업 함수는 주로 이벤트 리스너의 제거 등의 정리 작업을 수행하는 데 사용됩니다.