호이스팅(hoisting)이란?
자바스크립트에서 선언된 변수, 함수들 모두 끌어올려 유효 범위 내의 최상단에 선언하는 것
함수 호이스팅이 발생하는 원인 : 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문
클라이언트 사이드 렌더링과 서버 사이드 렌더링
서버 사이드 렌더링 : 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공
클라이언트 사이드 렌더링 : 서버에서 HTML 파일을 처리하지 않고, 클라이언트인 브라우저가 렌더링을 처리하는 방식
JS를 body 맨 밑에 둬야 하는 이유
자바스크립트 코드를 body 태그 맨 뒤에 선언하게 되면, 무거운 코드가 있다고 하더라도 html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성된 화면이 오랫동안 지속되지 않음.
JS를 head에 둬야 하는 경우?
1. 문서를 초기화하거나 설정하는 가벼운 스크립트
2. DOM 구조에 필요한 스크립트 document.onload와 같은 로드 이벤트
스코프란?
변수에 접근할 수 있는 범위
전역 변수(global variables) : 어디에서든 사용할 수 있는 변수
지역 변수(local variables) : 함수 스코프에서만 사용할 수 있는 변수
함수 스코프란?
함수 내에서만 유요한 범위를 갖게 하는 스코프로 함수에서 선언한 변수들은 해당 함수 내에서만 접근할 수 있다. (자바스크립트는 함수 스코프를 따르는 언어)
블록 스코프란?
블록 단위 (if-else 문, while문, for문, try-catch문) 내에서만 유효한 범위를 갖게 하는 스코프
자바스크립트는 원래 함수 스코프를 따르지만, let과 const의 등장 이후로 블록 스코프 형성도 가능해졌다.
컨텍스트(context)란?
자바스크립트에서는 코드가 실행될 때마다 실행 컨텍스트(Execution Context)를 생성하며, 각 실행 컨텍스트는 해당 코드의 환경 정보를 포함한다. 이 환경 정보에는 현재 실행 중인 함수, 변수 및 해당 함수와 변수가 속한 객체 등이 포함된다.
함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되며, 이 실행 컨텍스트는 해당 함수 내의 변수, 매개변수, 내부 함수 등에 대한 정보를 포함한다. 실행 컨텍스트는 스택(Stack) 자료구조로 관리되며, 가장 최근에 생성된 실행 컨텍스트가 스택의 가장 위에 위치하게 된다.
따라서 자바스크립트에서 컨텍스트는 현재 실행 중인 코드의 환경 정보를 제공하며, 변수와 함수의 범위를 결정하는 중요한 역할을 한다.
이벤트 전파란?
이벤트 버블링 : 하위 엘리먼트에서 상위 엘리먼트로 이벤트가 전파되는 특성
이벤트 캡처링 : 상위 엘리먼트에서 하위 엘리먼트로 이벤트가 전파되는 특성
event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막음
이벤트 위임이란?
이벤트 리스너를 부모 요소(element)에 붙이는 것으로 하위 요소에 이벤트가 발생하면 이벤트 버블링 때문에 부모 요소에 연결된 리스너가 실행된다.
이벤트 위임의 장점은?
이벤트가 발생하는 모든 요소마다 리스너를 추가할 필요가 없고 부모에 하나만 추가하면 되기 때문에 사용하는 메모리의 양이 감소하며 이벤트 발생하는 요소가 추가되고 제거될 때마다 리스너를 추가하고 제거할 필요가 없음.
inline vs inline block 차이점?
- inline은 text크기 만큼만 공간을 점유하고 줄 바꿈을 하지 않음.
- inline-block은 inline속성과 block속성의 특징을 둘 다 가지고 있어 width, height ,line-height을 적용할 수 있다.
모듈이란?
코드를 별도의 파일로 분리하여 작성하고 관리할 수 있도록 해주는 개념이다.
모듈을 사용하면 코드를 기능별로 분리하고, 재사용성을 높이며, 유지보수를 용이하게 할 수 있다.
모듈은 다른 모듈에서 사용될 수 있는 변수, 함수, 클래스 등의 기능을 제공하며, 내보내기(export)와 가져오기(import)를 통해 모듈 간의 기능 공유가 이루어진다.
DOM에서 id와 Class의 차이
둘 다 HTML 요소를 식별하고 선택하는 방법이지만 id는 문서전체에서 유일한 값, class는 여러 요소가 중복으로 가질 수 있는 값이다.
메서드 체이닝이란?
객체의 메서드를 여러 개 연이어 호출하여 사용하는 방식으로 가독성을 높이고, 코드의 길이를 짧게 유지할 수 있으며, 객체의 속성과 메서드를 연이어 사용하여 코드를 작성할 때 유용하다.
하지만 단점으로 디버깅이 복잡해 질 수 있다.
SPA(Single Page Application)란?
브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
DOCTYPE 이란?
HTML 문서의 버전 및 유형을 지정하는 선언문. 이 선언문은 HTML 문서의 맨 처음에 위치해야 하며, 웹 브라우저가 문서를 올바르게 해석할 수 있도록 도와준다. HTML 문서의 버전과 유형을 지정해주지 않으면 웹 브라우저가 문서를 해석하는 데 문제가 발생할 수 있다.
- Doctype 무선언 -> 쿼크 모드로 렌더링 -> 브라우저마다 다른 결과물 출력
- Doctype 선언 -> 표준 모드로 렌더링 -> 브라우저 별로 같은 레이아웃으로 결과물 출력
쿼크 모드 : 오래된 웹 페이지의 하위 호환성 유지를 위해 사용되며, W3C나 IETF의 표준을 엄격하게 준수하지 않는다. 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.
Same-Origin Policy(동일 출처 정책)
웹 브라우저에서 실행되는 스크립트나 앱이 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근을 제한하는 보안 정책으로 이는 사용자의 개인정보를 보호하고, 악성 스크립트를 통한 공격을 방지하기 위해 필요한 정책이다.
웹사이트의 전역 scope를 건드리지 않고 그대로 두는 것이 좋은 이유?
1. 네임스페이스 충돌 방지
전역 스코프에 변수나 함수를 정의하면 다른 코드에서 같은 이름을 사용할 가능성이 있다. 이로 인해 예상치 못한 충돌이 발생할 수 있다. 따라서 전역 스코프를 건드리지 않고 모듈화하여 사용하면 각 모듈이 자신의 스코프에서 독립적으로 작동하게 되어, 충돌을 방지할 수 있다.
2. 유지보수 용이성
전역 스코프에 정의된 변수나 함수를 수정하면, 그것이 웹 사이트 전체에 영향을 미친다. 이는 웹 사이트가 복잡해질수록 유지보수를 어렵게 만든다. 반면에, 모듈화하여 사용하면 각 모듈의 독립성이 보장되기 때문에 수정이 필요한 모듈만 수정하면 된다.
3. 코드 가독성 향상
전역 스코프에 많은 변수나 함수가 정의되면 코드가 복잡해지고 가독성이 떨어진다.
모듈화하여 사용하면 각 모듈이 자신의 스코프에서 작동하기 때문에 코드의 가독성을 향상시킬 수 있다.
Webpack이란?
html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것
그럼 Webpack을 왜 사용해야 할까?
옛날에는 페이지마다 새로운 html을 요청해서 뿌려 주는 방식이었다면, 요새는 SPA 하나의 html 페이지에 여러 개의 자바스크립트 파일들이 포함한다. 파일을 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해줌.
DNS
IP 네트워크에서 사용하는 시스템으로 사람이 읽을 수 있는 도메인 이름(www.amazon.com)을 컴퓨터가 읽을 수 있는 IP 주소(192.0.2.44)로 변환한다. 이 DNS를 운영하는 서버를 네임서버(Name Server)라고 한다.
REST API
REST 기반으로 서비스 API를 구현한 것
최근 OpenAPI(누구나 사용할 수 있도록 공개된 API: 구글 맵, 공공 데이터 등), 마이크로 서비스(하나의 큰 애플리케이션을 여러 개의 작은 애플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 업체 대부분은 REST API를 제공한다.
1) API (Application Programming Interface)
데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로의 정보를 교환가능 하도록 하는 것
2) REST
- 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.
- HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것
JWT
Json 웹 토큰으로 인증 및 권한 부여 목적으로 사용되는 일종의 토큰이다.
JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성된다.
- 헤더 : 서명을 생성하는데 사용되는 토큰 유형 및 해싱 알고리즘에 대한 정보가 포함
- 페이로드 : 토큰이 전달하는 클레임 또는 데이터가 포함
- 서명 : 전송 중에 토큰이 변조되지 않았는지 확인하는데 사용
JWT는 독립형으로 설계되었으며 세션 데이터의 서버 측 스토리지가 필요하지 않으므로 분산 시스템에서 보다 확장 가능하고 사용하기 쉽다.
쿠키
브라우저에서 저장되는 키와 같이 들어있는 작은 파일로 브라우저 상태 정보를 로컬에 저장했다가 참조한다. 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시 Request Header를 넣어서 자동으로 서버에 전송한다.
- 브라우저에 300개까지 쿠키 저장 가능
- 하나의 도메인당 20개 값만 가질 수 있다.
- 하나의 쿠키값은 4KB까지 저장 가능
세션
사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다. 데이터를 서버에 두기 때문에 쿠키보다 보안이 좋으나 사용자가 많아질수록 서버 메모리를 많이 차지한다.
서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다.
접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.
웹스토리지
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소로 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있으며, 같은 Storage 객체를 상속하기 때문에 메서드가 동일하다.
- 간단한 Key-Value 스토리지 형태
- 오리진(도메인,프로토콜,포트) 단위로 접근이 제한되는 특성 덕분에 CSRF로 부터 안전
- 쿠키보다 큰 저장 용량 지원
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음 (JavaScript 내에서만 수행)
- string 데이터 타입만 지원
1) 로컬 스토리지
- 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있다. (단, 동일한 브라우저를 사용할 때만 해당)
- 지속적으로 필요한 데이터 저장(자동 로그인 등)
2) 세션스토리지
- 윈도우나 브라우저 탭을 닫을 경우 데이터가 제거되기 때문에 일시적으로 필요한 데이터 저장 (일회성 로그인 정보, 입력폼 저장 등)
이벤트 제어 방식
1) 디바운스 (Debounce)
연이어 호출되는 함수들 중 마지막 함수(또는 처음)만 호출하도록 하는 것
활용예시 : 검색 시
2) 쓰로틀링 (Throttle)
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
활용예시 : 스크롤 시
