[TIL] 230825

Nextjs

영화리스트

layout을 활용해보려다가 실패해서(처음에는 url이 변하지 않더라도 버튼을 누르면 리스트가 바뀌게 하려고 했다.) url에 따라 다른 영화가 나오게 구현하였다.

• [genreId]/page.tsx

const GenreMovies = ({ params }: { params: { genreId: string } }) => {
  const { genreId } = params;
  return (
    <div>
      <KeywordButtons />
      <TrendMoives genreId={genreId} />
    </div>
  );
};

버튼들이 원래는 useState를 사용하여 상태에 따라 색상이 바뀌도록 하였는데 url에 따라 바뀌도록 수정했다.

• components/MainPageMovies/KeywordButtons.tsx

const KeywordButtons = () => {
  const [genres, setGenres] = useState([]);
  const params = useParams();
  const router = useRouter();

  const GetGenres = async () => {
    const genres = await getGenres();
    const genreData = [{ name: '전체' }, ...genres.genres];
    return genreData;
  };

  useEffect(() => {
    const fetchData = async () => {
      const data: any = await GetGenres();
      setGenres(data);
    };

    fetchData();
  }, []);

  const handleGenreClick = (genreId: number | null) => {
    genreId === undefined ? router.push('/') : router.push(`/${genreId}`);
  };

  return (
    <div>
      {genres.map((genre: MovieGenre, idx: number) => {
        return (
          <>
            <button
              key={genre.id}
              className={`bg-blue-500 hover:bg-blue-700 text-white font-bold m-1 py-2 px-4 rounded ${
                (params.genreId === undefined && genre.name === '전체') || Number(params.genreId) === genre.id
                  ? 'bg-blue-700'
                  : ''
              }`}
              onClick={() => handleGenreClick(genre.id)}
            >
              # {genre.name}
            </button>
          </>
        );
      })}
    </div>
  );
};

가장 상단의 페이지에서는 genreid가 all이라는 것을 임의로 집어넣어 전체버튼의 색상이 다르게 만들어주었다.

<KeywordButtons />
        <TrendMoives genreId={'all'} />

CS

1) 프로세스 : 메모리에 올라온 프로그램

2) 프로세스 생명주기 : 신규 - 준비 - 수행 - 대기 - 종료

3) PCB : 프로세스의 실행 정보와 상태 정보를 저장하는 자료구조 (PID, PC, Register, MMU 등)

4) 대기 큐 (Queue) : Job, Ready, Device Queue 등

5) Scheduler : Job, CPU, Device Schduler 등

6) Swapping : 안쓰는 프로세스 HDD로 내리고, 다시 쓰이면 메모리로 올리는 작업

7) Context Switching : Running 프로세스를 Ready로 만들고 다른 프로세스로 전환

8) Dispatcher : 컨텍스트 스위칭할 때 필요한 정보(PCB를 저장하고 꺼내는 프로그램)

9) CPU 시간공유 시스템 : (대부분의)OS에서 프로세스(스레드)가 시간단위로 나누어서 CPU를 사용할 수 있도록 관리해주는 시스템

10) 프로세스 메모리 공간 : 프로세스 주소 공간은 Code, Data, Stack, Heap 으로 구성됨

11) 커널 : 커널은 대부분의 운영 체제(OS)의 주요 구성 요소이며 컴퓨터 하드웨어와 프로세스를 잇는 핵심 인터페이스

12) PCB : 프로세스의 실행 정보와 상태 정보를 저장하는 자료구조로 커널 프로세스에 존재