날짜

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" />

2026.02.01

</aside>

활동내용

1. CSS 기본 문법

변수 선언

// const: 재할당 불가 (상수)
const name = "홍길동";

// let: 재할당 가능 (변수)
let age = 25;
age = 26;  // 가능

// var: 구버전 (사용 비권장)
var oldStyle = "사용하지 마세요";

데이터 타입

// 숫자
const num = 42;
const float = 3.14;

// 문자열
const str1 = "안녕하세요";
const str2 = '반갑습니다';
const str3 = `템플릿 리터럴: ${name}`;

// 불리언
const isTrue = true;
const isFalse = false;

// null과 undefined
const empty = null;
let notDefined;  // undefined

// 배열
const arr = [1, 2, 3, 4, 5];
const mixed = [1, "text", true, null];

// 객체
const person = {
    name: "홍길동",
    age: 25,
    city: "서울"
};

2. 연산자

// 산술 연산자
let a = 10 + 5;   // 15
let b = 10 - 5;   // 5
let c = 10 * 5;   // 50
let d = 10 / 5;   // 2
let e = 10 % 3;   // 1 (나머지)
let f = 2 ** 3;   // 8 (거듭제곱)

// 증감 연산자
let num = 1;
num++;  // 2
num--;  // 1

// 비교 연산자
10 === 10;   // true (값과 타입 모두 같음)
10 !== 5;    // true (같지 않음)
10 > 5;      // true
10 < 5;      // false
10 >= 10;    // true
10 <= 5;     // false

// 논리 연산자
true && false;  // false (AND)
true || false;  // true (OR)
!true;          // false (NOT)

3. 조건문

// if-else
const age = 20;

if (age >= 18) {
    console.log("성인입니다");
} else {
    console.log("미성년자입니다");
}

// if-else if-else
const score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else {
    console.log("F");
}

// 삼항 연산자
const result = age >= 18 ? "성인" : "미성년자";

// switch문
const day = "월";

switch (day) {
    case "월":
        console.log("월요일");
        break;
    case "화":
        console.log("화요일");
        break;
    default:
        console.log("기타");
}

4. 반복문

// for문
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// while문
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

// do-while문
let num = 0;
do {
    console.log(num);
    num++;
} while (num < 5);

// break와 continue
for (let i = 0; i < 10; i++) {
    if (i === 3) continue;  // 3은 건너뜀
    if (i === 7) break;     // 7에서 중단
    console.log(i);  // 0,1,2,4,5,6
}

5. 함수

// 함수 선언식
function greet(name) {
    return `안녕하세요, ${name}님!`;
}

console.log(greet("홍길동"));  // 안녕하세요, 홍길동님!

// 함수 표현식
const add = function(a, b) {
    return a + b;
};

console.log(add(5, 3));  // 8

// 화살표 함수
const multiply = (a, b) => a * b;
console.log(multiply(4, 5));  // 20

// 여러 줄 화살표 함수
const calculate = (a, b) => {
    const sum = a + b;
    const product = a * b;
    return { sum, product };
};

// 기본 매개변수
function greetUser(name = "방문자") {
    return `환영합니다, ${name}님!`;
}

console.log(greetUser());  // 환영합니다, 방문자님!
console.log(greetUser("김철수"));  // 환영합니다, 김철수님!

6. 배열 메서드

const numbers = [1, 2, 3, 4, 5];

// forEach: 각 요소 순회
numbers.forEach(num => {
    console.log(num);
});

// map: 새 배열 생성
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// filter: 조건에 맞는 요소만
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);  // [2, 4]

// find: 첫 번째 일치 요소
const found = numbers.find(num => num > 3);
console.log(found);  // 4

// reduce: 누적 계산
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

// some: 하나라도 조건 만족?
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // true

// every: 모두 조건 만족?
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // true

// 배열 조작
numbers.push(6);        // 끝에 추가
numbers.pop();          // 끝에서 제거
numbers.unshift(0);     // 앞에 추가
numbers.shift();        // 앞에서 제거
numbers.splice(2, 1);   // 인덱스 2에서 1개 제거

7. 객체

// 객체 생성
const person = {
    name: "홍길동",
    age: 25,
    city: "서울",
    greet: function() {
        return `안녕하세요, ${this.name}입니다.`;
    }
};

// 속성 접근
console.log(person.name);      // 홍길동
console.log(person["age"]);    // 25

// 속성 추가/수정
person.job = "개발자";
person.age = 26;

// 속성 삭제
delete person.city;

// 메서드 호출
console.log(person.greet());

// 구조 분해 할당
const { name, age } = person;
console.log(name, age);  // 홍길동 26

// 객체 메서드
const keys = Object.keys(person);    // ["name", "age", "job", "greet"]
const values = Object.values(person);
const entries = Object.entries(person);