[TIL] 230822

Tailwind

• padding
  p-숫자
• margin
  m-숫자

Nextjs

client 컴포넌트 내에 server 컴포넌트 배치
composition을 사용하여 넘길 수 있다.

<ClientComponent>
  <ServerComponent>
</ClientComponent>

프로젝트

키워드에 따른 영화 필터링

버튼들은 client 컴포넌트로 배치하고 영화들은 server컴포넌트로 배치하고 싶었는데, client -> server는 사용하지 못하는 것으로 알고있었다.
하지만, children으로 넘겨줄 수 있다는 것을 알게되었고, 데이터를 해당 컴포넌트가 아닌 필터링한 데이터를 props로 넘겨주도록 작업해야겠다.

장르에 경우 TMDB에 어떤 장르들이 있는지 데이터와 해당 장르의 id가 담겨있어, 이를 활용하려고한다.

const genres = await getGenres();
  const genreData = [{ name: '전체' }, ...genres.genres];
  console.log(genreData);

  /**
   * 버튼 클릭 시, 필터링하여 데이터 전송
   */
  return (
    <div>
      {genreData.map((genre: MovieGenre, idx: number) => {
        return (
          <>
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold m-1 py-2 px-4 rounded ">
              # {genre.name}
            </button>
          </>
        );
      })}
      <TrendMoives />
    </div>
  );

해당 코드에서 TrendMovies에 필터링된 데이터를 넘겨주어야 한다.

CS

스케쥴링

CU(제어장치의 핵심 기능)
프로세스(실행주체)를 어떻게 할당하여 처리하는지를 스케쥴링

• 용어
  오버헤드: 프로세스가 필요한 자원보다 더 많이 사용하지 않도록
  사용률: 프로세스가 최대한 자원을 많이 받고 빨리 처리하도록
  기아 현상: 프로세스가 자원할당을 못받아서 대기하지 않도록
  

스케쥴링 종류

선점

OS가 강제로 사용권을 회수할 수 있음, 알아서 처리하는 방식
긴급한 상황에서 제어

• 우선순위(Priority Scheduling)
  우선순위 높은 순으로 처리
  
• 라운드로빈(Round Robin)
  정해진 시간 할당량만큼 처리하고 다음거 수행, 남은건 재할당을 기다린다.(회전식)
  문맥전환이 많음
  
• 다단계 큐(Multilevel-Queue)
  준비완료 큐를 여러개로 분류하여 각각 다른 스케쥴링 알고리즘을 적용
  

비선점

프로세스 종료 or I/O 등의 이벤트가 있을 때까지 실행

• FCFS(First Come, First Serve)
  도착순, FIFO같은 느낌
  
• SJF(Shorted Job First)
  수행시간이 가장 짧은 것 부터
  
• HRN(Highest Response-ratio Next)
  SJF의 단점을 보완한 방식
  우선순위 = (대기시간 + 실행시간) / (실행시간)

기술면접

Redux가 무엇인가요, 왜 Redux를 사용하시나요?

• 상태 관리 라이브러리입니다. 가장 많이 사용하고 있는 라이브러리이기도 하고 복잡한 상태를 관리하고 props drilling을 방지하기 위해 사용합니다. 또한, redux-thunk 같은 미들웨어로 비동기 작업을 디테일하게 할 수 있습니다.

알고리즘 스터디도 다시 시작하여 공부할게 많아졌다... 평일에는 CS와 알고리즘을 번갈아 공부하고 주말에 정처기를 공부하는 식으로 시간분배를 해야할 것 같다.
프로젝트 기능도 Nextjs를 더 공부해서 금요일 코드리뷰까지 최대한 효율적으로 코딩해보자