여러분 안녕하세요! 올해 Hacktoberfest는 어떻게 진행되나요? 개인적으로 지금까지 정말 재미있게 즐기고 있습니다. 이제 10월 둘째 주에 접어들었습니다. 이는 챌린지를 완료하는 데 필요한 4가지 풀 요청(PR) 중 두 번째 풀 요청(PR)을 할 시간이라는 의미입니다. 이번 주에는 1주차에 ​​했던 것처럼 문서화에만 집중하기보다는 프로젝트의 코드베이스에 기여함으로써 좀 더 발전하기로 결정했습니다.

1주차 요약

Hacktoberfest의 첫 번째 PR에서는 프로젝트 문서를 개선하는 작업을 했습니다. 초보자로서 저는 더 작고 관리하기 쉬운 작업으로 프로세스를 쉽게 진행하고 싶었습니다. 하지만 이번 두 번째 주에는 GitExplorer 프로젝트에 기여하는 것보다 좀 더 기술적인 일을 하기로 결정했습니다.

프로젝트 개요: GitExplorer

GitExplorer는 최고의 GitHub 리포지토리 검색 및 탐색을 단순화하는 웹 애플리케이션입니다. 이를 통해 사용자는 프로그래밍 언어, 주제 및 기타 정렬 기준에 따라 저장소를 필터링할 수 있습니다. UI가 아직 개발 중인 동안 이 프로젝트는 기여자, 특히 초보자에게 귀중한 학습 기회를 제공합니다. 저장소에 있는 많은 이슈에는 "좋은 첫 번째 이슈"라는 태그가 지정되어 있어 시작하기에 좋은 곳입니다.

저는 기여를 위해 저장소를 탐색할 때 사용자 경험을 향상시키는 탐색 기능을 구현하기로 선택했습니다.

문제 식별

이 프로젝트에는 처음에 저장소의 다음 페이지로 이동하기 위한 버튼이 있었지만 전체 페이지 매김 시스템이 부족했습니다. 사용자는 쉽게 페이지 간을 앞뒤로 탐색하거나 특정 페이지로 이동할 수 없어 사용성 문제가 발생했습니다. 저는 이러한 제한 사항을 발견하고 프로젝트 관리자에게 해당 문제를 나에게 할당해 달라고 요청했습니다.

프로젝트를 진행하는 동안 눈에 띄는 한 가지 측면(좋은 측면은 아니지만)은 코드베이스가 구조화된 방식이었습니다. 프로젝트에는 단일 script.js 파일에 모든 로직이 기록되어 있어 프로젝트가 성장함에 따라 유지 관리가 어려워질 수 있습니다. 이번 PR에서는 페이지 매김 버튼에만 중점을 두었기 때문에 크게 변경하고 싶지는 않았지만 다음 호에서 코드 구조를 리팩토링하는 것을 제안할 계획입니다.

실제로 이전에 다른 개발자가 다음 페이지로 이동하는 버튼을 만든 적이 있는데, 특정 페이지뿐만 아니라 앞뒤로 이동하려는 경우 사용자 경험에 좋지 않습니다. 이런 이유로 나는 관리자에게 이 문제를 나에게 할당해 달라고 요청했습니다.
이 프로젝트를 진행하면서 마음에 들지 않았던 점이 하나 있었습니다. 이는 관리자가 단 하나의 script.js 파일에 모든 로직을 작성하면서 코드 베이스를 구성하는 방식입니다. 하지만 이 문제는 페이지 매기기 버튼만 요구하기 때문에 많은 수정을 원하지 않습니다. 나중에 코드 베이스 재구성을 요청하는 새로운 이슈를 만들겠습니다.

새로운 기능: 향상된 페이지 매김

기존 기능에는 페이지 간을 탐색할 수 있는 버튼이 하나만 있었고 페이지당 10개의 저장소가 표시되었습니다. 내 목표는 "이전", "다음" 및 번호가 매겨진 페이지 버튼을 사용하여 보다 사용자 친화적인 페이지 매김 시스템을 구현하는 것이었습니다. 이를 통해 사용자는 관심 있는 페이지로 직접 이동할 수 있어 탐색 환경이 더욱 원활해집니다.

구현

GitHub API 제약 조건:

페이지 매김을 구현하는 동안 결과를 1,000개 항목으로 제한하는 GitHub API의 제한 사항에 직면했습니다. 검색 결과 저장소가 1,000개가 넘는 경우 이 제한을 초과하여 탐색하려고 하면 오류가 발생하고 정의되지 않은 데이터가 반환됩니다. 디자인이 페이지당 10개의 저장소를 표시하므로 이 문제가 발생하지 않도록 페이지 수를 100으로 제한했습니다.

코드 변경:

• script.js에 페이지 매기기를 위한 새로운

  섹션을 도입했습니다. 이를 통해 버튼의 미학과 사용자 경험을 개선하기 위해 몇 가지 CSS 스타일을 추가할 수 있었습니다.

• 페이지 매김의 핵심 논리가 두 가지 새로운 기능으로 캡슐화되었습니다.

  • createButton()
  • 렌더페이지 매김() 이러한 기능은 사용 가능한 페이지와 적용된 스타일을 기반으로 페이지 매기기 버튼을 동적으로 생성하여 현재 페이지 버튼을 비활성화하여 사용자가 실수로 다시 클릭하는 것을 방지합니다. 버튼에 호버 효과도 추가해 좀 더 세련된 느낌을 주었습니다.

CSS 개선:

페이지 매김 디자인의 경우 현재 페이지 버튼이 비활성화되고 상태를 나타내기 위해 스타일이 다르게 지정되었는지 확인했습니다. 다른 페이지 버튼에는 호버 효과가 적용되어 상호 작용이 향상되고 사용자 경험이 향상되었습니다.

결론

Hacktoberfest 2주차에 대한 저의 기여를 마무리합니다. 저는 이제 다음 주에 기여할 또 다른 저장소를 찾고 있습니다. 이상적으로는 좀 더 도전적인 프로젝트를 찾아서 계속해서 자신을 밀어붙이고 점차적으로 실력을 향상시키고 싶습니다.

읽어주셔서 감사합니다. Hacktoberfest 여정에 대해 더 많은 정보를 공유할 수 있기를 기대합니다!