기술면접

함수의 호출 위치에 따라 scope 범위가 달라진다면 dynamic scope라고 할 수 있겠지만 자바스크립트는 dynamic scope가 아닌 static scope를 채택하고 있습니다. 자바스크립트의 함수의 유효 범위는 그 함수가 어디서 실행됐느냐가 아니라 어디서

변수를 예로 들자면, 변수 선언이 나중에 되었음에도 마치 선언이 위에서 된 것처럼 작동하는데, scope 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 걸 hoisting이라고 할 수 있습니다. 단, 할당된 value 자체는 hoisting되지 않는데, 선

scope는 참조의 대상이 되는 식별자(identifier)를 찾기 위한 유효한 범위라고 볼 수 있습니다. 자바스크립트는 이 규칙대로 식별자를 찾게 됩니다. 크게 전역 스코프(Global scope)와 지역 스코프(Local scope or Function-level

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다. var는 변수의 중복 선언을 허용합니다. hoisting이 적용되기 때문에 선언하기 전부터 사용이 가능합니다.var에서 적용되

콜백 함수는 쉽게 말해서 다른 코드의 인자로 넘겨주는 함수라고 볼 수 있습니다. 콜백 함수를 넘겨 받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행합니다. 말 그대로 콜백 함수는 다른 함수에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 다만 비

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는데, 이런 흐름을 물 속 거품과 닮았다고 해서 이벤트 버블링이라

우선 브라우저는 사용자의 요청에 따라 서버로부터 HTML, CSS, JavaScript, 그리고 이미지 파일을 포함한 에셋들을 응답 받습니다. HTML, CSS 파일은 랜더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로

브라우저는 싱글쓰레드에서 특정 이벤트에 반응해서 동작을 변경하는 방식(event-driven)으로 작동합니다. 하지만 실제로 동작하는 웹 애플리케이션은 많은 태스크가 동시에 처리되는 것처럼 느껴지는데, 이러한 동시성(Concurrency)을 지원하는 것이 이벤트 루프입

실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체라고 할 수 있습니다. 여기서 환경이라고 하면 코드를 실행에 영향을 주는 조건이나 상태를 말하는데, 식별자 결정을 더욱 효율적으로 하기 위한 수단으로 필요한 정보를 한데 모아 제공하는 객체가 실행 컨텍스트입니

실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장됩니다. 실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체(브라우저 환경에서는 window, Node.js 환경에서는 global)가 저장됩니다. 그 외에는 함수를 호

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 이건 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티나 메소드를 상속 받아서 사용할 수 있게 됩니다. 이러한 부모 객체를 프로토타입(Prototype) 객체 또는 줄여서 프로토타

객체 지향 프로그래밍은 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것을 말합니다. 객체 지향 프로그래밍은 크게 추상화, 캡슐화, 상속, 다형성 이렇게 네 가지의 특징을 갖고 있습니다. 우선 추상화는 객체의 공통적인 속성과 기능을 추출

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미합니다. 일반적으로 서버로부터 웹페이지를 받으면 브라우저 화면 전체를 갱신해야

우선 CORS를 말하기 전에 SOP에 대해 먼저 알 필요성이 있습니다. SOP는 Same-Origin Policy로 말 그대로 동일 출처 정책인데, 동일한 출처 사이에서만 리소스를 공유할 수 있다는 보안 규칙입니다. 동일 출처의 기준은 스킴(scheme), 도메인, 포

CSR과 SSR의 가장 큰 차이는 랜더링을 어디서 하느냐의 차이라고 볼 수 있습니다. CSR은 말 그대로 클라이언트에서 렌더링을 하기 때문에 비어 있는 HTML을 자바스크립트를 통해 그려주는 형식으로 작동합니다. 페이지를 오갈 때 전체 HTML을 받아오는 것이 아니라

REST(Representational State Transfer)에서 가장 중요한 기본적인 규칙은 두 가지인데, URI는 자원 자체를 표현하는 데에 집중하고 행위에 대한 정의는 HTTP Method를 통해 하는 것이 REST한 API를 설계하는 중심 규칙이라고 할 수

분산된 모듈의 여러 의존성 관계를 정리하고 하나의 파일로 묶어 네트워크 비용을 최소화하는데 이런 과정을 번들링(bundling)이라고 합니다. 웹팩은 이런 번들링을 진행하는 번들러라고 할 수 있습니다. 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환

웹 표준은 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 말하는데, 즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다는 것입니다. 사용자의

쿠키는 브라우저에 저장되는 작은 크기의 문자열인데, 서버가 HTTP Response Headers의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 브라우저에 저장합니다. 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키를

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 프로토콜, 즉 규칙이자 약속입니다. 사용자가 웹 사이트를 방문하면 사용자의 브라우저가 서버에 HTTP 요청을 전송하고, 웹 서버는 HTTP 응답으로 응답합니다. 서버와 사용

꽤 많은 부분에서의 추가사항이 있었는데, 우선 let과 const 키워드의 등장으로 좀 더 엄격하고 예측 가능한 코드를 작성할 수 있게 되었고, back tick을 사용한 템플릿 리터럴로 편의성과 가독성을 보완할 수 있었습니다. 또한 arrow function을 통해

자바스크립트는 기본적으로 동적 타입 언어로 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 변수의 타입이 유연하게 결정됩니다. 우선 크게 자바스크립트의 데이터 타입은 원시 타입과 참조 타입으로 나뉩니다. 원시 타입에는 string, number, boolean,

CI/CD (Continuous Integration/Continuous Delivery)는 쉽게 말해서 개발 단계를 자동화하여 더욱 짧은 주기로 고객에게 제공하는 방법이라고 볼 수 있습니다. 말 그대로 지속적인 통합, 제공, 배포를 통해 개발팀과 운영팀 사이에 발생하

EC2(Elastic Compute Cloud)는 AWS가 제공하는 클라우드 서버입니다. 클라우드 공간 안에 원하는 Linux나 Ubuntu 같은 원하는 OS를 선택해서 서버를 설치할 수 있고, 생성된 EC2 하나를 인스턴스라고 부르는데 일종의 가상 컴퓨터라고 볼 수

원시 값은 단순한 데이터이며, 모든 원시 값은 변경이 불가능합니다. 이 불가능하다는 의미를 메모리의 관점에서 예시를 들어 보겠습니다. 변수 number에 1을 할당하고 다음 라인에서 100을 재할당한다면, 기존의 1이라는 원시 값을 수정하는 것이 아니라 새로운 메모리

참조 타입과 원시 타입의 근본적인 차이 중 하나는 참조 타입은 말 그대로 Pass by Reference, 참조에 의해 복사된다는 점입니다. 그래서 우리가 변수를 복사하듯 새로운 변수에 기존 변수를 복사하면 동일한 메모리 주소를 바라보게 되고, 복사한 변수의 값을 변경

undefined는 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값이라고 볼 수 있습니다. 다시 말해 값이 없는 게 아니라 값이 할당된 적이 없다는 뜻입니다. null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용합니다. 그리고 un

쓰로틀링(throttling)은 간단히 말해 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것을 의미합니다. 예컨대 스크롤 이벤트는 빈번하게 실행되기 때문에 별도의 복잡한 함수가 실행된다면 상당한 렉이 발생할 수 있습니다. 이럴 때 몇 초

JWT은 JSON Web Token으로 인증에 필요한 정보들을 암호화시킨 JSON 토큰을 의미합니다. 주로 사용자의 authentication(로그인과 같은 인증)과 authorization(권한 부여와 같은 인가) 정보를 서버와 클라이언트 간에 안전하게 주고 받기 위

HTTPS는 뒤에 Secure가 붙은 것처럼 주고 받는 데이터를 암호화하는데, 이때 사용하는 기술이 SSL(Secure Socket Layer)과 TLS(Transport Layer Security) 전송 기술입니다. TLS는 SSL의 개선 버전으로 최신 인증서는 대부

Node.js는 자바스크립트 기반이기 때문에 싱글스레드라고 볼 수 있습니다. 자바스크립트 엔진은 Memory Heap과 Call stack으로 이루어져 있는데, 자바스크립트 엔진 자체는 콜스택에 쌓인 실행 컨텍스트에 따라 위에서부터 차례로 실행이 일어나기 때문에 비동기

Virtual DOM은 말 그대로 가상 DOM으로 최근 React나 Vue 같은 프레임워크에서 주로 사용하는데, 여기서의 랜더링은 화면 단에서 그려지는 변경사항을 별도의 가상 DOM에 모아놨다가 DOM으로 보내서 한번에 랜더링을 진행합니다. 이런 방식은 DOM 조작을

JSX를 간단히 정의하면 JavaScript를 확장한 문법입니다. 사실 보통은 JSX가 적용되어 있는 게 당연하다고 여기는데, 보통은 이미 누군가에 의해 셋업이 되어 있는 프로젝트에 참여하거나 CRA를 통해서 React 프로젝트 셋업을 하기 때문에 그렇다고 볼 수 있습

Props Drilling은 말 그대로 props를 하위 컴포넌트로 전달하는 과정을 말합니다. 컴포넌트 단위의 프레임워크나 라이브러리를 사용할 때 겪게 되는 부분인데, 규모 자체가 크지 않거나 전달되는 컴포넌트의 깊이가 깊지 않을 때는 문제가 되지 않을 수 있으나, 예

C 언어나 C++ 같은 경우에는 수동으로 불필요한 메모리 영역을 해제하는 반면에 자바스크립트는 자동으로 해주는데 그게 가비지 컬렉션, 그걸 수행하는 것이 자바스크립트 엔진 내의 가비지 컬렉터입니다. 가비지 컬렉션을 수행할 때 도달 가능성(reachability) 이라는

Flux는 기존의 MVC 모델의 단점을 보완하기 위해 페이스북에서 발표한 디자인 패턴인데, 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름인 디자인

display에서 자주 정의되는 값은 block, inline, inline-block, none이 있는데(물론 flex나 grid도), block 요소는 말 그대로 블록처럼 가로 영역 전체를 차지합니다. 반면 inline 요소는 컨텐츠의 너비만큼 가로 영역을 차지하기

position은 static, relative, absolute, fixed, sticky가 있는데, 각각의 속성들은 element를 어디에 위치할지 결정하는 데에 사용합니다. static은 말 그대로 HTML에 작성된 순서대로 표시가 되고, 따라서 top, righ

id는 문서 전체에서 유일한 고유식별자를 정의할 때 사용합니다. 말 그대로 문서 내에서 하나만 존재 가능합니다. class 또한 선택자에 별도의 이름을 할당해서 사용할 수 있고 id와는 다르게 중복 사용이 가능하며, 공백을 구분자로 여러 개의 class 지정이 가능합니

HTTP 상태 코드는 클라이언트가 보낸 특정 HTTP 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공이나 실패 여부를 판단할 수 있습니다. 100~500번대까지 정의되어 있는데, 100번대는 정보의 조건부 응답을 뜻하는 것으로 알고 있는데, 웹 개발에서

box-sizing은 CSS에서 요소의 너비와 높이를 계산하는 방법을 지정하는 속성입니다. content-box의 경우 별도의 너비와 높이 값 외에 테두리나 안쪽 여백을 포함하는데, 말 그대로 컨텐츠의 영역에만 너비와 높이가 적용된다고 볼 수 있습니다. border-b

CDN은 Content Delivery Network의 약자인데, 말 그대로 사용자 위치와 최종 컨텐츠 사이에 분산 노드로 구성된 네트워크라고 볼 수 있습니다. CDN 노드는 원본 콘텐츠를 캐싱할 수 있는 캐시 기능을 가지고 있고 최종 사용자에게 상대적으로 가까운 위치

함수형 프로그래밍은 몇 가지 특징이 있습니다. 우선 인풋과 아웃풋이 있다는 점과 외부 환경으로부터 철저하게 독립적이라는 점입니다. 전역 변수와 같은 외부의 환경을 참조하지 않습니다.(물론 사용이 필요할 땐 인자로 넣고 사본을 만들어서 처리) 앞서 두 가지 특징 덕분에

Headless UI는 쉽게 말해서 로직과 UI를 분리해 정의된 스타일 없이 기능만 제공해주는 컴포넌트로 볼 수 있습니다. 예컨대 Bootstrap이나 MUI 라이브러리와 같은 경우 로직과 UI가 강하게 결합되어 있는데, 물론 CSS override를 통해 커스터마이징

HTTP Header는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 부분인데, General header는 공통 header로 요청과 응답 모두에 적용되고 body에서 최종적으로 전송되는 데이터와는 관련이 없는 header입니다. R

WebSocket은 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림, 즉 상호작용을 가능하게 해줘서 실시간 서비스 구현이 필요할 때 사용하는데, 다만 webSocket을 지원하지 않는 브라우저도 있기 때문에(물론 최근에는 대부분 지원) 크로스 브라우징에 대응

메모이제이션(memoization)은 비싼 함수 호출(expensive function calls)의 결과를 캐싱하고 동일한 입력이 발생할 때 다시 계산하는 대신에 캐싱된 결과를 반환하는 프로그래밍 기술입니다. 동일한 입력으로 여러 번 호출되는 함수 또는 컴포넌트가 있

간단하게 말해서 상태 변수인 state를 직접 조작하게 되면 React가 상태 변화를 감지하지 못하고 리랜더링이 일어나지 않습니다. React는 VDOM을 통해서 랜더링을 처리하고 있는데, 이전의 VDOM과 새롭게 랜더링될 VDOM과의 비교를 통해서 랜더링을 진행하기

useState, useEffect, useRef, useMemo, useCallback 등 익숙한 함수들이 Reacat hook들인데 일반적인 JavaScript 함수를 사용합니다. React의 hook들은 간단히 말해서 클래스 컴포넌트에서 이전에 다소 복잡하게 관리

반응형 디자인은 하나의 웹사이트나 앱을 모든 디바이스와 화면 크기에 맞게 조정하는 방법입니다. 웹 페이지 내에 존재하는 구성 요소들이 화면 크기에 따라 유연하게 바뀌고, 미디어 쿼리(Media Queries)나 flex, grid property를 사용해서 구현하게 됩

린트(lint)는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 탐색하는 작업을 말하고, 린터(linter)는 이 작업을 도와주는 도구를 말합니다. 예전에는 JSLint나 JSHint 같은 린터들이 많이 사용되었는데 최근에는 ESLint가 주로 사용됩니다. VSC

LifeCycle을 갖고 있는 다른 프레임워크들처럼 React도 LifeCycle을 갖고 있는데, LifeCycle Method를 통해 다루게 됩니다. 클래스형 컴포넌트의 경우 componentWillMount, componentDidMount, componentDid

마진 병합은 어떤 두 개 이상 블록 요소, 즉 형제거나 부모와 첫 번째 자식, 마지막 자식 요소의 상하 마진이 겹칠 때 더 큰 값을 가진 마진만 적용되는 현상을 말합니다. 이를 해결하기 위해서는 중간에 빈 요소를 넣는 방법도 있지만 시맨틱 마크업이나 웹 접근성 측면에서

z-index를 이해하기 위해서는 쌓임 맥락(stacking context)을 이해할 필요가 있는데, 쌓임 맥락은 3차원 z축에서 쌓이는 맥락을 의미하고, 각각의 HTML 요소는 자신의 속성에 따른 우선순위에 맞게 쌓이게 됩니다. 쌓임 맥락은 여러 조건에서 생기지만 일

자바스크립트가 호환성 이슈 없이 발전해올 수 있었던 건 기존의 기능은 그대로 두고 새로운 기능을 추가해왔기 때문인데, ES5에서는 새로운 기능이 추가되면서 기존 기능 중 일부가 변경되었습니다. 다만 호환성 이슈가 있기 때문에 대부분의 변경사항은 기본 모드에선 활성화되지

네, 최근에 프로젝트를 통해 사용한 경험이 있습니다. 우선 동적 타입 언어를 정적 타입 언어로 관리하면서 에러의 대부분을 차지하는 타입 에러를 잡아낼 수 있고, 동시에 tsc를 통해 컴파일 과정을 거치기 때문에 런타임 환경이 아닌 컴파일 단계에서 미리 잡아낼 수 있습니

일반적으로 JavaScript 작업 환경에서 적용 가능한 부분들이 일급 객체이기 때문이라고 볼 수 있습니다. 우선 함수를 상수나 변수에 할당할 수 있듯이 함수 표현식이 가능해야 하고, 함수를 다른 함수의 인자로 전달할 수 있어야 합니다. 그리고 함수의 리턴 값으로 사용

에러 처리의 주목적은 서비스의 안정성을 유지하고 예기치 못한 상황에서도 안정적인 사용자 경험을 제공함에 있다고 볼 수 있습니다. 개발자 입장에서도 디버깅과 유지 보수에 용이하다는 장점이 있습니다. 가장 일반적인 에러 처리 방법은 try-catch 문이고, throw 문