DOM의 기본 개념

• DOM은 HTML 문서의 구조화된 표현(Structured representation)입니다
• 웹 페이지와 JavaScript 코드 사이의 인터페이스 역할을 합니다
• 브라우저가 HTML을 로드할 때 자동으로 DOM 트리를 생성합니다
• DOM은 프로그래밍 언어와 독립적이며, 플랫폼/언어 중립적입니다
• DOM은 문서를 논리 트리로 표현하며, 각 노드는 객체로 취급됩니다

DOM의 주요 특징

1. 트리 구조

   • Document: DOM 트리의 진입점
   • Element nodes: HTML 요소들
   • Text nodes: 텍스트 컨텐츠
   • Attribute nodes: 요소의 속성들

2. DOM과 JavaScript의 관계

   • DOM은 JavaScript의 일부가 아닙니다.
   • Web API의 일부로, JavaScript에서 접근 가능한 인터페이스를 제공합니다.

DOM 조작의 비용

• 리플로우(Reflow): DOM 요소의 크기나 위치가 변경될 때 발생
  • 변경된 요소와 그 자식, 부모 요소들의 위치와 크기를 재계산
  • 레이아웃 단계를 다시 수행하므로 매우 비용이 큼
• 리페인트(Repaint): 가시성이나 색상 등 스타일 변경 시 발생
  • 리플로우보다는 비용이 적지만, 여전히 부하가 발생

이벤트 전파 메커니즘

• 캡처링 단계(Capturing Phase):
  • 이벤트가 최상위 요소에서 시작하여 타겟 요소까지 내려오는 단계
  • addEventListener의 세 번째 인자를 true로 설정하여 캡처링 이벤트 감지

element.addEventListener("click", handler, true);

• 버블링 단계(Bubbling Phase):
  • 이벤트가 타겟 요소에서 시작하여 최상위 요소까지 올라가는 단계
  • 대부분의 이벤트 핸들링이 이 단계에서 발생
  • event.stopPropagation()으로 버블링 중단 가능

이벤트 전파는 HTML의 계층 구조를 따라 진행됩니다.

<div class="grandparent">
  <div class="parent">
    <button class="child">클릭하세요</button>
  </div>
</div>

// 각 요소에 이벤트 리스너 추가
const grandparent = document.querySelector(".grandparent");
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

// 캡처링 단계 이벤트 리스너
grandparent.addEventListener(
  "click",
  (e) => {
    console.log("캡처링 - Grandparent");
  },
  true
);

parent.addEventListener(
  "click",
  (e) => {
    console.log("캡처링 - Parent");
  },
  true
);

child.addEventListener(
  "click",
  (e) => {
    console.log("캡처링 - Child");
  },
  true
);

// 버블링 단계 이벤트 리스너
grandparent.addEventListener("click", (e) => {
  console.log("버블링 - Grandparent");
});

parent.addEventListener("click", (e) => {
  console.log("버블링 - Parent");
});

child.addEventListener("click", (e) => {
  console.log("버블링 - Child");
});

버튼 클릭 시 콘솔 출력 순서:

캡처링 - Grandparent
캡처링 - Parent
캡처링 - Child
버블링 - Child
버블링 - Parent
버블링 - Grandparent

• 캡처링 단계: 이벤트가 최상위 요소(grandparent)에서 시작하여 아래로 전파
• 타겟 단계: 실제 클릭된 요소(child)에 도달
• 버블링 단계: 다시 아래에서 위로 전파

실제 활용 예시:

// 이벤트 위임(Event Delegation) 패턴
document.querySelector("ul").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    // li 요소가 클릭되었을 때만 처리
    console.log("리스트 아이템 클릭:", e.target.textContent);
  }
});

Guess My Number 게임 구현

게임 로직

1. 1부터 20 사이의 랜덤 숫자 생성
2. 사용자 입력값과 랜덤 숫자 비교
3. 점수 시스템 구현 (초기 점수: 20)
4. 최고 점수 기록 유지

주요 기능

// 1. 상태 관리 변수 정의
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

// 2. DOM 요소 선택 - 모든 필요한 요소 선택
const numberEl = document.querySelector(".number");
const guessEl = document.querySelector(".guess");
const messageEl = document.querySelector(".message");
const scoreEl = document.querySelector(".score");
const highscoreEl = document.querySelector(".highscore");

// 3. 메시지 표시 함수 추가 (코드 재사용성 향상)
const displayMessage = function (message) {
  messageEl.textContent = message;
};

// 4. 클릭 이벤트 핸들러 구현
document.querySelector(".check").addEventListener("click", function () {
  const guess = Number(guessEl.value);

  // 가이드라인의 게임 로직을 실제 구현
  // 4.1 입력값 검증
  if (!guess) {
    displayMessage("⛔ 숫자를 입력하세요!");
  }
  // 4.2 정답 확인
  else if (guess === secretNumber) {
    displayMessage("🎉 정답입니다!");
    numberEl.textContent = secretNumber;
    document.body.style.backgroundColor = "#60b347";
    numberEl.style.width = "30rem";

    // 최고 점수 업데이트
    if (score > highscore) {
      highscore = score;
      highscoreEl.textContent = highscore;
    }
  }
  // 4.3 오답 처리
  else if (guess !== secretNumber) {
    if (score > 1) {
      displayMessage(
        guess > secretNumber ? "📈 너무 높아요!" : "📉 너무 낮아요!"
      );
      score--;
      scoreEl.textContent = score;
    } else {
      displayMessage("💥 게임 오버!");
      scoreEl.textContent = 0;
    }
  }
});

• 데이터베이스의 구성요소 중 독립적으로 식별가능한 객체(대상)
• 업무에 필요하고 유용한 정보를 저장하고 관리하기 위한 집합적인 실체 또는 객체

엔터티의 특징

• 반드시 업무에서 필요하고 관리할 가치가 있는 정보여야 한다. (최소한의 정보로 구성)

• 엔터티는 식별이 가능하도록 유일한 식별자를 가져야 한다. (e.g. 사번, 학번 등)

• 영속적으로 존재하는 인스턴스가 두 개 이상인 집합을 이루어야 한다.

  • 인스턴스 : 엔터티로 정의된 구조에 맞춰 실제 디스크에 저장된 데이터

• 반드시 업무 프로세스에 사용되어야 한다.

• 반드시 엔터티의 하위 요소로 속성이 포함되어야 한다. (속성, attribute, 엔터티를 이루는 기본 요소)

• 엔터티는 다른 엔터티와 최소한 1개 이상의 관계가 있어야 한다.

  • 단, 통계성 엔터티와 코드성 엔터티의 경우 관계 생략이 가능하다

속성을 부르는 두 영어 단어

• attribute : 엔터티를 이루는 구성 요소
• property : 그 객체의 특성

인스턴스

엔터티로 정의된 구조에 맞춰 실제 디스크에 저장된 데이터

엔터티, 테이블, Relation

셋 다 같은 말이나 엔터티는 논리적 데이터 모델링에서 쓰는 용어 테이블은 물리적 데이터 모델링에서 쓰는 용어

속성의 개념, 정의

• 엔터티의 하위요소로, 엔터티에 대한 자세하고 구체적인 정보를 나타낸 것

• 의미상으로 분리되지 않는 최소의 데이터 단위 (Atomic)

• 속성의 개수에는 제한이 없지만, 처리하고자 하는 업무 프로세스에 꼭 필요한 것 위주로 최소화 필요

속성값

• 속성이 가질 수 있는 특정값

• 하나의 엔터티 인스턴스에서 각각의 속성은 하나의 속성값만을 지님

엔터티, 속성, 인스턴스

• 한 개의 엔터티는 두 개 이상의 인스턴스를 가진다. (인스턴스의 집합)

• 한 개의 엔터티는 두 개 이상의 속성을 가진다.

• 한 개의 속성은 한 개의 속성값을 가진다.

• 속성은 정규화 이론에 따라 주식별자에 함수적 종속성을 가져야 한다.

  • 주식별자가 변경될 때마다 속성값도 달라짐 : 함수적 종속성을 가짐 (결정자와 종속자)

속성의 분류

특성에 따른 분류 (시험에 잘나옴)

1. 기본 속성 (Basic Attribute)

• 엔터티가 원래 본래부터 가지고 있어야 하는 속성
• 엔터티가 만들어지면서부터 기본으로 가지고 있을 법한 속성
• 업무 분석을 통해 바로 정의가 가능한 속성이기도 함

2. 설계 속성 (Designed Attribute)

• 원래 존재하는 속성은 아니였지만 시스템을 구축하면서 설계하면서 필요하게 되어 도출된 속성
• 엔터티가 본래부터 가지고 있던 속성은 아니지만 설계시 필요하다고 판단되어짐

3. 파생 속성 (Derived Attribute)

• 다른 속성으로부터 계산되거나 변형되어 생성되는 속성
• 기본 속성에서 2차적으로 도출된 속성 (특정 규칙에 의해서)

엔터티 구성 방식에 따른 분류

• PK (Primary Key) 속성
• FK (Foreign Key) 속성
• 일반 속성

도메인 (Domain)

• 속성이 가질 수 있는 값의 범위 (값의 데이터 타입과 크기 등의 조건) 를 정의한 것
• 도메인이 지정된 속성은 해당 도메인의 데이터 타입, 크기, 제약사항 등을 따른다.
• 예: 주소 속성의 도메인은 VARCHAR(255)

for 반복문

for 반복문은 JavaScript에서 가장 기본적이고 널리 사용되는 반복문입니다. 초기값, 조건식, 증감식으로 구성되며, 조건이 참인 동안 코드 블록을 반복 실행합니다.

// 기본 for문 예시
for (let i = 1; i <= 5; i++) {
  console.log(`${i}번째 실행`);
}

// 배열 순회하기
const fruits = ["사과", "바나나", "오렌지"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

break와 continue

반복문을 제어하는 두 가지 중요한 키워드가 있습니다:

• break: 반복문을 즉시 종료
• continue: 현재 반복을 건너뛰고 다음 반복으로 진행

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// continue로 짝수만 출력하기
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 !== 0) continue;
  console.log(numbers[i]); // 2, 4, 6, 8, 10
}

// break로 원하는 값을 찾으면 종료하기
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 5) break;
  console.log(numbers[i]); // 1, 2, 3, 4
}

다양한 반복문 패턴

역순 순회

const numbers = [1, 2, 3, 4, 5];
for (let i = numbers.length - 1; i >= 0; i--) {
  console.log(numbers[i]); // 5, 4, 3, 2, 1
}

중첩 반복문

// 구구단 출력
for (let i = 2; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

while 반복문

while문은 조건식만으로 반복을 제어합니다. 반복 횟수가 불명확할 때 유용합니다.

// 기본 while문
let count = 1;
while (count <= 5) {
  console.log(`${count}번째 실행`);
  count++;
}

// 실전 예시: 주사위 게임
let dice = Math.floor(Math.random() * 6) + 1;
while (dice !== 6) {
  console.log(`주사위: ${dice}`);
  dice = Math.floor(Math.random() * 6) + 1;
}
console.log("6이 나왔습니다!");

모던 JavaScript의 배열 고차함수

최신 JavaScript에서는 배열을 더 우아하게 다룰 수 있는 다양한 메서드를 제공합니다.

const numbers = [1, 2, 3, 4, 5];
const users = [
  { id: 1, name: "김철수", age: 25 },
  { id: 2, name: "이영희", age: 28 },
  { id: 3, name: "박지성", age: 32 },
];

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

// filter: 조건부 필터링
const adults = users.filter((user) => user.age >= 30);

// find: 조건에 맞는 첫 번째 요소 찾기
const user = users.find((user) => user.age > 30);

// reduce: 값 누적하기
const sum = numbers.reduce((acc, cur) => acc + cur, 0);

// forEach: 단순 반복
users.forEach((user) => {
  console.log(`${user.name}님은 ${user.age}세입니다.`);
});

// some과 every: 조건 검사
const hasAdult = users.some((user) => user.age >= 30);
const allAdults = users.every((user) => user.age >= 20);

메서드 체이닝

고차함수들은 체이닝을 통해 복잡한 데이터 처리를 간단히 표현할 수 있습니다.

// 30세 이상 사용자의 이름만 추출하기
const adultNames = users
  .filter((user) => user.age >= 30)
  .map((user) => user.name);
console.log(adultNames); // ['박지성']

고차함수의 장점

• 코드가 더 선언적이고 이해하기 쉬워집니다
• 메서드 체이닝으로 복잡한 로직을 단순화할 수 있습니다
• 불변성을 유지하여 예측 가능한 코드를 작성할 수 있습니다

Lodash vs 내장 배열 메서드

실무에서 Lodash를 쓸지 내장 메서드를 쓸지 항상 고민되는데요. 제가 실제 개발하면서 느낀 장단점을 정리해봤습니다.

const _ = require("lodash");

// 테스트용 더미 데이터
const users = [
  { id: 1, name: "김철수", age: 25, active: true },
  { id: 2, name: "이영희", age: 28, active: false },
  { id: 3, name: "박지성", age: 32, active: true },
];

const numbers = [1, 2, 3, null, 4, undefined, 5];
const obj = { a: 1, b: 2 };

// 1. null/undefined 처리
// Lodash가 null/undefined 처리에 안전
console.log(_.map(numbers, (n) => n * 2)); // [2, 4, 6, 0, 8, 0, 10]
console.log(numbers.map((n) => n * 2)); // [2, 4, 6, 0, 8, NaN, 10] - NaN 주의!

// 2. 객체 다루기
// Lodash는 한 줄로 끝나는데
console.log(_.map(obj, (value, key) => `${key}: ${value}`)); // ["a: 1", "b: 2"]
// 내장 메서드는 이렇게 해야 됨
console.log(Object.entries(obj).map(([k, v]) => `${k}: ${v}`));

// 3. 빈 값 체크할 때
// Lodash는 그냥 isEmpty 하나로 다 됨
console.log(_.isEmpty([])); // true
console.log(_.isEmpty({})); // true
console.log(_.isEmpty("")); // true
console.log(_.isEmpty(null)); // true

// 내장 메서드는 타입마다 다르게 체크해야 힘
console.log([].length === 0); // 배열
console.log(Object.keys({}).length === 0); // 객체

// 4. 중첩 객체 다룰 때
// Lodash의 get은 진짜 편함
const deepObj = { a: { b: { c: 3 } } };
console.log(_.get(deepObj, "a.b.c")); // 3
console.log(_.get(deepObj, "a.b.d", 0)); // 없으면 기본값 반환

// 옵셔널 체이닝으로 어느 정도 커버되긴 함
console.log(deepObj?.a?.b?.c); // 3

Lodash 쓰면 좋은 경우

1. 데이터가 불안정할 때

   • null/undefined 알아서 처리해줌
   • 타입 에러로 안정성 확보

2. 복잡한 데이터 다룰 때

   • 중첩 객체? _.get으로 끝
   • 정렬, 그룹핑도 한 줄로 가능
   • 함수형으로 깔끔하게 처리 가능

3. IE 등 레거시 브라우저 지원할 때

   • 브라우저 호환성 걱정 없음
   • 동작도 일관적

내장 메서드 쓰면 좋은 경우

1. 간단한 배열 작업

   • map, filter 정도면 충분
   • 성능도 좀 더 좋음 (큰 차이는 아닌 듯)

2. 번들 사이즈 신경쓸 때

   • Lodash는 크기가 좀 있음

3. 모던 자바스크립트 쓸 수 있을 때

   • 옵셔널 체이닝
   • null 병합
   • 스프레드 연산자

실무에서는 이렇게

// 이렇게 필요한 것만 가져다 쓰세요
import { map, isEmpty } from "lodash";

// 이렇게 통째로 임포트하면 번들 사이즈 커져요
import _ from "lodash"; // 안티패턴

// 간단한 건 그냥 내장 메서드로
const simpleArray = [1, 2, 3, 4, 5];
const doubled = simpleArray.map((x) => x * 2);

// 복잡한 건 Lodash가 편해요
const complexData = [{ user: { details: { age: 25 } } }];
const ages = _.map(complexData, "user.details.age");

모델링의 정의

• 실물에 대한 상대적인 개념, 실물이 아님, 실물을 간략하게 표현한 것, 실물을 축소한 것

• 실물이 될 구성 요소를 분해하여 이 중 꼭 필요한 요소만 가지고 표현한 것

• 구축하고자 하는 정보시스템에 맞게, 현실세계의 데이터를 약속된 표기법으로 표현한 것

  • 그림, 기호, 수식 등이 약속된 표기법에 해당

• 업무의 흐름 또는 업무의 대상을 가시화, 명세화

• 정보시스템을 구축하기 위한 분석과 설계 과정의 일환

모델링의 종류

• 데이터 모델링

  • 복잡한 데이터를 컴퓨터 저장 구조로 변환하는 과정
  • 정보 시스템 구축을 위해 데이터 관점에서 업무를 분석하고, 현실의 데이터를 약속된 표기법으로 표현하는 과정

모델링의 특징

• 추상화 : 특정 표기법에 의해 중요한 요소만 간략히 표현 (특징을 추려서 표현)

• 단순화 : 특정한 약속 (특정 표기법)에 따라 쉽게 이해할 수 있게 단순화

• 명확화 : 누구나 이해하기 쉽도록 애매함을 제거, 명확하게 현상을 기술하여 모델링을 본 사람들이 똑같은 방향으로 이해할 수 있게 명확화

데이터 모델링 시 유의점

• 중복 최소화 :

  • 여러 위치에 같은 정보를 저장하지 않게

• 비유연성 최소화 :

  • 데이터를 정의하는 부분 + 데이터를 사용, 처리하는 프로세스 이 둘이 묶여 있는 것을 분리
  • 업무 변화가 있을 때마다 데이터 모델링을 수정해야 한다면 데이터와 프로세스가 서로 종속적이여서 유연성이 떨어지므로 이를 최소화하고 유연성을 높이는 것이 중요

• 비일관성 최소화 :

  • 분명 같은 데이터인데 테이블A 에는 "철수" 가 저장되어 있고 테이블 B 에는 "철구" 가 저장되어 있음
  • 정규화 요함 (엔터티를 쪼개는 행위)

데이터 모델링의 3단계

1. 개념적 데이터 모델링

• 추상화 수준이 가장 높고 업무 중심적이며 포괄적인 수준의 모델링 진행
• 전사적 차원의 모델링, EA (Enterprise Architecture) 수립
• 개념적 데이터 모델링을 통해 엔터티와 속성 도출

2. 논리적 데이터 모델링

• 시스템 구축을 위한 키 (Key), 속성, 관계 등을 정확하게 표현하며, 높은 재사용성을 가짐
• 정규화를 통해 중복 데이터를 최소화
• 속성을 통해 식별자를 도출하고 엔터티 간의 관계를 정의

3. 물리적 데이터 모델링

• 성능, 저장 등 물리적인 성격을 고려하여 실제 데이터베이스 구성을 설계
• 특정 DBMS 에 맞추어 구현이 가능한 수준에서 모델링 진행
• DBMS 의 성능, 보안, 가용성 등을 고려해 설계
• 물리적 데이터에서는 성능을 중시하므로 "반정규화" 를 한다.

데이터 독립성과 3단계 스키마

스키마는 구조이다.

1. 외부 스키마 (External Schema)

• 사용자나 응용프로그래머가 개인의 관점에서 필요로 하는 데이터베이스의 논리적 구조
• 전체 데이터베이스의 한 논리적인 부분으로 볼 수 있음
• 여러 개의 사용자 뷰를 가질 수 있음
• Sub Schema 또는 User View라고도 함

2. 개념 스키마 (Conceptual Schema)

• 조직체 전체의 관점에서 데이터베이스의 논리적 구조를 정의
• 모든 응용프로그램이나 사용자들이 필요로 하는 데이터를 통합한 조직 전체의 데이터베이스 구조
• 개체 간의 관계, 제약조건, 접근권한, 보안정책, 무결성 규정에 관한 명세를 포함
• 단 하나만 존재

3. 내부 스키마 (Internal Schema)

• 물리적 저장장치의 입장에서 본 데이터베이스 구조
• 실제로 데이터베이스에 저장될 레코드의 형식을 정의
• 저장 데이터 항목의 표현방법, 내부 레코드의 물리적 순서 등을 나타냄
• 시스템 프로그래머나 DBA가 보는 관점

논리적 독립성과 물리적 독립성

안쪽 스키마의 내용이 바뀌여도 바깥쪽 스키마에 영향을 끼치지 않는 것이 핵심 시스템의 의존성을 낮춘다는 의미와도 비슷, 각 계층별 의존성을 낮춤

1. 논리적 독립성

• 개념 스키마 (안쪽) 가 변경되어도 외부 스키마에는 영향을 미치지 않도록 지원하는 것
• 논리적 구조가 변경되어도 응용프로그램에는 영향이 없음

2. 물리적 독립성

• 내부 스키마 (안쪽) 가 변경되어도 외부 및 개념 스키마에 영향을 미치지 않도록 지원하는 것
• 저장 장치의 구조 변경이 응용 프로그램과 개념 스키마에 영향을 주지 않음

원시 자료형과의 차이

💡 핵심 개념: 원시 자료형은 값을 직접 저장하고, 배열/객체는 주소값을 저장합니다.

// 원시 자료형 예시
let a = 1;
let b = a; // 값 복사
b = 2;
console.log(a); // 1 (영향 없음)

// 참조형 예시
let arr1 = [1, 2, 3];
let arr2 = arr1; // 주소 복사
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4] (arr1도 변경됨!)

배열 (Array)

배열은 데이터를 순서대로 저장하는 자료구조입니다.

배열 만들기

// 1. 배열 리터럴 (가장 일반적)
const fruits = ["사과", "바나나", "오렌지"];

// 2. Array 생성자
const numbers = new Array(1, 2, 3);

// 3. Array.from()
const chars = Array.from("hello"); // ['h', 'e', 'l', 'l', 'o']

배열 다루기

const arr = ["첫번째", "두번째", "세번째"];

// 읽기
console.log(arr[0]); // "첫번째"

// 수정
arr[1] = "새로운 두번째";

// 추가
arr.push("마지막에 추가"); // 끝에 추가
arr.unshift("맨 앞에 추가"); // 앞에 추가

// 삭제
arr.pop(); // 마지막 요소 삭제
arr.shift(); // 첫 요소 삭제

객체 (Object)

객체는 관련된 데이터를 키-값 쌍으로 저장합니다.

기본 객체 만들기

const person = {
  name: "김코딩",
  age: 25,
  isStudent: true,
};

객체 속성 접근하기 🔑

1. 점 표기법 (Dot Notation)

console.log(person.name); // "김코딩"

• ✅ 사용할 수 있는 경우:
  • 유효한 JavaScript 식별자인 속성 이름
  • 문자로 시작하고
  • 문자, 숫자, _, $만 포함

2. 대괄호 표기법 (Bracket Notation)

const user = {
  // 특수문자를 포함한 속성 이름
  "user-id": "abc123",
  // 공백을 포함한 속성 이름
  "favorite color": "blue",
  // 숫자로 시작하는 속성 이름
  123: "number key",
  // 일반적인 속성 이름 (이것도 대괄호로 접근 가능)
  name: "Kim",
};

// 특수문자가 있는 경우
console.log(user["user-id"]); // "abc123"

// 공백이 있는 경우
console.log(user["favorite color"]); // "blue"

// 숫자로 시작하는 경우
console.log(user["123"]); // "number key"

// 변수를 사용하여 접근할 때
const propertyName = "name";
console.log(user[propertyName]); // "Kim"

// ❌ 점 표기법으로는 접근 불가능
// console.log(user.user-id); // 에러: undefined - id
// console.log(user.favorite color); // 문법 에러
// console.log(user.123); // 문법 에러

속성 이름 규칙 정리 📝

1. 모든 문자열은 속성 이름으로 사용 가능
2. 점 표기법은 유효한 식별자인 경우만 사용 가능
3. 대괄호 표기법은 모든 경우에 사용 가능
4. 가능하면 점 표기법을 사용하는 것이 가독성에 좋음
5. 특수한 경우에만 대괄호 표기법 사용 권장

this 키워드 이해하기 🎯

this는 "현재 객체"를 가리키는 특별한 키워드입니다.

const counter = {
  count: 0,

  // 일반 함수: this가 counter를 가리킴
  increase() {
    this.count += 1;
  },

  // ⚠️ 화살표 함수: this가 다르게 동작
  decreaseArrow: () => {
    this.count -= 1; // 주의! 여기서 this는 counter가 아닐 수 있음
  },
};

counter.increase();
console.log(counter.count); // 1

this 사용 시 주의사항

1. 일반 함수에서는 this가 해당 객체를 가리킴
2. 화살표 함수에서는 this가 외부 스코프의 this를 가리킴
3. 메서드는 가능하면 일반 함수로 정의하는 것이 안전

객체에 메서드 추가하기 🛠️

객체에 함수를 추가하는 방법에는 세 가지가 있습니다:

const calculator = {
  // 1. 메서드 축약 표현 (권장)
  add(a, b) {
    return a + b;
  },

  // 2. 함수 표현식
  subtract: function (a, b) {
    return a - b;
  },

  // 3. 화살표 함수
  multiply: (a, b) => a * b,
};

console.log(calculator.add(2, 3)); // 5
console.log(calculator.subtract(5, 2)); // 3
console.log(calculator.multiply(4, 2)); // 8

메서드 정의 시 주의사항 ⚠️

1. 메서드 축약 표현 (추천)

   • 함수 표현식보다는 좀 더 깔끔한 문법
   • this 바인딩이 올바르게 동작

2. 함수 표현식

   • 전통적인 방식
   • this 바인딩이 올바르게 동작
   • 더 긴 문법

3. 화살표 함수

   • 간결한 문법
   • ⚠️ this 바인딩이 다르게 동작
   • 객체의 메서드로는 권장하지 않음

화살표 함수와 this 이해하기 쉽게 설명하기 🎯

일반 함수의 this

일반 함수에서 this는 "누가 이 함수를 실행했는지"를 가리킵니다. 마치 "나를 부른 사람"을 가리키는 것과 같습니다.

const house = {
  owner: "Kim",

  // 일반 함수
  greet() {
    console.log(`Hello! This is ${this.owner}'s house!`);
  },
};

house.greet(); // "Hello! This is Kim's house!"
// 'house'가 greet을 호출했으므로, this는 'house'를 가리킴

화살표 함수의 this

화살표 함수는 자신만의 this를 가지지 않고, 함수가 정의될 때 둘러싸고 있는 스코프의 this를 그대로 사용합니다.

// 전역 스코프에서 객체를 정의할 때
const school = {
  student: "Park",

  // 이 화살표 함수는 전역 스코프에서 정의됨
  introduce: () => {
    console.log(`Hello! I am ${this.student}!`);
    // 여기서 this는 전역 객체(window)를 가리킴
  },
};

// 반면, 일반 함수 내부에서 화살표 함수를 정의하면 다르게 동작
const classroom = {
  teacher: "Kim",
  students: ["Park", "Lee"],

  // 일반 함수
  startClass() {
    // 이 화살표 함수는 startClass 함수 내부에서 정의됨
    this.students.forEach((student) => {
      console.log(`${this.teacher} is teaching ${student}`);
      // 여기서 this는 classroom을 가리킴 (startClass의 this를 그대로 사용)
    });
  },
};

classroom.startClass();
// "Kim is teaching Park"
// "Kim is teaching Lee"

왜 이렇게 동작할까요? 🤔

1. 객체 리터럴은 새로운 스코프를 만들지 않습니다

const obj = {
  name: "Kim",
  // 이 화살표 함수는 객체 안에 있지만,
  // 실제로는 전역 스코프에서 정의됨
  sayHi: () => {
    console.log(this.name); // undefined
  },
};

2. 함수는 새로운 스코프를 만듭니다

const obj = {
  name: "Kim",
  // 일반 함수는 새로운 스코프를 만듦
  sayHi() {
    // 이 화살표 함수는 sayHi 함수 스코프 안에서 정의됨
    const arrow = () => {
      console.log(this.name); // "Kim"
    };
    arrow();
  },
};

정리하면 📝

• 화살표 함수는 자신이 실제로 정의된 스코프의 this를 사용
• 객체 리터럴은 새로운 스코프를 만들지 않음
• 따라서 객체의 메서드로 직접 화살표 함수를 사용하면, this는 전역 객체를 가리킴
• 하지만 일반 함수 안에서 화살표 함수를 사용하면, 그 함수의 this를 그대로 사용할 수 있음

배열 vs 객체 비교

1. 함수 선언식 (Function Declaration)

가장 기본적이고 일반적인 함수 만드는 방법입니다.

function greet(name) {
  return `Hello ${name}!`;
}

// 호이스팅 예시 - 함수 선언 전에도 호출 가능
console.log(greet("John")); // "Hello John!" 출력

특징:

• 어디서든 사용 가능 (코드 위치 상관없이)
• 이해하기 쉽고 읽기 쉬움

2. 함수 표현식 (Function Expression)

함수를 변수에 담아서 사용하는 방법입니다.

const multiply = function (a, b) {
  return a * b;
};

// 반드시 함수를 선언한 후에 사용해야 함
console.log(multiply(2, 3)); // 6 출력

특징:

• 변수에 할당되므로 유연하게 사용 가능
• 다른 함수의 인자로 전달할 때 유용

3. 화살표 함수 (Arrow Function)

더 짧게 쓸 수 있는 최신 (ES6) 함수 작성 방법입니다.

const add = (a, b) => a + b;

// 여러 줄 코드가 필요할 때
const calculate = (a, b) => {
  const sum = a + b;
  return sum * 2;
};

특징:

• 코드가 짧고 간단함
• 한 줄 코드는 return 생략 가능

주요 차이점 설명

1. 호이스팅 (Hoisting)

호이스팅은 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성입니다.

// 함수 선언식: 선언과 동시에 초기화되어 사용 가능
console.log(greeting("John")); // "Hello John!" 출력
function greeting(name) {
  return `Hello ${name}!`;
}

// 함수 표현식: 선언 전에 사용 불가
console.log(multiply(2, 3)); // ReferenceError
const multiply = function (a, b) {
  return a * b;
};

2. 사용하기 좋은 상황

함수의 선언은 보통 개발자의 취향을 따르는데 아래와 같이 사용하는 경우가 많습니다.

1. 일반적인 함수는 함수 선언식으로 작성

function processData(data) {
  return data * 2;
}

2. 간단한 계산이나 배열 작업은 화살표 함수

const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);

3. 변수에 저장하거나 다른 함수에 전달할 때는 함수 표현식

const handleClick = function (event) {
  console.log("버튼이 클릭되었습니다");
};

4. 리액트 컴포넌트는 함수 선언식 또는 화살표 함수 표현식

// 1. 함수 선언식 - 가독성이 좋고 직관적
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// 2. 화살표 함수 표현식 - 간단한 컴포넌트에 적합
const Icon = ({ name, size }) => (
  <span className={`icon-${name} size-${size}`} />
);

1. 바벨(Babel)이란?

1.1 바벨의 역할 쉽게 이해하기

바벨은 최신 자바스크립트 코드를 구버전의 코드로 변환해주는 도구입니다.

마치 번역기처럼 최신 자바스크립트를 구버전 브라우저도 이해할 수 있게 번역해줍니다.

예를 들어:

// 우리가 작성한 최신 코드
const message = `안녕하세요 ${name}님!`;
const numbers = [...[1, 2, 3]];

// 바벨이 변환한 코드 (IE에서도 동작하는 버전)
var message = "안녕하세요 " + name + "님!";
var numbers = [].concat([1, 2, 3]);

1.2 바벨이 필요한 이유

1. 브라우저 호환성

   • 모든 브라우저가 최신 자바스크립트 기능을 지원하지는 않음
   • IE나 구버전 브라우저에서도 최신 코드가 동작하게 해줌

2. 리액트 코드 변환

// 우리가 작성한 JSX 코드
function Welcome() {
  return (
    <div>
      <h1>안녕하세요!</h1>
    </div>
  );
}

// 바벨이 변환한 일반 자바스크립트 코드
function Welcome() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "안녕하세요!")
  );
}

쉽게 이해하기

바벨은 마치 외국어 번역기와 같습니다:

• 우리(개발자)는 최신 문법으로 편하게 코드를 작성
• 바벨이 이를 구버전 브라우저가 이해할 수 있는 언어로 번역
• 덕분에 우리는 최신 문법을 걱정 없이 사용할 수 있음

2. 웹팩(Webpack)이란?

2.1 웹팩의 역할 쉽게 이해하기

웹팩은 모듈 번들러입니다. 쉽게 말해 여러 개의 파일을 하나로 합쳐주는 도구입니다. 마치 여러 개의 레고 블록을 하나로 조립하는 것과 같습니다.

모듈이란?

모듈은 쉽게 말해 하나의 독립된 파일입니다. 예를 들면:

• 버튼을 담당하는 파일 (button.js)
• 메뉴를 담당하는 파일 (menu.js)
• 로그인을 담당하는 파일 (login.js)

이렇게 기능별로 파일을 나누면:

• 코드 관리가 쉬워짐
• 다른 프로젝트에서 재사용하기 쉬움
• 팀원들과 협업하기 좋음

예를 들어:

// button.js (버튼 모듈)
export function Button() {
  return "멋진 버튼";
}

// menu.js (메뉴 모듈)
export function Menu() {
  return "메뉴 목록";
}

// app.js (메인 파일)
import { Button } from "./button";
import { Menu } from "./menu";

// 웹팩이 이 파일들을 하나의 bundle.js로 합쳐줍니다
// 브라우저는 bundle.js 파일 하나만 다운받으면 됩니다

쉽게 이해하기

웹팩은 마치 도서 편집자와 같습니다:

• 여러 작가가 쓴 원고(모듈들)를 받아서
• 하나의 책(bundle.js)으로 만들어줌
• 덕분에 독자(브라우저)는 한 권의 책만 읽으면 됨

2.2 웹팩이 필요한 이유

1. 파일 관리가 쉬워집니다

   • 여러 개의 작은 파일로 나눠서 개발
   • 웹팩이 알아서 하나로 합쳐줌

2. 성능이 좋아집니다

   • 여러 파일을 한 번에 다운로드
   • 필요한 코드만 불러올 수 있음

3. 모듈 시스템을 사용할 수 있습니다

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js
import { add } from "./math"; // add 함수만 가져와서 사용
console.log(add(2, 3)); // 5

2.3 웹팩의 주요 기능

1. 파일 합치기

   • 여러 자바스크립트 파일을 하나로 합침
   • CSS, 이미지 등도 관리 가능

2. 자동 새로고침

// 개발 중에 코드를 수정하면
function Button() {
  return <button>클릭!</button>;
}

// 코드를 수정했을 때
function Button() {
  return <button style={{ color: "blue" }}>클릭!</button>;
}

// 페이지가 자동으로 새로고침 됨

3. 코드 최적화

// 큰 컴포넌트는 필요할 때만 불러오기
const BigComponent = React.lazy(() => import("./BigComponent"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <BigComponent /> {/* 이 컴포넌트는 필요할 때만 다운로드 됨 */}
    </Suspense>
  );
}

쉽게 이해하기

코드 최적화는 마치 책을 여러 권으로 나누는 것과 같습니다:

• 처음에는 목차와 첫 장만 받아옴
• 다른 장들은 필요할 때 받아옴
• 덕분에 처음 시작할 때 모든 내용을 한번에 받지 않아도 됨

3. 실무에서 자주 사용하는 방법

3.1 웹팩 직접 설정하기

1. 기본 설정 파일 만들기

// webpack.config.js
const path = require("path");

module.exports = {
  // 시작점: 웹팩이 파일을 읽기 시작하는 위치
  entry: "./src/index.js",

  // 결과물: 하나로 합쳐진 파일이 저장되는 위치
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },

  // 규칙: 파일 종류별로 어떻게 처리할지 설정
  module: {
    rules: [
      {
        // .js로 끝나는 파일은
        test: /\.js$/,
        exclude: /node_modules/, // 이 폴더 제외
        use: {
          loader: "babel-loader", // 바벨로 처리
        },
      },
      {
        // .css로 끝나는 파일은
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // CSS 처리
      },
    ],
  },
};

2. 필요한 패키지 설치하기

# 웹팩 관련 패키지
npm install webpack webpack-cli --save-dev

# 로더 패키지들
npm install babel-loader css-loader style-loader --save-dev

3. package.json에 명령어 추가

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  }
}

쉽게 이해하기

웹팩 설정은 마치 공장 설비를 설정하는 것과 같습니다:

• entry: 원료가 들어오는 입구
• output: 완성품이 나가는 출구
• rules: 원료를 어떻게 가공할지 정하는 규칙
• loaders: 각각의 가공 기계

3.2 Create React App 사용하기

Create React App을 사용하면 바벨과 웹팩이 자동으로 설정됩니다.

# 프로젝트 생성
npx create-react-app my-app

# 개발 서버 시작
npm start

# 배포용 파일 만들기
npm run build

3.3 Next.js 사용하기

Next.js도 바벨과 웹팩이 미리 설정되어 있습니다.

# 프로젝트 생성
npx create-next-app my-app

# 개발 서버 시작
npm run dev

# 배포용 파일 만들기
npm run build

1. 엄격한 동등 비교:

• switch 문은 === (엄격한 동등 비교)를 사용하여 비교합니다. 즉, 타입이 다르면 일치하지 않는 것으로 간주됩니다.

• 따라서, 비교할 값의 타입을 항상 확인해야 합니다.

const value = "5";
switch (value) {
  case 5: // 이 경우는 false
    console.log("일치합니다.");
    break;
  default:
    console.log("일치하지 않습니다.");
}

2. break 문 사용:

• 각 case 블록의 끝에 break 문을 추가하지 않으면, 다음 case 블록으로 계속 실행됩니다.

• 이를 "fall-through"라고 하며, 의도하지 않은 동작을 초래할 수 있습니다.

• return 사용: switch 문이 함수 내에 있을 경우, break 대신 return을 사용할 수 있습니다.return을 사용하면 해당 함수의 실행을 종료하고 값을 반환합니다. 이 경우, switch 문이 끝나면 더 이상 실행되지 않습니다.

function getFruitColor(fruit) {
  switch (fruit) {
    case "apple":
      return "빨간색입니다."; // return 사용
    case "banana":
      return "노란색입니다."; // return 사용
    default:
      return "알 수 없는 과일입니다."; // return 사용
  }
}
console.log(getFruitColor("apple")); // '빨간색입니다.'

3. default 문 사용:

• 모든 case에 해당하지 않는 경우를 처리하기 위해 default 문을 사용하는 것이 좋습니다. 이는 예기치 않은 입력에 대한 처리를 도와줍니다.

const color = "purple";
switch (color) {
  case "red":
    console.log("빨간색입니다.");
    break;
  case "blue":
    console.log("파란색입니다.");
    break;
  default:
    console.log("알 수 없는 색상입니다."); // 이 메시지가 출력됩니다.
}

4. 복잡한 조건 피하기:

• switch 문은 단일 값에 대한 비교에 적합합니다. 복잡한 조건을 처리해야 할 경우, if - else 문을 사용하는 것이 더 나을 수 있습니다.

5. 문자열과 숫자 혼용 주의:

• switch 문에서 문자열과 숫자를 혼용하여 사용할 경우, 타입이 다르기 때문에 일치하지 않을 수 있습니다.

• 항상 타입을 일치시키는 것이 중요합니다.

• 예시:

const input = "10"; // 문자열
switch (input) {
  case 10: // 숫자
    console.log("숫자 10입니다."); // 이 메시지는 출력되지 않습니다.
    break;
  case "10": // 문자열
    console.log('문자열 "10"입니다.'); // 이 메시지가 출력됩니다.
    break;
  default:
    console.log("알 수 없는 값입니다.");
}

6. 각 case에서 동일한 변수명 사용 주의:

• switch 문 내의 각 case에서 동일한 변수명을 선언하면, 변수의 스코프가 switch 문 전체로 확장됩니다. 이로 인해 변수명이 충돌하게 되어 에러가 발생할 수 있습니다.

• 각 case는 독립적인 블록이 아니기 때문에, 같은 이름의 변수를 여러 번 선언할 수 없습니다.

• 예시:

switch (fruit) {
  case "apple":
    let color = "red"; // 첫 번째 case에서 color 선언
    console.log(color);
    break;
  case "banana":
    let color = "yellow"; // 두 번째 case에서 color 선언 (에러 발생)
    console.log(color);
    break;
  default:
    console.log("알 수 없는 과일입니다.");
}

7. 렉시컬 스코프(Lexical Scoping):

• 렉시컬 스코프란?: 렉시컬 스코프는 변수가 정의된 위치에 따라 그 변수가 유효한 범위를 결정하는 개념입니다. 즉, 함수가 선언된 위치에 따라 그 함수 내에서 접근할 수 있는 변수의 범위가 정해집니다.

• case와 default 절은 레이블과 같아서, 제어 흐름이 점프할 수 있는 가능한 위치를 나타냅니다. 그러나 이들은 자체적으로 렉시컬 스코프를 생성하지 않습니다. 예를 들어:

const action = "say_hello";
switch (action) {
  case "say_hello":
    const message = "hello";
    console.log(message);
    break;
  case "say_hi":
    const message = "hi"; // 에러 발생
    console.log(message);
    break;
  default:
    console.log("Empty action received.");
}

이 예제는 "Uncaught SyntaxError: Identifier 'message' has already been declared"라는 에러를 출력합니다.

이는 첫 번째 const message = 'hello';가 두 번째 const message = 'hi'; 선언과 충돌하기 때문입니다.

이는 두 const 선언이 switch 본문에서 생성된 동일한 블록 스코프 내에 있기 때문입니다.

• 해결 방법: case 절에서 let 또는 const 선언이 필요할 경우, 블록으로 감싸야 합니다.

const action = "say_hello";
switch (action) {
  case "say_hello": {
    const message = "hello";
    console.log(message);
    break;
  }
  case "say_hi": {
    const message = "hi";
    console.log(message);
    break;
  }
  default: {
    console.log("Empty action received.");
  }
}

Type Conversion과 Type Coercion의 차이

자바스크립트에서 데이터 타입을 다룰 때 type conversion과 type coercion이라는 두 가지 개념이 있습니다. 이 두 용어는 비슷하게 들리지만, 서로 다른 의미를 가집니다.

Type Conversion (타입 변환)

• 정의: 명시적으로 데이터 타입을 변환하는 과정입니다. 프로그래머가 의도적으로 변환을 수행합니다.

• 예시:

  • String() 함수를 사용하여 숫자를 문자열로 변환:

    const num = 123;
    const str = String(num); // '123'
    console.log(typeof str); // 'string'

  • Number() 함수를 사용하여 문자열을 숫자로 변환:

    const strNum = "456";
    const numConverted = Number(strNum); // 456
    console.log(typeof numConverted); // 'number'

Type Coercion (타입 강제 변환)

• 정의: 자바스크립트 엔진이 자동으로 데이터 타입을 변환하는 과정입니다. 프로그래머가 의도하지 않더라도 발생할 수 있습니다.

• 예시:

  • 문자열과 숫자를 더할 때, 숫자가 문자열로 변환됩니다:

    const result = 5 + "5"; // '55'
    console.log(result); // '55'

  • 비교 연산에서 타입이 자동으로 변환됩니다:

    console.log(5 == "5"); // true
    // '5'가 숫자 5로 변환되어 비교됩니다.

요약

• Type Conversion: 프로그래머가 명시적으로 타입을 변환하는 것입니다.

• Type Coercion: 자바스크립트가 자동으로 타입을 변환하는 것입니다.

이 두 개념을 이해하는 것은 자바스크립트에서 데이터 타입을 효과적으로 다루는 데 중요합니다.

Type Coercion과 버그

Type Coercion은 자바스크립트에서 자동으로 데이터 타입을 변환하는 과정으로, 때때로 예기치 않은 결과를 초래할 수 있습니다.

이러한 자동 변환은 코드의 가독성을 떨어뜨리고, 버그를 양산할 수 있는 원인이 됩니다. 따라서 Type Coercion을 이해하는 것이 중요합니다.

Type Coercion으로 인한 버그 예시

1. 비교 연산에서의 문제:

   • == 연산자는 타입을 강제로 변환하여 비교합니다. 이로 인해 의도하지 않은 결과가 발생할 수 있습니다.

   console.log(0 == "0"); // true
   console.log(false == ""); // true
   console.log(null == undefined); // true

   이러한 결과는 코드의 의도를 명확히 이해하지 못하게 만들 수 있습니다.

2. 문자열과 숫자의 결합:

   • 숫자와 문자열을 더할 때, 숫자가 문자열로 변환되어 예기치 않은 결과를 초래할 수 있습니다.

   const a = 5;
   const b = "10";
   const result = a + b; // '510'
   console.log(result); // '510'

   이 경우, 숫자 5가 문자열로 변환되어 문자열 결합이 이루어집니다.

결론

Type Coercion은 자바스크립트의 유연성을 제공하지만, 동시에 버그를 양산할 수 있는 잠재적인 원인이 됩니다.

따라서, === (엄격한 동등 비교 연산자)를 사용하여 타입 변환을 피하고, 명시적인 타입 변환을 통해 코드를 작성하는 것이 좋습니다.

이를 통해 코드의 가독성을 높이고, 예기치 않은 동작을 방지할 수 있습니다.

데이터 타입

모든 값 (values)은 object 또는 primitive 자료형입니다.

여기서는 원시 자료형에 대해 알아보겠습니다.

7가지 원시 자료형

• number: 숫자 값을 나타내며, 정수와 부동 소수점 숫자를 포함합니다.

  • 예: 42 // 정수
  • 예: 3.14 // 부동 소수점 숫자

• string: 문자들의 집합으로, 텍스트 데이터를 표현합니다.

  • 예: "안녕하세요" // 문자열
  • 예: 'JavaScript' // 문자열

• boolean: 참(true) 또는 거짓(false) 값을 나타냅니다.

  • 예: true // 참
  • 예: false // 거짓

• undefined: 값이 할당되지 않은 변수를 나타내며, '빈 값'으로 간주됩니다.

  • 예: let x; // x는 undefined

• null: 의도적으로 '빈 값'을 나타내기 위해 사용됩니다.

  • 예: let y = null; // y는 null

• symbol: 고유하고 변경할 수 없는 값으로, 주로 객체의 프로퍼티 키로 사용됩니다.

  • 예: const sym = Symbol('description'); // 심볼 생성

• bigInt: 매우 큰 정수를 나타내기 위해 사용되며, 일반 number 타입이 표현할 수 있는 범위를 초과하는 값을 다룰 수 있습니다.

  • 예: const bigIntValue = 1234567890123456789012345678901234567890n; // 큰 정수

동적 타이핑

• 정의: 자바스크립트는 동적 타이핑 언어로, 변수의 타입이 실행 중에 결정됩니다.

• 특징:

  • 변수에 다양한 데이터 유형을 할당할 수 있습니다.
  • 같은 변수에 다른 타입의 값을 재할당할 수 있습니다.

• 장점: 유연한 코드 작성이 가능하여 개발 속도가 빨라집니다.

• 단점: 타입 오류를 사전에 방지하기 어려워, 런타임에서 버그가 발생할 수 있습니다.

• 비유: 동적 타이핑은 마치 상자에 책을 넣었다가 다시 꺼내고 다른 물건을 넣는 것과 같습니다.

undefined와 null의 차이

• undefined:

  • 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
  • 자바스크립트에서 자동으로 할당되는 값으로, 메모리에 존재하지만 값이 없기 때문에 크기가 작습니다.
  • 예: let x; // x는 undefined

• null:

  • 개발자가 의도적으로 '빈 값'을 할당한 상태를 나타냅니다.
  • 객체를 가리키는 포인터로, 메모리에 주소값을 할당받아 존재하지만 값은 없습니다.
  • 예: let y = null; // y는 null

메모리 측면에서의 차이

• undefined는 메모리에서 크기가 작고, 값이 없음을 나타내는 상태입니다.
• null은 빈 객체를 가리키는 포인터로, 메모리에서 크기가 더 큽니다.

typeof null

• typeof null이 object인 이유는 자바스크립트의 역사적 유산으로, null이 객체로 잘못 분류되었기 때문입니다.
• 이는 자바스크립트의 타입 시스템에서 발생한 버그로 여겨집니다.

요약

• undefined는 변수의 초기화가 이루어지지 않은 상태이며, null은 개발자가 의도적으로 빈 값을 할당한 상태로 이해할 수 있습니다.

let, const, and var

기본 개념

• let:

  • 변수를 선언할 때 사용하며, 블록 스코프를 따릅니다.
  • 같은 블록 내에서 동일한 이름으로 변수를 재선언할 수 없습니다.
  • 예:

    let x = 10;
    if (true) {
      let x = 20; // 다른 블록에서의 x
      console.log(x); // 20
    }
    console.log(x); // 10

• const:

  • 상수를 선언할 때 사용하며, 블록 스코프를 따릅니다.
  • 선언과 동시에 초기화해야 하며, 재할당이 불가능합니다.
  • 객체나 배열의 경우, 내부 요소는 변경할 수 있습니다.
  • 예:

    const y = 30;
    // y = 40; // 오류 발생
    const arr = [1, 2, 3];
    arr.push(4); // 가능
    console.log(arr); // [1, 2, 3, 4]

• var:

  • 변수를 선언할 때 사용하며, 함수 스코프를 따릅니다.
  • 블록 내에서 선언하더라도 함수 전체에서 접근 가능합니다.
  • 같은 이름으로 변수를 재선언할 수 있습니다.
  • 예:

    var z = 50;
    if (true) {
      var z = 60; // 같은 함수 내에서의 z
      console.log(z); // 60
    }
    console.log(z); // 60

특징 및 차이점

스코프

• 블록 스코프: let과 const는 블록 내에서만 유효하며, 블록이 끝나면 변수도 소멸됩니다. 이는 코드의 가독성을 높이고, 변수의 충돌을 방지하는 데 도움이 됩니다.

• 함수 스코프: var는 함수 내에서만 유효하며, 함수가 종료되면 변수도 소멸됩니다. 블록 내에서 선언하더라도 함수 전체에서 접근할 수 있어, 예기치 않은 동작을 초래할 수 있습니다.

결론

• const를 기본으로 사용하고, 값이 변경될 가능성이 있는 경우에만 let을 사용하라고 권장합니다. var는 사용을 피하는 것이 좋습니다.

• 스코프의 이해는 변수를 효과적으로 관리하고, 코드의 예측 가능성을 높이는 데 중요합니다.

변수를 선언할 때, JavaScript 엔진은 해당 변수를 메모리에 생성합니다. 이때 변수는 기본적으로 undefined로 초기화됩니다. 즉, 변수를 선언하는 순간에는 값이 할당되지 않았기 때문에 undefined 상태가 됩니다.

예시

let myVariable; // 변수 선언
console.log(myVariable); // undefined

위의 코드에서 myVariable을 선언했지만, 값이 할당되지 않았기 때문에 undefined가 출력됩니다.

2. 값 할당

변수를 선언한 후, 값을 할당할 수 있습니다. 이때 변수는 새로운 값을 저장하게 되며, 이전의 undefined 상태에서 해당 값으로 변경됩니다.

예시

myVariable = 10; // 값 할당
console.log(myVariable); // 10

위의 코드에서 myVariable에 10이라는 값을 할당하면, 이제 myVariable은 10이라는 값을 가지게 됩니다.

3. 변수 호이스팅 (Hoisting)

JavaScript에서는 변수 선언이 코드의 최상단으로 끌어올려지는 현상을 호이스팅이라고 합니다.

이로 인해 변수를 선언하기 전에 해당 변수를 참조할 수 있습니다. 그러나 변수의 값은 호이스팅되지 않으며, 초기화는 여전히 선언된 위치에서 이루어집니다.

호이스팅의 예시

console.log(myVariable); // undefined
var myVariable = 10;
console.log(myVariable); // 10

위의 코드에서 console.log(myVariable);가 변수 선언 이전에 호출되었지만, undefined가 출력됩니다. 이는 JavaScript 엔진이 다음과 같이 해석하기 때문입니다:

var myVariable; // 호이스팅: 변수 선언이 최상단으로 끌어올려짐
console.log(myVariable); // undefined
myVariable = 10; // 값 할당

let과 const의 호이스팅

let과 const로 선언된 변수도 호이스팅이 발생하지만, 이들 변수는 일시적 사각지대(Temporal Dead Zone, TDZ)에 존재합니다. 즉, 변수 선언 이전에 해당 변수를 참조하려고 하면 ReferenceError가 발생합니다.

예시

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 20;

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 30;

위의 코드에서 myLet과 myConst는 선언 이전에 접근하려고 할 때 오류가 발생합니다. 이는 let과 const가 선언된 위치에서만 사용할 수 있기 때문입니다.

선언된 변수 전 줄까지가 바로 일시적 사각지대에 해당됩니다.

4. 변수의 상태 변화

변수에 값을 할당한 후, 해당 변수는 새로운 값을 참조하게 됩니다. 이때 변수의 타입은 할당된 값에 따라 결정됩니다. JavaScript는 동적 타이핑 언어이기 때문에, 변수의 타입은 값에 따라 변경될 수 있습니다.

예시

myVariable = 'Hello'; // 문자열 할당
console.log(myVariable); // 'Hello'

myVariable = true; // 불리언 할당
console.log(myVariable); // true

5. 요약

1. 변수 선언: 변수를 선언하면 메모리에 생성되고, 기본적으로 undefined로 초기화됩니다.

2. 값 할당: 값을 할당하면 변수는 해당 값을 참조하게 되며, 이전의 undefined 상태에서 새로운 값으로 변경됩니다.

3. 호이스팅: 변수 선언이 최상단으로 끌어올려지며, 초기화는 선언된 위치에서 이루어집니다. 이로 인해 선언 이전에 변수를 참조하면 undefined가 출력됩니다. let과 const는 호이스팅이 발생하지만, 일시적 사각지대(TDZ)가 존재하여 선언 이전에 접근하면 ReferenceError가 발생합니다.

4. 상태 변화: 변수는 동적 타이핑 언어인 JavaScript에서 할당된 값에 따라 타입이 변경될 수 있습니다.

JavaScript의 특성

1. High-level (고급 언어) :

• JavaScript는 고급 프로그래밍 언어로, 개발자가 복잡한 세부 사항에 대해 걱정할 필요가 없습니다. 예를 들어, 메모리 관리와 같은 저수준의 작업은 JavaScript 엔진이 자동으로 처리합니다.

• 고수준 언어 vs 저수준 언어 :

  • 고수준 언어: 개발자가 쉽게 이해하고 사용할 수 있는 구문을 제공하며, 메모리 관리와 같은 복잡한 세부 사항을 추상화합니다. 예: Python, JavaScript.

  • 저수준 언어: 하드웨어와 가까운 수준에서 작동하며, 메모리 관리와 같은 세부 사항을 직접 다뤄야 합니다. 예: C, 어셈블리 언어.

  • 예시: C 언어에서 메모리를 직접 할당하고 해제해야 하는 반면, JavaScript에서는 let a = [];와 같이 배열을 선언하면 메모리가 자동으로 관리됩니다.

2. Object-oriented (객체 지향) :

• JavaScript는 객체 지향 프로그래밍(OOP) 패러다임을 지원합니다. 이는 데이터와 그 데이터를 조작하는 함수를 객체라는 단위로 묶어 관리할 수 있음을 의미합니다.

• 프로토타입 기반 : JavaScript는 클래스 기반이 아닌 프로토타입 기반의 객체 지향 언어입니다. 이는 객체가 다른 객체를 상속할 수 있도록 하며, 새로운 객체를 생성할 때 기존 객체를 기반으로 할 수 있습니다.

• 예시 :

  function Person(name) {
    this.name = name;
  }
  Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
  
  const john = new Person('John');
  john.greet(); // Hello, my name is John

3. Multi-paradigm (다양한 패러다임 지원) :

• JavaScript는 여러 프로그래밍 패러다임을 지원합니다. 즉, 객체 지향 프로그래밍 뿐만 아니라 함수형 프로그래밍, 명령형 프로그래밍 등 다양한 스타일로 코드를 작성할 수 있습니다.

• 예시 코드 :

  // 함수형 프로그래밍 예시
  const numbers = [1, 2, 3, 4, 5];
  const doubled = numbers.map(num => num * 2);
  console.log(doubled); // [2, 4, 6, 8, 10]
  
  // 객체 지향 프로그래밍 예시
  class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
  }
  
  const dog = new Animal('Dog');
  dog.speak(); // Dog makes a noise.

JavaScript 코드 작성 방법

JavaScript 코드를 작성하는 방법에는 여러 가지가 있으며, 각 방법은 특정 상황에 따라 유용하게 사용될 수 있습니다. 아래는 HTML 문서에서 JavaScript를 작성하는 주요 방법들입니다.

1. 인라인 스크립트

HTML 요소 내에서 직접 JavaScript 코드를 작성할 수 있습니다. 이 방법은 간단한 스크립트나 이벤트 핸들러에 유용합니다.

<button onclick="alert('Hello, World!')">Click Me</button>

2. <script> 태그를 사용한 내부 스크립트

HTML 문서의 <head> 또는 <body> 섹션에 <script> 태그를 사용하여 JavaScript 코드를 작성할 수 있습니다. 이 방법은 문서 내에서 직접 스크립트를 작성할 수 있게 해줍니다.

<script>
  console.log('Hello from internal script!');
</script>

3. 외부 JavaScript 파일

JavaScript 코드를 별도의 파일에 작성하고, HTML 문서에서 <script> 태그를 사용하여 링크할 수 있습니다. 이 방법은 코드의 재사용성과 유지보수성을 높여줍니다.

<script src="script.js"></script>

외부 파일 예시 (script.js)

console.log('Hello from external script!');

스크립트 위치: <body> 태그 끝에 작성하는 이유

JavaScript 파일을 <body> 태그의 끝에 작성하는 이유는 페이지의 모든 HTML 요소가 로드된 후에 스크립트가 실행되도록 하기 위함입니다.

이렇게 하면 DOM 요소에 접근할 때 해당 요소가 이미 존재하므로, 스크립트가 오류 없이 정상적으로 작동할 수 있습니다.

만약 <head> 섹션에 스크립트를 작성하면, HTML 요소가 로드되기 전에 스크립트가 실행되어 DOM 요소를 찾지 못해 오류가 발생할 수 있습니다.

따라서, 일반적으로 다음과 같은 구조를 따릅니다 :

<body>
  <h1>JavaScript Fundamentals – Part 1</h1>
  <script src="script.js"></script>
</body>

이렇게 하면 페이지가 로드된 후에 JavaScript 코드가 실행되어, 모든 요소에 안전하게 접근할 수 있습니다.

JavaScript의 값과 변수

JavaScript에서 변수는 데이터를 저장하는 공간입니다. 변수를 사용하면 프로그램에서 값을 쉽게 관리하고 조작할 수 있습니다. 변수에 값을 할당하는 과정을 상자에 라벨을 붙이는 것에 비유할 수 있습니다.

값과 변수의 비유

• 상자: 변수는 데이터를 저장하는 상자와 같습니다.
• 라벨: 변수 이름은 상자에 붙이는 라벨로, 상자가 어떤 데이터를 담고 있는지를 나타냅니다.
• 값: 상자 안에 들어 있는 데이터가 바로 값입니다.

예를 들어, 다음과 같은 코드가 있다고 가정해 보겠습니다:

let age = 25; // 'age'라는 라벨이 붙은 상자에 25라는 값이 저장됨

여기서 age는 상자의 라벨이고, 25는 상자 안에 들어 있는 값입니다. 이처럼 변수를 사용하면 나중에 age라는 라벨을 통해 언제든지 25라는 값을 참조할 수 있습니다.

변수 이름 규칙 (컨벤션)

변수 이름을 정할 때는 몇 가지 규칙과 컨벤션이 있습니다:

1. 영문자, 숫자, 언더스코어(_), 달러 기호($): 변수 이름은 영문자, 숫자, 언더스코어, 달러 기호를 사용할 수 있습니다. 그러나 숫자로 시작할 수는 없습니다.

   • 올바른 예: myVariable, age_1, $price
   • 잘못된 예: 1stVariable, @name

2. 대소문자 구분: JavaScript는 대소문자를 구분합니다. 즉, myVariable과 myvariable은 서로 다른 변수입니다.

3. 의미 있는 이름: 변수 이름은 그 변수가 어떤 값을 담고 있는지를 잘 나타내야 합니다. 예를 들어, age는 나이를 나타내는 변수로 적절하지만, x는 의미가 불분명합니다.

4. 예약어 사용 금지: JavaScript의 예약어(예: if, for, function 등)는 변수 이름으로 사용할 수 없습니다.

사용할 수 없는 변수 이름

• 예약어: JavaScript에서 미리 정의된 키워드나 예약어는 변수 이름으로 사용할 수 없습니다.
• 특수 문자: 공백이나 특수 문자는 변수 이름에 포함될 수 없습니다. 예를 들어, my variable이나 my-variable!는 유효하지 않습니다.

이러한 규칙을 따르면, 코드의 가독성을 높이고, 다른 개발자와의 협업 시 혼란을 줄일 수 있습니다.

한 주의 요일을 리스트 array 로 뽑지만 만약에 "내 개인정보를 저장한다고 한다면", 어떻게 할까?

const myInfo = ["dolphin", 12, "male", true]

이렇게 배열로 내 정보를 저장한다면 대체 "dolphin" 은 무엇이고 12는 나이인지 뭔지 알 수가 없다.

그래서 이 때 object 를 쓰는데, array 와 다른 점은 object 는 각 value 에 이름 (변수) 을 줄 수 있다.

배열의 형태가 bracket 을 사용했다면 object 는 curly bracket 을 사용한다. (이건 마치 파이썬의 dictionary 형태 비슷..한거)

object 는 label 을 내가 저장하고 싶은 데이터에 줄 수 있다.

const myInfo = {
  name : "dolphin",
  age : 12,
  gender : "Male",
  isWorking : ture,
  favFood : ["김치", "미역국", "된장찌개"],
  device : 
  [{brand:'apple', 
  modelname:'macbookpro'}, 
  {brand:'samsung', 
  modelname:'galaxyflip2'}]
};

원하는 값에 접근하기 위해서는 다음과 같은 방법을 사용한다.

console.log(myInfo.device[1].brand);

object 에 들어가 있는 값을 수정할 수 있다.

myInfo.age = 25;

object 에 키와 밸류를 추가할 수도 있다. 그러면 출력시 마지막에 위치하게 된다.

myInfo.friend = "gorae";

중요한 점은 object 에서 myInfo 의 내부에 있는 값은 바꿀 수 있었지만 myInfo 자체를 바꾸는 것은 (update) 불가능했다. 그 이유는 const, 상수로 선언된 object 이기 때문이다.

이처럼 object 안에 array 를 넣을 수 있고, object 내의 array 내에 object 를 넣을 수 있다.

그리고 object 안에 object 를 아래와 같이 넣을 수 있다.

const doubleCurly = {
  people1 : {name:"nico",age:24},
  people2 : {name:"minji",age:19}
};
console.log(doubleCurly);

다음과 같이 출력된다.

{ people1: { name: 'nico', age: 24 },
  people2: { name: 'minji', age: 19 } }

people1 의 name 에도 접근할 수 있게 되었다.

console.log(doubleCurly.people1.name);

1. 변수명, camelCase.

변수명 중간에 스페이스 (공간) 가 필요한 곳에는 스페이스를 넣을 수 없으니 대문자를 넣는다. 다른 기호들은 허용되지 않는다.

2. 일주일의 각 요일을 출력해 보기

const mon = "Mon";
const tue = "Tue";
const wed = "Wed";
const thu = "Thu";
const fri = "Fri";
const sat = "Sat";
const sun = "Sun";

console.log(mon,tue,wed,thu,fri,sat,sun);

나름 무식? 하게 했어도 원하는 결과물은 볼 수는 있긴 하다. 하지만 좋지 않은 예시이다.

3. 배열 (array)

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun",
                    {name:"mook"},["공휴일","국경일"]];

console.log(daysOfWeek);
console.log(daysOfWeek[2]);

아래와 같이 출력된다.

[ 'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sun',
  { name: 'mook' },
  [ '공휴일', '국경일' ] ]

Wed

배열(list) 안에는 booltype, object, array, string, let, const 그 무엇도 저장이 가능하다.

배열 내에서 각 요소에 접근하기 위해서는 위의 코드처럼 console.log(daysOfWeek[2]); 이렇게 표시하는데 컴퓨터는 앞에서부터 0부터 세기 시작한다는 것을 기억하자.

const myName = Nicolas;
// js 에서 Nicolas 라는 변수를 찾으려 드는데 없어서 error 발생.

const myName = "Nicolas";
const emoji = "🥰";

console.log(myName);

"" (큰따옴표) 나 '' (작은따옴표) 의 결과는 같다. 문자열은 반드시 따옴표를 사이에 넣어 줘야 한다. 따옴표 내의 숫자는 숫자가 아닌 문자열이다.

2. boolean (불타입)

const isHandsome = true;

3. number - float

const floatNumber = 55.1;

console.log(floatNumber)

가끔은 이 변수의 값이 말 그대로 변수가 아니기를, 변하지 않기를 바랄 때 어떻게 할까? 변수를 선언하는 것 (let) 대신 상수 (const) 를 선언한다.

임의의 자바스크립트 1000줄 코드에서 info 라는 변수에 100을 넣어 생성 및 초기화 그리고 사용하다가 어느 시점에 info = 99 로 업데이트 해서 써버렸다.

이러면 어디에서 잘못되었는지 찾기가 쉽지 않다고 한다.

그래서 let 대신 const 를 쓰는데 constant, 상수는 stable, 안정적이며 변하지 않는다.

아래 예시로 이해할 수 있다.

const a = 221;
const b = a - 5;

// 위에 상수를 선언해 놓고 a 는 4라고 슬그머치 업데이트를 시도.
a = 4;
console.log(b, a);

// 여지없이 콘솔에 에러 메시지를 확인할 수 있다.
TypeError: Assignment to constant variable. at /script.js:4:3

// 상수에는 어떤 대입을 할 수 없다.

2. var

let 과 같은 역할을 하는데 이제는 var 을 사용하지 않고 let과 const만 쓰인다.

참고하면 좋을 링크 https://ko.javascript.info/var

a = 221
b = a - 5

console.log(b)

모든 instruction 은 각기 다른 라인에 있다. 각각의 라인들을 'expressions' 라고 부르도록 한다.

한 expression 이 끝났음을 선언하는 법은 끝에 semi-colon 을 (;) 넣어주는 것이다.

a = 221;
b = a - 5;

console.log(b,a);

2. 변수 let의 Create, Initialize, Use

변수는 다음 세 과정을 거친다

1. Create (변수를 생성하고)
2. Initialize (변수에 값을 넣어 초기화하고)
3. Use (변수를 사용 또는 업데이트하기)

위의 코드를 다시 확인해보면,

// 1. 변수 a를 생성하고
// 2. 그 a를 221로 초기화시켰다.
let a = 221;

// 여기에는 let a - 5 라고 쓰지 않았다. 위에서 생성 및 초기화된 변수 a 를 "사용"하고 있다.
let b = a - 5;

console.log(b,a);

변수를 초기화하기 전에 "let" 이라는 단어를 넣어야 하는 것이 규칙이라고 한다. 변수를 초기화 하거나 생성할 때에는 변수 앞에 let 을 넣어주지만, 이미 생성 및 초기화 된 변수를 "사용" 하거나 "업데이트" 할 때는 참조만 하면 되므로 let 을 넣을 필요가 없다.

아래는 변수를 업데이트 하는 과정이다.

let a = 221;
let b = a - 5;
a = 4;
// 여기에는 let a 라고 쓰지 않았다. 위에서 생성 및 초기화된 변수 a 를 "업데이트"하고 있다.
console.log(b, a);

b는 216, a는 기존 221 에서 4로 업데이트 되었다.

자바스크립트도 위에서 아래로 코드가 읽어져 내려가는 형태이다.