개념 복습 250630

어설프게 아는 지식 남들에게 설명 할 수 있을 정도로 확실히 하기

1. 자바스크립트에서 비동기 처리는 어떻게 동작하나?

  • 기본 개념

    • 콜 스택

      • 실행 중인 함수의 지역 변수, 매개변수, 실행 위치 정보 등이 포함된 컨텍스트 정보가 관리
      • LIFO 처리

    • 메모리 힙

      • 전역변수, 참조 타입(객체나 함수 같이 큰 데이터)을 저장하는 공간
      • 참조 타입값의 주소값은 콜 스택에 저장된다

    • Web APIs

      • 웹 브라우저에 구현된 API (DOM event, AJAX, Timer 등)

    • 태스크 큐

      • 매크로 태스크 큐 : setTimeout, setInterval, I/O 이벤트 콜백 등의 처리

      • 마이크로 태스크 큐 : Promise.then(), catch(), finally() 등의 처리

    • 이벤트 루프

      • 콜 스택이 비어있는지 지속적으로 확인

      • 콜 스택이 비어있다면 매크로 태스크 큐에서 하나 꺼내 실행 후 마이크로 태스크 큐의 작업을 모두 처리 하는 방식

  • 비동기 처리 흐름

    • 비동기 처리 async/await 작업의 await 이후 코드는 내부적으로 Promise 처리로 동작하며, 마이크로태스크 큐에 등록된다. 콜 스택이 비워진 직후, 이벤트 루프에 의해 마이크로태스크 큐의 작업이 모두 처리되면서 콜 스택으로 옮겨져 실행된다

2. 리액트에서 자주 사용하는 훅 설명

  • useState: 컴포넌트 상태(state)를 선언하고 관리할 때 사용

  • useEffect: 컴포넌트가 마운트/언마운트되거나 특정 값이 변경될 때 부수 효과(side-effect)를 처리할 때 사용

  • useContext: 전역 상태 관리에 사용되는 Context API 값을 컴포넌트에서 가져올 때 사용

  • useRef: 렌더 사이클과 무관하게 유지되는 mutable 값을 저장하거나 DOM 요소에 접근할 때 사용

  • useMemo: 값 계산 비용이 큰 연산 결과를 메모이제이션(캐싱)할 때 사용

  • useCallback: 함수를 메모이제이션해 불필요한 렌더링을 방지할 때 사용

SQL JOIN 관련해서 설명

  • INNER JOIN: 두 테이블에서 조건이 일치하는 행만 가져옴.

  • LEFT JOIN: 왼쪽 테이블의 모든 행 + 조건이 맞으면 오른쪽 테이블 데이터도 가져옴. 조건이 맞지 않으면 NULL.

  • RIGHT JOIN: 오른쪽 테이블의 모든 행 + 조건이 맞으면 왼쪽 테이블 데이터도 가져옴.

  • FULL JOIN: 양쪽 테이블의 모든 행을 가져오며, 조건이 맞지 않으면 NULL.

HTTP(HyperText Transfer Protocol) 프로토콜 관련해서 설명

  • 웹에서 클라이언트(브라우저 등)와 서버가 데이터를 주고받는 통신 규약

  • 무상태(Stateless): 각 요청(request)은 독립적으로 처리되며, 서버는 이전 요청 상태를 기억하지 않는다.

  • 요청(Request): 클라이언트 → 서버로 보내는 메시지. 메서드(GET, POST, PUT 등), URL, 헤더, 바디를 포함

    • URL : 서버의 주소 + 요청할 자원을 식별하는 경로 (프로토콜, 호스트명, 경로, 쿼리 문자열 등 포함)

    • 요청/응답에 대한 메타 정보 전달 (Content-Type, Authorization, User-Agent, Accept 등 포함)

    • 요청이나 응답의 실제 데이터 내용

  • 응답(Response): 서버 → 클라이언트로 보내는 메시지. 상태코드(200, 404 등), 헤더, 바디를 포함

  • HTTP 메서드: 작업을 나타냅니다.

    • GET: 데이터 조회

    • POST: 데이터 생성

    • PUT/PATCH: 데이터 수정

    • DELETE: 데이터 삭제

타입스크립트와 자바의 타입선언 차이점

  • Java

    • 컴파일 후에도 JVM 바이트코드에 타입 정보가 유지됨. 즉, 런타임에서도 타입 정보로 리플렉션(reflection) 같은 작업 가능

    • 타입 선언이 필수이며, 변수나 메서드 시그니처에서 항상 타입을 명시해야 한다.

    • 명시적이고 엄격한 객체지향 언어 기반 타입 시스템

  • TypeScript

    • 컴파일 시 타입 정보는 제거되어 자바스크립트 코드에는 남지 않음. 즉, 런타임에는 타입 정보가 전혀 없다.

    • 타입 선언은 선택적(optional) 이고, 타입 추론에 맡길 수도 있다.

    • 구조적 타입 시스템 (structural typing) 기반 → 타입 이름보다 구조가 중요

SSR 렌더링 시 CSS-in-js 문제

  • 서버가 렌더링 시 CSS 생성 작업까지 해야 하므로 서버 부하가 증가

  • 서버에서와 클라이언트에서의 해시 불일치 리스크가 존재

#TIL #Recap