기술 면접 질문 리스트업
개요
- 프로그래머스 데브코스 WTL시간에 기술 면접을 준비하기 위해서 팀원들과 각자 하나의 질문을 매주 월요일 까지 뽑아오고 그 주 금요일에 발표하는 형식으로 진행하게 되었다.
- 첫 주차, 기술 면접 WTL에 진행한 내용이다.
1. 동기와 비동기란?
-
동기(Synchronous) 방식은 작업이 순차적으로 진행되는 방식입니다. 즉, 이전 작업이 완료되어야 다음 작업이 시작될 수 있습니다. 이 방식은 간단하지만, 시간이 오래 걸리는 작업이 있을 경우 전체 프로세스가 지연될 수 있다는 단점이 있습니다.
-
비동기(Asynchronous) 방식은 작업이 동시에 진행될 수 있는 방식입니다. 이전 작업이 완료되지 않아도 다음 작업을 시작할 수 있기 때문에, 효율적인 처리가 가능합니다. 하지만, 작업의 순서가 보장되지 않기 때문에 관리가 필요합니다.
자바스크립트에서 비동기 처리 방식
- 자바스크립트에서 비동기 처리를 위한 방법으로는 여러 가지가 있습니다.
- 콜백(Callback) 방식: 함수의 인자로 다른 함수를 전달하여 특정 작업이 완료된 후 호출되는 방식입니다. 하지만, 중첩된 콜백으로 인해 "콜백 지옥"이 발생할 수 있는 단점이 있습니다.
- Promise: 비동기 작업의 완료 또는 실패를 나타내는 객체로, .then()과 .catch() 메서드를 통해 결과를 처리할 수 있습니다.
- async/await 문법: 비동기 코드를 더 간단하게 작성할 수 있습니다. 이 문법을 사용하면 비동기 작업을 동기 코드처럼 작성할 수 있어 가독성이 높아집니다.
<script>와 <script async> <script defer>의 차이점 <script>: 즉시 다운로드 및 실행, HTML 파싱 중단.<script async>: 비동기 다운로드, 즉시 실행, 실행 순서 보장 없음.<script defer>: 비동기 다운로드, HTML 파싱 완료 후 실행, 실행 순서 보장.
링크
2. REST API란 무엇인가
- REST API는 Representational State Transfer 웹 아키텍처 스타일로 클라이언트와 서버 간 통신을 규정합니다. 자원은 URI로 식별되고, HTTP 메서드(GET, POST, PUT, DELETE)를 통해 CRUD 작업을 수행합니다. stateless 방식으로 설계되어 각 요청이 독립적이며, 서버는 클라이언트 상태를 유지하지 않습니다. 그리하여 REST API는 확장성과 유연성이 뛰어납니다.
REST의 주요 원칙
- 자원을 URI로 명확히 식별하고, HTTP 메서드를 활용해 자원에 대한 다양한 작업을 수행하는 것입니다.
- REST API의 가장 큰 특징 중 하나는 무상태성입니다. 즉, 각 요청은 독립적이며, 서버는 클라이언트의 상태를 따로 저장하지 않습니다.
CRUD 작업
- REST API에서는 HTTP 메서드를 통해 Create, Read, Update, Delete, 즉 CRUD 작업을 수행할 수 있습니다.
- Create: POST 메서드를 사용해 새로운 자원을 생성합니다.
- Read: GET 메서드를 통해 자원을 조회합니다.
- Update: PUT 또는 PATCH 메서드를 통해 자원을 수정합니다.
- Delete: DELETE 메서드를 통해 자원을 삭제합니다.
링크
3. HTML 관련 질문
-
doctype은 무엇인가요?
- DOCTYPE은 document type의 약어로, HTML 문서의 유형을 정의하는 선언입니다. HTML 문서가 어떤 버전의 HTML을 따르고 있는지 브라우저에게 알려주는 역할을 합니다.
-
다국어 페이지는 어떻게 제공이 되나요?
- 다국어 페이지는 HTML의
lang속성을 통해 제공될 수 있습니다. 이 속성은 브라우저에게 문서의 기본 언어를 알려줍니다. 예를 들어, 웹 페이지가 한국어로 작성된 경우<html lang="ko">로 설정합니다.
- 다국어 페이지는 HTML의
링크
4. JSX란 무엇이며 XML과의 차이점은 무엇인가요?
- JSX는 React에서 UI를 구성하기 위한 JavaScript XML 문법입니다. XML과 달리 JavaScript 표현식을 포함할 수 있어 동적 콘텐츠를 쉽게 렌더링할 수 있습니다. 또한, JSX는 HTML과 유사한 구조로 가독성을 높이며, React의 컴포넌트와 상태 관리 기능을 활용합니다.
JSX의 특징
- JSX는 JavaScript XML의 약자로, React에서 사용되는 자바스크립트의 확장 문법입니다. JSX는 HTML과 유사한 구문을 사용하여 UI 컴포넌트를 정의하는데, 자바스크립트 코드 안에서 HTML을 작성하는 것처럼 보이지만 실제로는 JavaScript 코드로 변환됩니다.
function MyComponent() {
return <h1>Hello, World!</h1>;
}- JSX는 JavaScript 표현식을 포함할 수 있으며, 이를
{}중괄호로 감싸서 사용합니다.
export default function App() {
return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}JSX 구문을 사용하지 않는 경우 해당 JavaScript 코드는 아래와 같이 작성해야 합니다.
import { createElement } from "react";
export default function App() {
return createElement(
"h1",
{ className: "greeting" },
"Hello, this is a JSX Code!"
);
}JSX와 XML의 차이점
-
JavaScript와의 통합:
- JSX는 자바스크립트와 직접적으로 통합됩니다.
{}를 사용해 변수, 함수 호출, 조건문 등 다양한 자바스크립트 표현식을 삽입할 수 있습니다. - XML은 데이터를 구조화하고 저장하는 데 중점을 두며, 자바스크립트와 별개로 동작합니다.
- JSX는 자바스크립트와 직접적으로 통합됩니다.
-
구문 규칙:
- JSX에서는 태그가 반드시 닫혀야 합니다.
<img />,<input />처럼 자기 닫힘 태그를 사용하거나<div></div>처럼 명시적으로 닫아야 합니다. - XML도 닫힘 태그를 요구하지만, JSX에서는 더 유연한 자바스크립트 문법을 지원합니다.
- JSX에서는 태그가 반드시 닫혀야 합니다.
-
HTML 속성:
- JSX는 자바스크립트 문법을 따르므로,
class대신className,for대신htmlFor와 같은 DOM 속성을 사용해야 합니다. - XML은 HTML과 마찬가지로, 일반적인 속성 이름을 그대로 사용할 수 있습니다.
- JSX는 자바스크립트 문법을 따르므로,
링크
5. JavaScript에서 이벤트 루프에 대해 설명하시오
- 이벤트 루프는 JavaScript의 비동기 프로그래밍 모델을 지원하는 메커니즘으로, 단일 스레드 환경에서 비동기 작업을 효율적으로 관리합니다.
이벤트 루프의 기본 정의
- 이벤트 루프는 JavaScript의 비동기 프로그래밍 모델을 지원하는 메커니즘으로, 단일 스레드에서 비동기 작업을 처리하고, 콜백 함수를 관리하는 역할을 합니다. 이를 통해 JavaScript는 UI를 블로킹하지 않고도 여러 작업을 효율적으로 수행할 수 있습니다.
이벤트 루프의 동작 개념
- 호출 스택(Call Stack)과 태스크 큐(Task Queue) 간의 상호작용으로 작동합니다. 호출 스택은 현재 실행 중인 함수들을 관리하며, 태스크 큐는 비동기 작업의 콜백 함수들을 대기시키는 큐입니다. 이벤트 루프는 호출 스택이 비어 있을 때, 태스크 큐에서 대기 중인 작업을 호출 스택으로 이동시켜 실행합니다. 이 과정을 반복하며 비동기 작업을 처리합니다.
