Study
프론트엔드 스터디 11주차: React 기초 2 —.
useEffect로 사이드 이펙트를 다루고, 이벤트 처리와 폼 상태 관리까지 — React로 실제 동작하는 앱을 만들기 위한 핵심 기술을 배웁니다.
Study
프론트엔드 스터디 심화: 에러 처리와 정규 표현식.
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.
<strong>입문 강의 (처음이라면):</strong> 얄코 JS 입문 강의
<strong>강의 스킵 가능:</strong> 아래 스킵 진단 문제 10개를 모두 맞히면 강의
시청 스킵 가능합니다.
<strong>심화 자료 (딥다이브 대비):</strong>
---
---
// Java였다면: int x = 1;
// JS에서는
let x = 1; // 지금은 숫자
x = "hello"; // 이제 문자열 — 에러 없음
x = true; // 이제 불리언 — 에러 없음
x = null; // 이제 null — 에러 없음0.1 + 0.2 === 0.3; // false
0.1 + 0.2; // 0.30000000000000004Infinity - // 양의 무한대
Infinity; // 음의 무한대
NaN; // Not a Number — 숫자가 아님을 나타내는 숫자(!)1 / 0 - // Infinity
1 / 0; // -Infinity
"hello" * 2; // NaN
NaN === NaN; // false — NaN은 자기 자신과도 같지 않음
Number.isNaN(NaN); // true — NaN 확인은 이걸 써야 함<strong>undefined</strong>: JS 엔진이 자동으로 할당. "변수는 있는데 아직 값이
없다"
<strong>null</strong>: 개발자가 의도적으로 할당. "이 변수는 비어있다고
명시한다"
let x; // undefined — 엔진이 자동 부여
let y = null; // null — 개발자가 의도적으로 "비어있음" 명시---
// Java, Python이라면 블록 밖에서 x를 쓸 수 없음
// JS var는 다릅니다
if (true) {
var x = 10;
}
console.log(x); // 10 — 블록 밖에서도 접근 가능!
// let은 예상대로 동작
if (true) {
let y = 10;
}
console.log(y); // ReferenceError: y is not definedconsole.log(x); // undefined — 에러가 아님!
var x = 5;
console.log(x); // 5
// JS 엔진이 실제로 실행하는 방식
var x; // 선언이 여기로 끌어올려짐
console.log(x); // undefined
x = 5; // 할당은 원래 위치에서 실행
console.log(x); // 5console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;function example() {
// ── 여기부터 TDZ 시작 (a가 선언은 됐지만 초기화 전)
console.log(a); // ReferenceError
let a = 1;
// ── 여기부터 TDZ 끝 (a 초기화 완료)
console.log(a); // 1
}typeof a; // ReferenceError
let a;var x = 1;
var x = 2; // 에러 없음, 그냥 덮어씀
console.log(x); // 2
let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared| var | let | const | |
|---|---|---|---|
| 스코프 | 함수 | 블록 | 블록 |
| 재선언 | 가능 | 불가 | 불가 |
| 재할당 | 가능 | 가능 | 불가 |
| 호이스팅 시 동작 | undefined | ReferenceError (TDZ) | ReferenceError (TDZ) |
---
"5" - 1; // 4
0 == false; // true
null == undefined; // true
null == 0; // false — 이상하지 않나요?"3" + 1; // "31" — + 연산자는 한쪽이 문자열이면 나머지를 문자열로 변환
3 + 1 + "1"; // "41" — 왼쪽부터 평가: 3+1=4, 4+"1"="41"0 == false; // true — false를 숫자 0으로 변환해서 비교
0 === false; // false — 타입이 달라서 false
null == undefined; // true — == 스펙의 특별 규칙
null === undefined; // falseconst name = userInput || "익명"; // userInput이 falsy면 "익명"
const count = userCount ?? 0; // userCount가 null/undefined일 때만 0---
`console.log(x);
var x = 5;
console.log(x);`---
Post Q&A
프론트엔드 스터디 5주차: JavaScript 시작 — 타입, 변수, 그리고 JS가 이상한 이유 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.