⭐️ Javascript의 호이스팅에 대해 설명해주세요.
JavaScript에서 호이스팅(Hoisting)이라는 용어는 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상을 의미합니다. 이 과정은 컴파일 단계에서 발생하며, 변수와 함수가 선언되기 전에 참조되어도 오류가 발생하지 않습니다. 호이스팅은 아래와 같이 구체화될 수 있습니다.
1. 변수 호이스팅 (Variable Hoisting):
var로 선언된 변수는 선언이 실행 컨텍스트의 변수 객체(Variable Object)에 추가되며, 그 변수는 선언된 코드 라인에 도달하기 전까지 undefined로 초기화됩니다.
예시:
console.log(a); // undefined
var a = 5;
console.log(a); // 5
위 코드는 컴파일 단계에서 아래와 같이 변환됩니다.
var a = undefined;
console.log(a); // undefined
a = 5;
console.log(a); // 5
2. 함수 호이스팅 (Function Hoisting):
함수 선언식은 전체 함수가 호이스팅되며, 함수 표현식은 변수 호이스팅과 동일하게 처리됩니다. 함수 선언식은 아래와 같이 작동합니다.
예시:
console.log(foo()); // "Hello!"
function foo() {
return "Hello!";
}
함수 표현식의 경우:
console.log(foo()); // TypeError: foo is not a function
var foo = function() {
return "Hello!";
};
함수 선언식은 선언 전에 호출할 수 있지만, 함수 표현식은 그렇지 않습니다.
3. let과 const의 호이스팅:
let과 const는 var와 달리 선언 전에 참조하려고 하면 참조 오류(ReferenceError)가 발생합니다. 이는 일시적 사각 영역(Temporal Dead Zone, TDZ) 때문에 발생하며, 호이스팅이 발생하더라도 값에 접근할 수 없는 상태를 나타냅니다.
4. 중복 선언의 문제:
함수 선언과 변수 선언이 같은 스코프 내에 있을 경우, 변수 선언이 함수 선언을 덮어쓸 수 있습니다.
함수와 변수의 선언 위치에 따라 예상치 못한 동작이 발생할 수 있으므로, 변수와 함수를 사용하기 전에 선언하는 것이 좋은 코딩 습관입니다.
포인트
변수 호이스팅 / 함수 호이스팅 으로 나누어 설명하고
let const var 의 호이스팅으로 이어져서 설명하고
마무리로 왜 var가 트렌드하지 못한지에 대해 설명할 것
면접에서 할 대답
JavaScript에서 호이스팅(Hoisting)이라는 용어는 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상을 의미합니다. 이 과정은 컴파일 단계에서 발생하며, 변수와 함수가 선언되기 전에 참조되어도 오류가 발생하지 않습니다.
함수에서는 선언식의 경우 전체 함수가 모두 호이스팅 되며 , 표현식으로 이뤄진 함수는 변수 호이스팅과 동일하게 처리가 됩니다.
변수에서는 var의 경우 선언이 실행컨텍스트의 변수객체에 추가되고 선언된 코드라인 도달전까지 undefined로 초기화 됩니다.
const와 let의 경우 선언전에 참조할 수 없습니다.
[참고링크]
⭐️ 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
동기(Synchronous)와 비동기(Asynchronous)의 차이
1. 동기(Synchronous) 프로그래밍:
동기 코드는 연산이 완료될 때까지 기다려야 하므로, 다음 코드 라인은 현재 연산이 완전히 완료된 후에만 실행됩니다.
각 연산이 순서대로 실행되므로 코드의 흐름을 이해하기 쉽고 예측 가능합니다.
단점은 특정 작업이 시간이 오래 걸리면 전체 시스템이 차단될 수 있다는 것입니다. 이러한 경우에는 시스템이 응답하지 않는 것처럼 보일 수 있습니다.
2. 비동기(Asynchronous) 프로그래밍:
비동기 코드는 현재 연산이 완료되지 않아도 다음 코드 라인을 실행할 수 있습니다.
I/O 작업, 네트워크 호출 등과 같은 시간이 많이 소요되는 작업을 수행할 때 특히 유용합니다.
비동기 코드는 복잡한 작업을 백그라운드에서 수행하고, 작업이 완료되면 콜백, 프로미스, async/await 등을 사용하여 결과를 처리할 수 있습니다.
비동기 프로그래밍의 필요성
비동기 프로그래밍의 필요성은 주로 다음과 같은 상황에서 나타납니다:
1. 성능 향상:
비동기 프로그래밍은 동시에 여러 작업을 수행할 수 있으므로, 하나의 작업이 완료되는 동안 다른 작업을 진행할 수 있습니다. 이로 인해 전체 작업의 처리 시간을 단축할 수 있으며 사용자 경험을 향상시킬 수 있습니다.
2. 응답성 향상:
긴 작업을 수행하는 동안 UI가 차단되지 않으므로, 사용자는 다른 작업을 계속 수행할 수 있습니다. 이는 특히 웹 및 모바일 애플리케이션에서 중요하며, 사용자와의 상호 작용을 유지하면서 백그라운드에서 복잡한 작업을 수행할 수 있습니다.
3. 자원 최적화:
비동기 프로그래밍을 사용하면 시스템 자원을 보다 효율적으로 사용할 수 있습니다. 예를 들어, 네트워크 요청을 기다리는 동안 CPU는 다른 계산을 수행할 수 있으며, 이로 인해 전체 시스템의 효율성이 향상됩니다.
4. 유연성과 확장성:
비동기 코드는 모듈화 및 재사용이 용이하며, 다양한 환경과 상황에서 확장성 있게 동작할 수 있습니다.
결론적으로, 비동기 프로그래밍은 성능과 응답성을 향상시키며, 복잡한 작업을 효율적으로 처리할 수 있게 해줍니다. JavaScript와 같은 싱글 스레드 환경에서는 특히 중요한데, 이를 통해 병렬 처리와 같은 여러 작업을 동시에 수행할 수 있는 능력을 확보할 수 있습니다.
포인트
동기와 비동기의 차이에 대해서 먼저 명료하게 설명하고
비동기로 인해 얻을 수 있는 메리트에 대해 설명할 것
면접에서 할 대답
동기 프로그래밍은 작업이 순차적으로 실행되어 하나가 완료될 때까지 기다립니다. 비동기 프로그래밍은 작업이 동시에 진행되어 시스템의 응답성과 효율성을 향상시킵니다. 비동기 방식은 복잡한 작업을 백그라운드에서 처리하면서 사용자 경험을 개선할 수 있으며, 성능, 자원 최적화, 확장성 등의 이점을 제공합니다.
[참고링크]
⭐️ 브라우저의 작동방식에 대해서 설명해주세요
브라우저의 작동 방식은 다음과 같은 단계로 이루어집니다:
- URL 입력 및 요청: 사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보냅니다.
- 서버 응답 및 데이터 수신: 서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보냅니다.
- HTML 파싱 및 DOM 생성: 브라우저는 HTML을 파싱하여 Document Object Model (DOM) 트리를 만듭니다. 이 트리는 웹 페이지의 구조를 나타냅니다.
- CSS 파싱 및 CSSOM 생성: CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성됩니다. 이것은 페이지의 스타일을 정의합니다.
- 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 페이지의 시각적 표현을 나타내며, 각 요소의 크기와 위치를 포함합니다.
- 레이아웃 단계: 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산합니다.
- 페인팅: 계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그립니다. 여기에는 텍스트, 이미지, 다른 시각적 요소들이 포함됩니다.
- JavaScript 실행: 필요한 경우 JavaScript가 실행되어 동적인 기능을 추가하거나 페이지를 변경합니다.
- 로드 완료: 모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료됩니다. 사용자는 이제 페이지와 상호 작용할 수 있습니다.
이러한 과정은 빠르게 일어나며 사용자에게는 매끄럽게 보이게 됩니다. 동적인 웹 페이지의 경우 추가적인 비동기 요청과 작업이 있을 수 있어, 사용자와의 상호 작용에 따라 계속 업데이트될 수 있습니다.
포인트
브라우저의 순서를 단계별로 먼저 암기하고 코딩을하면서 이에 대해 곱씹으며 체감하면서 이중으로 외워보자
면접에서 할 대답
- 사용자가 URL을 입력하면 브라우저는 웹 서버에 HTTP 요청을 보내고 데이터를 수신합니다.
- 받은 HTML과 CSS는 파싱되어 DOM과 CSSOM 트리를 생성하며, 이들은 렌더 트리로 병합됩니다.
- 렌더 트리를 기반으로 레이아웃 단계에서 각 요소의 크기와 위치를 계산합니다.
- 계산된 정보로 화면에 페이지를 그리는 페인팅 단계가 이루어집니다.
- 필요한 JavaScript가 실행되고 모든 요소가 로드되면 페이지가 완성되어 사용자와 상호 작용합니다.
[참고링크]
⭐️ GET, POST 방식의 차이점에 대해서 설명해주세요.
GET과 POST는 HTTP 프로토콜에서 데이터를 서버로 전송하는 두 가지 일반적인 메서드입니다. 이들의 주요 차이점은 다음과 같습니다:
1. 전송 방식:
GET: 데이터를 URL의 일부로 인코딩하여 전송합니다. URL에 포함된 쿼리 문자열을 통해 데이터가 전송되므로 길이에 제한이 있을 수 있습니다.
POST: 데이터를 HTTP 요청 본문의 일부로 전송합니다. 이로 인해 더 큰 데이터를 보낼 수 있으며, URL에 노출되지 않으므로 상대적으로 보안이 더 좋습니다.
2. 보안:
GET: 민감한 정보가 URL에 노출되므로 보안에 취약합니다.
POST: 데이터가 HTTP 본문에 숨겨져 있으므로 상대적으로 안전합니다.
3. 캐싱:
GET: 브라우저에서 캐싱될 수 있어 속도가 빠를 수 있습니다.
POST: 일반적으로 캐싱되지 않으므로 매번 새로운 요청을 보내야 합니다.
4. 용도:
GET: 데이터를 검색하거나 조회하는 데 주로 사용됩니다.
POST: 데이터를 생성하거나 수정하는 데 사용됩니다. 서버의 상태를 변경할 수 있으므로 부작용이 있을 수 있습니다.
5. 북마크와 기록:
GET: URL이 모든 정보를 포함하므로 북마크하거나 기록을 저장할 수 있습니다.
POST: 요청 정보가 본문에 포함되므로 URL만으로는 요청을 다시 생성할 수 없으며 북마크하기 어렵습니다.
이러한 차이점들은 GET과 POST가 사용되는 상황과 목적을 결정하는 데 중요한 역할을 합니다.
포인트
두 통신 메서드의 차이를 전송방식,보안,캐싱,용도,북마크와 기록 을 기준으로 나누는것을 기억하고 천천히 대답할 것
면접에서 할 대답
- GET은 URL에 데이터를 포함하여 전송하며, POST는 HTTP 본문에 데이터를 담아 전송합니다.
- GET은 브라우저에서 캐싱될 수 있으나, POST는 일반적으로 캐싱되지 않습니다.
- GET은 길이 제한이 있고 민감한 정보가 노출될 수 있어 보안이 취약합니다.
- POST는 더 큰 데이터 전송과 보안에 더 적합하며 서버 상태 변경에 사용됩니다.
- GET은 북마크 가능하며 기록을 저장할 수 있지만, POST는 그렇지 않습니다.
[참고링크]
