기술면접
1.[기술면접] 스코프(Scope)와 변수선언(const, let, var)
스코프(scope)는 "범위"라는 의미를 가진다.컴공, JS에서도 "범위"의 의미를 가지고 있다.식별자 접근 규칙에 따른 유효 범위를 말한다.스코프의 정의는 "식벽자 접근 규칙에 따른 유효 범위"이다.식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.범위
2.[기술면접] 클로저(Closures)란 무엇일까?
클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계하는 개념이 합쳐진 것.클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 닫는것에 있다.외부함수 스코프에서 내부함수 스코프로 접근이 불가능하다.내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 가능하다.
3.[기술면접] 호이스팅과 Temporal Dead Zone
호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는게 아니다.호이스팅은 코드가 실행하기전 변수선언/함수선언이 스코프의 최상단으로 끌어올려진 것 같은 현상을 말한다.자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화 하고
4.[기술면접] 비동기 호출 callback, promise, async/await의 특징과 차이점
다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다.즉, 코드를 통해 명시적으로 호출하는 함수가 아니라 함수를 등록해놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.파라미터로 함수를 전달 받아 함수의 내부에서 실행된다.Js에
5.[기술면접] 프로세스와 스레드, 그리고 싱글 스레드와 멀티 스레드
JavaScript는 싱글스레드로 동작하는 언어이다.하나의 프로세스에서 하나의 스레드를 실행한다.하나의 레지스터와 스택으로 표현한다.💡 프로세스란?프로그램을 실행시켰을 때, 정적인 프로그램이 동적인 프로그램으로 변할 때 프로그램이 돌아가고 있는 상태를 말한다.컴퓨터는
6.[기술면접] 콜 스택/메모리 힙 구조, 데이터 저장 / 참조 원리
JavaScript의 엔진은 Memory Heap과 Call Stack으로 구성되어 있다. 가장 유명한 것이 구글의 V8 엔진이다. JavaScript는 단일 스레드 프로그래밍 언어인데, 이 의미는 Call Stack이 하나라는 의미이다. 즉, 멀티가 되지 않고, 하나
7.[기술면접] JavaScript 런타임 작동방식, 비동기와 이벤트 루프
크롬 웹 브라우저는 V8엔진이 탑제된 자바스크립트 런타임이다.런타임이란, 프로그래밍 언어가 구동되는 환경을 말한다.JavaScript 런타임이란 JavaScript가 구동되는 환경을 말한다.이러한 JavaScript 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스 등)
8.[기술면접] Virtual DOM이란?
웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠
9.[기술면접] 상태관리와 Props Drilling
Props Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 React Comoinnt트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.componentNeedingProps 컴포넌트에서 해당 props를 사용
10.[기술면접] JSX
JSX는 JavaScript에 XML을 추가, 확장한 문법이다.JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 JavaScript문법은 아니다.브라우저에서 실행하기 전에 바벨을 사용하여 일반 JavaScript형태의 코드로 변환된다.1\. 반드시 부모 요소
11.[기술면접] setState를 사용하는 이유
컴포넌트는 현재의 state와 setState를 비교해서 업데이트가 필요한 경우에만 render함수를 호출하게 되는데, state를 직접 수정하게 되면 React가 render함수를 호출하지 않아 상태 변경이 일어나도 렌터링이 일어나지 않을 수 있다. 상태 변경을 추
12.[기술면접] Class형 React의 라이프 사이클
React 컴포넌트는 생명주기가 있다. 컴포넌트가 실행되거나 업데이트 되거나 제거될 때, 특정한 이벤트들이 발생하게 된다.|용어|설명|\|---\|---\||~will|어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어이다.||~did|어떤 작업을 수행한 이후 실
13.[기술면접] Function형 React의 라이프 사이클
리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념이다. 예를 들어 클래스 컴포넌트에서만 사용 가능했던 state를 Hooks를 이용해 함수형 컴포넌트에서도 useState를 이용해서 상태 변수를 선언할 수 있다. 또한, useEffect를 통해 리
14.[기술면접] CSS : Selector
선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. 먼저 CSS에서 스타일이 어떤 방식으로 정의 되는지 알아보자.Rule Set은 HTML페이지 안의 특정 요소들을 어떻게 렌더링할 것인지 브라우저에게 알려주는
15.[기술면접 ] CSS의 단위
%란 전체의 몇 %인지에 대한 값이다. 부모를 기준으로 자식의 넓이를 %라고 한다. 예를 들어 부모태그의 넓이가 1200px일 때 자식에게 50%를 적용하면 자식태그의 넓이는 600px이 되는 것이다.vh, vw의 v는 Viewport의 축약어 이며, 웹사이트에서 보여
16.[기술면접] CSS in JavaScript
JavaScript를 사용하여 스타일을 선언적이고, 유지보수 가능한 방식이다. JavaScript를 CSS로 전환하는 고성능 컴파일러로 런타임 및 서버 사이드에서 작동하게 된다.기존 웹 사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, R
17.[기술면접] NodeJS는 Single-Thread 인가?
이글을 먼저 이해 하기전 JavaScript의 동작 원리에 대한 글을 먼저 읽으면 도움이 될것 같다.NodeJS는 JavaScript를 브라우저 밖에서도 실행할 수 있도록 하는 JavaScript 런타임이다.NodeJs는 싱글스레드라는 말을 많이 들어봤을 것이다. 싱글
18.[기술면접] TCP와 UDP
네트워크의 계층들 중 전송 계층에서 사용하는 프로토콜에 대해 알아보자.전송계층은 송신자와 수신자를 연결하는 통신서비스를 제공하는 계층으로 쉽게 말해 데이터의 전달을 담당한다. 그리고 데이터를 보내기위해 사용하는 프로토콜이 있는데 그 프로토콜이 TCP와 UDP이다.1줄
19.[기술면접] 프록시 서버가 필요한 이유
프록시 서버란 클라이언트가 자신을 거쳐 다른 네트워크에 접속할 수 있도록 중간에서 대리해주는 서버를 말한다. 서버와 클라이언트 사이에서 대리로 통신을 수행해주는 것을 프록시라고 하고 그 기능을 하는 서버를 프록시 서버라 부르게 되는 것이다.즉 프록시 서버는 서버와 클라
20.[기술면접] 이벤트 버블링과 이벤트 캡쳐란
이벤트 버블링의 현상을 알기 위해 먼저 이해하고 있어야 하는 내용은 바로 웹 애플리케이션의 이벤트 등록이다. 여기서 말하는 이벤트 등록이란 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. 아래의 코드를 봐보자.add one item이라는 간단한 버튼을
21.[기술면접] 브라우저 렌더링 과정
브라우저의 렌더링 과정은 어떻게 될까?브라우저 주소창에 특정 주소를 입력한다.해당 주소의 서버를 찾아가고 DNS가 실제 서버가 있는 곳으로 연결을 해준다. 이때, http, https 각 조건에 맞는 방식으로 통신한다.서버의 기본 설정이 대부분 index.html로 되
22.[기술면접] CSR과 SSR
Server Side Rendering의 약자로 말 그대로 서버쪽에서 렌더링 준비를 마친상태로 클라이언트에 전달하는 방식이다.User가 Website 요청을 보낸다.Server는 즉시 렌더링 가능한 html파일을 만든다.(리소스를 체크, 컴파일 후 완성된 html 컨턴
23.[기술면접] AJAX
AJAX는 Asynchronous JavaScript and XML의 약자이다. JavScript와 XML을 이용한 비동기적으로 정보를 교환하는 방법, 기술을 의미한다.AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고 페이지의 일부만 동적으
24.[기술면접] CORS
CORS란 교차 출처 리소스 공유 Cross-Origin Resource Sharing의 줄임이다. 여기서 "교차 출처"라고 하는 것은 "다른 출처"를 의미하는 것이다. 먼저 다른 추러처간의 리소스 공유에 대해 알아보기 앞서 간단하게 출처(Origin)라는 것이 정확
25.[기술면접] Session과 Cookie, Token
HTTP란 Hyper Text Transfer Protocol의 줄임말로 www상에서 정보를 주고 받는 통신 방법이다. 주로 HTML문서를 주고 받는데 사용되며 클라이언트와 서버가 서로 request와 response를 하며 통신한다.HTTP는 Stateless한 특성
26.[기술면접] Cache
자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소이다.아래와 같은 저장공간 계층구조에서 확인할 수 있듯, Cache는 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공한다.즉, Cache란 나중에 요청할 결과를 미리 저장해둔 후 빠르게 서비스해주는 것을 의미
27.[기술면접] 가비지 컬렉션
가비지 컬렉션은 프로그램에서 더이상 사용하지 않는 메모리를 자동으로 정리하는 것이다. 이 기능을 가진 언어는 자바, C자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다.원시값, 객체, 함수 등 우리가 만드는 모든것은 메모리를 차지한다. 그렇다면 더는 쓸모
28.[기술면접] 실행 컨텍스트
실행컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체이다. 실행컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트가 활성화 되는 시점에 선언된 변수를 위로