[Error Handling] 컴포넌트가 렌더링 되지 않는(것처럼 보이는) 문제

어떤 에러인가요?

// admin.tsx
import { NextPage } from 'next';
import Head from 'next/head';
import { useState, useEffect } from 'react';
import axios from 'axios';
import styles from '../styles/Admin.module.css';

axios.defaults.withCredentials = true;

const Admin: NextPage = () => {
  const [userlist, setUserlist] = useState([]);

  useEffect(() => {
    axios
      .get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/admin`)
      .then((data) => {
        console.log(data.data);
      });
  });

  return (
    <>
      <Head>
        <title>BanThing</title>
        <meta name="BanThing" content="Order with your foodmate" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.container}>hello world</div>
    </>
  );
};

export default Admin;

위 코드블록과 같이 admin.tsx를 작성해 주었고, div의 스타일에는 width: 100%, height: 100%, background-color: tomato를 정해주었음에도 아래 사진과 같이 _app.tsx에서 전역으로 렌더링해준 header를 제외하고는 아무것도 렌더링되지 않는 것 같습니다. Next.js의 문제인지 아니면 제가 특별히 실수한 것이 있는지는 아직 잘 모르겠습니다.

스크린샷 2022-03-05 오후 9 21 34

에러 핸들링 방법

스크린샷 2022-03-05 오후 9 58 54 CSS 쪽의 중요한 개념 중 하나인 요소 쌓임순서 ,쌓임 문맥을 이해하고 있었다면 금방 해결할 수 있었던 문제였습니다. 해당 페이지에서 header 부분은 position: fixed; 였고, 제가 작성한 <div className={styles.container}>hello world</div>는 position이 따로 명시되지 않았기 때문에 밑에 쌓이게 되고, 그후 position이 명시된 header가 나중에 쌓이게 되는 것입니다. 이를 확인해 보기 위해 header의 height이 75px이므로 div의 height을 76px로 작성해 보았더니 아래 사진과 같았습니다.

교훈

쌓임 문맥(stacking context)에 대한 충분한 이해가 있어야 이후로도 CSS를 능숙하게 다룰 수 있을 것 같습니다!

에러 핸들링을 위해 참고한 레퍼런스 링크

MDN 링크

codestates / BanThing