frontendDeveloper

React Query 파헤치기

쮸롱이 — Wed, 2 Jul 2025 17:39:21 +0900

오랜만입니다. 리액트 쿼리 공부좀하고 왔습니다. 제가 이해한걸 설명해 보겠습니다.

React 프로젝트에서 서버 데이터를 가져오는 일은 누구나 합니다.
우리는 주로 axios, useEffect, useState 조합으로 이렇게 짜왔습니다.

useEffect(() => {
  axios.get('/todos')
    .then(res => setTodos(res.data))
    .catch(err => setError(err))
    .finally(() => setLoading(false));
}, []);

처음엔 간단해 보이지만,
화면이 늘어나고 요청이 많아지면 버그, 반복, 복잡도가 쌓이기 시작합니다.

그래서 등장한 게 바로 React Query입니다.

React Query란?

서버 상태(Server State)를 자동으로 관리해주는 React 라이브러리입니다.

요청 → 로딩 → 성공/에러 처리 → 캐시 → 재요청 → 공유
이 모든 과정을 개발자가 직접 구현하지 않아도 되게 도와줍니다.

axios만 써도 되지 않나요?

물론 됩니다. 실제로 비교해보면 이렇게 차이가 납니다:

axios만 사용 시

모든 상태 관리(loading, error, data)를 직접 구현해야 함
요청이 중복되면 반복 코드 발생
캐시, 포커스 리패치, 공유 같은 고급 기능은 직접 짜야 함

React Query 사용 시

10줄 이내로 모든 기능 자동화
상태 자동 관리 (isLoading, error, refetch 등 제공)
캐싱, 재요청, 데이터 공유, 조건부 요청 자동 지원

핵심 차이점 요약

항목 axios만 사용 시 React Query 사용 시

개발 시간	모든 로직 직접 구현 (수십~수백 줄)	한 줄로 자동화
버그 가능성	높음 (상태 누락, 중복 등)	낮음 (검증된 방식)
일관성	팀마다 다른 스타일	통일된 패턴
유지보수	변경 시 전체 수정	설정만 바꾸면 됨
고급 기능	수동 구현	기본 제공 (캐시, 포커스 리패치 등)

❗ React Query는 마치 자전거 대신 자동차를 쓰는 것과 같다.
이동은 둘 다 가능하지만, 속도와 효율, 편안함은 비교 불가.

기본 사용법

const { data, isLoading, error, refetch } = useQuery({
  queryKey: ['todos'],              // 고유 키
  queryFn: fetchTodos,             // 요청 함수
  enabled: true,                   // 기본값: true
  staleTime: 0,                    // 기본값: 0ms (즉시 stale)
  cacheTime: 300000,               // 기본값: 5분
  refetchOnWindowFocus: true,      // 기본값: true
});

staleTime이 0이면 그냥 axios랑 똑같은 거 아님?

아닙니다.

staleTime: 0이면 받아온 데이터를 바로 stale(구식) 처리하지만,
그럼에도 불구하고 다음 기능들은 axios에는 없는 장점입니다:

자동 상태관리 (isLoading, error, isFetching)
캐시 유지 (cacheTime 동안)
포커스 복귀 시 자동 재요청
쿼리 키 기반 공유 (다른 컴포넌트에서도 같은 데이터 사용)

결론: staleTime: 0이라도 React Query는 여전히 똑똑합니다.

리액트 쿼리없이 리액트 쿼리의 동작을 axios로 만드려면 코드가

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [isFetching, setIsFetching] = useState(false);

  const fetchTodos = async (isBackground = false) => {
    if (isBackground) {
      setIsFetching(true);
    } else {
      setLoading(true);
    }
    
    try {
      const response = await axios.get('/api/todos');
      setTodos(response.data);
      setError(null);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
      setIsFetching(false);
    }
  };

  // 재시도 로직
  const fetchWithRetry = async (retries = 3) => {
    for (let i = 0; i < retries; i++) {
      try {
        await fetchTodos();
        break;
      } catch (err) {
        if (i === retries - 1) throw err;
        await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
      }
    }
  };

  // 포커스 시 백그라운드 업데이트
  useEffect(() => {
    const handleFocus = () => {
      fetchTodos(true); // 백그라운드 업데이트
    };
    
    window.addEventListener('focus', handleFocus);
    return () => window.removeEventListener('focus', handleFocus);
  }, []);

  // 네트워크 재연결 시 업데이트
  useEffect(() => {
    const handleOnline = () => {
      fetchTodos(true);
    };
    
    window.addEventListener('online', handleOnline);
    return () => window.removeEventListener('online', handleOnline);
  }, []);

  useEffect(() => {
    fetchWithRetry();
  }, []);

  if (loading) return <div>로딩 중...</div>;
  if (error) return <div>에러: {error.message}</div>;
  
  return (
    <div>
      {isFetching && <div>업데이트 중...</div>}
      {todos.map(todo => <div key={todo.id}>{todo.title}</div>)}
    </div>
  );
}

이렇게 험악해집니다. 하지만 리액트 쿼리를 쓰면 ?

function TodoList() {
  const { data: todos, isLoading, isFetching, error } = useQuery({
    queryKey: ['todos'],
    queryFn: () => axios.get('/api/todos').then(res => res.data),
    retry: 3,
    retryDelay: 1000,
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러: {error.message}</div>;
  
  return (
    <div>
      {isFetching && <div>업데이트 중...</div>}
      {todos?.map(todo => <div key={todo.id}>{todo.title}</div>)}
    </div>
  );
}

편--------안 합니다.

다른 컴포넌트에서도 데이터 공유?

YES.
React Query는 queryKey가 같으면 동일한 캐시 데이터를 공유합니다.

예를 들어 A, B 두 컴포넌트가 동시에 아래처럼 선언했다면:

useQuery({ queryKey: ['todos'], queryFn: fetchTodos });

A에서 데이터를 불러오면 → B도 같은 데이터, 같은 상태를 바로 사용합니다.

실제로 어떻게 구조화할까?

api/todos.ts

import axios from 'axios';

export const fetchTodos = () => axios.get('/api/todos').then(res => res.data);

hooks/useTodos.ts

import { useQuery } from '@tanstack/react-query';
import { fetchTodos } from '../api/todos';

export const useTodos = () =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    staleTime: 60000, // 1분 동안 fresh
  });

pages/TodosPage.tsx

import { useTodos } from '../hooks/useTodos';

export default function TodosPage() {
  const { data, isLoading, error } = useTodos();

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생!</p>;

  return (
    <ul>
      {data.map(todo => <li key={todo.id}>{todo.title}</li>)}
    </ul>
  );
}

캐시 꺼내 쓰기 & 수동 갱신

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

// 캐시 데이터 읽기
const todos = queryClient.getQueryData(['todos']);

// 강제로 다시 요청
queryClient.invalidateQueries(['todos']);

React Query의 기본값 요약

리액트 쿼리 옵션 기본값 설명을 다시 하자면

enabled	true	조건부 실행
staleTime	0ms	즉시 stale 처리
cacheTime	5분	캐시 유지 시간
refetchOnWindowFocus	true	포커스 시 자동 재요청
refetchOnMount	true	마운트 시 재요청
retry	3회	에러 시 재시도 횟수

결론: React Query는 선택이 아닌 필수

데이터 요청	자동화됨 (queryFn)
로딩/에러 관리	자동 제공 (isLoading, error)
캐시 및 공유	자동 처리 (queryKey 기반)
서버와 최신 동기화	staleTime, refetchOnWindowFocus
개발 생산성	획기적 향상

React Query는 더 빠르고, 안전하고, 일관된 프론트엔드 개발을 가능하게 해줍니다.
axios만으로도 되긴 하지만, 자동차 대신 자전거 타는 것과 같기 때문입니다. 자동차를 삽시다.

[컴퓨터구조] CPU와 I/O 장치의 접속

쮸롱이 — Sun, 27 Apr 2025 22:41:51 +0900

CPU와 I/O 장치의 접속

컴퓨터를 이루는 다양한 부품 중, CPU와 I/O(입출력) 장치의 연결 구조는 시스템의 효율성과 확장성을 좌우하는 핵심 요소입니다.

키보드, 마우스, 프린터, 하드디스크, SSD 등 모든 주변장치는 CPU와 직접 연결되지 않고,

각 장치별 제어기(컨트롤러)를 통해 접속됩니다.

이번에는 CPU와 I/O 장치, 그리고 보조저장장치가 어떻게 연결되어 데이터를 주고받는지, 실제 예시를 곁들여 쉽게 설명해봅니다.

1. 키보드 입력: 데이터의 첫걸음

키보드에서 키를 누르면 그 신호는 바로 CPU로 가지 않습니다.
먼저, 키보드 내부의 제어기(컨트롤러)가 눌린 키에 해당하는 8비트 데이터(예: 'A' 키는 01000001)를 데이터 레지스터에 저장합니다.
동시에, 상태 레지스터의 특정 비트(여기서는 In_RDY 비트)가 1로 세트됩니다.
이 비트가 1이 된다는 것은 "입력 데이터가 준비되었다"는 신호입니다.

CPU의 역할은?
CPU는 키보드로부터 데이터를 읽고 싶을 때, 먼저 상태 레지스터의 In_RDY 비트를 읽어봅니다.

만약 In_RDY가 1이면, CPU는 즉시 데이터 레지스터의 값을 읽어와 처리합니다.
만약 In_RDY가 0이면, CPU는 계속해서 상태 레지스터를 읽고 검사하는 과정을 반복합니다(이 과정을 폴링이라고 부릅니다).

예시

사용자가 'A' 키를 누름 → 키보드 제어기 데이터 레지스터에 01000001 저장, In_RDY=1
CPU가 In_RDY=1을 확인 → 데이터 레지스터에서 01000001을 읽어옴
CPU가 데이터를 읽으면 In_RDY는 다시 0으로 리셋됨

2. 프린터 출력: 준비된 만큼만 보낸다

프린터의 경우도 비슷합니다.
CPU는 프린터로 데이터를 보내기 전에, 먼저 프린터 제어기의 상태 레지스터에서 Out_RDY 비트를 확인합니다.
이 비트가 1이면 프린터가 새로운 데이터를 받을 준비가 된 상태입니다.

Out_RDY가 1이면, CPU는 프린터 제어기의 데이터 레지스터에 출력할 데이터를 씁니다.
그 후, 프린터 제어기가 프린터 하드웨어를 작동시켜 인쇄를 시작합니다.
만약 Out_RDY가 0이라면, CPU는 다시 준비될 때까지 상태 레지스터를 반복적으로 검사합니다.

예시

프린터가 "Hello"를 출력할 때, 한 글자씩 Out_RDY 비트가 1인지 확인하고, 1일 때만 데이터를 보냅니다.
만약 프린터가 인쇄 중이거나 종이가 걸렸다면 Out_RDY=0, CPU는 대기

3. 데이터 레지스터와 버퍼: 임시 저장소의 힘

데이터 레지스터는 CPU와 I/O 장치 사이에서 데이터를 잠깐 저장하는 임시 저장소(버퍼) 역할을 합니다.

키보드나 프린터처럼 데이터가 적은 장치는 1바이트~몇 바이트의 버퍼만 있어도 충분합니다.
하지만 프린터에서 한 번에 수십 MB의 데이터를 인쇄할 때, 버퍼(프린터 메모리)를 크게 하면 CPU가 자주 개입하지 않아도 되어 전체 시스템 효율이 높아집니다.

4. 보조저장장치(하드디스크, SSD): 블록 단위 전송

하드디스크나 SSD 같은 보조저장장치는 키보드와 달리 블록 단위(예: 512, 1024, 4096바이트)로 데이터를 전송합니다.
이 때문에 제어기 내부에는 한 블록 이상을 저장할 수 있는 데이터 버퍼가 필요합니다.

어떤 디스크 제어기는 한 트랙 전체(수십 KB~수백 KB)를 저장할 수 있는 트랙 버퍼나, 그보다 더 큰 디스크 버퍼를 갖추고 있습니다.
이렇게 하면 디스크에서 데이터를 읽어올 때 한 번에 많은 데이터를 버퍼에 담아두고, CPU는 필요한 만큼만 가져다 쓸 수 있습니다.

5. CPU와 I/O 제어기 간의 통신: 주소로 구분한다

CPU는 직접 I/O 장치를 제어하지 않고, **각 장치의 제어기(컨트롤러)**에 명령을 보냅니다.
이를 위해 제어기 내부의 상태 레지스터와 데이터 레지스터를 메모리처럼 한 단어(4바이트 등) 크기의 저장소로 간주하고, 각각에 고유한 주소를 부여합니다.

예를 들어, 키보드 제어기의 데이터 레지스터는 0xFFD20000, 상태 레지스터는 0xFFD20004와 같이 주소가 할당될 수 있습니다.
CPU는 이 주소로 데이터를 읽거나 쓸 수 있습니다. (이 방식을 메모리 매핑 I/O라고 합니다)
CPU의 주소버스와 제어신호가 I/O 제어기로 연결되는 이유가 바로 여기에 있습니다.

6. 정리

CPU와 I/O 장치는 직접 연결되지 않고, 각 장치별 제어기를 통해 접속된다.
상태 레지스터와 데이터 레지스터를 통해 데이터 준비 여부와 실제 데이터를 주고받는다.
버퍼(데이터 레지스터)는 임시 저장소 역할을 하며, 크기가 클수록 CPU 개입이 줄어든다.
보조저장장치는 블록 단위로 데이터를 전송하며, 큰 버퍼를 사용한다.
각 제어기 레지스터에 주소를 할당하여 CPU가 메모리처럼 쉽게 접근할 수 있다.

이처럼 CPU와 I/O 장치, 그리고 보조저장장치 사이의 접속 구조는 컴퓨터가 다양한 장치와 효율적으로 소통할 수 있게 해주는 핵심 원리입니다.

요약

I/O 장치와 보조저장장치 모두 CPU와 직접 연결되지 않고, 각 장치별 컨트롤러(제어기)를 통해 접속된다.
키보드 입력 과정: 키가 눌리면 8비트 데이터가 키보드 제어기의 데이터 레지스터에 저장되고, 상태 레지스터의 In_RDY 비트가 세트된다. CPU는 In_RDY 비트를 반복적으로 검사(폴링)하여 데이터가 준비되면 읽어들인다.
프린터 출력 과정: CPU가 프린터 제어기의 Out_RDY 비트를 검사해 출력 준비가 되었는지 확인하고, 준비되면 데이터를 데이터 레지스터에 써서 프린터로 전송한다. Out_RDY가 세트되지 않았으면 반복 검사한다.
데이터 레지스터는 CPU와 I/O 장치 사이의 임시 저장소(버퍼) 역할을 한다. 버퍼 크기를 늘리면 CPU 개입을 줄일 수 있다.
보조저장장치는 블록 단위로 데이터가 전송되며, 제어기 내에 블록 또는 트랙 단위의 데이터 버퍼가 존재한다.
CPU는 각 I/O 제어기의 레지스터에 주소를 할당해, 메모리처럼 읽고 쓸 수 있다. 주소버스와 제어신호가 I/O 제어기와 연결된다.

단어 정리

- 데이터 레지스터 : CPU와 I/O 장치간의 임시 데이터 기억장치

- 상태 레지스터 : I/O 장치의 상태를 나타내는 비트들을 저장하는 레지스터

- 데이터 버퍼 : CPU와 I/O 장치간의 데이터 임시 기억장치인 데이터 레지스터의 다른 명칭

[알고리즘] 가지는 치지만 분할은 어려운 사람.

쮸롱이 — Thu, 24 Apr 2025 14:12:33 +0900

moo..

moo게임을 풀어보자

이문제는 재귀다.

const input = require("fs")
  .readFileSync(process.platform === "linux" ? "/dev/stdin" : "./input.txt")
  .toString()
  .trim();

const N = Number(input);

function makeMoo(n) {
  if (n === 1) return "moo";
  const prev = makeMoo(n - 1);
  return prev + "m" + "o".repeat(n + 2) + prev;
}
const str = makeMoo(N);
console.log(str[N]);

재귀를 위풍당당 야무지게 돌렸지만

재귀는 조심해야해..

하지만 재귀에는 함정이 있어요!

문제는... S(n)의 길이가 기하급수적으로 커진다는 점입니다.

예를 들어 S(10)을 만들면 거의 수십억 글자가 되기 때문에, 이 코드는 메모리도 터지고 시간도 오래 걸립니다.

❓그럼 어떻게 하면 좋을까요?

바로바로 분할정복입니다!

분할정복이란?

문제를 작은 문제로 나누고(Divide),
각각 해결한 뒤 정복(Conquer) 하여 전체 문제를 푸는 방법입니다.

Moo 게임에서는 S(n)이 항상

S(n) = S(n - 1) + "m" + "o".repeat(n + 2) + S(n - 1)

처럼 좌-중앙-우 구조로 반복되니까,

"내가 찾는 글자가 어느 쪽에 있는지"만 판단하면
실제로 문자열을 만들 필요가 없습니다!

문자열의 길이를 먼저 계산해보자

function getLength(k) {
  if (k === 0) return 3; // S(0) = "moo"
  return 2 * getLength(k - 1) + k + 3;
}

getLength(k)는 S(k)의 총 길이를 구해줍니다.

위치만 추적해서 찾기!

function findMoo(k, n) {
  if (k === 0) return "moo"[n - 1];

  const left = getLength(k - 1);
  const middle = k + 3;

  if (n <= left) {
    return findMoo(k - 1, n); // 왼쪽
  } else if (n <= left + middle) {
    return n === left + 1 ? "m" : "o"; // 가운데
  } else {
    return findMoo(k - 1, n - left - middle); // 오른쪽
  }
}

N이 어디에 속하는지만 판단해서 필요한 부분만 재귀!

전체 코드 (최적화 버전)

const input = require("fs")
  .readFileSync(process.platform === "linux" ? "/dev/stdin" : "./input.txt")
  .toString()
  .trim();

const N = Number(input);

function getLength(k) {
  if (k === 0) return 3;
  return 2 * getLength(k - 1) + k + 3;
}

function findMoo(k, n) {
  if (k === 0) return "moo"[n - 1];

  const left = getLength(k - 1);
  const middle = k + 3;

  if (n <= left) return findMoo(k - 1, n);
  else if (n <= left + middle) return n === left + 1 ? "m" : "o";
  else return findMoo(k - 1, n - left - middle);
}

// 최소한의 k 찾기
let k = 0;
while (getLength(k) < N) k++;

console.log(findMoo(k, N));

정리!

방법 특징 결과

재귀로 문자열 생성	실제 문자열을 만들어버림	❌ 비효율적, 메모리 초과
분할정복	위치만 추적해서 해결	✅ 효율적, 깔끔함

moo !

[컴퓨터구조] CPU와 기억장치의 접속

쮸롱이 — Thu, 24 Apr 2025 03:01:00 +0900

CPU와 기억장치의 접속

cpu와 시스템버스

위 그림은 CPU와 시스템 내의 다른 요소들 사이에 정보를 교환하는 통로가 되는 시스템 버스를 보여줍니다.

주소 버스(adress bus)는 CPU가 외부로 발생하는 주소 정보를 전송하는 신호 선들의 집합입니다. 각 주소 선은 하나의 주소 비트를 전송하는 데 사용되며, 전체 주소 선들의 개수가 CPU와 접속될 수 있는 최대 기억장치 용량을 결정해준다. CPU가 발생하는 주소 비트들의 수를

주소 버스의 폭(width)라고 하는데, 그 폭이 16비트라면 최대 65,536개 (즉 64K개) 기억 장소들의 주소를 지정해줄 수 있습니다.

데이터 버스(data bus)는 CPU가 기억장치 혹은 I/O 장치와의 사이에 데이터를 전송하기 위한 신호 선들의 집합입니다.

데이터 버스의 폭은 한 번에 전송될 수 있는 데이터 비트의 수를 결정해줍니다.

제어 버스(control bus)는 CPU가 시스템 내의 각종 요소들의 동작을 제어하는데 필요한 신호 선들의 집합입니다.

기본적인 제어 신호들로는 기억장치 읽기/쓰기 신호와 I/O 읽기/쓰기 신호가 있습니다.

시스템버스 삼총사

주소는 CPU에 의해 발생되어 기억장치와 I/O 장치로 보내지는 정보이기 때문에, 주소 버스는 단방향성입니다.

반면에 데이터 버스는 읽기와 쓰기 동작을 모두 지원해야 하므로 양방향 전송이 가능해야합니다.

CPU가 데이터를 기억장치의 특정 장소에 저장하거나 이미 저장되어 있는 내용을 읽는 동작을엑세스(access)한다 라고 말합니다.

CPU가 특정 기억 장소로부터 데이터를 읽고자 할 때 기억장치로 보내줘야 하는 정보는 주소와 읽기 신호입니다.

그리고는 데이터를 저장하려고하면 해당 기억 장소의 주소와 데이터 및 쓰기 신호를 보내주어야 합니다.

따라서 CPU와 기억장치 사이에는 그러한 정보들의 전송 통로인 주소버스, 데이터 버스 및 제어 신호 선들이 접속되어야 합니다.

흐름을 알아봅시다

CPU는 데이터를 저장할 기억 장소의 주소와 저장할 데이터를 각각 주소 버스와 데이터 버스를 통하여 보내면서 동시에 쓰기 신호를 활성화 시킵니다. 이때 CPU가 기억장치로 주소와 데이터를 보낸 순간부터 저장이 완료될 때까지의 시간을기억장치 쓰기 시간이라고 합니다.

쓰기가있다면 읽기도있겠죠?

CPU가 기억장치로부터 데이터를 읽는 동작은, CPU가 데이터가 저장되어 있는 기억 장소의 주소를 주소 버스를 통하여 기억장치로 보내면서 동시에 읽기 신호를 활성화 시킵니다. 그러면 일정 지연 시간이 경과된 후에 기억장치로부터 읽혀진 데이터가 데이터 버스 상에 실리며, CPU는 그 데이터를 버스 인터페이스 회로를 통하여 읽어 들이게 됩니다. 여기서 지연 시간은 주소를 해독하는데 걸리는 시간과 기억장치 내부에서 데이터를 인출하는데 걸리는 시간을 합한 시간을 말합니다. 똑같이 CPU가 주소를 발생한 시간부터 읽기 동작이 완료될 때까지의 시간을기억장치 읽기 시간이라고 합니다.

정리하자면

쓰기 동작

CPU → 메모리: 데이터를 저장하려는 동작
과정:
1. CPU가 저장할 주소를 주소 버스를 통해 보냄.
2. CPU가 저장할 데이터를 데이터 버스를 통해 보냄.
3. 동시에 쓰기 제어 신호를 활성화.
4. 메모리는 해당 주소에 데이터를 저장.
소요 시간: 이 전체 과정에 걸리는 시간을 쓰기 시간이라 함.

읽기 동작

메모리 → CPU: 데이터를 불러오는 동작
과정:
1. CPU가 읽고 싶은 주소를 주소 버스를 통해 보냄.
2. 동시에 읽기 제어 신호를 활성화.
3. 메모리는 해당 주소를 해독하고, 데이터를 찾아서 데이터 버스에 실음.
4. CPU는 데이터 버스에서 그 값을 읽음.
지연 시간: 주소 해독 시간 + 데이터 인출 시간
소요 시간: CPU가 주소를 보낸 순간부터 읽기가 완료될 때까지의 시간 = 읽기 시간

여기서 궁금한게 읽기에는 지연시간이 있는데 왜 쓰기에는없지 ? 라는 궁금증이였다 (당연한건가..)

왜 읽기 지연은 강조되고, 쓰기 지연은 덜 강조될까?

읽기(Read) → CPU가 기다려야 함

CPU가 메모리에서 데이터를 읽어야 그 다음 연산을 할 수 있음.
즉, 읽기 지연 시간은 CPU의 성능과 직결됨.
예: x = mem[0x1000] → CPU는 mem에서 값이 올 때까지 기다림.

쓰기(Write) → CPU는 기다리지 않아도 됨

대부분의 시스템에서는, 쓰기 동작을 메모리에 요청한 뒤에 CPU는 바로 다음 명령어를 수행할 수 있어.
이건 비동기적 쓰기 방식 또는 쓰기 버퍼(write buffer) 같은 기술 때문임.
예: mem[0x1000] = x → CPU는 그냥 저장하라고만 지시하고, 자기 일 함.

그냥 비동기 처리 느낌이였던것이다.

[컴퓨터구조] 정보의 표현과 저장

쮸롱이 — Thu, 24 Apr 2025 01:33:38 +0900

1.2 정보의 표현과 저장

컴퓨터가 받아들이고 처리하는 정보의 종류로는 프로그램 코드와 데이터가 있다.

디지털 컴퓨터에서 그러한 정보들은 모두 2진수를 나타내는 비트들의 조합으로 표현된다.

컴퓨터 프로그램은 우리가 흔히 쓰는 C/C++,Python 같은 고급언어를 이용하여 작성하는데 우리는 이해하지만

디지털 회로들로 이루어진 컴퓨터 하드웨어는 전혀 이해하지 못한다. 그래서 이 프로그램은 컴파일러 라고 부르는

소프트웨어에 의해 하드웨어가 이해할 수 있는 언어로 번역된다. 이 때 번역된 언어를 기계어 혹은 기계코드 라고 한다.

고급언어들은 어느 컴퓨터에서 사용되든 거의 동일하지만, 기계어는 CPU마다 서로 다르다.
즉, CPU내부 구조에 따라 그 하드웨어가 이해할 수 있는 언어도 달라지는 것이다.

그러한 언어상의 차이를 해결하기 위하여 고급언어와 기계어 사이에는 각 CPU 고유의 중간언어가 존재하는데,

이 언어를 어셈블리 언어 혹은 어셈블리 명령어 라고 부른다.

또한 이러한 언어로 작성된 프로그램을 어셈블리 프로그램이라고 한다.

고급-언어 프로그램이 기계어 프로그램으로 번역되는 과정

여기서 각 어셈블리 명령어가 지정하는 동작을 개략적으로 나타내는 기호인 'LOAD', 'ADD' 및 'STOR'을 니모닉스 라고 부른다.

어셈블리 언어로 작성된 프로그램은 어셈블러 라는 소프트웨어가 기계어 프로그램으로 번역해준다.

컴파일의 마지막 경과인 기계어 프로그램은 2진수로 이루어져있다.

저 위의 LOAD A,X 명령어에 대한 기계어의 예를 들어보면 다음과 같다.

연산코드	오퍼랜드
001	00101

연산코드 필드에 저장된 '001'은 '레지스터 A로 적재하라'는 연산을 지정해주는 비트들이며, 오퍼랜드 필드의 '00101'은 적재될 데이터가 저장되어 있는 기억장치 주소를 가리킨다.

위의 기계어에서는 오퍼랜트가 '5'번지를 가리키고있다. 따라서 이 기계어는 '기억장치 5번지의 내용을 읽어서 레지스터 A에 저장하라'는 명령을 나타내는 것이다.

명령어는 비트들의 개수와 용도 및 주소지정 방식에 따라 다양하게 구성될 수 있다. 만약 위의 예와 같이 연산코드가 3비트로 이루어진다면 2의3승인 8가지의 연산들을 지정할 수 있다. 또한 오퍼랜드 비트등릐 수가 5개이므로 동일하게 기억 장소들의 최대수는 2의5승 32개이다.

이와 같이 각 명령어에 들어갈 필드의 종류와 각 필드의 비트 수에 대한 구성을 명령어 형식 이라고 한다.

번역된 기계어들은 순서대로 기억장치에 저장된다.

CPU에 의해 한 번에 처리될 수 있는 비트들의 그룹을 단어라고 부른다.

단어의 길이는 CPU의 하드웨어 구조에 따라 8비트,16비트,32비트,64비트 등으로 다양하지만,

이 예에서는 단어가 8비트, 즉 한 바이트인 것으로 가정하고있다.

한 바이트(byte)는 8비트

* 명령어 형식 - 명령어의 비트 수와 용도 및 필드 구성 방법을 지정해주는 형식

* 단어 - CPU에 의해 한 번에 처리될 수 있는 비트들의 그룹

* 명령어(instruction) - 어셈블리 명령어의 약칭

* 니모닉스(mnemonics) - 명령어가 지정하는 동작을 나타내는 간략화된 기호

* 어셈블러 - 어셈블리 프로그램을 기계어로 번역해주는 소프트웨어

* 어셈블리 프로그램 - 고급 언어와 기계어 사이의 중간 언어인 어셈블리 언어로 작성된 프로그램

* 컴파일러 - 고급언어 프로그램을 기계어로 변환해주는 소프트웨어

* 기계어 - 컴퓨터 하드웨어가 이해할 수 있는 언어

[알고리즘] 가지를 치지 않는다면, 시간은 당신을 칠 것입니다.

쮸롱이 — Wed, 23 Apr 2025 16:31:51 +0900

이 가지 아닙니다.

일단 문제 링크입니다.
https://www.acmicpc.net/problem/28075

필자는 "시간 초과" 라는 글자를 보면 손이 떨립니다.

내가 어떻게 풀었는데...

한 줄 한 줄 코드를 써 내려가며 스스로에게 말하죠.
“괜찮아. 현대 컴퓨터는 빠르니까.”

그렇게 자신을 속이며 제출 버튼을 누른 그 순간—

[시간 초과]

…잠시 정적이 흐르고,

시간초과는 저에게 말을겁니다.
“너 진짜 탐색 다 돌릴 생각이었어?”

완전탐색은 당신을 배려하지 않는다.

문제의 조건은 이랬습니다:

총 N일 동안 일을 합니다.
매일 2개의 업무(task) 중 하나를 선택하고, 그 업무는 3개의 장소(place) 중 하나에서 수행됩니다.
같은 장소에서 연속으로 일하면 점수가 절반이 됩니다.
M점 이상을 달성하는 모든 가능한 경우의 수를 구해야 합니다.

이걸 어떻게 풀까?
자연스럽게 DFS + 완전탐색을 떠올렸습니다.

업무 2개, 장소 3개. 하루당 6가지 선택지.
즉, 총 경우의 수는 6^N.

사실 이건 시간초과가 나지않는 수준입니다.

하지만 문신처럼 박힌 저희 뇌는 아 이거.. 가지쳐야해.. 라고 떠오르게해주고 가지를 칩니다.

"가망없는 시도는 하지않는다 라는 비장함과 함께"

가지치기 전략 요약

희망고문 차단: 아무리 잘해도 점수 못 넘긴다면 → 바로 종료
목표 이미 달성: 남은 선택 다 유효하니 경우의 수 계산해서 바로 리턴
장소 반복 감점: 전날과 같은 장소면 점수 절반

✨ 풀이 코드

const input = require("fs")
  .readFileSync(process.platform === "linux" ? "/dev/stdin" : "./input.txt")
  .toString()
  .trim()
  .split("\n");

console.log(input);

const [N, M] = input[0].split(" ").map(Number);

//일하는 배열만듬
const work = input.slice(1).map((line) => line.trim().split(" ").map(Number));

//업무에서 받을수있는 최댓값
const maxSingle = Math.max(...work.flat());

//남은날에 대해 이론상 최댓값(같은곳 방문했을떄 /2 되는거)을 설정해줍니다.
//남은날이 3일인데 이론상 최댓값을 더해도 안되는거면 불가능한것.
const maxScore = Array(N).fill(0);
maxScore[N - 1] = maxSingle;

for (let i = N - 2; i >= 0; i--) {
  maxScore[i] = maxScore[i + 1] + maxSingle;
}
console.log("maxscore = ", maxScore);

function dfs(day, currentScore, prevPlace) {
  if (day === N) return currentScore >= M ? 1 : 0;
  if (currentScore + maxScore[day] < M) return 0;
  if (currentScore >= M) return 6 ** (N - day);

  let cnt = 0;
  for (let task = 0; task < 2; task++) {
    for (let place = 0; place < 3; place++) {
      let point = work[task][place];
      if (place === prevPlace) point = Math.floor(point / 2);
      cnt += dfs(day + 1, currentScore + point, place);
    }
  }
  return cnt;
}

console.log(dfs(0, 0, -1));

maxScore 배열로 희망을 계산하다

DFS에서 "남은 날 동안 최대로 벌 수 있는 점수"를 미리 계산해서,
그 이상이 되지 않으면 아예 탐색하지 않는 방식을 썼습니다.

const maxScore = Array(N).fill(0);
maxScore[N - 1] = maxSingle;

for (let i = N - 2; i >= 0; i--) {
  maxScore[i] = maxScore[i + 1] + maxSingle * 2;
}

여기서 maxSingle은 업무 중 받을 수 있는 가장 큰 점수고,
매일 두 번 반복해서 받을 수 있다고 가정합니다.
말하자면… 최대치 희망고문 시뮬레이션이죠.

이 덕분에 DFS는 비효율적인 경로를 미리 차단하고,
필요한 경로만 똑똑하게 탐색하게 됩니다.

습관적으로 가지를 치자

“DFS는 탐색의 정석이지만,
조건 기반 가지치기 없이 쓰면 순수한 폭탄이다.”

혹시 지금 여러분이
“이 정도면 되지 않을까?”
라고 생각하고 있다면,
한 번쯤 자신에게 질문해보세요.

“이 경로, 진짜로 볼 가치가 있나?”

그리고 그 가지가 불필요하다면 과감히 쳐버리세요.
그 한 줄이 당신을 시간의 압박에서 살릴 수도 있습니다.

필자처럼 손 떠는 분들이 더는 생기지 않길 바라며,
이만 가지치기 된 글을 마칩니다.

JavaScript Array 메서드 정복 하기

쮸롱이 — Wed, 23 Apr 2025 00:24:59 +0900

javascript로 코딩테스트를 준비하려는데 Array를 모르면 절대절대 안됩니다.
알고리즘 문제를 풀 때 정말 유용하게 사용되는 배열(Array) 메서드들을 총정리하는 시간을 가져보겠습니다.
배열 메서드를 잘 활용하면 코드를 훨씬 간결하고 효율적으로 작성할 수 있으며, 문제 해결 능력도 크게 향상될 수 있습니다.

배열메서드를 다루면서 가장 중요한 포인트중 하나는 원본배열에 영향을 미치냐 안미치냐입니다.

1. 배열 순회 및 탐색 메서드

배열의 각 요소를 순회하거나 특정 조건을 만족하는 요소를 찾는 메서드들입니다.

1.1 `forEach()`

배열의 각 요소에 대해 주어진 함수를 실행합니다.
반환값: undefined
주의: 원본 배열을 변경하지는 않지만, 콜백 함수 내에서 원본 배열을 변경하는 작업은 가능합니다. map, filter와 달리 새로운 배열을 반환하지 않습니다.

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

numbers.forEach(item => {
  console.log(item); // 1, 2, 3, 4, 5 순서대로 출력
  sum += item;
});

console.log(sum); // 결과: 15
// forEach 자체의 반환값은 undefined 입니다.
const result = numbers.forEach(item => item * 2);
console.log(result); // 결과: undefined

1.2 `map()`

배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환합니다.
원본 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(item => item * 2);

console.log(doubledNumbers); // 결과: [2, 4, 6, 8, 10]
console.log(numbers);      // 결과: [1, 2, 3, 4, 5] (원본 배열은 그대로)

1.3 `filter()`

배열의 각 요소에 대해 주어진 함수의 조건을 만족하는(true를 반환하는) 요소들만 모아 새로운 배열을 반환합니다.
원본 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(item => item % 2 === 0);

console.log(evenNumbers); // 결과: [2, 4]
console.log(numbers);   // 결과: [1, 2, 3, 4, 5] (원본 배열은 그대로)

1.4 `reduce()`

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하여 하나의 결과값을 반환합니다. (누산기)
accumulator: 누적값, currentValue: 현재 요소, currentIndex(옵션): 현재 인덱스, array(옵션): 원본 배열
initialValue(옵션): 초기 누적값

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

// 합계 구하기
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 초기값 0
console.log(sum); // 결과: 15

// 최대값 구하기
const max = numbers.reduce((acc, cur) => (cur > acc ? cur : acc), numbers[0]);
console.log(max); // 결과: 5

1.5 `reduceRight()`

reduce()와 동일한 기능을 하지만, 배열의 오른쪽부터 왼쪽으로 함수를 실행합니다.

const strings = ['world', ' ', 'hello'];
const combinedString = strings.reduceRight((acc, cur) => acc + cur);

console.log(combinedString); // 결과: "hello world"

1.6 `find()`

배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

const numbers = [1, 3, 5, 4, 7];
const firstEven = numbers.find(item => item % 2 === 0);

console.log(firstEven); // 결과: 4

const notFound = numbers.find(item => item > 10);
console.log(notFound); // 결과: undefined

1.7 `findIndex()`

배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const numbers = [1, 3, 5, 4, 7];
const firstEvenIndex = numbers.findIndex(item => item % 2 === 0);

console.log(firstEvenIndex); // 결과: 3

const notFoundIndex = numbers.findIndex(item => item > 10);
console.log(notFoundIndex); // 결과: -1

1.8 `some()`

배열의 요소 중 하나라도 주어진 판별 함수를 만족하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

const numbers = [1, 3, 5, 4, 7];
const hasEvenNumber = numbers.some(item => item % 2 === 0);

console.log(hasEvenNumber); // 결과: true

const hasNumberGreaterThan10 = numbers.some(item => item > 10);
console.log(hasNumberGreaterThan10); // 결과: false

1.9 `every()`

배열의 모든 요소가 주어진 판별 함수를 만족하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(item => item % 2 === 0);

console.log(allEven); // 결과: true

const numbers2 = [2, 4, 7, 8];
const allEven2 = numbers2.every(item => item % 2 === 0);

console.log(allEven2); // 결과: false

1.10 `includes()`

배열이 특정 요소를 포함하고 있는지 판별하여 true 또는 false를 반환합니다.
fromIndex(옵션): 검색을 시작할 인덱스

const fruits = ['apple', 'banana', 'mango'];

console.log(fruits.includes('banana')); // 결과: true
console.log(fruits.includes('grape'));  // 결과: false
console.log(fruits.includes('apple', 1)); // 결과: false (인덱스 1부터 검색)

1.11 `indexOf()`

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
fromIndex(옵션): 검색을 시작할 인덱스

const fruits = ['apple', 'banana', 'mango', 'banana'];

console.log(fruits.indexOf('banana'));      // 결과: 1
console.log(fruits.indexOf('grape'));       // 결과: -1
console.log(fruits.indexOf('banana', 2)); // 결과: 3 (인덱스 2부터 검색)

1.12 `lastIndexOf()`

배열에서 지정된 요소를 찾을 수 있는 마지막 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.
fromIndex(옵션): 검색을 시작할 인덱스 (역방향으로 검색)

const fruits = ['apple', 'banana', 'mango', 'banana'];

console.log(fruits.lastIndexOf('banana'));      // 결과: 3
console.log(fruits.lastIndexOf('grape'));       // 결과: -1
console.log(fruits.lastIndexOf('banana', 2)); // 결과: 1 (인덱스 2부터 역방향 검색)

2. 배열 수정 메서드 (원본 배열 변경)

다음 메서드들은 원본 배열 자체를 변경합니다. 그러므로 사용 시 주의가 필요합니다.

2.1 `push()`

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const numbers = [1, 2, 3];
const newLength = numbers.push(4, 5);

console.log(newLength); // 결과: 5
console.log(numbers);   // 결과: [1, 2, 3, 4, 5] (원본 배열 변경)

2.2 `pop()`

배열의 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다. 배열이 비어있으면 undefined를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const lastElement = numbers.pop();

console.log(lastElement); // 결과: 5
console.log(numbers);     // 결과: [1, 2, 3, 4] (원본 배열 변경)

2.3 `shift()`

배열의 첫 번째 요소를 제거하고, 그 제거된 요소를 반환합니다. 배열이 비어있으면 undefined를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const firstElement = numbers.shift();

console.log(firstElement); // 결과: 1
console.log(numbers);      // 결과: [2, 3, 4, 5] (원본 배열 변경)

2.4 `unshift()`

배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

const numbers = [3, 4, 5];
const newLength = numbers.unshift(1, 2);

console.log(newLength); // 결과: 5
console.log(numbers);   // 결과: [1, 2, 3, 4, 5] (원본 배열 변경)

2.5 `splice()`

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
start: 변경을 시작할 인덱스
deleteCount(옵션): 제거할 요소의 수
item1, item2, ...(옵션): 배열에 추가할 요소
반환값: 제거된 요소들의 배열

const months = ['Jan', 'March', 'April', 'June'];

// 요소 삽입 (인덱스 1에 'Feb' 삽입)
let removed = months.splice(1, 0, 'Feb');
console.log(months);   // 결과: ['Jan', 'Feb', 'March', 'April', 'June']
console.log(removed); // 결과: [] (제거된 요소 없음)

// 요소 교체 (인덱스 4의 'June'을 'May'로 교체)
removed = months.splice(4, 1, 'May');
console.log(months);   // 결과: ['Jan', 'Feb', 'March', 'April', 'May']
console.log(removed); // 결과: ['June'] (제거된 요소)

// 요소 제거 (인덱스 1부터 2개 요소 제거)
removed = months.splice(1, 2);
console.log(months);   // 결과: ['Jan', 'April', 'May']
console.log(removed); // 결과: ['Feb', 'March'] (제거된 요소)

2.6 `sort()`

배열의 요소를 정렬합니다. 기본 정렬 순서는 문자열 유니코드 코드 포인트를 따릅니다.
주의: 숫자 정렬 시에는 비교 함수를 제공해야 합니다.
반환값: 정렬된 배열 (원본 배열 자체가 변경됨)

const fruits = ['banana', 'apple', 'mango'];
fruits.sort();
console.log(fruits); // 결과: ['apple', 'banana', 'mango'] (문자열 정렬)

const numbers = [10, 5, 100, 1];
// 기본 정렬 (문자열 기준으로 정렬되어 의도와 다를 수 있음)
// numbers.sort();
// console.log(numbers); // 결과: [1, 10, 100, 5]

// 숫자 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // 결과: [1, 5, 10, 100]

// 숫자 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // 결과: [100, 10, 5, 1]

2.7 `reverse()`

배열의 요소 순서를 반대로 뒤집습니다.
반환값: 순서가 뒤집힌 배열 (원본 배열 자체가 변경됨)

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();

console.log(numbers); // 결과: [5, 4, 3, 2, 1] (원본 배열 변경)

2.8 `fill()`

배열의 시작 인덱스부터 끝 인덱스 이전까지의 모든 요소를 정적인 값으로 채웁니다.
value: 채울 값
start(옵션): 시작 인덱스 (기본값 0)
end(옵션): 끝 인덱스 (기본값 array.length)
반환값: 변경된 배열 (원본 배열 자체가 변경됨)

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

// 모든 요소를 0으로 채우기
numbers.fill(0);
console.log(numbers); // 결과: [0, 0, 0, 0, 0]

const numbers2 = [1, 2, 3, 4, 5];
// 인덱스 2부터 4 이전까지 9로 채우기
numbers2.fill(9, 2, 4);
console.log(numbers2); // 결과: [1, 2, 9, 9, 5]

2.9 `copyWithin()`

배열의 일부를 복사하여 동일한 배열의 다른 위치에 덮어쓰고, 길이를 수정하지 않고 반환합니다.
target: 복사한 시퀀스를 붙여넣을 인덱스
start(옵션): 복사를 시작할 인덱스 (기본값 0)
end(옵션): 복사를 끝낼 인덱스 (기본값 array.length)
반환값: 변경된 배열 (원본 배열 자체가 변경됨)

const array = ['a', 'b', 'c', 'd', 'e'];

// 인덱스 0부터 2개 요소('a', 'b')를 복사해서 인덱스 3 위치부터 붙여넣기
array.copyWithin(3, 0, 2);
console.log(array); // 결과: ['a', 'b', 'c', 'a', 'b']

const array2 = [1, 2, 3, 4, 5];
// 인덱스 0부터 끝까지 복사해서 인덱스 2 위치부터 붙여넣기 (기본값 사용)
array2.copyWithin(2);
console.log(array2); // 결과: [1, 2, 1, 2, 3]

3. 배열 변환 및 생성 메서드 (주로 새로운 배열 반환)

3.1 `slice()`

배열의 begin 인덱스부터 end 인덱스 이전까지에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
원본 배열은 변경되지 않습니다.
begin(옵션): 추출 시작 인덱스 (음수면 끝에서부터의 길이)
end(옵션): 추출 종료 인덱스 (해당 인덱스 직전까지 추출, 음수면 끝에서부터의 길이)

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));      // 결과: ['camel', 'duck', 'elephant']
console.log(animals.slice(2, 4));   // 결과: ['camel', 'duck']
console.log(animals.slice(1, -1));  // 결과: ['bison', 'camel', 'duck']
console.log(animals.slice(-2));     // 결과: ['duck', 'elephant']
console.log(animals.slice());       // 결과: ['ant', 'bison', 'camel', 'duck', 'elephant'] (배열 전체 얕은 복사)

console.log(animals); // 결과: ['ant', 'bison', 'camel', 'duck', 'elephant'] (원본 배열 그대로)

3.2 `concat()`

인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새로운 배열을 반환합니다.
원본 배열은 변경되지 않습니다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = arr1.concat(arr2, 'g');

console.log(arr3); // 결과: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
console.log(arr1); // 결과: ['a', 'b', 'c'] (원본 배열 그대로)
console.log(arr2); // 결과: ['d', 'e', 'f'] (원본 배열 그대로)

3.3 `join()`

배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다.
separator(옵션): 각 요소를 구분할 문자열 (기본값은 쉼표 ,)

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());    // 결과: "Fire,Air,Water"
console.log(elements.join(''));   // 결과: "FireAirWater"
console.log(elements.join('-'));  // 결과: "Fire-Air-Water"
console.log(elements.join(' '));  // 결과: "Fire Air Water"

3.4 `flat()`

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.
depth(옵션): 중첩 배열 구조를 평탄화할 깊이 (기본값 1)

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // 결과: [1, 2, 3, 4] (depth 1)

const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // 결과: [1, 2, 3, 4, [5, 6]] (depth 1)
console.log(arr2.flat(2)); // 결과: [1, 2, 3, 4, 5, 6] (depth 2)

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
console.log(arr3.flat(Infinity)); // 결과: [1, 2, 3, 4, 5, 6, 7, 8] (모든 깊이 평탄화)

3.5 `flatMap()`

먼저 배열의 각 요소에 대해 매핑 함수를 실행한 다음, 결과를 새로운 배열로 평탄화합니다. (map() + flat(1)과 동일)

const arr = [1, 2, 3, 4];

// 각 숫자를 자신과 자신의 제곱으로 매핑 후 평탄화
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // 결과: [1, 2, 2, 4, 3, 6, 4, 8]

// map과 flat을 사용한 동일한 결과
const resultMap = arr.map(x => [x, x * 2]); // [[1, 2], [2, 4], [3, 6], [4, 8]]
const resultFlat = resultMap.flat();        // [1, 2, 2, 4, 3, 6, 4, 8]
console.log(resultFlat); // 결과: [1, 2, 2, 4, 3, 6, 4, 8]

4. 배열 유틸리티 메서드

4.1 `Array.isArray()`

인자가 배열인지 아닌지 판별합니다. (Array 프로토타입 메서드가 아닌 Array의 정적 메서드)

console.log(Array.isArray([1, 2, 3]));  // 결과: true
console.log(Array.isArray({foo: 123})); // 결과: false
console.log(Array.isArray('hello'));   // 결과: false
console.log(Array.isArray(undefined)); // 결과: false

4.2 `Array.from()`

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사하여 새로운 Array 객체를 만듭니다.
(Array 프로토타입 메서드가 아닌 Array의 정적 메서드)
매핑 함수를 인자로 받을 수 있습니다.

// 문자열로부터 배열 생성
const str = 'hello';
const arr1 = Array.from(str);
console.log(arr1); // 결과: ['h', 'e', 'l', 'l', 'o']

// Set 객체로부터 배열 생성
const set = new Set(['a', 'b', 'c']);
const arr2 = Array.from(set);
console.log(arr2); // 결과: ['a', 'b', 'c']

// 매핑 함수 사용
const numbers = [1, 2, 3];
const arr3 = Array.from(numbers, x => x * x);
console.log(arr3); // 결과: [1, 4, 9]

// 유사 배열 객체 (arguments)
function createArray() {
  return Array.from(arguments);
}
const arr4 = createArray(10, 20, 30);
console.log(arr4); // 결과: [10, 20, 30]

5. (번외) 배열 복사: Spread Syntax (...)

ES6 문법인 전개 구문(...)을 사용하여 배열을 얕게 복사할 수 있습니다. slice()와 유사하게 사용됩니다.

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original); // 결과: [1, 2, 3] (원본은 변경되지 않음)
console.log(copy);     // 결과: [1, 2, 3, 4]

지금까지 알고리즘 문제 풀이에 자주 사용되는 JavaScript 배열 메서드들을 살펴보았습니다.

각 메서드의 특징과 반환값을 정확히 이해하고 상황에 맞게 활용하는 것이 중요합니다.

원본 배열 변경 여부: push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin 등은 원본 배열을 직접 수정하므로 주의해야 합니다.
새로운 배열 반환: map, filter, slice, concat, flat, flatMap 등은 새로운 배열을 반환하므로 함수형 프로그래밍 스타일에 유용합니다.

추가로 배열에서 재미난 문제가 하나있습니다

// 배열은 요소를 동적으로 추가할수있습니다. 이때 length의 프로퍼티 값은 자동으로 갱신되는데요.

const arr = [0];

arr[1] = 1;

console.log(arr) // [0,1]
consoel.log(arr.length) // 2

//여기까지는 뭐 이해가됩니다 근데 갑자기

arr[100] = 100;
// 이걸해버린다면 어떻게될까요?

console.log(arr) // [0,1,empty*98,100]
consoel.log(arr.length) // 101
//이렇게 희소배열이 됩니다!

이건 그냥 배열 공부하다가 생각해보지않았어서 몰랐던 내용이였어요.

이렇게 배열의 요소가 연속적으로 위치하지않고 일부가 비어있는 배열을 희소배열이라고해요 !

배열에 대해서 알아보는 포스팅도 올려보겠습니다.

[컴퓨터구조] 컴퓨터 시스템 개요 및 구조

쮸롱이 — Tue, 22 Apr 2025 15:02:43 +0900

컴퓨터시스템은 기본적으로 하드웨어와 시스템 소프트웨어로 구성되고 그러한 시스템에 각종 응용 소프트웨어들이 탑재되어 사용자와 상호작용하면서 프로그램을 처리한다.

1.1 컴퓨터의 기본구조

✅ 하드웨어란?

정보를 실제로 처리하는 물리적 실체로, 컴퓨터의 눈에 보이고 손에 잡히는 모든 부품들을 말함.

비유: 컴퓨터가 사람이라면, 하드웨어는 근육과 뼈, 신경계와 같은 몸 그 자체이다.

하드웨어의 주요 구성 요소

메인보드 (Mainboard)
- 모든 부품이 연결되는 중앙 기판
- CPU, 메모리, 확장 슬롯 등을 포함해 시스템의 중추
CPU & GPU 칩
- CPU: 명령어 실행과 데이터 처리
- GPU: 영상, 그래픽, 병렬 연산 전용 처리 장치
주기억장치 모듈 (RAM)
- CPU가 직접 접근하는 고속 임시 메모리
- 예: DDR5 SDRAM
- 휘발성이라 전원이 꺼지면 내용이 사라짐
확장 보드
- 사운드카드, 네트워크카드 등 기능 추가용 보드
전원공급장치 (PSU)
- 각 부품에 안정적으로 전력 공급
보조기억장치
- 하드디스크(HDD), SSD 등 영구 저장 장치
입출력장치 (I/O Devices)
- 입력: 키보드, 마우스 등
- 출력: 모니터, 프린터 등
- 사용자 ↔ 컴퓨터 간 정보 전달 통로

전체 비유:
하드웨어는 컴퓨터의 몸이며,
메인보드는 신경망, CPU는 두뇌, RAM은 작업 공간,
저장장치는 기억력, 입출력장치는 감각 기관이라 할 수 있다.

✅ 소프트웨어란?

하드웨어를 어떻게 동작시킬지를 지시하는 명령어들의 집합

정보가 어떻게 처리되고 언제 실행될지 결정함
하드웨어 위에서 동작하며, 그 기능을 활용함

비유: 하드웨어가 ‘몸’이라면, 소프트웨어는 두뇌를 움직이는 생각과 명령서

❗ 소프트웨어는 하드웨어에 의존한다

하드웨어가 기본 능력을 제공
소프트웨어는 그 위에서 기능을 구성함

좋은 게임(소프트웨어)이라도 성능 낮은 PC(하드웨어)에선 잘 안 돌아감

컴퓨터의 기본 기능

수치적, 논리적 데이터의 처리
초기에는 릴레이 등 기계 장치를 사용했지만
지금은 속도 향상을 위해 전자 회로 기반의 디지털 시스템으로 전환됨

컴퓨터는 다음과 같은 순서로 작업을 수행함:

프로그램 실행 → 데이터 읽기 → 데이터 처리 → 결과 저장

주요 구성 요소의 역할

✅ CPU (중앙처리장치)

명령어 해석, 연산, 판단, 제어 등 컴퓨터의 중추
컴퓨터의 성능과 특성을 결정짓는 핵심 부품
처리 단위(비트 수)에 따라 컴퓨터 종류가 나뉨 (예: 8비트, 64비트)

비유: 회사에서 의사결정을 내리는 CEO

✅ 주기억장치 (RAM)

CPU가 실시간으로 읽고 쓰는 작업용 공간
속도는 빠르지만 휘발성이며, 저장 용량에는 한계가 있음

대표 예: DDR5 SDRAM
비유: 작업 중 참고하는 책상 위 메모장

✅ 보조기억장치 (SSD, HDD)

데이터를 영구적으로 저장하는 장치
CPU가 직접 접근 불가 → 제어기 필요
저장 밀도는 높지만 속도는 느림

비유: 자료를 정리해 넣는 서랍장, 캐비닛

✅ 입출력장치 (I/O Devices)

컴퓨터와 사용자 간의 정보 전달 장치

입력장치	키보드, 마우스	사용자의 명령을 컴퓨터에 전달
출력장치	모니터, 프린터	처리 결과를 사용자에게 전달

비유: 입력은 입을 통한 말하기, 출력은 눈과 귀를 통한 반응

️ 자바스크립트 Proxy: 내 객체를 위한 똑똑한 문지기

쮸롱이 — Wed, 16 Apr 2025 17:55:38 +0900

이전 포스팅에서는 Object.freeze()를 사용하여 객체의 불변성을 확보하는 방법에 대해 다루었습니다.

2025.04.15 - [JavaScript] - Object.freeze()로 안전하게 상태를 보호하는 법 — 불변성(immutability)의 모든 것

Object.freeze()로 안전하게 상태를 보호하는 법 — 불변성(immutability)의 모든 것

안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 합니다. 데이터가 어디서 어떻게 변하는지 추적하기 어렵고, 예상치 못한 버그 때문에 고생한 경험,

cwnsgh.tistory.com

freeze는 객체 상태 변경을 원천적으로 차단하여 데이터의 안정성을 높이는 효과적인 방법입니다.

하지만 개발 요구사항은 단순히 데이터를 고정하는 것 이상을 필요로 할 때가 많습니다.

예를 들어, 특정 조건 하에서만 속성 변경을 허용하거나, 값 할당 시 자동으로 유효성 검사를 수행하거나, 객체에 대한 접근 자체를 로깅하고 싶을 수 있습니다. Object.freeze만으로는 이러한 세밀한 제어가 어렵습니다.

이때 활용할 수 있는 강력한 자바스크립트 기능이 바로 Proxy입니다.

https://youtu.be/Vio6njk99Z4?si=6ETwJ_rkHbpR6u-M

한동훈님 유튜브 proxy

공부에 참고하는 유튜브 채널입니다. 너무 내용이 좋습니다. 여러분들도 얼렁 구독... !

Proxy를 진짜 쉬운 말로 설명하면?

Proxy는 "대리인"
누군가 대신해서 어떤 행동을 "가로채서" 처리해주는 역할입니다.

예를 들어서:

너한테 오는 택배를 네가 직접 받는 게 아니라
대리인(Proxy)이 먼저 받고, "이거 뭐지?" 하면서 열어보고
"이건 위험한 거 같네?" 하고 거절하거나 바꿔서 전달해주는 겁니다.

이처럼 Proxy는 객체의 기본적인 동작(속성 접근, 할당, 열거, 함수 호출 등)에 대한 사용자 정의 행위를 정의할 수 있게 해주는, 일종의 메타프로그래밍(Metaprogramming) 기능입니다.

메타프로그래밍이란? 코드 자체가 다른 코드를 읽거나, 생성하거나, 분석하거나, 수정하는 등의 작업을 수행하는 프로그래밍 기법을 말합니다. Proxy는 객체의 동작 자체를 프로그래밍적으로 제어한다는 점에서 메타프로그래밍의 한 예시로 볼 수 있습니다.

유튜브를 보며 배운내용을 복습하며 Proxy의 개념과 활용법에 대해 알아보겠습니다.

Proxy의 핵심 원리: 가로채기(Intercept)와 핸들러(Handler)

Proxy는 이름 그대로 '대리인' 역할을 합니다. 원본 객체(target)에 대한 직접적인 접근 대신,

Proxy 객체를 통해 접근하도록 경로를 만드는 것이죠.

이때 Proxy는 중간에서 객체에 가해지는 여러 작업(Operation)을 가로채고(Intercept), 미리 정의된 핸들러(Handler) 객체의 로직을 실행합니다.

[코드 실행] ----> [Proxy 객체] ----> [Handler 객체 (규칙 검사 및 처리)] ----> [원본 Target 객체]

target: 실제 데이터와 로직을 가지고 있는 원본 객체입니다. Proxy가 감싸게 될 대상입니다.
handler: 객체의 특정 작업(예: 속성 읽기)이 가로채졌을 때 어떤 동작을 수행할지 정의하는 함수(메서드)들을 담고 있는 객체입니다. 이 함수들을 트랩(Trap)이라고 부릅니다.
Proxy 객체: new Proxy(target, handler) 문법으로 생성됩니다. 이제 이 Proxy 객체를 통해 target에 접근하면, handler에 정의된 해당 트랩이 실행됩니다.

한동훈님의 프록시를 연습하는 법

사용법 예시

// 1. 원본 객체
const target = {
  _id: "user123", // 내부적으로 사용되는 ID (직접 노출하고 싶지 않음)
  name: "Alice",
  age: 30
};

// 2. 핸들러 객체 정의
const handler = {
  // 속성 읽기(get) 트랩
  get(targetObj, propName) {
    console.log(`[Proxy Log] Reading property: ${propName}`);
    // '_'로 시작하는 속성은 외부에서 접근 제한
    if (String(propName).startsWith('_')) {
      console.warn(`[Proxy Warn] Access denied for private property: ${propName}`);
      return undefined;
    }
    // 일반 속성은 원본 객체에서 값을 반환 (Reflect 사용 권장)
    return Reflect.get(targetObj, propName);
  },
  // 속성 설정(set) 트랩
  set(targetObj, propName, newValue) {
    console.log(`[Proxy Log] Setting property: ${propName} = ${newValue}`);

    // 나이(age) 유효성 검사: 0 이상 150 이하 정수
    if (propName === 'age') {
      if (!Number.isInteger(newValue) || newValue < 0 || newValue > 150) {
        console.error(`[Proxy Error] Invalid age: ${newValue}. Age must be an integer between 0 and 150.`);
        // 유효하지 않으면 변경을 거부 (false 반환)
        // throw new TypeError('Invalid age'); // 에러를 던지는 방식도 가능
        return false;
      }
    }
    // 이름(name)은 빈 문자열 불가
    if (propName === 'name') {
        if (typeof newValue !== 'string' || newValue.trim() === '') {
            console.error(`[Proxy Error] Name cannot be empty.`);
            return false;
        }
    }

    // 유효성 검사 통과 시 원본 객체에 값 설정 (Reflect 사용 권장)
    const success = Reflect.set(targetObj, propName, newValue);
    if (success) {
      console.log(`[Proxy Log] Property ${propName} set successfully.`);
    }
    return success; // 성공 여부 반환
  }
};

// 3. Proxy 생성
const user = new Proxy(target, handler);

// --- Proxy 객체 사용 ---
console.log(user.name);   // Alice (정상 접근, 로그 출력)
console.log(user.age);    // 30 (정상 접근, 로그 출력)
console.log(user._id);    // undefined (접근 제한, 경고 출력)

user.age = 31;            // 정상 변경 (로그 출력)
console.log(user.age);    // 31

user.age = 200;           // 실패! (유효성 검사 실패, 에러 로그 출력)
console.log(user.age);    // 31 (값 변경 안 됨)

user.name = "  ";         // 실패! (유효성 검사 실패, 에러 로그 출력)
console.log(user.name);   // Alice (값 변경 안 됨)

// 주의: 원본 객체에 직접 접근하면 Proxy가 작동하지 않음!
target.age = -10;
console.log(target.age);  // -10 (Proxy 거치지 않고 직접 변경됨)
console.log(user.age);    // -10 (Proxy로 읽어도 변경된 값이 보임)

`Reflect`와 함께 사용하는 이유

위 예제에서 Reflect.get()과 Reflect.set()을 사용했습니다. targetObj[propName]이나 targetObj[propName] = newValue를 직접 사용하는 대신 Reflect를 사용하는 것이 권장되는 이유는 다음과 같습니다.

기본 동작 보장: Reflect의 메서드는 해당 작업의 기본적인 내부 동작을 그대로 호출합니다. 직접 속성에 접근하는 것보다 예측 가능하고 일관된 동작을 보장합니다.
결과 반환: Reflect.set()이나 Reflect.deleteProperty() 같은 메서드는 작업의 성공 여부를 boolean 값으로 반환해줍니다. 이를 통해 핸들러 내에서 후속 처리를 하거나 set 트랩에서 정확한 값을 반환하기 용이합니다. (직접 할당(=)은 항상 true처럼 동작하는 경우가 많아 에러 상황을 놓칠 수 있습니다.)
this 문제 방지: 복잡한 경우(getter/setter가 있는 객체 등)에 발생할 수 있는 this 컨텍스트 문제를 피하는 데 도움이 됩니다.

간단히 말해, Proxy 핸들러 내에서는 Reflect를 사용하여 원본 객체의 기본 동작을 수행하는 것이 더 안전하고 표준적인 방법입니다. (한동훈님 유튜브에서 배움)

다양한 활용 사례

Proxy는 get, set 외에도 다양한 트랩을 제공하여 폭넓은 활용이 가능합니다.

유효성 검사 (Validation): 위 예시처럼 데이터 입력/수정 시 규칙을 강제합니다.
접근 제어 (Access Control): 사용자 권한에 따라 특정 속성 접근을 제한합니다.
로깅 및 분석 (Logging & Analytics): 객체 사용 패턴을 추적하거나 디버깅 정보를 남깁니다.
가상 속성 (Virtual Properties): 실제로는 존재하지 않지만, 접근 시 특정 계산을 통해 값을 반환하는 속성을 만들 수 있습니다.
데이터 바인딩 및 상태 관리: 객체 변경 시 자동으로 UI를 업데이트하거나 관련 로직을 트리거하는 데 활용될 수 있습니다. (많은 프레임워크/라이브러리가 내부적으로 유사한 원리를 사용합니다.)
기타 트랩 활용:
- has(target, prop): in 연산자를 가로챕니다. ('name' in user)
- deleteProperty(target, prop): delete 연산자를 가로챕니다. (delete user.age)
- apply(target, thisArg, args): 함수 호출을 가로챕니다. (Proxy 대상이 함수일 경우)
- construct(target, args): new 연산자를 이용한 생성자 호출을 가로챕니다. (Proxy 대상이 생성자 함수일 경우)

Proxy 사용 시 주의사항

원본 객체 직접 접근: Proxy를 생성해도 원본 객체(target)는 여전히 존재하며, 직접 접근할 수 있습니다. Proxy의 규칙을 적용하려면 반드시 Proxy 객체를 통해 접근해야 합니다.
디버깅: 개발자 도구에서 Proxy 객체를 보면 내부 구조가 바로 보이지 않아 디버깅이 다소 까다로울 수 있습니다. handler 내부에 로그를 잘 남기는 것이 중요합니다.
성능: 중간 단계를 거치므로 아주 미미한 성능 오버헤드가 발생할 수 있습니다. 대부분의 애플리케이션에서는 문제가 되지 않지만, 극단적인 성능 최적화가 필요한 경우 고려해야 합니다.

현대 개발 환경과 Proxy

최근 웹 개발에서는 React, Vue, Svelte 같은 프레임워크와 Redux, Zustand 같은 상태 관리 라이브러리가 널리 사용됩니다. 이러한 도구들은 자체적인 반응성 시스템이나 상태 관리 패턴을 통해 데이터 변경 감지 및 제어를 효율적으로 처리하는 경우가 많습니다.

이 때문에 개발자가 직접 Proxy를 낮은 레벨에서 사용할 필요성은 예전보다 줄어들었습니다.

예를 들어, 상태 관리 라이브러리는 특정 함수(Reducer, Setter)를 통해서만 상태 변경을 허용하도록 강제하여 Proxy의 set 트랩과 유사한 효과(변경 경로 제어)를 달성합니다.

결론: 언제 Proxy를 고려해야 할까?

비록 현대 프레임워크와 라이브러리가 많은 부분을 추상화해주었지만, Proxy는 여전히 자바스크립트의 강력하고 유용한 기능입니다. 특히 다음과 같은 상황에서 Proxy 사용을 고려해볼 수 있습니다.

프레임워크/라이브러리 외부: 순수 자바스크립트 환경에서 객체 동작에 대한 세밀한 제어가 필요할 때.
고급 유효성 검사/접근 제어: 라이브러리가 제공하는 기능 이상으로 복잡하거나 특수한 규칙을 객체 레벨에서 적용하고 싶을 때.
내부 동작 학습: 프레임워크나 라이브러리가 어떻게 객체 변화를 감지하고 반응하는지 그 원리를 이해하고 싶을 때 Proxy는 좋은 학습 도구가 됩니다.

Object.freeze가 데이터 자체를 보호하는 데 중점을 둔다면, Proxy는 데이터에 접근하고 상호작용하는 '행위'를 제어하고 관찰하는 데 더 강력한 기능을 제공합니다. 이 둘의 차이를 이해하고 상황에 맞게 활용한다면 더 견고하고 안정적인 코드를 작성하는 데 큰 도움이 될 것입니다.

이번 시간에는 자바스크립트 Proxy에 대해 조금 더 깊이 있게 알아보았습니다. 주니어 프론트엔드개발자로 이러한 고민을 해본적이 최근에는 없었습니다. 하지만 하나하나 알아가며 너무 즐거운 공부를 요즘 하는것 같습니다.

한동훈님 유튜브 정말 추천합니다 꼭 보세요.

궁금한 점은 언제든 댓글로 남겨주세요!

Object.freeze()로 안전하게 상태를 보호하는 법 — 불변성(immutability)의 모든 것

쮸롱이 — Tue, 15 Apr 2025 23:55:56 +0900

안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 합니다. 데이터가 어디서 어떻게 변하는지 추적하기 어렵고, 예상치 못한 버그 때문에 고생한 경험, 다들 한 번쯤 있으시죠?

오늘은 핵심적인 개념인 불변성(Immutability)과, 이를 자바스크립트에서 쉽게 구현하도록 도와주는 Object.freeze()에 대해 알아보겠습니다.

gpt가 만들어준 썸네일

데이터가 마음대로 바뀌면 왜 위험할까요? (양방향 데이터 바인딩의 함정)

과거 또는 일부 프레임워크에서 사용되던 양방향 데이터 바인딩은 화면과 데이터가 서로를 직접 수정할 수 있어 편리해 보였습니다. 하지만 앱이 복잡해지면 데이터 변경의 원인을 찾기 어려워지고, 이는 예기치 못한 버그와 디버깅 지옥으로 이어지기 쉽습니다. 그래서 "상당히 위험한 패턴"이라고 불리기도 하죠.

✨ 그래서 등장한 단방향 데이터 흐름과 불변성!

이러한 문제를 해결하기 위해 단방향 데이터 흐름 (Flux 패턴, Redux, React의 useState 등) 개념이 중요해졌습니다.

2025.04.15 - [React] - FLUX 패턴에 대해서 (단방향 데이터 흐름)

FLUX 패턴에 대해서 (단방향 데이터 흐름)

안녕하세요! 복잡한 웹 애플리케이션을 만들다 보면 '상태 관리'라는 거대한 벽에 부딪히곤 하죠. 많은 분들이 Redux 같은 라이브러리를 사용하며 이 문제를 해결하려 하지만, 때로는 라이브러리

cwnsgh.tistory.com

정리한 글입니다!

다시 간단히 말해, 데이터는 Action → Dispatcher → Store → View와 같이 정해진 흐름을 따라 한 방향으로만 흘러야 합니다. 핵심은 상태(State)를 아무 곳에서나 직접 수정하지 못하도록 제한하는 것입니다.

이 구조에서 불변성(Immutability) 이 중요한 역할을 합니다.

불변성이란 데이터(객체, 배열 등)가 생성된 이후에는 그 내용을 직접 수정하지 않고, 변경이 필요할 경우 항상 새로운 복사본을 만들어 사용하는 것을 말합니다.

React, Redux, Zustand 등 주요 상태 관리 도구들은 이 개념을 기반으로 설계되어 있습니다. 그리고 이 불변성 개념을 가장 잘 보여주는 도구 중 하나가 바로 Object.freeze()입니다. 오늘은 freeze()를 중심으로, 왜 불변성이 중요한지, 어떻게 활용되는지 쉽게 정리해보겠습니다.

가변 vs 불변 — 칠판과 종이 비유

불변성 개념이 처음에는 조금 헷갈릴 수 있습니다. 칠판과 종이 비유로 쉽게 이해해 봅시다!

가변적인 방식 (Mutable): 칠판
- 칠판에 "고양이: 1"이라고 적습니다.
- 값을 2로 바꾸려면? 지우개로 '1'을 지우고 그 자리에 '2'를 씁니다.
- ➡️ 원본 칠판 내용 자체가 수정되었습니다. 일반적인 객체 수정 방식이죠.
불변적인 방식 (Immutable): 코팅된 종이
- 상태 1: 종이 한 장에 "고양이: 1"이라고 적고, 코팅 (Object.freeze)을 합니다. 이 종이는 이제 수정할 수 없는 첫 번째 상태가 됩니다.
- 값 변경 필요: 고양이가 2마리가 되었다고 알려야 합니다. 코팅된 종이는 수정할 수 없으니, 완전히 새로운 종이를 꺼냅니다.
- 상태 2 생성: 새 종이에 "고양이: 2"라고 적고, 마찬가지로 코팅 (Object.freeze)을 합니다. 이것이 두 번째 상태입니다.
- 참조 변경: 이제 누군가 "현재 고양이 상태가 뭐야?"라고 물으면, 우리는 첫 번째 종이("고양이: 1")가 아닌,
  두 번째 종이("고양이: 2")를 보여줍니다. (즉, 상태를 가리키는 변수가 이제 두 번째 종이를 가리킵니다.)

이 비유처럼, 불변성 패턴에서의 "값 변경"은 원본 객체 자체는 절대 건드리지 않고,
변경이 필요할 때마다 새로운 복사본 객체를 만들어 참조(가리키는 대상)를 교체하는 것입니다.
각각의 상태(종이)는 그 자체로 불변하지만, 우리가 '현재 상태'로 바라보는 대상이 바뀌는 것이죠.

`Object.freeze()`란? 객체를 얼려버리자!

Object.freeze()는 이름 그대로 객체를 '동결'시켜 변경할 수 없도록 만드는 자바스크립트 내장 메서드입니다.

const myCat = {
  name: "쮸롱",
  age: 1
};

// 쮸롱이 정보를 얼려버렷!
Object.freeze(myCat);

// 이제 수정 시도는 모두 무시됩니다. (Strict Mode에서는 TypeError 발생)
myCat.age = 2;          // ❌ 안 바뀜!
console.log(myCat.age); // 1 (그대로)

delete myCat.name;      // ❌ 삭제 안 됨!
console.log(myCat.name);// "쮸롱" (그대로)

myCat.favoriteToy = "츄르"; // ❌ 추가도 안 됨!
console.log(myCat.favoriteToy); // undefined

freeze된 객체는 속성을 추가 / 삭제 / 수정할 수 없습니다.
즉, 객체를 "읽기 전용(read-only)"으로 만든다고 생각하면 쉽습니다.

⚠️ 주의: Object.freeze()는 얕은 동결(Shallow Freeze)입니다!

Object.freeze()는 객체의 1단계 깊이만 동결합니다. 객체 내부에 또 다른 객체(중첩 객체)가 있다면, 그 내부 객체까지 자동으로 얼지는 않습니다. (내부 객체까지 얼리려면 deepFreeze 함수를 따로 구현해야 합니다.)

const gameState = {
  level: 5,
  user: { name: "Hero", hp: 100 } // 중첩 객체
};
Object.freeze(gameState);
gameState.user.hp = 50; // ✅ 내부 객체는 변경 가능!

"값을 바꾼다"는 것의 진짜 의미 (복사하고 교체!)

"얼어붙은 객체는 값을 못 바꾼다면서요? 그럼 상태 업데이트는 어떻게 해요?"
앞서 '종이 비유'에서 봤듯이, 원본을 건드리지 않고 새 복사본을 만들어 교체하면 됩니다.

const settings = Object.freeze({ // 초기 설정 (상태 1 - 첫 번째 종이)
  theme: "dark",
  fontSize: 14
});

// 테마를 'light'로 바꿔야 하는 상황!
// 1. 복사본 만들기 (스프레드 문법 ... 사용)
const newSettings = {
  ...settings,      // 기존 설정 내용을 복사하고
  theme: "light"    // theme 속성만 새 값으로 덮어쓰기
};

// 2. (선택사항) 새 객체도 얼려주기 (상태 2 - 새 종이)
const frozenNewSettings = Object.freeze(newSettings);

console.log("새 설정:", frozenNewSettings); // { theme: 'light', fontSize: 14 }
console.log("원본 설정:", settings);      // { theme: 'dark', fontSize: 14 } (그대로!)

// --- 여기서 중요한 포인트! ---
let currentSettings = settings; // 처음엔 원본 설정을 가리킴
currentSettings = frozenNewSettings; // 이제 '현재 설정'은 새 객체를 가리킴!

잠깐! 여기서 "값을 바꾼 게 아닌 거 아니냐?"는 의문이 들 수 있습니다. 아주 정확한 지적입니다! (저도이렇게생각했습니다)

엄밀히 말해, { theme: 'dark', fontSize: 14 } 라는 원본 객체의 내용 자체는 전혀 바뀌지 않았습니다.
(마치 코팅된 첫 번째 종이처럼요.)

불변성에서 "값을 바꾼다"는 것은 다음 두 단계를 의미합니다:

새로운 상태 값(객체) 생성: 변경사항(theme: 'light')이 적용된 완전히 새로운 객체({ theme: 'light', fontSize: 14 })를 메모리에 만듭니다. (새 종이를 만듭니다.)
참조(Reference) 변경: 상태를 가리키던 변수(위 코드의 currentSettings)가 이제 새로 만들어진 객체를 가리키도록 연결을 바꿉니다. (손에 든 종이를 새 종이로 바꿉니다.)

결론: 원본 값 자체를 수정(Mutation)한 것은 아니지만,
프로그램이 바라보는 '현재 상태'를 나타내는 객체가 새로운 객체로 교체되었기 때문에,
결과적으로 상태가 변경된 효과를 얻는 것입니다. 이것이 불변성을 유지하면서 상태를 업데이트하는 핵심 원리입니다.

직접 접근 막기: 왜 중요할까?

만약 Object.freeze()를 사용하지 않아서 다음과 같은 코드가 가능하다면 어떨까요?

// 어딘가에서 갑자기 상태를 직접 수정한다면?
appState.user.isAdmin = true; //   누가? 언제? 왜?

이렇게 객체를 직접 수정하면, 누가 언제 어떻게 상태를 바꿨는지 추적하기 매우 어려워집니다.

버그가 발생했을 때 원인을 찾기 힘들어지죠.

단방향 데이터 흐름(Flux, Redux 등)은 상태는 오직 정해진 '공식 경로'(Action, Reducer 등)를 통해서만 변경되어야 한다는 원칙을 세워 이런 혼란을 막습니다.

Object.freeze()는 이 원칙을 코드 레벨에서 기술적으로 강제하여 실수를 방지하는 효과적인 방법입니다.

잠깐, 매번 새 객체를 만들면 메모리 낭비 아닌가요?

맞습니다. 표면적으로 보면 이전 상태 객체가 메모리에 남아있어 낭비처럼 보일 수 있습니다.

하지만 실제로는 다음과 같은 이유로 크게 걱정하지 않아도 괜찮습니다.

구조적 공유 (Structural Sharing):

객체를 복사할 때 변경된 부분만 새로 만들고, 변경되지 않은 부분은 이전 객체의 메모리 참조를 그대로 공유하는 최적화 기법입니다.

const state1 = {
  user: {
    name: "쮸롱",
    age: 1,
  },
  settings: {
    theme: "dark",
  },
};
const state2 = {
  ...state1,
  user: {
    ...state1.user,
    age: 2,
  },
};

// state2를 만들 때, settings 객체는 state1의 것을 그대로 참조합니다. (메모리 절약!)

console.log(state1.settings === state2.settings); // true

특히 상태 관리 라이브러리(Immer 등)는 이 기법을 적극 활용하여 효율을 높입니다.

가비지 컬렉션 (Garbage Collection):
- 더 이상 아무도 참조하지 않는 이전 상태 객체(쓸모 없어진 고양이: 1 종이)는 자바스크립트 엔진의 가비지 컬렉터가 자동으로 메모리에서 회수합니다. 영원히 남아있는 것이 아닙니다.
얻는 이점과의 트레이드오프:
- 변경 추적 용이: 이전 상태와 새 상태가 명확히 구분되어 디버깅이 쉬워집니다. (Time Travel Debugging!)
- 성능 최적화 (React 등): 객체 참조(===)만 비교하면 변경 여부를 매우 빠르게 알 수 있어, 불필요한 화면 업데이트를 건너뛸 수 있습니다. (React.memo 등)
- 예측 가능성 및 안정성: 데이터 흐름이 명확해져 코드 예측이 쉽고 부작용이 줄어듭니다.

결론적으로, 약간의 메모리 오버헤드를 감수하는 대신 개발 편의성, 디버깅 용이성, 성능 최적화 등 더 큰 이점을 얻기 때문에 불변성 패턴이 널리 사용됩니다.

결론

Object.freeze()는 단순해 보이지만, 안정적인 상태 관리의 핵심 철학인 '불변성'을 코드 레벨에서 지키도록 도와주는 강력한 도구입니다.

특히 React, Redux처럼 상태의 일관성과 예측 가능성이 중요한 환경에서 Object.freeze() 를 잘 활용하면 코드의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. "값을 바꾼다"는 것의 의미를 정확히 이해하고 사용한다면 더욱 효과적일 것입니다.

다음에는 같이 사용하면 더 좋은 proxy에 대해 알아볼 생각입니다 !