🔎 AJAX
📡 AJAX 전통 방식 vs 최신 방식
📍 XMLHttpRequest의 readyState 상태값
| 상태값 | 의미 |
|---|---|
| 0 | 요청이 초기화됨 (UNSENT) |
| 1 | open() 호출됨 (OPENED) |
| 2 | 요청이 전송됨 (HEADERS_RECEIVED) |
| 3 | 데이터 수신 중 (LOADING) |
| 4 | 요청 완료됨 (DONE) |
📍 전통 방식: onreadystatechange 사용
- 모든 상태를 직접 체크해야 해서 코드가 장황함
📍 최신 방식: onload 사용
- 완료 시점만 잡으면 돼서 간결하고 가독성 좋음
🧪 예시
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "/data.json");
xhr.send();🌟 HTTP
🌐 HTTP 요청 방식
| 메서드 | 설명 |
|---|---|
| GET | URL에 데이터를 붙여 전송 (쿼리 스트링) |
| POST | 요청 바디에 데이터를 담아 전송 |
| PUT | 자원의 전체 수정 |
| PATCH | 자원의 일부 수정 |
| DELETE | 자원 삭제 |
| OPTIONS | 사전 요청 (CORS 관련) |
🌈 GET 요청 방식
http(s)://서버주소[:포트]/컨텍스트/파일명?이름1=값&이름2=값- 쿼리 문자열:
?name=둘리&age=10 - 특수문자/한글은 자동 인코딩됨 (예:
%EB%91%98%EB%A6%AC) - 보안이 낮고 길이 제한이 있음 (브라우저마다 다름)
🌈 POST 요청 방식
form태그에서method="post"지정- 데이터는 요청 본문(body) 에 담겨 전송
http(s)://서버주소[:포트]/컨텍스트/파일명추가 데이터는 다음처럼 전달됨
이름1=값&이름2=값- 본문(body)에 포함되므로 URL에는 안 보인다
- 보안/용량/기능적 측면에서
GET보다 강력!
💡 GET vs POST 차이
| 항목 | GET | POST |
|---|---|---|
| 보안 | 낮음 (쿼리에 노출됨) | 높음 (본문에 담김) |
| 길이 제한 | 있음 (URL 길이 제한) | 사실상 없음 |
| 전송 위치 | URL 쿼리스트링 | HTTP 요청 본문 (body) |
| 캐시 | 잘 됨 | 기본적으로 캐시 안 됨 |
| 용도 | 단순 조회, 검색 | 로그인, 글 작성, 민감 데이터 전송 등 |
☀️ ECMA
📦 ECMA 문법 기반 자바스크립트 클래스
📌 생성자 함수 (constructor)
- Java의 생성자와 비슷
class Person {
constructor(name) {
this.name = name;
}
}📌 private 필드 (# 키워드)
- 외부에서 접근 불가능한 진짜 비공개 변수
class SecretBox {
#hidden = "비밀";
getSecret() {
return this.#hidden;
}
setSecret(value) {
this.#hidden = value;
}
}
const box = new SecretBox();
console.log(box.getSecret()); // "비밀"
box.setSecret("대공개");
console.log(box.getSecret()); // "대공개"📌 getter / setter (프로퍼티 접근자)
class Counter {
#value = 0;
get val() {
return this.#value;
}
set val(v) {
if (v >= 0) this.#value = v;
}
}
const c = new Counter();
c.val = 10; // setter 호출
console.log(c.val); // getter 호출obj.val은 실제 변수 접근이 아니라 함수 호출+=연산은 내부적으로get → 연산 → set
📌 상속 (extends) & super
extends: 상속받을 클래스 지정super(): 부모 클래스 생성자 호출
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name}가 멍멍.`;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 부모 생성자 호출
this.breed = breed;
}
speak() {
return `${super.speak()} 이 친구는 ${this.breed}야!`;
}
}
const dog = new Dog("바둑이", "진돗개");
console.log(dog.speak());
// 출력: 바둑이가 멍멍. 이 친구는 진돗개야!🎯 화살표 함수와 this
- 화살표 함수는 자신만의 this를 가지지 않음
- 자신을 감싼 스코프의
this를 그대로 상속받음
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
new Timer();✅ 일반 함수였다면 this는 setInterval의 컨텍스트 (window 또는 undefined)가 됨
⚙️ static 키워드 & static 블럭
📌 static 메서드
- 인스턴스 없이 클래스명으로 바로 호출 가능
class MathUtil {
static square(n) {
return n * n;
}
}
console.log(MathUtil.square(4)); // 16📌 static block
- 클래스 정의 시 한 번만 실행되는 블럭
class Config {
static settings;
static {
// 초기화용 로직
this.settings = { theme: "dark", lang: "ko" };
}
}
console.log(Config.settings);📘 자바스크립트 클래스 특징 정리
| 특징 | 설명 |
|---|---|
| constructor | 클래스 생성자 함수 |
| extends | 상속 (부모 클래스 기능 물려받기) |
| super | 부모 생성자/메서드 호출 |
| #필드 | private 멤버 변수 선언 |
| get/set | getter, setter 작성 가능 |
| static | 클래스 고유 메서드/필드 선언 |
| static block | 클래스 초기화용 블럭 |
| 화살표 함수 | this를 바인딩하지 않고 외부 스코프 상속 |
📁 메서드 정리
배열
✂️ splice(start, deleteCount, ...items)
배열의 요소를 삭제하거나 추가/교체 (원본 변경됨)
let months = ["January", "February", "Monday", "Tuesday"];
let result = months.splice(2); // 2번 인덱스부터 끝까지 삭제
console.log(result); // ['Monday', 'Tuesday']
months = ["January", "February", "Monday", "Tuesday"];
result = months.splice(2, 1); // 2번 인덱스 1개 삭제
console.log(result); // ['Monday']
months = ["January", "February", "Monday", "Tuesday"];
result = months.splice(2, 2, "March", "April"); // 교체
console.log(result); // ['Monday', 'Tuesday']
console.log(months); // ['January', 'February', 'March', 'April']
months = ["January", "February", "Monday", "Tuesday"];
months.splice(2, 0, "March"); // 삽입
console.log(months); // ['January', 'February', 'March', 'Monday', 'Tuesday']🔗 join(separator)
배열을 문자열로 결합
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.join(',')); // apple,banana,orange🔪 split(separator)
문자열을 배열로 분리
const fruits = '🍎, 🥝, 🍌, 🍒';
console.log(fruits.split(',')); // ['🍎', ' 🥝', ' 🍌', ' 🍒']🔄 reverse()
배열의 순서를 뒤집음 (원본 변경됨)
const array = [1, 2, 3, 4, 5];
console.log(array.reverse()); // [5, 4, 3, 2, 1]
console.log(array); // [5, 4, 3, 2, 1]🍰 slice(start, end)
배열의 일부를 복사 (원본 변경 X)
const array = [1, 2, 3, 4, 5];
console.log(array.slice(2, 5)); // [3, 4, 5]
console.log(array); // [1, 2, 3, 4, 5]🧹 filter(callback)
조건에 맞는 요소만 추출 (원본 변경 X)
const array = [90, 60, 83, 74, 95];
console.log(array.filter(e => e >= 80)); // [90, 83, 95]
햇내기 개발자 지망생