GitHub OAuth 인증 작업

안녕하세요 여러분

이 블로그 게시물에서는 내 과제에 대한 릴리스 0.3 시리즈의 일부인 두 번째 풀 요청(PR)에 대해 논의하겠습니다. 이 PR은 제가 Hacktoberfest 이벤트 기간 동안 처음 기여했던 GitExplorer 프로젝트에 대한 작업을 계속합니다. 이번 주호에서는 프로젝트 관리자가 GitHub 인증 기능 구현을 요청했습니다.

GitExplorer 개요

GitExplorer는 GitHub 저장소와의 상호 작용을 단순화하는 것을 목표로 하는 프로젝트입니다. 프로젝트나 제가 이전에 기여한 내용에 대해 더 자세히 알아보고 싶으시면 이 저장소에 대한 제 이전 블로그 게시물을 확인하시기 바랍니다.

이번에 제가 해결한 구체적인 문제는 애플리케이션에 GitHub 인증이 없다는 것이었습니다. 이러한 제한으로 인해 앱에서 별표 저장소와 같은 개인화된 기능을 제공할 수 없었습니다. 내 임무는 사용자가 GitHub 계정을 사용하여 로그인 및 로그아웃할 수 있도록 하는 GitHub 인증 기능을 구현하는 것이었습니다. 또한 사용자는 간단한 버튼 클릭만으로 즐겨찾는 저장소에 별표를 표시하고 별표 표시된 모든 저장소 목록을 가져올 수 있습니다.

과제: UI 프레임워크 없이 작업하기

GitExplorer는 React와 같은 최신 UI 프레임워크를 사용하지 않습니다. 대신 바닐라 JavaScript, CSS 및 HTML에만 의존합니다. 이러한 단순성은 장점이 있지만 원래 코드베이스는 프런트엔드에 중점을 두었기 때문에 문제에 더 많은 시간을 할애해야 했습니다. GitHub 인증 및 관련 백엔드 기능을 추가한다는 것은 기존 구조를 뛰어넘어 서버측 솔루션을 구현하는 것을 의미했습니다.

프로젝트 마이그레이션 및 백엔드 설정

새로운 기능을 지원하기 위해 먼저 프로젝트를 재구성했습니다. 기존 프런트 엔드 코드를 모두 공용 폴더로 옮기고 서버 측 구현을 수용할 백엔드 폴더를 만들었습니다. 백엔드의 경우 GitHub 인증을 처리하는 데 사용한 라이브러리인 Passport.js와 잘 통합되는 Express 프레임워크를 선택했습니다.

포함된 단계:

• 애플리케이션을 제공하기 위해 Express를 설정합니다.
• 보안을 위해 .env 파일에 저장한 CLIENT_ID 및 CLIENT_SECRET을 사용하여 인증을 처리하도록 Passport.js를 구성합니다.
• 저장소 별표 표시 및 별표 해제와 같은 사용자 작업을 관리하기 위한 경로를 추가합니다.

GitHub API 통합

백엔드를 설정한 후 필요한 기능을 지원하기 위해 GitHub의 API를 통합했습니다. 여기에는 다음이 포함됩니다.

• 사용자가 GitHub 계정을 통해 로그인할 수 있도록 합니다.
• 애플리케이션에서 직접 저장소에 별표를 표시하고 별표를 취소하는 기능을 추가합니다.
• 사용자의 별표 표시된 저장소 목록을 가져와서 UI의 버튼을 통해 액세스할 수 있는 전용 페이지에 표시합니다.

모듈식 DRY 코드 작성

기능 구현을 넘어 DRY(Don't Repeat Yourself) 원칙을 적용해 코드 품질 향상에 집중했습니다. 기능을 재사용 가능한 구성 요소로 분리하여 코드를 모듈화하여 향후 유지 관리 및 확장을 더 쉽게 만들었습니다.

교훈과 앞으로의 전망

GitHub 인증 작업은 이번이 처음이었으며 타사 API 통합 및 백엔드 서비스 관리에 대한 귀중한 통찰력을 제공했습니다. 처음에는 프로젝트가 단순해 보였지만 프론트엔드와 백엔드를 모두 경험하면서 풀스택 개발에 대한 이해가 깊어졌습니다.

GitExplorer에는 여전히 공동작업을 위한 흥미로운 문제가 많이 남아 있습니다. 시간이 허락한다면 더 기여할 계획입니다. 이 프로젝트는 초보자에게 친숙한 동시에 새로운 기술과 개념을 배울 수 있는 충분한 기회를 제공하는 것으로 입증되었습니다.

읽어주셔서 감사합니다. 이 게시물을 통해 학습과 성장을 위한 비슷한 기회를 모색할 수 있기를 바랍니다.

위 내용은 GitHub OAuth 인증 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!