작업 시작

프로젝트를 시작할 때 제일 먼저 환경 세팅을 했습니다.
프로젝트의 효율적인 개발 환경을 만들고 일관된 코드 스타일을 유지하기 위해 ESLint와 Prettier를 설정하고, 폰트와 Tailwind CSS를 추가한 다음, 간단한 메인 페이지를 만들어보았습니다.

이 사이트는 단순한 기술 블로그를 넘어 포트폴리오로 활용 가능한 공간을 목표로 했습니다. 또한, 프로젝트 과정에서의 기술적 성장과 배운 점을 기록하고 사용자 피드백을 통해 지속적으로 개선할 수 있는 플랫폼을 직접 운영해 보고자 했습니다.

ESLint

ESLint 설정

ESLint를 먼저 설정해준 이유는 코드를 작성할 때 바로 문제를 확인하고 수정할 수 있으며, 코드를 깔끔하게 유지할 수 있기 때문입니다. ESLint 설정 시 여러 블로그와 ChatGPT의 도움을 받아 직접 설정을 했습니다.

유명한 ESLint 패키지를 사용하지 않은 이유는 불필요한 설정들이 많았고, 너무 엄격한 규칙들이 개인 프로젝트에 맞지 않는다고 판단했기 때문입니다. 직접 설정해보면서 모든 규칙을 이해하진 못했지만 어떤 규칙들이 필요한지, 그리고 어떤 설정이 프로젝트에 적합한지 더 잘 이해할 수 있었습니다.

Prettier

Prettier 설정

코드를 깔끔하게 작성하기 위해 Prettier를 설정했습니다. Tailwind CSS 플러그인으로 Tailwind 클래스도 정렬되도록 했습니다.

공통 컴포넌트 제작 및 홈 페이지 제작

환경 세팅이 끝난 후에는 공통 컴포넌트와 홈 페이지를 제작했습니다.

• Header, Footer
  • 사이트의 거의 모든 부분에 사용되기 때문에 UI 위치를 잡기 위해서 제일 먼저 만들었습니다.
  • Header에는 사이트의 중요한 링크를 두어 이동하기 편하게 설정했고, 초기에 라이트/다크 모드 설정을 드롭다운으로 추가했습니다. 이는 사용자들이 편리하게 테마를 선택할 수 있도록 하기 위함입니다.
• Dropdown
  • 초기에 라이트/다크 모드를 설정 하기 위해서 제작했습니다.
• DelayManager ( debounce, throttle )
  • debounce, throttle 기능을 사용하기 위해 lodash 라이브러리를 사용하려 했지만, 패키지 크기가 커서 불필요한 로딩 시간을 줄이기 위해 필요한 기능만 따로 구현했습니다.
• Home 페이지
  • 제작한 Header와 Footer를 사용하면서 UI 위치를 잡기 위해 임시 메인 페이지를 제작했습니다.
  • 해당 페이지에는 사이트의 전반적인 내용을 쉽게 파악할 수 있도록 최신 글과 인기 글을 보여줄 예정입니다. 스크롤을 통해 포트폴리오의 주요 내용을 간단히 확인할 수 있도록 구성하여, 사용자가 탐색을 시작하면서 자연스럽게 콘텐츠에 관심을 가질 수 있도록 유도하려고 합니다.
    

작업을 하면서

이번 프로젝트에서 ESLint와 Prettier 설정을 직접 다루면서 코드의 일관성과 클린 코딩의 중요성을 다시 한 번 체감할 수 있었습니다. 환경 세팅이 처음에는 조금 복잡했지만, 이후 코드 작성 시 많은 시간을 절약할 수 있었습니다.