65일차 TIL( cs 스터디 질문을 만들어보자 / zustand )

1. 캐시 메모리에 대해 서술하시오.

A. 컴퓨터 시스템 향상을 위해 CPU와 주기억장치 사이에 위치한 아주 작은 비싼 메모리 !

 

2. L1 (Layer 1 캐시 메모리)과 L2, L3에 대해 설명하시오.

A. 캐시 메모리(L1) : 처리속도를 높여주는 역할수행

    L2, L3 캐시메모리는 메인 메모리에 있는 데이터를 캐시 메모리에 불러와 놓고, CPU가 필요한 데이터를 캐시에서 먼저

    찾도록 하여 시스템 성능을 향상시켜준다 . (레지스터와는 비슷한데 다름)

 

3. 메인 메모리에 대해 서술하시오.

A.

RAM은 Random Access Memory의 약자

RAM은 DRAM과 SRAM이 있는데 주기억장치는 주로 DRAM을 의미 (SRAM은 캐시나 레지스트리)

컴퓨터의 CPU가 현재 처리중인 데이터나 명령만을 일시적으로 저장하는 휘발성 메모리

전원이 꺼지면 메인 메모리에 저장된 내용들은 모두 사라지기 때문에 컴퓨터가 꺼진 이후에도 데이터를 유지하고 싶을 경우에는 데이터를 하드디스크에 저장해야 함

보조기억장치(하드디스크)보다 접근속도가 빠르다

모든 프로그램은 컴퓨터에서 실행되기 위해 메모리의 일부를 사용

HDD - RAM - CPU 와 유사한 방식으로 연산과정의 중간에 위치

HDD에 비해 월등히 빠른 속도로 CPU가 정보를 원활히 이용할 수 있도록 하자

CPU가 사용하기 좋도록 각종 정보를 임시 저장하는 휘발성 장치 

 

zustand 초읽기

 

Zustand?
상태관리 라이브러리인 Jotai를 만든 카토 다이시가 제작에 참여하며 만든 것으로 알려져 있으며,
제일 큰 장점은 일단 너무 쉽다. Recoil도 root에 컴포넌트만 감싸기만 해도 state를 관리할 수 있었다. 하지만 Zustand는 여기서 감싸지도 않고 쉽게 사용할 수 있다. 즉, 부모 자식간의 컴포넌트 관계가 사라지고, 불필요한 렌더링을 막아주는 장점이 있다. 또한 간단하게 Store 파일을 만들어 여기서만 정해진 함수로 상태를 바꿀 수 있게 관리를 해주면 전역적으로 상태관리를 사용할 수 있다.

특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (Transient Update라고 한다.)
동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)

 

// userStore.ts

import { create } from 'zustand';
import { UserInfo } from '../types/types';

interface UserState {
  currentUser: UserInfo | null;
  setCurrentUser: (user: UserInfo | null) => void;
}
tpyes.ts에 있는 UserInfo 를 이용하여 인터페이스를 정의해주고 

// 현재 유저 set 해주기
export const setUserStore = create<UserState>((set) => ({
  currentUser: null,
  setCurrentUser: (user) => set({ currentUser: user })
}));

// 유저 정보 가져오기
export const useCurrentUser = () => setUserStore((state) => state.currentUser);

 

 

 

// Header.tsx

const navigate = useNavigate();
  const [user, setUser] = useState<UserInfo | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
  }, []);

  // 셋 해주는 함수 가져오기
  const setCurrentUser = setUserStore((state) => state.setCurrentUser);
  // 현재유저 정보 가져오기
  const currentUser = useCurrentUser();

  useEffect(() => {                                          로그인상태를 주시하며 관리 감독
    const authSubscription = supabase.auth.onAuthStateChange(async (event, session) => {
      if (event === 'SIGNED_IN' && session) {
        const response = await supabase.from('user').select().eq('id', session?.user.id).single();
        if (response.data) {
          setCurrentUser(response.data);
          setUser(response.data);
          localStorage.setItem('user', JSON.stringify(response.data));
        } else {
          const userInfo: UserInfo = {
            id: session.user.id,
            created_at: session.user.created_at,
            email: session.user.user_metadata.email,
            avatar_url: session.user.user_metadata.avatar_url,
            name: session.user.user_metadata.name
          };
          await supabase.from('user').insert(userInfo);
          setCurrentUser(userInfo);
          setUser(userInfo);
          localStorage.setItem('user', JSON.stringify(userInfo));
        }
      } else if (event === 'SIGNED_OUT') {
        setCurrentUser(null);
        setUser(null);
        localStorage.removeItem('user');
      }
    });

    return () => {
      authSubscription.data.subscription.unsubscribe();

      //관리 감독 구독해제
    };
  }, []);