8. Async/Await와 Promise의 차이에 대해 설명해주세요.
Async는 Await 함수가 들어가는 비동기의 기본 같은 그런 느낌
Promise는 비동기 함수가 리턴하는 프로미스 객체.
콜백 헬(callback hell) Async/await 코드 스타일에 이점
9. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
대량의 데이터를 처리하면서 무한 스크롤을 구현하는 것 말씀이시죠? 몰르갓습니당~!
데이터 조회 방식 구현하는 방법이나 구현 시, 사용할 라이브러리를 예시 들기
10. Javascript의 호이스팅에 대해 설명해주세요.
전체 코드 내에서 변수 선언부의 위치와 상관 없이,
코드 실행 시 (런타임) 선언이 최상단으로 끌어올려지는 현상.
이로 인해 첫번째 줄부터 변수를 참조할 수 있다.
var 사용 시 호이스팅이 명확히 보이고,
let과 const는 호이스팅 없이 동작하는 듯하나 실제로는 이루어진다.
➡️ 런타임 이전에 선언이 끌어올려짐!
💡변수 선언의 실행 시점과 변수 호이스팅
-
변수 호이스팅(variable hoisting) : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.
-
변수 선언뿐 아니라 var, let, const, function*, class 키워드로 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.
모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문.
🖥️ console.log(score); //undefined
var score; // 변수 선언문위 예제에서는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score)가 가장 먼저 실행되고 다음 줄 코드를 실행한다. 따라서 console.log(score)의 실행 시점에는 score 변수의 선언이 실행되지 않았으므로 참조 에러가 발생할 것처럼 보인다. 하지만 참조 에러 발생 대신 undefined가 출력된다.
그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드 실행을 위한 준비를 한다. 이때 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다. 그리고 소스코드의 평가과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
즉, 변수 선언은 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행된다. 따라서 변수를 참조할 수 있다.
위 예제에서 undefined가 출력되는 것은 변수 선언(선언 단계와 초기화 단계)이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 증거다.
💡var 키워드 변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 이는 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않을 뿐더러 가독성을 떨어뜨리고 오류 발생의 여지를 남긴다.
💡let 키워드 변수 호이스팅
var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
console.log(foo); //ReferenceError: foo is not defined
let foo;위처럼 참조 에러(Reference Error)가 발생한다.
-
var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화 단계"가 한번에 진행된다. 즉, 선언 단계에서 스코프(실행 컨텍스트의 렉시컬 환경)에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 따라서 선언문 이전에 변수에 접근해도, 스코프에 변수가 존재하여 에러가 발생하지 않고 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다.
-
let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만, 초기화 단계는 변수 선언문에 도달했을 때 실행된다.
만약 초기화 단계가 실행되기 전에 변수에 접근하려고 하면 참조 에러가 발생한다. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지
변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone, TDZ)를 가진다.
// 런타임 이전에 선언 단계가 실행. 아직 변수 초기화되지 않았다.
// 초기화 이전의 일시적 사각지대에서는 변수 참조 불가능
console.log(foo); // ReferenceError: foo is not defined
let foo; // 변수 선언문에서 초기화 단계 실행.
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계 실행
console.log(foo); // 1let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 거서럼 보인다. 하지만 그렇지 않다.
(1) let foo = 1; (1) // 전역 변수
{
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
(2) let foo = 2; // 지역 변수
}let 키워드로 변수 선언 시 호이스팅이 발생하지 않는다면,
위 예제는 전역 변수 foo의 값을 출력해야 한다. 하지만 호이스팅 발생으로 참조 에러가 발생한다.
선언과 초기화가 따로 이루어지고, 아래 순서라고 이해했다.
1. let foo 선언문 실행(1)
2. let foo 선언문 실행(2)
3. 런타임에서 foo = 1
4. console.log(foo)
5. foo = 2
➡️ 자바스크립트는 ES6에서 도입된 let, const를 포함해 모든 선언을 호이스팅한다. 단, ES6에서 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다.
❓ 이 부분의 예시가 필요하당...
( 출처 : 모던 자바스크립트 Deep Dive, 이웅모, 위키북스)
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 컴파일 단계에서 상단으로 옮겨지는 현상을 가리킵니다. 이것은 코드 실행 단계에서 일어나는 것이 아니라, JavaScript 엔진이 스크립트를 해석하기 전에 발생하는 것입니다.
변수와 함수 선언은 선언 단계와 초기화 단계로 나뉩니다. 호이스팅은 선언 단계에서 변수나 함수를 상단으로 옮겨지는 것을 의미하며, 초기화 단계는 코드의 위치에 따라 발생합니다.
실행 컨텍스트 변수 함수선언부가 '끌어올려짐'
11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
- 동기 : 코드가 쓰여진 순서대로 실행
- 비동기 : 처리 속도에 따라 작업이 완료되도록 실행
먼저 쓰인 코드가 무겁고 느릴 경우 나중에 오는 코드들은 무작정 대기해야 하는 비효율 발생.
동기는 작업을 순차적으로 진행하며,각 작업은 이전 작업의 완료를 기다리고,한 작업이 시작하면 그 작업이 완료될 때까지 다음 작업이 차단되어 대기합니다.
비동기는 비동기적인 작업이 완료되기를 기다리지 않고, 다른 작업을 동시에 진행할 수 있고 특정 이벤트의 발생,콜백 함수의 실행,또는 Promise와 같은 비동기 패턴을 통해 처리됩니다.
비동기 프로그래밍은 성능 향상,반응성 향상, 효율성,스케일링과 확장성을 위해서 필요합니다.
12. 브라우저의 작동방식에 대해서 설명해주세요.
HTML 읽고 뭐 파싱하고 막 그런 거 질문인가요..?
사용자가 URL을 입력하거나 링크를 클릭하면,브라우저는 해당URL로 요청을 보냅니다.
13. GET, POST 방식의 차이점에 대해서 설명해주세요.
음?
GET:데이터는 URL에 포함되어 전송되고,URL을 통해 전송되므로 보안에 취약합니다.
POST:데이터는 HTTP 요청의 본문(body)에 포함되어 전송되고,데이터가 본문에 포함되어 전송되므로, URL에 노출되지 않습니다.
14. GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.
오?
GET: 주로 데이터를 조회하고, 요청 파라미터를 URL에 포함시켜 전송합니다.
사용자가 브라우저에서 URL을 입력하거나, 링크를 클릭하면 GET 요청이 생성됩니다.
POST: 클라이언트에서 서버로 데이터를 전송할 때 사용되는 HTTP 메서드입니다.
HTML 폼의 Submit 버튼을 누르거나, JavaScript를 사용하여 POST 요청을 생성합니다.
