오버헤드..?(트러블 슈팅🚨)

연속으로 트러블 슈팅을 작성할 줄 몰랐지만...
현재 포켓몬 도감을 구현 중에 있었다.
여기선 나만의 포켓몬 파티를 구성해서 화면 상단에 띄어놓도록 웹 페이지를 구성하였다.

현재 페이지의 상단에 존재하는 포켓몬 파티는 Dashboard라는 컴포넌트로
하단에 존재하는 포켓몬들은 PokemonList 컴포넌트로 구성하였다.

<DexLayout>
      <Dashboard pokemonDelete={removePokemon} Lineup={Lineup}></Dashboard>
      <PokemonList pokemonSelect={addPokemon}></PokemonList>;
</DexLayout>

개발 진행을 하면서 웹페이지 뿐만 아니라 모바일 혹은 반응형에 대한 처리를 하기 위해 두 컴포넌트를 DexLayout이라는 styled component를 활용하여 gap을 통해 화면이 변경되어도 겹치지 않고 간격이 유지되도록 구현했다.

const DexLayout = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
`;

그러나 실제로 테스트를 해본 결과 간격이 유지되지 않았다.

화면이 줄어들때 Dashboard안의 각 컴포넌트끼리는 겹치지 않고 잘 처리되는 모습이지만, Dashboard 컴포넌트 자체는 PokemonList와 분리되지 않는 모습이였다.

해당 문제의 원인을 찾아보기 위해 Dashboard 컴포넌트를 확인

<DashboardLayout>
  <LineupTitle>나만의 포켓몬 파티</LineupTitle>
  <BorderBox>
    {Array.from({ length: 6 }, (_, index) => {
      return Lineup[index] ? (
        <PokemonCard
          pokemon={Lineup[index]}
          action={pokemonDelete}
          type="Dashboard"
          key={index}
          />
      ) : (
        <EmptyPokemon key={index}>
          <PokemonBall src={pokemon_ball} />
        </EmptyPokemon>
      );
    })}
  </BorderBox>
</DashboardLayout>

이 중 PokemonCard를 둘러싸고 있는 BorderBox의 style을 확인했다.

const BorderBox = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 200px;

  margin-bottom: 20px;
`;

해당 컴포넌트를 wrap을 통해 감싸고있는데, height를 고정적으로 설정했다.

이것이 왜 문제가 되냐면
wrap은 감싸고 있는 컴포넌트 혹은 아이템들이 width 값을 초과하게되면 다음 줄로 넘겨주는 기능이다.
그런데 아이템들이 줄이 바뀌면서 고정적으로 설정한 height 값을 초과하면 오버헤드가 생겨 의도한 렌더링이 되지 않는 것이다.

이를 해결하고자 height를 삭제했다.

const BorderBox = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  /*height: 200px*/	

  margin-bottom: 20px;
`;

이 후 정상적으로 작동하는지까지 확인한 후 해당 내용을 마무리지었다.

사실 이전까지는 wrap과 height를 같이 쓰는 것에 대해서 크게 생각하지 않았었는데 반응형 처리를 고려하면서 해당 문제를 겪게 된 것이다.
많은 사용자들이 모두 동일한 환경(좀 더 정확히 얘기하자면 '개발자 환경')에서 서비스를 사용한다는 것은 극히 드문 일이다.
또한 실제 서비스를 제공한다면 위와 같은 상황(반응형을 통한 서비스 작동 확인)이 좀 더 보편적으로 여겨질 것이다.

지금의 경험 덕분에 조금 더 사용자의 작동 환경을 생각하고자 하는 마음가짐을 높일 수 있는 계기였다.