[241220] TIL

오늘 한 것

사이드 프로젝트 - Github 로그인 구현 (진행중)

• Github 는 OAuth 를 표준으로 구현하고 있다.
• OAuth Flow 를 이해하면 다른 구글, 네이버 등 소셜 로그인도 구현 가능

1. 깃허브에게 우리 애플리케이션을 알려준다.

• Register a new OAuth app
• Client ID (공개키)
• Client Secret (비밀키)
• 위 값을 .env 파일에 저장해서 사용
• 마치 앱의 신분증을 만드는 과정이라고 볼 수 있음

2. 사용자의 GitHubID 요청

• OAuth 앱 권한 부여 - GitHub Docs
• 주요 params
  • scope: GitHub에게 우리가 사용자로부터 원하는 데이터가 무엇인지 알림
    • 현재 프로젝트에선 사용자 프로필 정보랑 이메일 읽기 권한만 요청
  • allow_signup: OAuth 흐름 중에 GitHub 가입하고 등록하는 옵션이 제공되는지 여부
    • 기본값은 true

NextJS route.ts 파일

• API 라우트를 정의하는 파일
• App Router 에서 새롭게 도입된 방식 (이전엔 Page Router 였음)

HTTP 메서드

• GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
• 메서드 이름으로 함수를 export 하면 자동으로 해당 HTTP 요청 처리

Response 타입

// 다양한 응답 방식
return new Response("Hello");
return Response.json({ data: "hello" });
return Response.redirect("/new-page");

캐싱

export async function GET() {
  return new Response("Hello", {
    headers: {
      "Cache-Control": "max-age=3600",
    },
  });
}

URLSearchParams

• URL의 쿼리 문자열을 다루기 위한 웹 표준 API

• [URLSearchParams - Web APIs

  MDN](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

// 객체를 쿼리 문자열로 변환
const params = new URLSearchParams({
  name: "john",
  age: "25",
});
console.log(params.toString());
// 결과: "name=john&age=25"

커밋 메세지에 대한 고민 (add vs implement)

add

• 새로운 것을 단순히 추가할 때
• 기존 시스템에 새로운 기능/파일을 더할 때
• 비교적 간단한 추가 작업일 때

feat: add GitHub icon component
feat: add new route to middleware
feat: add error message component

implement

• 특정 기능/로직을 구현할 때
• 복잡한 비즈니스 로직이 포함될 때
• 전체 시스템/기능을 실제로 동작하게 만들 때

feat: implement OAuth authentication flow
feat: implement payment processing system
feat: implement real-time chat functionality

기타

• 요가
• 말해보카