카테고리 없음

기술 면접 연습 질문

als982001 2023. 6. 29. 21:26

일반적으로 JavaScript를 불러오기위해<script>요소를 <body>요소가 끝나기 직전에 배치합니다. 이유가 무엇인가요?

일반적으로 <body> 요소가 끝나기 전에 <script> 요소를 작성을 하는 이유는 HTML이 다 파싱되고 난 후에 JavaScript을 적용하기 위해서입니다. HTML이 다 불러와지지 않고, JavaScript를 실행(execute)하기 시작하면 JavaScript 프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방지하기 위해서 JavaScript를 불러오기 위한 <script> 요소는 <body> 요소가 끝나기 직전에 작성합니다.

 

<li>요소는왜<ul>요소의 자식요소여야만하나요?

화면 상으로는 아무런 문제가 없더라도 이렇게 각 요소의 의미에 맞게(시맨틱하게) HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.

id속성과 class속성의 차이에 대해서 설명해주세요.

id 속성과 class 속성의 차이는 고유성에 있습니다. id는 고유한 하나의 요소를 정하는데 사용하고, class는 여러 요소들에 사용할 수 있습니다. 하나의 HTML 요소에 적용된 id의 값은 다른 요소에는 적용되어선 안됩니다. 어떤 요소에 id 속성을 부여한다는 것은 그 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문입니다.

CSSboxmodel에 대해서 설명해주세요.

CSS box model에 따르면, Box는 총 4가지 요소(margin, border, padding, content)로 구성됩니다. content는 HTML 태그 사이에 담기는 내용을 표현하고, padding은 content와 border사이의 공간을 의미합니다. border는 Box의 경계를 표시하는 역할을 합니다. margin은 다른 박스와의 간격을 의미합니다.

스코프에 대해서 설명해주세요.

스코프는 변수 접근 규칙에 따른 유효 범위를 의미합니다. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 반대는 불가능하고, 중첩이 가능하다는 규칙이 있습니다. 이 규칙이 있어서 함수 body(중괄호) 내에서 전역 혹은 외부 스코프의 변수에 접근할 수 있습니다

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.

배열과 객체는 참조 자료형입니다. 참조 자료형의 경우에는 변수에 값 자체가 아닌 주소를 할당합니다. 따라서 const 키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있습니다.

원시자료형과 참조자료형에 대해서 설명해주세요.

원시 자료형은 변수에 할당할 때 값 자체가 할당이 되고, 참조 자료형은 변수에 할당할 때 주소가 할당됩니다. 원시 자료형은 숫자, 문자열, 불린등 주로 하나의 값을 의미하는 타입이고, 참조 자료형은 배열, 객체와 같은 여러 개의 데이터를 가지는 타입이 있습니다.

얕은복사와 깊은복사에 대해서 설명해주세요.

자바스크립트에서의 얕은 복사(shallow copy)는 객체를 복사할 떄, 객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 카피하는 것을 의미하고, 깊은 복사는 주소만 카피하지 않고, 값을 모두 복사하는 것을 의미합니다.

preventDefalut 메소드는 무엇인가요?

preventDefalut는 해당 이벤트에 기본적으로 설정된 기본 액션을 동작하지 않게 만드는 메서드입니다.

innerHTML메서드와 textContent메서드의 차이에 대해서 설명해주세요.

innerHTML은 HTML 태그를 인식하여 DOM 조작하는 것 처럼 화면에 HTML 요소로 적용하여 넣어주는 반면에 textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용하여 넣어주지 못합니다.

Promise의 기능과 필요한 이유에 대해서 설명해 주세요.

Promise는 비동기 작업을 처리하고, 작업이 완료되면 결과값이나 에러를 처리할 수 있는 콜백 함수를 등록할 수 있는 객체입니다. Promise를 사용하면 콜백 지옥(callback hell)을 해결하고, 코드의 가독성과 유지보수성을 높일 수 있습니다.

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.

순수 함수는 입력값에 대한 결과값이 항상 동일하며, 함수 외부의 상태를 변경하지 않는 함수이며, 이를 통해 불변성을 지키고 사이드 이펙트를 방지합니다.

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

React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, props는 부모 컴포넌트로부터 전달받은 속성 값입니다. state는 내부에서 변경 가능하고, 변경 시 컴포넌트를 다시 렌더링하며, props는 변경 불가능하고 자식 컴포넌트에서 참조하여 사용할 수 있습니다.

React 컴포넌트의 key 속성에 대해서 설명해 주세요.

React에서 컴포넌트의 key는 각각의 컴포넌트를 고유하게 식별하는 속성입니다. key는 컴포넌트 배열을 렌더링할 때 성능을 최적화하는 데에도 사용됩니다. key가 제대로 설정되지 않으면 컴포넌트 배열의 재배치가 발생하여 성능 저하 및 예상치 못한 동작이 발생할 수 있습니다.

useEffect의 dependency array에 대해서 설명해 주세요.

React의 useEffect 훅에서 dependency array는 해당 효과(effect)가 의존하는 상태(state)나 props의 값의 배열입니다. dependency array를 설정하면 해당 값들이 변경될 때만 useEffect 효과가 실행됩니다. 만약 dependency array를 빈 배열로 설정하면, 컴포넌트가 마운트될 때 한 번만 useEffect 효과가 실행됩니다.

CSR과 SSR의 차이점에 대해서 설명해 주세요.

 CSR(Client-Side Rendering)은 웹 애플리케이션의 초기 로딩 시 클라이언트 측에서 JavaScript를 사용하여 화면을 동적으로 생성하는 방식입니다. 반면, SSR(Server-Side Rendering)은 서버 측에서 초기 HTML을 생성하여 클라이언트에 전송하고, 이후 JavaScript를 사용하여 애플리케이션을 동적으로 렌더링하는 방식입니다.
 CSR은 초기 로드 후 페이지 전환이 빠르며 서버 부하가 상대적으로 적지만 초기 페이지 로드 시간이 길고 SEO에 불리할 수 있습니다. 반대로 SSR은 상대적으로 초기 로딩 속도가 빠르고 SEO에 유리하지만 상대적으로 서버 부하가 클 수 있습니다.

 

GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요.

HTTP의 GET 메서드는 서버에서 데이터를 조회할 때 사용하는 요청 방식입니다. URL의 쿼리스트링으로 데이터를 전달하며, 요청의 본문(body)이 없습니다. 반면 POST 메서드는 서버에 데이터를 전송할 때 사용하는 요청 방식입니다. 요청 본문에 데이터를 담아 전송하며, 데이터의 크기에 제한이 없습니다. GET은 캐싱 가능하고, 브라우저 기록에 남을 수 있습니다. POST는 캐싱되지 않으며, 브라우저 기록에 남지 않습니다. 따라서, GET은 조회할 때 사용하고, POST는 데이터를 생성하거나 수정, 삭제할 때 사용합니다.

HTTP 메시지 구조에 대해 설명해 주세요.

HTTP 메시지는 시작줄, 헤더, 본문 세 부분으로 구성됩니다. 시작줄은 요청 메시지와 응답 메시지 모두에 포함되며, 요청의 경우는 요청 라인, 응답의 경우는 상태 라인이 포함됩니다. 헤더는 시작줄 다음에 위치하며, 여러 개의 필드로 구성되어 메시지의 부가 정보를 담고 있습니다. 본문은 필수적이지 않으며, 메시지에 포함될 수 있는 엔티티(자원)의 실제 데이터를 담고 있습니다. 이러한 구조를 이용하여 HTTP 메시지는 클라이언트와 서버 간의 통신에 사용됩니다.

Same-Origin Policy에 대해서 설명해 주세요.

Same-Origin Policy는 브라우저 보안을 위해 적용되는 정책으로, 스키마, 호스트, 포트가 동일한 출처(origin)끼리만 서로 자원을 공유할 수 있도록 제한하는 것입니다. 이는 다른 출처에서 요청한 리소스로 인한 보안 문제를 방지하기 위해 사용됩니다.

CORS에 대해서 설명해 주세요.

CORS(Cross-Origin Resource Sharing)는 Same-Origin Policy를 우회하기 위한 방법 중 하나로, 서로 다른 출처 간의 자원 공유를 허용하는 메커니즘입니다. CORS는 브라우저에서 처리되며, 서버에서 허용할 출처, 메서드, 헤더 등을 명시적으로 설정하여, 요청을 허용하도록 설정할 수 있습니다. 이를 통해 보안성을 유지하면서 다른 출처에서 요청한 자원에 대한 접근을 허용할 수 있습니다.

재귀가 무엇이고, 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.

재귀는 함수가 자기 자신을 호출하는 것을 말하며, 팩토리얼 계산이나 피보나치 수열 등의 작업을 할 때 재귀를 사용하여 간단하고 직관적으로 해결할 수 있습니다.

UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.

UI(사용자 인터페이스)는 사용자가 어떻게 상호작용할 수 있는지를 결정하는 것으로, 디자인적인 측면에 중점을 둡니다. 반면, UX(사용자 경험)는 사용자가 제품 또는 서비스를 사용하는 과정에서 느끼는 전반적인 경험을 의미하며, 사용자가 불편한 경험을 하지 않도록 기능과 디자인, 플로우 등을 설계하는 것에 중점을 둡니다. 두 개념의 관계는 UI가 UX의 일부분으로, 좋은 UI를 가진 제품이 좋은 UX를 제공하는 것이라고 할 수 있습니다. UI가 사용자가 어떻게 상호작용할 수 있는지를 결정하므로, UI가 편리하고 직관적이고 시각적으로 매력적이면 사용자가 더욱 편안하게 제품을 사용할 수 있으며, 이는 결과적으로 좋은 UX를 제공합니다.

useRef가 필요한 상황을 예시를 들어 설명해 주세요.

useRef는 DOM 요소나 변수를 기억하고 다시 사용할 수 있게 해주는 Hook입니다. 예를 들어, 특정 input 요소에 대한 포커싱을 설정하거나, 이전 값과 새 값의 변경 여부를 추적하는 등의 작업에서 useRef가 유용하게 사용될 수 있습니다.

상태관리 라이브러리의 필요성에 대해서 설명해 주세요.

상태관리 라이브러리는 대규모 애플리케이션에서 발생하는 복잡한 상태 관리를 쉽게 하기 위한 라이브러리입니다. 컴포넌트 간의 데이터 흐름을 더욱 간편하게 관리하고, 코드의 유지 보수성과 확장성을 향상시키는 데 도움이 됩니다.

Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

Semantic HTML은 웹 페이지의 구조와 의미를 명확하게 표현하기 위해 HTML 요소를 사용하는 것을 말합니다. Semantic HTML을 사용하면 웹 페이지의 의미를 이해하기 쉽고, 검색 엔진 및 보조 기술이 페이지를 이해하고 해석할 수 있습니다. 이는 웹 접근성, 검색 엔진 최적화, 유지보수 및 코드 가독성을 향상시키는 데 도움이 됩니다. 예를 들어, <nav>, <header>, <footer>와 같은 태그는 해당 콘텐츠의 역할을 명확하게 나타내어 웹 페이지의 구조를 이해하기 쉽게 만들어줍니다.
  • <header>: 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소입니다.
  • <nav>: 메뉴, 목차 등에 사용되는 요소입니다.
  • <aside>: 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
  • <main>: 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
  • <article>: 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
  • <section>: 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
  • <hgroup>: 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
  • <footer>: 페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소입니다.

IP 프로토콜의 한계에 대해서 설명해 주세요.

IP 프로토콜의 한계는 크게 두 가지로 나눌 수 있습니다. 첫 번째는 유한한 IP 주소 공간으로 인해 IP 주소 고갈이 발생할 수 있다는 점입니다. 두 번째는 IP 프로토콜이 패킷 전송 과정에서 데이터 무결성, 기밀성, 인증 등의 보안적인 측면에서의 한계가 있어서 추가적인 보안 프로토콜이 필요하다는 점입니다. 이러한 한계를 극복하기 위해 IPv6와 같은 새로운 프로토콜이 개발되었고, 추가적인 보안 프로토콜들도 함께 사용되고 있습니다.

HTTP 프로토콜의 특징에 대해 설명해 주세요.

HTTP 프로토콜은 클라이언트와 서버 간의 통신을 위해 사용되는 애플리케이션 레벨 프로토콜이며, TCP/IP 위에서 동작합니다. HTTP는 요청-응답 방식으로 동작하며, 클라이언트가 서버에 요청(Request)을 보내면, 서버는 해당 요청을 처리한 뒤 클라이언트에 응답(Response)을 보냅니다. 또한, HTTP는 상태를 유지하지 않는 Stateless 프로토콜이며, 기본적으로 암호화되지 않은 평문 텍스트로 통신합니다. 최근에는 HTTPS 프로토콜을 통해 보안적인 측면에서 보완이 이루어지고 있습니다.

Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.

Cookie의 MaxAge와 Expires는 둘 다 쿠키의 만료 시간을 설정하는 옵션입니다. MaxAge는 쿠키가 생성된 후 몇 초 동안 유지될지를 설정하며, Expires는 쿠키의 만료일자를 설정합니다. 이 두 옵션 중 하나를 지정해주어야만 쿠키가 삭제되는 시간이 설정됩니다. 만약 MaxAge나 Expires 옵션을 지정하지 않으면, 브라우저를 닫을 때 쿠키가 삭제됩니다. 이는 세션 쿠키라고 부르며, 유저가 웹사이트를 이용하는 동안에만 유지되는 일시적인 쿠키입니다.

Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

Hoisting은 JavaScript에서 변수와 함수 선언을 현재 스코프의 최상위로 끌어올리는 것을 말합니다. Temporal Dead Zone은 let과 const로 선언된 변수가 실제로 선언되기 전에는 사용할 수 없는 현상을 말합니다. 이 둘은 서로 연관되어 있습니다. 변수가 선언되기 전에 해당 변수를 사용하려고 하면, 해당 변수는 TDZ에 있기 때문에 참조 오류가 발생합니다. 그러나 변수가 선언되기 전에 변수를 선언하면 변수가 호이스팅되어 해당 변수에 대한 참조를 만들 수 있습니다. 따라서 변수를 선언하기 전에 변수를 참조해도 에러가 발생하지 않습니다.

브라우저 렌더링 방식에 대해 설명하세요.

브라우저는 HTML, CSS, JavaScript 등의 웹 페이지 자원을 가져와 파싱한 후 렌더링 엔진을 사용하여 화면에 표시합니다. 렌더링 엔진은 DOM 트리와 CSSOM 트리를 만들어 레이아웃을 계산하고 최종적으로 픽셀 단위로 화면에 그립니다. 이 과정에서 브라우저는 네트워크, 캐싱, 스크립팅 등 다양한 기술을 사용하여 페이지 로딩 속도를 최적화합니다.

리플로우와 리페인트에 대해 설명하세요.

리플로우(Reflow)는 웹 페이지의 렌더링 과정 중 CSS나 DOM 요소의 변경 등으로 인해 레이아웃을 다시 계산하는 과정을 의미합니다. 리페인트(Repaint)는 레이아웃이 변경되지 않은 경우에도 색상, 투명도 등의 스타일 속성이 변경될 때 발생하는 화면 갱신 과정을 의미합니다.

반응형 웹은 무엇이고 장단점에 대해 설명하세요.

반응형 웹(Responsive Web)은 디바이스의 크기와 해상도에 따라 웹 페이지의 레이아웃과 디자인을 자동으로 조정하여 최적화된 화면을 제공하는 기술입니다. 장점은 사용자의 디바이스 크기나 해상도에 상관없이 적절한 화면을 제공할 수 있어 접근성이 높습니다. 단점으로는 초기 구현에 시간이 오래 걸리며, 모든 디바이스에서 완벽한 화면을 보장하지는 않습니다. 또한, 모바일 디바이스에서 불필요한 리소스를 다운로드하는 등 성능 이슈가 발생할 수 있습니다.

자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

자바스크립트 엔진의 콜 스택(Call Stack)은 현재 실행 중인 함수의 정보를 저장하는 스택(Stack) 자료구조입니다. 함수가 실행되면 해당 함수의 정보(변수, 매개변수, 실행 위치 등)가 스택의 맨 위에 추가됩니다. 함수가 실행을 마치면 스택에서 해당 정보가 제거됩니다. 이렇게 스택에 정보를 추가하고 제거함으로써, 자바스크립트 엔진은 실행 중인 코드의 실행 위치와 실행 컨텍스트를 추적하고 관리할 수 있습니다. 스택이 가득 차면 스택 오버플로우(Stack Overflow)가 발생합니다.

번들링은 왜 필요한가요?

번들링은 여러 개의 파일을 하나의 파일로 묶어서 웹 애플리케이션의 성능을 향상시키기 위해 필요합니다. 번들링을 통해 로드해야 하는 파일 수를 줄이고, HTTP 요청 수를 최소화할 수 있습니다. 이는 웹 페이지 로딩 속도를 높이고, 대역폭을 절약할 수 있게 해줍니다. 또한, 번들링을 통해 파일 간의 의존성 문제를 해결할 수 있으며, 모듈화된 코드를 사용할 수 있게 됩니다.

Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

Virtual DOM은 실제 DOM(Document Object Model)을 추상화한 가상 객체입니다. 기존에는 상태 변화가 일어날 때마다 전체 DOM을 다시 그려야 하는 번거로움이 있었는데, Virtual DOM은 상태 변화 시 변경된 부분만 가상 DOM에 적용하고 이전 상태와 새로운 상태를 비교하여 실제 DOM에 최소한의 변경만 적용하게 됩니다. 이렇게 하면 불필요한 DOM 조작을 최소화할 수 있고, 빠른 업데이트 속도와 성능 개선을 이룰 수 있습니다. 또한, 프로그래머는 Virtual DOM을 조작함으로써 직접적인 DOM 조작을 하지 않아도 되어 코드 작성이 간결해지고 유지보수가 용이해집니다.

JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는지에 대해 설명할 수 있나요?

JavaScript는 싱글 스레드입니다. 하지만 이벤트 루프라는 메커니즘을 사용하여 비동기 작업을 처리합니다. 이벤트 루프는 비동기 작업이 완료되면 결과를 큐에 넣고, 콜 스택이 비어있을 때 큐에서 작업을 꺼내와 실행하는 방식으로 동작합니다. 이를 통해 비동기 호출을 처리할 수 있습니다.

Event Loop에 대해 설명할 수 있나요?

이벤트 루프는 JavaScript에서 비동기 처리를 가능하게 하는 메커니즘으로, 콜 스택과 태스크 큐를 모니터링하며 비동기 작업의 콜백 함수를 처리합니다. 이벤트 루프는 기본적으로 콜 스택이 비어 있을 때, 태스크 큐에 있는 작업들을 콜 스택으로 옮겨 실행하게 됩니다. 이렇게 해서, 주어진 비동기 콜백들이 적절한 순서대로 실행되게 합니다. 이를 통해 JavaScript는 싱글 스레드 환경에서 비동기 처리를 가능하게 합니다.
 
 

가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

가비지 컬렉션이란, 프로그램에서 더 이상 사용하지 않는 메모리 영역을 자동으로 탐지하여 해제하는 프로세스를 말합니다. 이를 통해 개발자는 명시적으로 메모리를 관리하지 않아도 되며, 메모리 누수 등의 문제를 방지할 수 있습니다.

Stack과 Queue의 차이점은 무엇인가요?

스택은 LIFO 구조로, 가장 최근에 삽입된 데이터가 가장 먼저 추출되는 구조입니다. 반면에 큐는 FIFO 구조로, 가장 먼저 삽입된 데이터가 가장 먼저 추출되는 구조입니다.

Tree와 Graph의 차이점은 무엇인가요?

트리는 루트 노드에서 시작하여 각 노드가 최대 하나의 부모 노드와 여러 개의 자식 노드를 가지는 계층적인 구조를 이루는 자료 구조입니다. 그래프는 노드(Node)와 간선(Edge)으로 구성된 자료 구조로, 노드들이 서로 연결되어 있습니다. 따라서, 트리는 그래프의 일종으로 생각할 수 있지만, 트리는 사이클이 없는 구조이며, 그래프는 사이클이 있을 수도 있습니다.

이진 탐색 방법에 대해 설명할 수 있나요?

이진 탐색(Binary Search)은 정렬된 배열에서 중간값과 비교하여 탐색 범위를 절반씩 줄여가며 값을 찾아내는 탐색 알고리즘입니다. 탐색 대상이 정렬된 배열에 있을 때, 시간 복잡도는 O(log n)이며, 순차 탐색보다 빠르게 동작합니다.

 

 

캐시란 무엇인가요? 캐시의 일반적인 작동원리를 설명해주세요.

캐시 메모리란 메인 메모리와 CPU 사이의 데이터 속도 향상을 위해 중간 버퍼 역할을 하는 메모리로, 데이터를 미리 저장해 다음에 동일한 요청이 있을 때 원래의 저장소로부터 데이터를 가져오는 시간, 비용을 줄일 수 있습니다. 이는 지역성에 기반하는 것으로, 지역성이란 데이터에 대한 액세스 패턴이 시간적이거나 공간저긍로 집중되는 경향이 있다는 뜻입니다. 그렇기에 최근에 액세스한 데이터나 주변 데이터에 대한 액세스가 거 높은 확률로 발생하며, 이를 캐시를 통해 활용하여 속도를 향상시킬 수 있습니다.

 

 

Session과 Cookie 그리고 Token 인증방식에 대해 설명해주세요.

세션은 서버 측에서 상태 정보를 유지하고 클라이언트를 식별하는 데 사용됩니다. 쿠키는 클라이언트 측에서 상태 정보를 유지하고 클라이언트와 서버 간의 통신에 사용됩니다. 토큰은 인증 및 인가를 위한 보안 메커니즘으로 사용되며 클라이언트가 자원에 대한 권한을 얻는 데 사용됩니다.

 

 

REST API에 대해 설명해주세요.

REST API는 웹 서비스의 자원을 표현하고 상태를 주고받기 위한 아키텍처 스타일로, HTTP 프로토콜을 기반으로 동작합니다. REST는 자원 기반, 상태 없음, 통일된 인터페이스, 자체 표현, 계층 구조 등의 특징을 가지며, HTTP 메서드와 상태 코드를 사용하여 자원을 조작하고 응답합니다.

 

 

 

AJAX에 대해 설명해주세요.

AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것입니다. 예를 들어, 우리가 사용하는 페이스북 메시지나 네이버 포털사이트의 뉴스 탭 역시 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을 하는 것이며, 이러한 기법을 AJAX라고 합니다.

 

 

 

이벤트 버블링이란 무엇이며 막을 수 있는 방법은 무엇인가요?

이벤트 버블링(Event Bubbling)은 HTML 요소들이 중첩된 구조에서 이벤트가 발생했을 때, 해당 이벤트가 발생한 요소에서 시작하여 부모 요소들을 거슬러 올라가면서 처리되는 메커니즘입니다. 즉, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 것을 의미합니다.

 

 

 

TCP와 UDP 방식의 차이점을 설명해주세요.

우선, TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)는 인터넷 프로토콜입니다. 하지만 차이점 역시 존재합니다. 우선, TCP는 연결 지향성 프로토콜이지만 UDP는 비연결성 프로토콜입니다. 그리고 TCP는 패킷의 신뢰성을 보장하지만 UDP는 그렇지 않습니다. 또한 TCP는 신뢰성이 높지만 속도는 낮은 반면, UDP는 신뢰성은 낮지만 속도는 높습니다.

 

 

 

Node.js는 싱글쓰레드인가요?

Node.js는 싱글 스레드 기반의 비동기 이벤트 처리 모델을 가지고 있습니다. 이는 JavaScript 코드가 한 번에 하나씩 실행된다는 것을 의미합니다. 하지만 Node.js는 싱글 스레드로 동작하지만 여러 개의 동시 연결을 처리할 수 있습니다.

 

 

 

Props Drilling 이란 무엇인가요?

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하는데, 이 때 몇몇 컴포넌트가 그저 props를 전달하는 용도로만 쓰이는 경우를 의미합니다. Props Drilling이 심해지면 코드의 가독성이 매우 나빠지고 유지 보수가 힘들어집니다. 또한 state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들이 리렌더링이 발생하여 웹성능에 악영향을 줄 수 있습니다. 이를 방지하기 위해 별도의 상태관리 라이브러리를 이용할 수 있습니다.

 

 

 

JSX가 무엇인가요?

JSX란 JavaScript를 확장한 문법입니다. 이를 이용해 React Element를 만들 수 있습니다. JSX를 이용한 코드는 마치 html 코드같아 보고 이해하기가 상대적으로 수월합니다. 하지만 브라우저는 이를 이해할 수 없기에 Babel 등을 이용해 JavaScript로 컴파일하여야 합니다.

 

 

 

state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.

setState는 state를 갱신할 수 있는 함수입니다. 이를 통해 state가 변경되면 리렌더링이 됩니다. 하지만 setState를 이용하지 않고 state를 변경하면 리렌더링이 되지 않거나 state가 제대로 변경되지 않을 수도 있습니다.

 

 

 

클로져에 대해서 설명하세요.

클로저는 함수와 그 함수 주변의 상태의 주소 조합이라 할 수 있습니다. 클로저는 함수가 정의될 때의 환경을 기억하고, 함수가 호출될 때에도 해당 환경에 접근할 수 있도록 합니다. 주로 클로저는 데이터 은닉, 정보 보존,

 

 

 

callback, promise, async/await 의 특징과 차이점에 대해서 설명하세요.

 우선 callback은 비동기 작업의 결과를 다루기 위해 콜백 함수를 이용하는 방식으로, 특정 작업이 완료되면 해당 콜백 함수를 호출합니다. 그런데 콜백 함수가 많아지면 콜백 헬이라는 문제가 발생해 가독성과 유지보수성이 떨어질 수 있습니다.

 그리고 Promise는 성공, 실패라는 각 상태에 대해 작업을 진행할 수 있습니다. 이는 then과 catch를 이용해 처리할 수 있습니다. 또한 Promise 체인을 이용해 여러 비동기 작업을 연결하고 콜백 헬을 방지할 수 있습니다.

 마지막으로 Async/Await은 async 함수 내에서 await 키워드를 사용하여 Promise가 처리될 때까지 기다린 후 결과를 반환합니다. 또한 코드가 동기적으로 작성되기 때문에 가독성이 좋고, 콜백 헬을 피할 수 있습니다. Promise를 기반으로 동작하며, async 함수 내에서 Promise를 반환하면 비동기 작업의 결과를 처리할 수 있습니다.

 

 

 

브라우저 저장소에 대해서 차이점을 설명해주세요.(LocalStorage, SessionStorage, Cookie)

브라우저 저장소의 주요 세 가지 방식인 LocalStorage, SessionStorage, 그리고 Cookie는 웹 데이터를 저장하는 방식으로 사용되지만, 각각의 특징과 사용 케이스에 따라 차이점이 있습니다.

 

  • LocalStorage
    • 지속성: LocalStorage에 저장된 데이터는 만료 기간이 없으며, 사용자가 직접 삭제하거나 웹 사이트가 프로그래밍적으로 삭제하지 않는 한 브라우저를 종료해도 계속해서 남아 있습니다.
    • 용량: 대부분의 브라우저에서 LocalStorage의 저장 용량은 약 5~10MB입니다.
    • 접근성: 웹 페이지의 동일 출처 정책(same-origin policy)에 따라 접근 가능합니다.
  • SessionStorage
    • 지속성: SessionStorage의 데이터는 페이지 세션이 끝나면(브라우저나 탭을 닫을 때) 삭제됩니다.
    • 용량: LocalStorage와 마찬가지로, 대부분의 브라우저에서 SessionStorage의 저장 용량은 약 5~10MB입니다.
    • 접근성: 웹 페이지의 동일 출처 정책에 따라 접근 가능하며, 페이지 리로드나 복원에도 데이터가 유지됩니다.
  • Cookie
    • 지속성: Cookie는 설정된 만료 날짜/시간까지 유지됩니다. 만료 날짜/시간이 지정되지 않으면, 브라우저가 닫힐 때 Cookie는 삭제됩니다.
    • 용량: 각 Cookie의 크기는 약 4KB로 제한되며, 도메인당 저장할 수 있는 Cookie의 수도 제한되어 있습니다.
    • 접근성: 서버와 클라이언트 모두에서 접근 가능합니다. 따라서, 서버에서 사용자를 식별하거나 특정 정보를 추적하는 데 사용됩니다.
    • 보안: 보안 상의 이유로, HTTP-only 플래그가 설정된 Cookie는 JavaScript에서 접근할 수 없습니다.
  • 요약
    LocalStorage와 SessionStorage는 웹 스토리지(Web Storage)의 두 가지 방식으로, 큰 데이터 저장 용량을 가지며, 동일 출처 정책에 따라 동작합니다.
    Cookie는 작은 데이터 저장 용량을 가지지만, 서버와의 통신에 유용하게 사용되며, 보안 및 만료 옵션을 포함할 수 있습니다.

 

 

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는데 그 이유는 무엇인가

브라우저가 HTML을 파싱하여 DOM (Document Object Model) 트리를 생성하는 동안 <script> 태그를 만나게 되면, 그 시점에서 파싱과 렌더링이 일시 중지됩니다. 이러한 동작의 주요 이유는 다음과 같습니다.

  • 순서적 실행: JavaScript는 웹 페이지의 구조나 스타일 등을 변경할 수 있습니다. 따라서, 스크립트가 HTML 요소에 의존하거나 해당 요소들을 수정할 수 있는 경우, 해당 스크립트가 예상한 대로 동작하려면 정확한 순서로 실행되어야 합니다.
  • DOM 조작: JavaScript는 DOM을 조작할 수 있습니다. 만약 브라우저가 스크립트 실행을 대기하지 않고 계속 HTML 파싱을 진행한다면, JavaScript가 예상한 DOM 구조와 실제 DOM 구조가 달라질 수 있습니다. 이는 웹 페이지의 예상치 못한 동작을 초래할 수 있습니다.
  • 동기적 실행: 기본적으로 <script> 태그는 동기적으로 실행됩니다. 이는 브라우저가 스크립트를 완전히 로드하고 실행하기 전까지 HTML 파싱을 중지한다는 것을 의미합니다. 이러한 이유로, 많은 웹사이트는 렌더링 차단을 최소화하기 위해 JavaScript를 문서의 하단에 배치하거나, async나 defer 속성을 사용하여 스크립트 로딩과 실행의 방식을 변경합니다.

 

 

 

SPA와 서버사이드 렌더링의 차이점은 무엇인가요?

SPA (Single Page Application)와 서버사이드 렌더링 (Server-Side Rendering, SSR)은 웹페이지의 컨텐츠를 사용자에게 제공하는 두 가지 주요한 방법입니다. 이 두 방식의 핵심 차이점과 특징은 다음과 같습니다:

렌더링 위치
SPA: 클라이언트 사이드 (즉, 브라우저)에서 주로 렌더링이 이루어집니다. 사용자가 애플리케이션 내에서 다른 페이지나 뷰로 이동할 때, 전체 페이지를 다시 로드하는 대신 필요한 데이터만 서버로부터 받아와서 현재 페이지를 갱신합니다.
SSR: 서버에서 페이지의 초기 상태를 렌더링하고, 그 결과인 HTML을 클라이언트에게 전송합니다. 이 방식은 전통적인 웹 페이지 로딩 방식과 유사하며, 사용자는 서버로부터 완전히 렌더링된 페이지를 받게 됩니다.


시작 시 로딩 시간
SPA: 애플리케이션 코드 (JavaScript, CSS 등)를 처음에 모두 다운로드 받아야 하므로 초기 로딩 시간이 길 수 있습니다. 그러나 이후의 페이지 전환은 빠르게 이루어집니다.
SSR: 사용자가 페이지를 처음 방문할 때 빠른 화면 표시가 가능합니다. 왜냐하면 필요한 컨텐츠가 이미 서버에서 렌더링된 상태로 전송되기 때문입니다.


SEO (검색 엔진 최적화)
SPA: 전통적인 SPA는 검색 엔진이 JavaScript를 실행하지 않으면 페이지의 내용을 인식할 수 없었습니다. 따라서 SEO에 문제가 있을 수 있습니다. 하지만 최근의 검색 엔진들은 JavaScript를 실행할 수 있으므로 이 문제는 점점 감소하고 있습니다.
SSR: 서버에서 렌더링된 페이지는 검색 엔진이 쉽게 크롤링하고 인덱싱할 수 있기 때문에, SEO에 유리합니다.


서버 부하
SPA: 서버는 주로 데이터를 제공하는 API 역할만 하기 때문에 렌더링 부하가 적습니다.
SSR: 각 페이지 요청마다 서버에서 렌더링을 수행해야 하므로 서버의 부하가 SPA에 비해 높을 수 있습니다.

 

 

 

this에 대해 설명해주세요


JavaScript에서 this는 현재의 실행 컨텍스트에 따라 참조하는 객체가 바뀌는 키워드입니다. 그 특징은 다음과 같습니다

  • 전역 컨텍스트에서 this는 전역 객체, 브라우저에서는 window를 참조합니다.
  • 일반 함수 호출에서 기본적으로 this는 전역 객체를 참조합니다. 하지만 strict mode에서는 undefined를 참조합니다.
  • 메서드 호출에서 this는 해당 메서드를 호출한 객체를 참조합니다.
  • 생성자 함수에서 this는 새롭게 생성된 객체를 참조합니다.
  • 이벤트 핸들러에서 this는 이벤트를 발생시킨 DOM 요소를 참조합니다.
  • call, apply, bind 메서드를 사용할 때 이 메서드들을 통해 this의 참조를 명시적으로 설정할 수 있습니다.

 

 

 

타입스크립트의 Type과 Interface의 차이점에 대해 설명해주세요.

타입스크립트에서 Type과 Interface는 객체의 형태나 함수, 클래스 등을 정의할 때 사용되는 두 가지 주요 도구입니다. 그들 사이에는 몇 가지 중요한 차이점이 있습니다:

확장성
Interface: 여러 인터페이스가 같은 이름을 가질 때, 자동으로 합쳐져 하나의 인터페이스로 합쳐지는 특징이 있습니다. 이를 인터페이스 선언 병합(declaration merging)이라 합니다.
Type: 타입 별칭은 선언 병합을 지원하지 않습니다. 대신 유니온(|)이나 교차(&) 연산자를 이용하여 새로운 타입을 생성할 수 있습니다.


컴포지션과 확장
Interface: 다른 인터페이스를 extends를 사용하여 확장할 수 있습니다.
Type: & 연산자를 사용하여 여러 타입들을 조합할 수 있습니다.

 

표현력

Interface: 주로 객체의 형태를 정의하는데 사용됩니다.
Type: 객체 뿐만 아니라 원시값, 유니온, 튜플 등 보다 다양한 값을 표현할 수 있습니다.

 

바운디드 컨텍스트

Type: 조건부 타입과 같은 고급 타입을 사용하여 복잡한 타입 로직을 표현할 수 있습니다. 이는 인터페이스로는 구현할 수 없습니다.

 

코드 에미션 및 성능
Interface: 인터페이스는 컴파일 결과에서 제거됩니다. 따라서 런타임에는 영향을 주지 않습니다.
Type: 타입 별칭도 마찬가지로 컴파일 결과에서 제거됩니다.

 

결론적으로, 어떤 것을 사용할지는 주어진 문제와 요구 사항에 따라 달라집니다. 일반적인 객체의 형태를 정의하고 확장하는 경우에는 Interface를 사용하는 것이 좋을 수 있습니다. 그러나 복잡한 타입 연산이 필요하거나 다양한 값을 표현해야하는 경우에는 Type을 사용하는 것이 적절합니다.

 

react-query의 장점을 말해주세요.

  • 자동 캐싱: 서버에서 가져온 데이터는 자동으로 캐시되며, 동일한 요청은 캐시된 데이터를 사용하여 불필요한 네트워크 요청을 줄입니다.
  • 백그라운드 데이터 동기화: 데이터가 백그라운드에서 자동으로 주기적으로 동기화될 수 있습니다. 이는 사용자가 항상 최신의 데이터를 보게 해줍니다.
  • 재시도 로직: 네트워크 요청이 실패한 경우, 설정된 횟수만큼 자동으로 재시도할 수 있습니다.
  • 패치된 데이터 상태 관리: 'isLoading', 'isError', 'data' 등 패치된 데이터의 상태를 쉽게 관리할 수 있습니다.
  • 병렬 및 종속 요청: 여러 데이터 패치를 동시에 처리하거나 한 요청이 다른 요청을 결과에 종속되게 할 수 있습니다.
  • 최적화: 불필요한 리렌더링을 줄이기 위해 데이터 패치와 상태 업데이트가 촤적화되어 있습니다.

 

 

질문

답변

 

질문

답변

 

질문

답변

 

질문

답변