HTML
- <script> 와 <script async>, <script defer> 의 차이점?
script는 HTML 파싱을 중단으로 해당 스크립트를 바로 실행한 후에 HTML 파싱을 재개합니다.
script async는 HTML 파싱과 병렬적으로 실행되지만 HTML 파싱 중에 실행할 준비가 되면 바로 실행을 합니다.
script defer는 마찬가지로 HTML 파싱과 병렬적으로 실행되지만 HTML 파싱이 완료된 후에 스크립트가 실행됩니다.
JavaScript
- 스코프에 대해 설명하세요.
스코프란 변수가 유효할 수 있는 범위로, 중괄호로 감싸진 영역을 의미합니다. 전역 스코프, 함수 (지역) 스코프, 블록 스코프가 존재합니다. 우선 순위는 블록 스코프 > 함수 스코프 > 전역 스코프 순입니다.
- 클로저에 대해 설명하세요.
클로저란 변수가 선언 됐을 때 렉시컬 스코프를 기억하여 스코프 밖에서 호출되어도 렉시컬 스코프에 접근할 수 있는 것으로 쉽게 말하면 함수의 내부에서 외부로 접근할 수 있는 것을 의미합니다.
꼬리) 렉시컬 스코프란?
렉시컬 스코프는 함수를 선언할 때 결정되며 함수를 어디서 선언했는지에 따라 스코프가 결정되는 것을 말합니다.
- 클로저의 사용 예제에 대해 말해주세요.
클로저는 외부 함수가 끝나더라도 접근이 가능해 현재 상태를 보존할 수 있고, 정보를 캡슐화 할 수 있으며 클로저 함수를 여러 변수에 담아 모듈화도 가능합니다.
- 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.
변수 선언은 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알리는 것이고 초기화는 값을 저장하기 위해 암묵적으로 undefined를 할당해 초기화 하는 것입니다. 마짐가으로 할당 단계에서는 undefined로 초기화된 메모리에 다른 값을 넣는 것입니다.
- 순수함수란?
순수함수란 동일한 입력에 동일한 값을 반환하며 실행 후에도 외부 상태의 변화시키지 않는 함수입니다.
- 이벤트 루프에 대해 설명해주세요.
이벤트 루프는 싱글 스레드로 동작하는 자바스크립트의 동작 방식을 관리하는 메커니즘 입니다. 콜 스택과 콜백 큐의 상태를 체크하며 콜 스택이 비었을 때 콜백 큐의 첫번째 함수를 콜 스택에 옮기는 역할을 합니다. 이러한 과정을 루프라고 합니다. 콜백 큐는 태스크큐와 마이크로 큐로 구성되어 있고 마이크로 큐에는 promise, async/await, mutationObserver가 들어가고 태스크 큐에는 web API로 부터 들어온 타이머 함수와 UI 렌더링 작업들이 들어옵니다. 우선 순위는 마이크로 큐가 더 우선 됩니다.
- callBack, promise, async/await의 특징과 차이점에 대해 이야기 해보세요.
callBack은 비동기 작업의 완료 후 호출되는 작업을 의미하며 다중으로 사용시 콜백 헬이 발생해 가독성이 낮아질 수 있습니다. Promise도 비동기처리에 관여하며 작업은 실행되었지만 결과가 아직 반환되지 않은 것으로 resolve, reject메서드를 통해 결과를 반환합니다. 즉, 비동기 작업의 상태와 결과를 다루는 객체입니다. 또한 3가지 상태 pending, fulfilled, reject가 있습니다. 마지막으로 async/await은 promise를 기반으로하여 비동기 코드를 동기 코드로 표현하는 문법적인 개념입니다.
- Blocking과 Non Blocking의 차이
Blocking은 함수가 자신의 할 일을 마칠 때까지 제어권을 갖고 있어 호출된 함수들을 대기하도록 하는 것이고 Non Blocking은 함수가 할 일을 마치지 않더라도 제어권을 내주어 다른 함수가 종료 되지 않은 상태에서도 작업을 하는 것을 말합니다.
- 동기와 비동기의 차이
동기 작업은 서버로부터 응답을 받았을 때 다른 작업을 실행하는 것이고 비동기는 응답을 받지 않더라도 동시에 여러 작업들을 수행하는 것을 말합니다.
- Node.js 싱글 스레드인가요?
Node.js는 싱글 스레드가 아닙니다. 싱글스레드는 자바스크립트 엔진을 의미하며 Node.js는 멀티스레드로 동작합니다.
- 자바스크립트 엔진이 코드를 실행하는 과정
소스코드를 만나면 AST (추상 문법 트리)로 변환
인터프리터가 AST를 기반으로 바이트 코드 생성하여 프로파일링 데이터와 함께 최적화 컴파일러에게 보냄
최적화 컴파일러는 프로파일링 데이터를 기반으로 최적화 코드 생성
프로파일링 데이터 중 잘못된 부분이 있다면 최적화를 해체 하고 다시 바이트 코드 생성
- this란?
this는 현재 실행중인 함수의 실행 컨텍스트를 가리키는 자기 참조 변수입니다. this는 호출시에 결정되며 정적이거나 동적으로 결정될 수 있습니다. 정적인 경우는 화살표함수를 예로 들 수 있고 화살표 함수는 자신의 상위 함수의 스코프에 따라 결정 됩니다. 이러한 this를 렉시컬 this라고 합니다. 전역 상태에서 this는 window를 의미하고 엄격 모드에서는 undefined를 의미합니다.
- 객체 지향 프로그래밍이란?
객체 지향 프로그래밍이란 OOP 이라고 불리며 여러 객체들간의 상호작용으로 하나의 프로그램을 만드는 것입니다.
- 프로토타입 체이닝이 무엇인가요?
프로토 타입 체이닝은 기존에 존재하는 객체를 기반으로 새로운 객체를 생성할 때 사용 됩니다. 프로퍼티에 접근하려고 할 때 프로퍼티가 없다면 프로토 함수를 상위 객체를 계속해서 찾는 것입니다.
- IIFE가 무엇인가요?
IIFE이란 즉시 실행함수를 의미합니다. 익명으로도 기명으로도 사용할 수 있으며 단 한번만 호출되고 다시 사용할 수 없는 특징이 있습니다
- setTimeout에서 this는 왜 전역을 가리키나요?
setTimeout는 비동기적으로 동작하고 콜백함수가 실행될 때 전역스코프에서 실행 컨텍스트가 형성되었기 때문입니다. this를 설정하기 위해서는 this설정이 필요한 곳을 함수로 감싸주거나 화살표함수를 사용하거나 bind를 활용해서 this를 지정해주면 됩니다.
- 스택과 힙에 차이에 대해 설명해주세요.
콜 스택은 원시타입인 숫자, 문자와 같은 매개변수, 지역변수가 저장되고 힙은 참조 타입으로 배열, 객체, 함수등의 데이터가 저장됩니다.
- socket에 대해 알려주세요.
소켓은 네트워크 상에서 프로세스 간의 통신을 가능하게 하는 엔드 포인트 입니다. 소켓은 클라이언트와 서버간의 양방향 통신을 의미하며. TCP/IP 기반의 네트워크에서 사용됩니다.
React
- React의 설명과 컴포넌트란?
React는 UI 관련 라이브러리로 가상 돔을 구현하여 실제 돔과 비교 후 차이가 존재하는 부분만 실제 돔에 반영해 웹의 사용성과 속도를 향상 시킬 수 있다는 특징이 있습니다. 컴포넌트란 레고 블록처럼 작은 단위로 만들어져 그것을 조립하는 것처럼 개발하는 방법입니다. 캡슐화, 확장성, 재사용성, 결합성 같은 이점이 있습니다.
- state는 직접 변경하지 않고 setState를 활용하는 이유?
state는 불변성을 유지해야 하기 때문입니다. 컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 재랜더링 되는데, 불변성을 유지하지 않으면 react가 재렌더링을 해야할 때를 알지 못하기에 불변성을 유지해야 합니다.
- 클래스 컴포넌트와 함수 컴포넌트의 차이점?
클래스 컴포넌트는 render함수를 사용하여 jsx를 반환하며 생명주기를 가집니다. 함수 컴포넌트는 단순히 jsx를 반환하며 useEffect를 통한 생명주기를 나타냅니다.
- CORS 해결법
proxy 설정, cors 모듈사용, 응답 헤더 셋팅
- Node.js
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경입니다
비동기 이벤트 기반의 non blocking i/o 의 특징이 있습니다.
AWS EC2
아마존 웹 서비스 엘라스틱 컴퓨트 클라우트 EC2 인스턴스는 가상 서버
Front-end 개발은 사용자가 웹 애플리케이션 또는 웹사이트와 상호작용하는 부분을 개발하는 것을 의미 웹 애플리케이션의 성능과 사용자 경험을 중시하며 클라이언트와 직접적으로 소통하는 것
