1. Function 키워드로 사용하는 일반 함수와 화살표 함수의 차이점을 설명해주세요.
일반 함수 : 함수 선언식, 함수 표현식으로 정의된 함수
화살표 함수 : () ⇒ {}으로 정의된 함수1. this
일반 함수 내의 this는 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체를 동적으로 결정합니다. 하지만 화살표 함수내의 this는 항상 상위 스코프의 this를 가리킵니다.
2. 생성자 함수로 사용 가능 여부
일반 함수는 생성자 함수로 사용할 수 있습니다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문에 생성자 함수로 사용할 수 없습니다.
3. arguments 사용 가능 여부
일반 함수는 암묵적으로 arguments 객체가 전달되어 사용 가능하지만 화살표 함수는 arguments 객체가 전달되지 않아 사용할 수 없습니다.
2. React.memo의 특징에 대해서 설명해주세요.
React.memo는 컴포넌트의 최적화를 돕는 고차 함수입니다.
컴포넌트를 랜더링한 후, 그 결과를 메모이징합니다. 만약컴포넌트가 동일한 props로 렌더링된다면 메모이징된 결과를 사용합니다. 따라서 React.memo를 통해 불필요한 리렌더링을 방지할 수 있습니다.
3. type과 interface의 차이점을 설명해주세요.
1. 상속 방법
interface는 extends 키워드로 상속하고 type은 & 기호로 상속합니다.
2. 선언적 확장
interface는 가능하고 이름이 같은 interface이면 자동으로 확장됩니다. 하지만 type은 불가능합니다.
3. 자료형
interface는 객체의 타입을 설정할 때 사용하고 원시 자료형에는 사용할 수 없습니다.
type은 원시값, 튜플, 유니온 타입을 선언할 때 사용하고 객체 타입 정의에도 사용은 가능합니다.
언제 어떤 걸 사용하는 것이 적합할까?
type은 모든 타입을 선언할 때 사용할 수 있고 확장 불가능한 타입을 선언하고 싶다면 type을 사용합니다.
interface는 객체에 대한 타입을 선언할 때만 사용 가능하고 확장 가능한 타입을 선언하고 싶다면 interface를 사용합니다.
4. 브라우저의 렌더링 과정에 대해서 설명해주세요.
-
브라우저가 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
-
브라우저의 렌더링 엔진이 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더링 트리 생성합니다.
-
자바스크립트 엔진이 JS를 파싱하여 추상적 구문 트리(AST)를 생성하고 바이트 코드로 변환하여 실행합니다. 이때 DOM과 CSSOM가 DOM API에 의해 변경될 수 있고 변경된 DOM과 CSSOM은 다시 렌더링 트리로 결합합니다.
-
렌더링 트리를 기반으로 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅합니다.
5. 제네레이터에 대해 설명해주세요.
제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다.
function* 키워드로 선언하고 하나 이상의 yield 표현식을 포함해야 합니다.
next() 를 호출하여 일시 정지된 함수를 다시 실행할 수 있습니다.
대량 데이터를 처리해야 하는 상황에서 유용합니다.
6. 이벤트 루프에 대해서 설명해주세요.
[JavaScript] 이벤트 루프(Event Loop)란?
이벤트 루프는 call statck과 callback queue의 상태를 체크하여 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 합니다.
Call Stack
실행 컨텍스트 스택, 함수를 호출하면 해당 스택에 쌓이고 함수 결과 값을 반환하면 스택에서 제거됩니다. top은 현재 실행 중인 함수의 실행 컨텍스트
Callback Queue
비동기적으로 실행된 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
7. 함수형 프로그래밍은 무엇이고 OOP와 어떤 차이점이 있는지 설명해주세요.
함수형 프로그래밍이란 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임입니다.
순수 함수
같은 입력에 대해 같은 출력 반환하는 함수, 사이드 이펙트가 없는 함수
함수헝 프로그래밍은 순수 함수를 통해 사이트이펙트를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 한 방법입니다.
OOP와의 차이점
OOP는 객체 안에 상태를 저장하고 메소드를 추가하여 상태를 제어하지만 함수형 프로그래밍은 상태를 저장하지 않고 없애는데 주력합니다.
8. 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.
-
webpack 같은 번들러를 사용해 여러 개의 파일을 하나의 파일로 만들어서 네트워크 요청의 횟수를 줄입니다.
-
css, js 파일을 minify(코드 경량화)해서 파일 크기를 줄입니다.
9. REST API에 대해 설명해주세요.
REST란 Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 것을 말합니다.
HTTP URI를 통해 자원을 명시하고 HTTP Method를 통해 해당 자원에 대한 상태를 주고 받는 방식을 말합니다.
REST의 특징
1. 균등한 인터페이스 : HTTP의 표준을 따른다면 플랫폼이나 언어의 제약 X
2. 무상태성 : 서버가 클라이언트의 상황 고려 X
3. 캐싱 가능 : 컨텐츠의 변화가 없으면 캐시된 값을 사용
4. 자체 표현성
5. 클라이언트-서버 구조
6. 계층형 구조
10. CSS에서 margin과 padding에 대해서 설명해주세요.
margin은 바깥쪽 여백을 의미하고 padding은 안쪽 여백을 의미합니다.
