Study
프론트엔드 스터디 11주차: React 기초 2 —.
useEffect로 사이드 이펙트를 다루고, 이벤트 처리와 폼 상태 관리까지 — React로 실제 동작하는 앱을 만들기 위한 핵심 기술을 배웁니다.
Study
프론트엔드 스터디 심화: 에러 처리와 정규 표현식.
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.
<strong>학습 챕터:</strong> poiemaweb — this / 실행 컨텍스트 / 이터러블 <strong>자료 바로가기:</strong>
<strong>딥다이브 요약본 (보충용):</strong>
---
---
// 1. 일반 함수 호출 — 전역 객체 (strict mode에서는 undefined)
function foo() {
console.log(this); // window (브라우저)
}
foo();
// 2. 메서드 호출 — 호출한 객체
const obj = {
name: "철수",
greet() {
console.log(this.name); // "철수"
},
};
obj.greet();
// 3. 생성자 호출 — 새로 생성되는 인스턴스
function Person(name) {
this.name = name; // 새 인스턴스를 가리킴
}
const p = new Person("영희");
// 4. 명시적 바인딩 — call / apply / bind
function greet() {
console.log(this.name);
}
greet.call({ name: "민수" }); // "민수"
greet.apply({ name: "지수" }); // "지수"
const boundGreet = greet.bind({ name: "하준" });
boundGreet(); // "하준"const timer = {
name: "타이머",
start() {
// 일반 함수 — this가 전역으로 바뀜
setTimeout(function () {
console.log(this.name); // undefined
}, 1000);
// 화살표 함수 — 상위 스코프(start 메서드)의 this 유지
setTimeout(() => {
console.log(this.name); // "타이머"
}, 1000);
},
};
timer.start();---
const x = "전역";
function outer() {
const y = "outer";
function inner() {
const z = "inner";
console.log(x, y, z); // 스코프 체인으로 탐색
}
inner();
}
outer();
// 콜 스택의 변화:
// 1. 전역 실행 컨텍스트 생성 (x 등록)
// 2. outer() 호출 → outer 실행 컨텍스트 생성 (y 등록)
// 3. inner() 호출 → inner 실행 컨텍스트 생성 (z 등록)
// 4. inner 종료 → inner 컨텍스트 제거
// 5. outer 종료 → outer 컨텍스트 제거---
// 배열, 문자열, Map, Set — 모두 이터러블
for (const char of "hello") {
console.log(char); // h, e, l, l, o
}
const [a, b, ...rest] = new Set([1, 2, 3, 4]);
// a=1, b=2, rest=[3, 4]// 중복 제거
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)]; // [1, 2, 3, 4]
// 기본 사용
const set = new Set([1, 2, 3]);
set.add(4);
set.has(2); // true
set.delete(1);
set.size; // 3
// 집합 연산
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const union = new Set([...a, ...b]); // {1, 2, 3, 4}
const intersection = new Set([...a].filter((x) => b.has(x))); // {2, 3}// 일반 객체와 달리 어떤 타입이든 키로 사용 가능
const map = new Map();
map.set("name", "철수");
map.set(1, "숫자 키");
map.set({ id: 1 }, "객체 키");
map.get("name"); // "철수"
map.has("name"); // true
map.size; // 3
// 이터러블이라 for...of 가능
for (const [key, value] of map) {
console.log(key, value);
}
// 객체 → Map 변환
const obj = { a: 1, b: 2 };
const mapFromObj = new Map(Object.entries(obj));---
`const obj = {
value: 10,
double: function () {
return this.value * 2;---
<strong>this 관련</strong>: React 클래스 컴포넌트를 읽거나, 이벤트 핸들러에서
this가 예상과 다르게 동작할 때
<strong>실행 컨텍스트</strong>: 면접에서 "호이스팅과 클로저의 원리를
설명하라"는 질문을 받았을 때
<strong>Set/Map</strong>: 중복 제거, 빠른 조회가 필요한 데이터 구조가 필요할
때 (지금 바로 써도 됩니다!)
<strong>이터러블</strong>: 커스텀 이터레이터를 만들거나, for...of 동작 원리가
궁금할 때
Post Q&A
프론트엔드 스터디 심화: this, 실행 컨텍스트, 이터러블 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.