AI로 풀스택 개발하기:구글 로그인(프론트 & 백엔드 동시 개발)

---

https://youtu.be/z2UgicfCSXU

 

---

프론트엔드와 백엔드를 동시에 구현하기

이번 글에서는 클로드 코드를 활용하여 구글 로그인 기능을 구현합니다.

지난 글에서는 frontend와 backend를 각각 구현하는 것을 해보았고, 이번에는 동시에 개발하는 과정을 진행하려고 합니다.

 

우선 개발전에 구글 로그인에 필요한 GCP 설정을 진행하겠습니다.

---

GCP(Google Cloud Platform) 설정

• GCP에서 새로운 프로젝트를 생성합니다. (저는 CodeGear로 만들었습니다)
• 프로젝트 선택 후 "API 및 서비스" - "사용자 인증 정보" 메뉴로 이동합니다.

• "사용자 인증 정보 만들기"를 클릭하고 "OAuth 클라이언트 ID"를 선택합니다.

• 애플리케이션 유형에서 "웹 애플리케이션"을 선택합니다.

• "승인된 JavaScript 원본"에 "http://localhost:3001"을 입력합니다.
• "승인된 리디렉션 URI"에 "http://localhost:3001/auth/google/callback"을 입력합니다.

• "만들기" 버튼을 클릭하여 설정을 완료합니다.

---

구현

폴더 열기

• 우선 VSCode를 실행하고, frontend와 backend의 상위 폴더인 codegear 폴더를 열어줍니다.

README.md

• README.md 파일을 만들고 아래와 같이 작성합니다.

## 프로젝트 정의
- 이 프로젝트는 CodeGear의 유튜브 채널을 홍보하는 사이트 개발을 위해 만들어졌다.
- 이 프로젝트는 frontend와 backend로 구성되어 있다.
- /frontend 폴더는 next.js 기반의 프론트엔드 프로젝트이다.
- /backend 폴더는 nest.js 기반의 백엔드 프로젝트이다.

Claude 실행

• 터미널에 claude를 입력합니다.

Claude 초기화

• /init 명령으로 프로젝트를 초기화 합니다.
• 초기화가 완료되면 CLAUDE.md 파일이 생성됩니다.

• 구글 로그인 기능 추가
  • 아래와 같은 프롬프트를 입력합니다.

구글 로그인 기능을 추가하려고 하는데 백엔드와 프론트엔드로 나누어서 각각 필요한 기능들을 추가해줘.

 

이렇게 하면 클로드코드가 frontend와 backend에 필요한 코드들을 생성하고 테스트까지 진행을 하게됩니다.

---

구글 로그인 기능 테스트

다음과 같은 순서로 테스트를 진행합니다.

프로그램 실행하기

• 프론트엔드 실행
  • frontend 폴더에서 "npm run dev" 를 실행합니다.
• 백엔드 실행
  • backend 폴더에서 "npm run start:dev"를 실행합니다.

브라우저에서 확인하기

• 브라우저 주소창에 http://localhost:3001을 입력하면 아래와 같은 화면이 보입니다.

• 우측 상단의 Google로 로그인 버튼을 클릭합니다.

• 로그인 하려는 계정을 클릭합니다.

• CodeGear 서비스 로그인 안내창에서 "계속" 버튼을 클릭하면 로그인이 완료되고 로그인한 사용자 정보가 표시됩니다.

---

이 프로젝트 아키텍처는 실서비스에 사용할 수 있는 구조입니다.

백엔드와 프론트엔드로 나누어져 있어서 전문적인 서비스를 개발하는데 사용 가능합니다.

이 기반위에 여러가지 필요한 설정과 기능들을 추가해서 여러분의 서비스를 개발하시면 됩니다.

 

참고로 이 기능은 CodeGear.info 사이트에 올라가 있습니다.

 

AI로 풀스택을 개발하고자 하시는 분들께 작으나마 도움이 됐기를 바랍니다^^