2025-08-31

오늘 배운 것

HTML

HTML 주석문

<--! -->

HTML 주요 태그 및 속성

  • <label>
    • for 속성 → <input id="…">와 연결됨. 클릭하면 input 활성화.
  • <a>
    • href="#top", href="#bottom" → 페이지 내부 이동.
    • target="_blank" → 새 탭 열기.
  • <select> & <option>
    • 드롭다운 메뉴, <option value="…">텍스트</option>.
  • <table>
    • 구조: <thead>, <tbody>, <tfoot>.
    • 병합: rowspan, colspan.
  • <form>
    • method: 생략 시 기본은 GET.
    • action: 요청 보낼 URL.
    • enctype: 전송 형식 (파일 업로드 시 multipart/form-data).
    • <input>의 다양한 type: text, password, radio, checkbox, file 등.

form 태그 전송방식

form 태그 전송 방식은 GET과 POST 두 가지가 있으며, GET은 주소창에 쿼리 스트링을 붙여 데이터를 전달하는 방식으로 브라우저에서 쉽게 확인 가능하고 요청 길이에 제한이 있습니다. 반면, POST는 데이터를 요청 본문에 담아 전달하는 방식으로 주소창에 노출되지 않고 용량 제한이 없다는 특징이 있습니다. GET은 주로 단순 조회나 검색 시 사용되고, POST는 회원가입·로그인·글쓰기처럼 서버 데이터에 변화를 주는 요청에 사용됩니다.

CSS

선택자

  • 기본 선택자
    • 태그, 클래스(.class), 아이디(#id).
  • 속성 선택자
    • [required], [type=text].
  • 복합 선택자
    • div p, div > p, div + p, div ~ p.
  • 구조적 가상 클래스
    • :nth-child(n) → 1부터 시작.
    • :nth-child(2n) (짝수), :nth-child(2n+1) (홀수).
    • 주의: n은 0부터 대입됨.
  • 명시도
    • ID > Class/속성/가상클래스 > 태그 선택자.

CSS 레이아웃 & 박스 속성

  • display
    • block, inline, inline-block, none, flex.
  • 박스 모델
    • 기본은 content-box.
    • box-sizing: border-box → width에 padding, border 포함.
  • position
    • static: 기본값.
    • relative: 원래 위치 기준 이동.
    • absolute: 부모가 static이 아니어야 기준 됨.
    • fixed: 화면(viewport) 기준 고정.
  • flex
    • 컨테이너 속성: justify-content, align-items.
    • 아이템 속성: align-self.

JS

로컬 스토리지 VS 세션 스토리지

  • 로컬: 브라우저 종료해도 유지.
  • 세션: 브라우저 닫으면 삭제.
  • 메서드: setItem, getItem, removeItem.

JSON 함수

  • JSON.stringify() → 직렬화.
  • JSON.parse() → 역직렬화.

연산자

  • == (값만 비교, 타입 강제 변환 O).
  • === (값+타입 모두 비교).
  • + : 문자열 결합 or 숫자 덧셈, : 문자열 숫자 변환 후 연산.

자료형

  • 원시타입: number, string, boolean, undefined, null, symbol, bigint.
  • 객체타입: {}, [].

호이스팅

정의

  • JavaScript에서 변수 선언과 함수 선언을 실행 전에 코드의 최상단으로 끌어올려 처리하는 것처럼 동작하는 현상
  • 함수 선언문은 호이스팅됨.

  • var 변수는 선언만 호이스팅 (초기화 X).

    ## 변수 호이스팅

    • var는 선언만 호이스팅되고 초기화는 안 됨.
      console.log(a); // undefined
  var a = 10;
    • 사실 내부 동작은 이렇게 바뀐 것과 같음:
      var a;         // 선언만 먼저 끌어올려짐
  console.log(a); // undefined
  a = 10;        // 값 할당

    ## 3. let, const

    • let, const도 선언은 호이스팅 되지만, TDZ(Temporal Dead Zone) 때문에 선언 전에 접근하면 오류 발생.
      console.log(b); // ❌ ReferenceError
  let b = 20;

BOM 객체

BOM (Browser Object Model)

  • window, location, navigator 등.

DOM 객체 함수

  • getElementById, querySelector, .innerHTML, .innerText.

function

  • 함수
    • 선언 함수: function foo(){}
    • 화살표 함수: (e) => {} → this 없음.
  • 이벤트
    • addEventListener는 여러 핸들러 가능.
    • event.target vs event.currentTarget.
    • preventDefault() : 기본 동작 막기 (form submit, a 태그 링크 등).
    • stopPropagation() : 이벤트 전파 막기.

AJAX

AJAX & Fetch

  • Ajax = 비동기 통신 (화면 갱신 없이 서버와 데이터 교환).
  • Promise
    • .then(), .catch(), .finally().
  • async/await
    • await는 async 함수 안에서만 사용.

  • fetch

      const res = await fetch('/api', { method: 'POST' });
  const data = await res.json();

response

  • response.json
  • response.text

async await VS promise

둘 다 비동기 처리를 위한 방식이지만, Promise.then은 체이닝으로 순서를 보장하며 각 단계의 결과를 다음 단계로 넘기기 쉬운 장점을 가졌지만, 체인이 길어질수록 가독성이 떨어지고 에러 처리가 여러 구간에 흩어지기 쉬운 단점을 가졌습니다. 반면 async/await은 비동기 코드를 동기 코드처럼 직관적으로 작성할 수 있어 가독성과 유지보수성이 높고 try/catch로 한 곳에서 에러를 다루기 쉬운 장점을 가졌지만, await를 남용하면 불필요하게 직렬 실행이 되어 느려질 수 있는 단점을 가졌습니다.

✅ 콜스택(Call Stack)과 비동기 함수, 콜백 함수

1. 콜스택(Call Stack)

  • JS는 싱글 스레드 → 한 번에 하나의 작업만 실행.
  • 실행할 함수들이 차례대로 스택(Stack) 구조로 쌓이고(pop/push) 실행됨.

2. 동기 함수

  • 호출 즉시 콜스택에 들어와 실행되고, 끝나면 스택에서 제거됨.
console.log("A");
console.log("B");

출력: A → B

3. 비동기 함수 & 콜백 함수

  • setTimeout, fetch, 이벤트리스너 같은 비동기 함수는 바로 실행되는 게 아님.
  • JS 엔진은 해당 작업을 Web API / 백그라운드 영역에 맡겨두고, 콜백 함수를 등록함.

  • 작업이 끝나면 그 콜백 함수가 태스크 큐(Queue)로 들어가고,

    콜스택이 비면 이벤트 루프(Event Loop)가 스택으로 올려 실행시킴.

console.log("시작");

setTimeout(() => {
  console.log("콜백 실행");
}, 1000);

console.log("끝");

출력 순서: 시작 → 끝 → (1초 후) 콜백 실행

4. 이벤트 핸들러도 콜백 함수

  • button.addEventListener("click", () => {...})
  • “클릭이 발생하면 실행해줘” → 즉시 실행 아님.
  • 등록해놓고 이벤트 발생 시 콜백이 콜스택에 올라와 실행됨.

results matching ""

    No results matching ""