오늘의 목표

🌟 메인페이지 상, 중단을 만들어요!

🌟 다크모드를 1차적으로 마무리합니다: 다크모드가 유지되도록!

메인페이지

상단 HTML 구조 변경

최종적으로 정해진 블로그 상단의 모습입니다. 진행을 하며 문제가 되었던 부분은 div를 쓸데 없이 많이 만들어 이용해 주었던 부분이었습니다

이전에는 아래와 같은 모습의 코드였습니다

<section>
 <div>
   <img alt="이미지 들어갈 예정" />
   </div>
 <div>
   <h1>DIDI</h1>
   <div>
      <p>간단한 자기소개가 들어갈거에요!</p>
      <p>꾸준함을 노력하고자하는 프론트엔드 개발자 디디에요</p>
      <p>어디에서라도 긍정적인면을 발견하는 것을 좋아합니다😊</p>
    </div>
 </div>
 </section>

그런데 이제 연락처 부분이 들어가게 되면서, 아래와 같이 변경을 해줘야 하는 상황이 되었습니다

<section>
  <div>
    <img alt="이미지 들어갈 예정" />
  </div>
  <div>
    <div>
      <h1>DIDI</h1>
      <div>
        <p>간단한 자기소개가 들어갈거에요!</p>
        <p>꾸준함을 노력하고자하는 프론트엔드 개발자 디디에요</p>
        <p>어디에서라도 긍정적인면을 발견하는 것을 좋아합니다😊</p>
      </div>
    </div>
    <div>
      <ul>
        <li>연락처</li>
      </ul>
    </div>
  </div>
</section>

이런 상황에서 스타일드 컴포넌트를 이용하면서, 중복되는 부분의 관리를 제대로 못해준 상황이었기 때문에, 컴포넌트들이 점점 늘어나 뭐가 무엇인지 관리가 어려워졌습니다.

그래서 상단의 배치를 다시 해주기로 결정해주었습니다

1. flex 를 적용해도 크게 상관 없고, 공통된 컴포넌트를 만들어 주었습니다
2. 이후 내부 역시 동일하다는 생각이 들어 공통 div컴포넌트로 나누어 주었습니다
3. 마지막으로 내부 컨텐츠를 감싸줄 div를 만들어 진행해 주었습니다

🤔 그런데 지금보니 결국 감싸줄 div의 경우에는 공통 컴포넌트로 진행해도 되었을 것 같다는 생각이 들어 변경을 다시 해야할 것 같슴니다🙃

상단 아이콘 FONT AWSOME으로 변경