Study
프론트엔드 스터디 11주차: React 기초 2 —.
useEffect로 사이드 이펙트를 다루고, 이벤트 처리와 폼 상태 관리까지 — React로 실제 동작하는 앱을 만들기 위한 핵심 기술을 배웁니다.
Study
프론트엔드 스터디 심화: 에러 처리와 정규 표현식.
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.
<strong>입문 강의 (처음이라면):</strong> 얄코 JS 입문 강의
<strong>강의 스킵 가능:</strong> 아래 스킵 진단 문제 10개를 모두 맞히면 강의
시청 스킵 가능합니다.
<strong>심화 자료 (딥다이브 대비):</strong>
---
---
// 클래스 정의 없이 바로 생성
const person = {
name: "김철수",
age: 25,
greet: function () {
console.log(`안녕하세요, ${this.name}입니다.`);
},
};
// 만든 후에도 프로퍼티 추가/삭제 가능
person.email = "kim@example.com"; // 추가
delete person.age; // 삭제const obj = { name: "철수", "first name": "철" };
// 점 표기법: 식별자 규칙을 따르는 키에만 사용 가능
console.log(obj.name); // "철수"
// 대괄호 표기법: 문자열이나 변수로 접근할 때
console.log(obj["first name"]); // "철" — 공백 있는 키는 대괄호만 가능
const key = "name";
console.log(obj[key]); // "철수" — 변수를 키로 사용할 때// 원시값: 값 복사
let a = 1;
let b = a;
b = 2;
console.log(a); // 1 — a는 영향 없음
// 객체: 참조 복사
const obj1 = { x: 1 };
const obj2 = obj1; // 같은 객체를 가리킴
obj2.x = 99;
console.log(obj1.x); // 99 — obj1도 바뀜!// 얕은 복사 (1단계 깊이만 복사)
const copy = { ...obj1 };
copy.x = 999;
console.log(obj1.x); // 99 — 이제 영향 없음---
// 변수에 할당
const add = function (a, b) {
return a + b;
};
// 다른 함수의 인자로 전달
function execute(fn, a, b) {
return fn(a, b);
}
console.log(execute(add, 3, 4)); // 7
// 함수의 반환값으로 사용
function makeMultiplier(factor) {
return function (num) {
return num * factor;
};
}
const double = makeMultiplier(2);
console.log(double(5)); // 10// 함수 선언식: 선언 전에도 호출 가능 (전체 호이스팅)
sayHello(); // "Hello!" — 에러 없음
function sayHello() {
console.log("Hello!");
}
// 함수 표현식: 선언 전 호출 불가 (변수만 호이스팅)
sayBye(); // TypeError: sayBye is not a function
const sayBye = function () {
console.log("Bye!");
};// 일반 함수
const add1 = function (a, b) {
return a + b;
};
// 화살표 함수
const add2 = (a, b) => a + b; // 한 줄이면 return 생략 가능
// 파라미터가 하나면 괄호 생략 가능
const double = (n) => n * 2;
// 본문이 여러 줄이면 {} 와 return 명시
const greet = (name) => {
const msg = `안녕하세요, ${name}님`;
return msg;
};const numbers = [1, 2, 3, 4, 5];
// map: 각 원소에 콜백을 적용한 결과로 새 배열 생성
const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]---
// Java나 Python이라면 블록 밖에서 x에 접근할 수 없음
// JS var는 다릅니다
function example() {
if (true) {
var x = 10; // var는 함수 스코프
let y = 20; // let은 블록 스코프
}
console.log(x); // 10 — 블록 밖에서 접근 가능
console.log(y); // ReferenceError — 블록 밖에서 접근 불가
}const globalVar = "전역";
function outer() {
const outerVar = "외부";
function inner() {
const innerVar = "내부";
// 자신의 스코프 → outer 스코프 → 전역 스코프 순으로 탐색
console.log(innerVar); // "내부" (자신의 스코프)
console.log(outerVar); // "외부" (outer 스코프)
console.log(globalVar); // "전역" (전역 스코프)
}
inner();
console.log(innerVar); // ReferenceError — outer는 inner 스코프 접근 불가
}const x = "전역";
function foo() {
console.log(x); // 어느 x를 참조할까?
}
function bar() {
const x = "bar 내부";
foo(); // foo를 bar 안에서 호출
}
bar(); // "전역" 출력
// foo는 전역에서 선언됐으므로, 상위 스코프는 전역 스코프
// bar 안에서 호출해도 bar의 x를 참조하지 않음---
`const obj = { x: 1---
Post Q&A
프론트엔드 스터디 6주차: 객체, 함수, 그리고 스코프 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
지금 당장 읽지 않아도 됩니다. React를 배우면서 에러 처리가 필요해지거나 면접 대비가 필요할 때 참고하세요.