멘토링 1일차 내용정리
일반 함수 vs 화살표 함수
| 구분 | 일반 함수 | 화살표 함수 |
| this 바인딩 | 호출하는 객체가 this가 됨 | 한단계 위 스코프의 this가 this가 됨 |
| 호이스팅 | 함수 선언문은 호이스팅됨 | 변수에 할당된 함수로, 호이스팅 안 됨 |
| 콜백함수에서의 this | 호출하는애가 콜백이기 때문에 window | 한단계 위 스코프의 this |
const obj = {
value: 100,
regularCallback: function () {
setTimeout(function () {
console.log('일반:', this.value); // undefined (window or global)
}, 100);
},
arrowCallback: function () {
setTimeout(() => {
console.log('화살표:', this.value); // 100
}, 100);
}
};
obj.regularCallback();
obj.arrowCallback();호이스팅이 발생하는 이유
내 답변:
자바스크립트에서 실행컨텍스트 생성단계일 때 변수, 함수의 선언을 먼저 메모리에 등록하는 작업을 하기때문에 호이스팅이 발생합니다.
(Lexical Environment의 Environment Record 에서 식별자 수집)
let, var, const 차이
내 답변:
셋 다 호이스팅이 되지만 var와 const는 TDZ가 발생합니다. let은 선언과 초기화를 동시에 하기 때문에 선언 전에 호출하면 undefined가 출력되고 let, const는 선언만 하기때문에 선언 전에 호출하면 레퍼런스 에러가 발생합니다.
얕은복사 VS 깊은복사
멘토님 설명: 얕은복사는 메모리주소를 복사하고 깊은복사는 값을 복사한다고 표현해요.
나의 정리: 얕은 복사는 객체의 1단계 속성만 복사하고, 중첩 객체는 메모리 주소(참조)를 공유합니다.
깊은 복사는 중첩된 객체까지 모두 재귀적으로 복사합니다.
깊은복사 구현방법
1. JSON.parse(JSON.stringify(obj)
2. lodash cloneDeep
3. 재귀함수로 직접구현
+ structuredClone(obj) 도 있다고 GPT 가 말해줬는데 이건 한 번 봐야겠다
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) {
return obj.map(item => deepClone(item));
}
const result = {};
for (let key in obj) {
result[key] = deepClone(obj[key]);
}
return result;
}
Object.assign은 얕은복사일까 깊은복사일까?
멘토님 설명: 얕복일수도 깊복일수도있다
고 하셨는데 얕은복사가 맞는 것 같다.
HTTP 상태코드
- 400 Bad Request : 잘못된 요청 (문법 오류 등)
- 401 Unauthorized : 인증 필요
- 404 Not Found : 리소스 없음
실행 컨텍스트 정의
내 답변: 자바스크립트가 실행을 위해 필요한 정보들을 모아놓은 객체
클로저 동작 방식 코드보면서 설명해주세요
해당 코드가 실행될 때 스코프 체인을 구성하는 순서가 어떻게 될까요?
00:38
호이스팅과 실행컨텍스트의 관계는 어떻게 되나요?
내답변: 실행컨텍스트 생성단계일 때 식별자를 수집하는데 이때 수집하면서 호이스팅이 발생합니다.
스코프 체인은 뭔가요?
내답변: 스코프를 타고 올라가면서 식별자를 찾는 단계입니다.
call 예제 어떻게 출력되는지 설명, apply로 변경하려면 어떻게해야하는지
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
// call 사용
greet.call(person, 'Hello', '!'); // Hello, Alice!
// apply 사용
greet.apply(person, ['Hi', '...']); // Hi, Alice...
근데 면접질문에 잘 안나온다고 말씀주심
콜백함수, promise, async await 점차 발전한 이유
편의성을 위해 발전됐다.
| 콜백 함수 | 1990년대 초반 | 콜백지옥 |
| 프로미스 | 2015년 (ES6) | thenable(데너블하다 라고 표현), 프로미스체인 길어지면 가독성 저하 |
| async/await | 2017년 (ES8) | 동기처럼 작성 가능, 코드 직관적 |
Promise.all(), Promise.race() 차이 설명
Promise.all()은 모든 프로미스가 완료돼야 결과배열을 반환하고, 하나라도 실패하면 바로 reject
Promise.race()는 가장 먼저 완료된 resolve or reject 된 하나만 반환
시멘틱 태그 설명
내답변: 접근성을 위해서 의미를 부여한 태그
태그에 의미를 부여한 이유가 뭘까요?
내답변: 개발자들끼리 코드 공유할 때 가독성과 직관적으로 보기위함, 시각장애인분들이 스크린리더로 태그를 읽기위함
b, strong
strong: html5, 스크린리더기에서 강조
i, em
em: html5, 스크린리더기에서 강조
주소창에 www. 어쩌구를 입력하면 어떤일이 벌어질까요?
키워드: DNS, 쓰리웨이핸드쉐이크/포웨이핸드쉐이크, CRP
DNS 서버: 주소를 IP로 변환하는 서버
① DNS 서버로 가기 전에 캐시 서버에 저장된 IP주소가 있는지 확인
② 도메인 => IP 주소 변환
③ TCP 3-Way Handshake (연결 준비 과정)
웹 서버와 신뢰성 있는 통신을 하기 위해 TCP 연결을 먼저 맺어야 함. 이때 쓰는 게 바로 3-way handshake
이 과정은 "데이터를 주고받기 전에 연결을 안전하게 맺는 약속"
✔ 3단계 설명:
- [SYN]
클라이언트(브라우저) → 서버
→ “연결하고 싶어요!” - [SYN-ACK]
서버 → 클라이언트
→ “좋아요, 나도 준비됐어요!” - [ACK]
클라이언트 → 서버
→ “그럼 이제 시작하자!”
(ACK는 일종의 아이디)
이제 연결 완료 → 데이터 주고받을 수 있음
④ CRP 과정 시작
DOM Tree
CSSOM Tree
Render Tree
Layout (DOM 그리기)
Paint (색칠)
Composition (전 단계 조합)
visibility hidden VS display none
내답변: 둘다 안보이지만 visibility hidden은 영역을 차지하고 display none 은 영역 차지 X
| 속성 | DOM에 존재 | Render Tree에 존재 |
| visibility: hidden | ✅ | ✅ |
| display: none | ✅ | ❌ |
조건에 따라서 화면을 보여줄지 안 보여줄지를 결정할 거다. 어떤 걸 써야하나?
멘토님 설명: 이 경우에는 display none이 낫다.
토글처럼 계속해서 돔을 왔다갔다할 때는 돔이 남아있고 페인팅만 하는 비저빌리티 히든이 낫다.
