기술면접

이 블로그 참고 많이 했습니다 감사합니다 ㅠㅜㅠㅜ https://velog.io/@wkahd01/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EB%AC%B8%EC%A0%9C-%EC%9D%80%ED%96%89-HTML-%EC%A7%88%EB%AC%B8-%EB%8B%B5%EB%B3%80

https://beomy.github.io/tech/javascript/javascript-runtime/

자바스크립트란?

• 자바스크립트는 싱글 스레드, 논 블로킹 언어입니다.

싱글 스레드

• 하나의 힙 영역과 하나의 콜스택을 가집니다. 한번에 한가지 일밖에 하지 못합니다.

콜스택

• 함수가 실행되는 순서를 기억합니다. 함수를 실행하려면 스택의 가장 위에 해당함수를 넣게 되고, 함수에서 리턴이 일어나면 스택의 가장 위쪽 함수에서 함수를 꺼냅니다.

블로킹

• 싱글 스레드는 스택이 하나밖에 없기 때문에 한가지 일만 할 수 있습니다. 웹 브라우자에서 코드가 실행되는데 코드가 종료될 때까지 유저가 클릭해도 어떤 반응을 하지 않는 상태가 됩니다. 콜 스택이 멈춘 상태를 블로킹 상태라고 합니다.

논 블로킹

• 비동기 콜백으로 블로킹 문제를 해결합니다. 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행합니다.

비동기

• 특정 코드의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것입니다. 대표적으로 promise, async/await이 있습니다.

브라우저 렌더링 과정

1. 서버에 HTML, CSS 파일을 요청 후 응답으로 받음
2. DOM, CSSOM 생성
3. DOM과 CSSOM을 합쳐서 렌더트리 생성
4. 각 요소의 위치나 크기를 계산 후 계산한 요소들을 paint한다.

호이스팅

• 모든 선언이 코드의 선두로 끌어 올려진 것

클로저

• 부모 함수 내의 자식 함수에서 부모 함수에 선언된 변수에 접근이 가능하게 해주고 외부에서 함수 내의 변수에 조작을 하지 못하게 은닉하는 것

REST API

• 클라이언트가 서버로 데이터를 요청할 때 브라우저 주소처럼 작성된 루트로 HTTP 메서드를 활용해 CRUD를 요청하고 HTTP 응답코드를 사용해 서버의 상태를 나타내는 것

RESTful

• REST API를 제공하는 우베 서비스를 RESTful 이라고 한다.

SPA

• 최초 한번 페이지 전체를 로딩한 후 데이터만 변경해서 사용(하나의 페이지에서 실행됨)

CSR

• 사용자가 접속하면 서버는 빈 HTML 파일에 어떤 자바 스크립트 파일이 필요한지 적어서 보낸다.
• 클라이언트는 HTML을 받아 자바스크립트를 다운 받고 렌더링을 한다.
• 최초 로드 시 필요한 파일을 전부 받고 사용자의 필요에 따라 클라이언트 단에서 받아와 렌더링 하는 방식

  장점 : 렌더링 속도가 빠름
  단점 : 초반 뼈대만 다운 받기 때문에 SEO에 취약, 초기 렌더링 속도가 느리다

SSR

• 사용자가 접속하면 웹 어플리케이션은 서버로 요청을 보내고 서버는 HTML, CSS, JS 렌더링을 마친 후 클라이언트로 보내준다.

• 새로 고침이 일어날때마다 새로운 페이지에 대한 요청을 하는 방식

• SEO 측면에서 유리하다.

  장점 : 초기 렌더링 속도가 빠르다, SEO에 최적화
  단점 : 매 렌더링마다 서버를 거침, 속도가 느림

쿠키, 세션, 로컬

• 쿠키 : 크기가 매우 작고 보안에 취약
• 세션 : 브라우저가 유지 되는 동안 데이터를 보관, 브라우저 닫으면 데이터 소멸 -> 장바구니 데이터
• 로컬 : 데이터를 저장하면 영구적으로 저장. -> 자동 로그인 데이터

이벤트 전파

• 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM트리를 통해 전파

이벤트 버블링

• 이벤트가 하위요소에서 상위요소로 전파

이벤트 캡쳐링

• 이벤트가 상위요소에서 상위요소로 전파

이벤트 위임

• 부모 요소에 이벤트를 부여해 버블링을 통해 하위 요소를 동작시킬대 해당 이벤트를 발생시킬 수 있다.

타입스크립트

• 정적 타입을 명시하여 타입 관련 오류를 미리 잡아낼 수 있다.
• 코드에 목적을 명시하고 목적에 맞지 않은 타입의 변수나 함수들에서 에러를 발생시켜 에러를 사전에 제거할 수 있다.
• 뒷 단계에서 버그를 발견했을 때 처리 비용이 기하 급수적으로 늘어남

실행 컨텍스트

1. 전역 실행 컨텍스트 생성/소스코드 실행

• var로 선언한 전역 변수는 객체 환경 레코드에 저장됨.
• const, let으로 선언한 전역 변수는 선언적 환경 레코드에 저장됨.

2. edit 함수 실행 컨텍스트 생성/소스코드 실행

• 전역 환경 레코드와 달리 함수 환경 레코드는 분리되지 않고, 한 장소에서 var,const,let 모두를 처리한다.

HTTP

• 웹에서 정보를 주고 받기 위한 프로토콜

HTTPS

• 보안되지 않은 HTTP를 보완하기 위해 등장, 암호화하여 민감한 정보를 보호하는 보안 프로토콜

디바운스

• 일정 시간안에 같은 요청이 여러번 반복되면 그룹화해서 일정 시간 지난 후 한번만 호출

쓰로틀링

• 마지막 함수가 호출된 후 일정시간이 지난 후 다시 호출