-
프로토타입 체이닝이란 무엇인가요
프로토타입 Array 안에는 map과 같은 method들이 있어, Array instance들은 이를 마치 자신의 메소드처럼 바로 호출해서 사용할 수 있는데요. 이처럼 객체가 다른 객체로부터 property 혹은 method들을 상속받을 수 있는 것을 prototype chaining이라고 합니다. -
호이스팅에 대해서 설명하세요.
호이스팅이란 함수 안에서 선언된 변수 또는 함수들이 상단으로 끌어올려지는 현상을 말합니다. 이 때문에 var나 변수에 할당이 되지 않은 함수의 경우, 코드 상 할당이 먼저 이루어지고 선언이 나중에 이루어지더라도 에러 없이 호출되는 모습을 확인할 수 있습니다. -
홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요.
주소창에 URL를 입력합니다. 브라우저가 캐시를 체크합니다. DNS 기록에서 URL과 일치하는 ip 주소를 찾습니다. 캐시에서 찾지 못하면 DNS 서버가 DNS 쿼리를 시작합니다. ip 주소를 찾아내면 ip 주소와 일치하는 서버와 TCP/IP three-way handshake를 통해 연결이 됩니다. 브라우저가 웹서버에 http get 요청을 보냅니다. 만약 쿠키 정보를 갖고 있다면 같이 전달합니다. 서버가 응답을 보냅니다. 우선 html 코드가 다운로드됩니다. 브라우저가 HTML를 읽으면서 dom 트리를 구성합니다. 이때 HTML 을 읽는 중간에 style, script, 이미지 등의 에셋들을 만나면 해당 리소스를 호출하여 다운로드합니다. Dom 트리와 CSS를 바탕으로 render tree를 구성합니다. 브라우저가 렌더 트리를 기반으로 레이아웃을 계산하고, 이를 웹페이지에 렌더링합니다 (리플로우 리페인트)
https://codingsalon.tistory.com/122 -
클로저란 무엇인가요?
클로저란 함수 안에 있는 변수가 함수의 실행 컨텍스트가 종료되더라도 메모리에서 해제되지 않고 남아있는 현상을 말합니다. React의 useState와 같은 Hook도 클로저를 활용해 상태를 유지합니다. -
GET, POST가 어떻게 다르게 쓰이나요.
RESTful api -
this?
this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 변수를 말합니다. this는 상황에 따라 바라보는 대상이 달라집니다. this를 반드시 사용해야 하는 경우 apply, call, bind 메소드를 통해 this를 명시적으로 지정할 수 있습니다. -
브라우저 저장소의 차이에 대해 설명해주세요 (localstorage, sessionstorage, cookie)
웹사이트에서 쿠키를 설정하면 모든 웹 요청에 쿠키가 포함되어 요청이 이루어집니다. 반면 web storage는 서버로 전송은 이루어지지 않습니다. localStorage는 브라우저가 닫혀도 유지되는 반면 sessionStorage는 브라우저가 닫히면 유지되지 않습니다. -
restful api에 대해서 아는대로 설명해주세요.
API 설계 원칙이라고 이해하고 있습니다.
- 목적지를 설정해줘야 한다.
- content-type이 명확하게 지정되어야 한다.
- 웹사이트의 상태의 변화의 링크가 명확하게 지정되어야 한다.
https://www.youtube.com/watch?v=RP_f5dMoHFc
8-2. HTTP란
HTTP는 데이터를 주고 받는 통신 규약을 말합니다.
-
프로세스와 스레드에 대해서 설명해주세요.
프로세스는 운영체제에서 실행중인 프로그램을 의미하고, 스레드는 프로세스 안에서 실행되는 실행 흐름를 말합니다. 예를 들어 크롬의 개별 탭을 프로세스라고 한다면, 그 안에서 실행되는 자바스크립트는 스레드라고 할 수 있습니다. -
자바스크립트는 단일 스레드라 불편하지 않을까요?
맞습니다. 자바스크립트는 단일 스레드라 한번에 처리할 수 있는 일에 한계가 있습니다. 하지만 비동기 프로그래밍을 통해 이같은 한계를 극복하고자 하는데요. fetch 요청을 예로 들어보면, fetch 요청을 하면 스택에 있는 다른 태스크들이 먼저 실행된 후, 응답이 돌아오면 이벤트 큐에 들어갔다가 이벤트 루프가 다른 태스크들이 없는 것을 확인한 후 .then 혹은 await 이후의 로직을 수행합니다. -
비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있을까요?
node.js에서 worker 함수를 이용해 동기적인 처리를 할 수 있다고 알고 있습니다. -
event loop 에 대해서 알고 있으신가요?
이벤트 루프는 큐에 쌓여있는 비동기 함수들을 스택이 모두 빈 순간을 감지하여 전달해주는 역할을 합니다. -
마이크로태스크 큐와 태스크 큐?
태스크 큐는 마이크로태스크 큐와 매크로 태스크큐로 나뉘는데, 이벤트 루프에서 처리되는 우선 순위를 구분하기 위한 용어이다. 매크로태스크가 하나 실행 완료되면, 마이크로태스크가 비워질 떄까지 모든 마이크로 태스크를 실행합니다. 매크로태스크는 setTimeout, setInterval, 마이크로태스크는 Promise 과 같은 작업들이 포함됩니다. -
이벤트 버블링에 대해 설명해주세요
자식 엘리먼트에서 이벤트가 발생할 경우 부모 엘리먼트에서도 이벤트로 이벤트가 전달되는 현상을 이벤트 버블링이라고 합니다. -
이벤트 버블링을 반대로 구현하는 방법
이벤트 캡처링 -
이벤트 버블링을 막기 위한 방법
e.propagation을 사용하면 부모로 이벤트가 전파되는 것을 방지할 수 있습니다. -
실행문맥(실행 컨텍스트)에 대해서 설명해주세요
실행 컨텍스트는 실행할 코드에 제공할 변수 및 함수 정보들이 들어있는 객체 입니다. 실행 컨텍스트 안에는 어휘적 환경이 저장되는데 이 부분은 해당 함수의 어휘적 환경, 그리고 외부 함수 및 전역 객체의 어휘적 환경을 모두 담게 됩니다. 이 때문에 함수 외부에 있는 변수를 참조해 사용할 수 있는 것입니다. -
이터러블, 이터레이터 프로토콜에 대해 설명해주세요
버리자 -
제너레이터에 대해서 설명해주세요
버리자 -
SPA와 서버사이드 렌더링의 차이점
HTML 파일을 하나만 불러오고, 자바스크립트 프레임 워크 또는 라이브러리가 실행됨, 그 이후 클라이언트에서 동적으로 HTML을 변경
반면 서버사이드 렌더링은 요청된 페이지에 필요한 HTML을 미리 생성하게 됨 -
require 와 import 의 차이점
es6 에서 도입된 것이 import라고 알고 있음 -
SASS 를 사용해본 적이 있는가? 기존 CSS에 비교해 어떤 면이 좋은가?
-
자바스크립트 성능 최적화를 위해 어떤 것을 적용해보았는가?
아아아아아ㅏㅏ -
svelte와 react의 차이?
사용하는 입장에서 가장 와닿았던 차이는 지향하는 상태 관리 방법입니다. React는 '단방향 데이터 흐름'을 강조하며 모델의 상태를 변경하려면 액션을 통해 간접적으로 변경하는 방법을 선택하고, 자식이 부모의 상태를 변경하지 못하게 해야 한다고 이해했습니다. 하지만 Svelte는 양방향 데이터 바인딩을 자체 지원합니다. 모델과 뷰를 바인딩하여 UI의 변경이 자동으로 상태에 반영되고, 상태의 변경이 UI에 반영됩니다. 이는 리액트에서 지양하는 것이라 새로웠습니다. 하지만 상태의 변화를 추적하기 어려워 개발할 때 버그가 생겨 어려웠던 기억이 있습니다. -
es6에서 arrow 함수를 언제 쓰는지?
- arrow 함수의 경우 this가 함수를 둘러싼 외부 범위를 this 값으로 가져옴.
-
var let const 차이점
var는 자바스크립트가 실행될 때 변수 혹은 함수 선언을 상단으로 끌어올리는 현상인 호이스팅 현상 때문에 사용을 조심해야 합니다. 이 현상 때문에 var를 할당하는 코드가 var를 선언하는 코드보다 뒤에 있더라도 에러가 발생하지 않습니다. 반면 let, const의 경우 같은 상황에서 에러가 발생합니다. let과 const는 할당 횟수가 다릅니다. const는 초기화시 최초에 한번만 할당이 가능하며, let은 여러번 재할당이 가능합니다. -
cors 대처법과 우회하는 방법
-
mvvm 모델에 대해 설명 vs flux 패턴의 차이
Flux 패턴은 기존에 백엔드에서 많이 사용하고 있던 MVC 패턴의 한계를 극복하기 위해 등장했습니다. 특히 프론트엔드는 뷰가 변경되면 모델이 변경되는 상황이 발생해 모델과 뷰 각각의 변화가 양방향으로, 또 여러 모델과 뷰가 영향을 주고 받는 상황이 나타나 문제가 발생했습니다. 이 문제를 해결하기 위해 전역 상태 저장소인 Store를 만들고, View에서 Action을 일으키면 dispatch를 통해 store에 변경사항을 전달합니다. 이러한 flux 패턴은 변화가 단방향으로 일어나기 때문에 흐름을 추적하기 쉬워진다는 장점이 있습니다.
MVVM 모델은 Model / View / View model 임. 즉, 뷰에서 쓰는 모델을 갖고 있다가 뷰와 뷰모델을 서로 양방향으로 변경해주는 것이다. Vue.js 등 다수의 framework가 이를 사용한다.
-
express 에 대해서 설명...
Node.js를 사용하여 서버 측 어플리케이션을 만들 수 있는 웹프레임워크입니다. 웹 서버의 라우팅, 미들웨어 처리, 요청 및 응답 처리 등의 기능을 제공합니다.
미들웨어는 express 어플리케이션에서 요청과 응답 객체 사이에 실행되는 함수입니다. 미들웨어는 사용해본 적이 없습니다. -
NOSQL과 SQL의 차이에 대해서 설명하시오.
SQL은 관계형 데이터베이스 시스템으로, 미리 정의된 스키마에 따라 데이터를 저장합니다. SQL을 통해 데이터를 쿼리하고 조작할 수 있습니다. 반대로 NOSQL은 미리 정의된 스키마가 없기 때문에 데이터 구조가 달라질 수 있습니다. -
클래스형 컴포넌트와 함수형 컴포넌트의 차이
-
비동기 함수에 대해 설명
-
로그인이란 무엇인가? Authentication/Authorization
-
CS 전공이 아닌 것을 보완하기 위해 어떤 노력을 하고 있는지.
-
JS 코어 (클로저, ....)
-
타입스크립트 관련된 개념
-
타입과 인터페이스의 차이
타입은 이미 존재하는 타입을 참조하는 별칭을 만드는 역할을 주로 합니다. 반면 인터페이스는 타입보다 확장성이 뛰어납니다. 다른 인터페이스를 확장하는 extends 기능이 그렇습니다. -
제네릭이 무엇인가요
제네릭은 타입스크립트에서 인자와 같은 역할을 담당합니다. 타입을 정의할 때가 아닌, 타입을 사용하는 곳에서 어떤 타입을 사용할지 구체적으로 명시할 수 있습니다. 그렇기에 저는 util 함수 같이 범용적으로 사용해야 하는 함수의 타입을 적용해야 할 때 사용했습니다.
-
로그인 - 인증 인가
로그인은 크게 신원을 증명하는 인증, 그리고 신원을 증명해 특정 리소스의 사용을 허가 받는 인가로 이루어져있습니다. 로그인은 아이디와 패스워드를 통해 인증을 하며 로그인 이후 받은 토큰 등으로 로그인 이후의 리소스에 대한 사용 및 접근 인가를 받습니다. -
Promise 에 대해 설명해 보세요.
프로미스는 resolve와 reject를 인자로 받아 비동기 처리를 수행하는 생성자입니다. 이때 resolve 는 Promise의 상태가 pending에서 fulfilled 상태로 변경될 때 실행되며, reject는 rejected 상태가 될 때 실행됩니다. -
Prototype 기반 상속과 일반적인 OOP 에서의 상속은 어떤 차이가 있습니까?
-
비동기로 처리한 작업을 UI 에 표시하기 위해 어떤 일이 필요한지 설명해주세요.
-
DOM 의 class 와 id 의 차이?
-
Event bubbling 과 Event capturing 에 대해 설명해주세요.
- 바닐라 자바스크립트만으로 컴포넌트와 상태 관리를 해본 경험이 있으시다고 적혀있는데, 이 과정에서 겪었던 어려움과 이를 어떻게 극복했는지 듣고 싶습니다.
리액트와 같은 라이브러리를 사용하면 훅을 이용해 상태가 변화하면 재렌더링을 하도록 만들 수 있지만, 바닐라 자바스크립트에서는 훅과 같은 상태 관리 기법이 존재하지 않기 때문에, Observer 패턴을 이용하여 값을 변화시키는 함수가 실행될 때 해당 요소의 렌더링을 일으키는 render 함수를 만들어 상태 관리 함수를 만든 경험이 있습니다. - "Issue Tracker" 프로젝트에서 3단계 이상 props drilling이 발생하는 복잡한 상태 관리에 대한 경험을 알려주세요. 특히 어떤 방식으로 상태 관리를 했으며, 만약 다시 해당 프로젝트를 수행한다면 무엇을 달리하겠는지도 말씀해 주세요.
useReducer와 useContext를 결합하여 유저의 정보를 store에 담아 관리한 경험이 있습니다. useContext를 통해
- 또 필터 항목이 변경되면 필터가 적용된 목록이 변경되는 기능을 추가해야 했는데, 이때 필터를 변경시키는 버튼이 각각 두개였고 이 버튼들은 각기 다른 자식 컴포넌트에 들어있었습니다. 그리고 이 컴포넌트들에 도달하기 위해서는 여러 단계의 prop drilling 이 일어나야 했습니다. 이 문제를 해결하기 위해 부모 컴포넌트에서 이벤트와 관련된 함수들과 상태들을 정의하여 컨트롤러 역할을 하도록 두고, 자식 컴포넌트에서 해당 함수와 상태들을 받아 뷰의 역할을 하도록 설계했습니다. - 타입스크립트를 활용한 경험에 대해 좀 더 말씀해주시겠어요? 특히, 타입스크립트를 도입함으로써 얻은 이점과 함께 어떤 어려움을 겪었고 이를 어떻게 극복했는지에 대해 듣고 싶습니다.
타입스크립트를 적용함으로서 타입이 맞지 않아 오류가 발생하는 버그의 가능성을 낮출 수 있었습니다. 또한 타입 범위를 최대한 좁혀 자동완성이 되도록 하여 prop을 입력할때 어떤 값을 입력해야 하는지 다른 파일을 번거롭게 뒤져보지 않도록 만들어 생산성을 향상 시켰습니다. 다만 리액트에 타입스크립트를 도입하므로서 이해해야 하는 수많은 타입들이 생겼고 이는 하나하나 공부를 해나가고 있는 상황입니다. - "Domper"라는 DOM API helper Npm 라이브러리를 개발하신 것을 보았습니다. 이 라이브러리의 가장 중요한 기능은 무엇이고, 이를 개발하면서 가장 어려웠던 부분은 무엇인지 설명해주시겠어요?
이 라이브러리는 바닐라 자바스크립트의 DOM API를 손쉽게 다룰 수 있도록 돕는 라이브러리로, - 디자인 시스템을 추출해 보여주는 "SySpy" 크롬 익스텐션 개발 프로젝트에 대해 설명해주실 수 있나요? 그리고 이러한 툴을 만들면서 겪었던 가장 큰 도전이 무엇이었는.)
- 바닐라 자바스크립트만으로 컴포넌트와 상태 관리를 해본 경험에 대해 더 자세히 알려주실 수 있나요?
- 타입스크립트를 사용한 경험 중 어떤 부분이 가장 도전적이었나요? 타입스크립트를 도입함으로써 얻은 이점은 무엇인가요?
- 본인이 작성한 개인 프로젝트 중 하나인 'SySpy'에서 가장 도전적이었던 부분은 무엇인가요?
- Node.js를 이용하여 API를 직접 작성하신 경험에 대해 더 말씀해주실 수 있나요?
- 작업 중 가장 고민되었던 디자인 또는 개발 문제는 무엇이었고, 어떻게 해결하셨나요?
- HTML과 CSS에 대한 깊은 이해를 바탕으로 웹 접근성이나 사용자 경험을 개선한 경험에 대해 알려주세요.
HTML - MongoDB를 사용하여 데이터 모델링을 구현한 경험에 대해 설명해주실 수 있나요?
그 프로젝트에서 필요한 테이블이 무엇인지 고민하여 ERD 를 작성하였고, 그 ERD에 맞게 GET API, POST API를 작성을 한 적이 있습니다. - 칼데아에서 특히 자신이 개발에 참여한 'Label 추가, 삭제, 수정 기능'에 대해 더 자세히 설명해주실 수 있나요? 해당 기능을 개발하면서 어떤 과정을 거치셨는지, 또 어떤 어려움을 겪었는지 알려주실 수 있나요?
- 기간을 선택하는 Dialog를 바닐라 자바스크립트로 개발하고 라이브러리로 배포한 경험에 대해 더 자세히 알려주세요. 이를 통해 어떤 것을 배우셨나요?
- 현재 컴퓨터공학과에 재학 중이신 것으로 보이는데, 학부 과정에서 배우는 내용이 프론트엔드 개발에 어떻게 도움이 되고 있나요?
- 본인이 평소에 가장 많이 사용하는 개발 툴이나 기술 스택은 무엇인가요? 이를 선호하는 이유가 있다면 그 이유는 무엇인가요?
- 마지막으로, 앞으로의 개발자로서의 목표나 꿈이 무엇인지 알려주세요.
https://zero-base.co.kr/event/media_insight_contents_FE_frontend_tech_Interview
