프론트 경험이 꽤..(의도치않게) 있지만.. 이번에는 디자인이고 뭐고 일단.. 백부터 할거니까 띄워주기 용으로 간단히 세팅했다
초기 세팅하기 (OAuth 화면 포함)
나는 일단 구글, 카카오, 네이버 로그인을 위한 홈화면과 로그인 버튼 정도만 간단히 구현했다..
1. 프로젝트 구조 설정
먼저 React 프로젝트의 파일 구조를 정의했다. 깔끔한 구조를 유지하면서도 필요한 파일들이 잘 정리되도록 구성했다.
my-react-app/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── LoginButton.js
│ │ └── Home.js
│ ├── App.js
│ ├── index.js
│ └── App.css
├── package.json
└── README.md이 구조에서 public/ 디렉토리는 정적 파일들이 위치하는 곳이고, src/ 디렉토리는 React 애플리케이션의 주요 코드가 들어간다. components/ 디렉토리에는 개별 컴포넌트들을 모아두었고, App.js와 index.js는 각각 애플리케이션의 루트 컴포넌트와 진입점 역할을 하도록 설정했다.
2. React 프로젝트 생성
npx create-react-app을 사용해 React 프로젝트를 생성했다. 프로젝트의 라우팅 관리를 위해 react-router-dom 패키지도 설치했다.
npx create-react-app my-react-app
cd my-react-app
npm install react-router-dom이제 기본적인 React 프로젝트가 생성되었고, 라우팅을 처리할 준비도 마쳤다.
3. 컴포넌트 작성
이제 로그인 버튼과 홈 화면을 담당할 컴포넌트를 작성했다.
3.1 LoginButton.js
OAuth 로그인을 담당하는 버튼 컴포넌트를 작성했다. 각 로그인 버튼을 재사용할 수 있도록 provider와 onClick이라는 두 가지 props를 받도록 했다.
// src/components/LoginButton.js
import React from 'react';
const LoginButton = ({ provider, onClick }) => {
return (
<button onClick={onClick}>
{provider}로 로그인
</button>
);
};
export default LoginButton;3.2 Home.js
이제 홈 화면을 구성하는 컴포넌트를 작성했다. 여기서는 Google, Naver, Kakao 로그인을 위한 버튼을 각각 렌더링하도록 했다.
// src/components/Home.js
import React from 'react';
import LoginButton from './LoginButton';
const Home = () => {
const handleLogin = (provider) => {
window.location.href = `http://localhost:8080/oauth2/authorization/${provider}`;
};
return (
<div>
<h1>로그인 페이지</h1>
<LoginButton provider="google" onClick={() => handleLogin('google')} />
<LoginButton provider="naver" onClick={() => handleLogin('naver')} />
<LoginButton provider="kakao" onClick={() => handleLogin('kakao')} />
</div>
);
};
export default Home;이 컴포넌트는 홈 화면에 세 가지 로그인 버튼을 렌더링하고, 클릭 시 Spring Boot 백엔드로 OAuth 요청을 보낸다.
4. 메인 애플리케이션 설정
이제 App.js 파일을 설정하여 Home 컴포넌트를 렌더링하도록 했다. react-router-dom을 사용해 기본적인 라우팅을 설정했다.
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
);
}
export default App;이렇게 해서 / 경로에 Home 컴포넌트가 렌더링되도록 설정했다.
5. 프로젝트 실행
설정을 마친 후, 프로젝트를 실행해 결과를 확인했다.
npm start이 명령어를 실행하면 http://localhost:3000에서 React 애플리케이션을 확인할 수 있었다. 각 로그인 버튼을 클릭하면 Spring Boot 백엔드의 OAuth 엔드포인트로 리다이렉션되는 것을 확인했다.
6. Spring Boot와 연동
이제 Spring Boot에서 OAuth2를 구현하기 위해, Spring Boot의 application.yml 파일에 OAuth 설정을 추가했다. 이 설정을 통해 각 로그인 버튼 클릭 시 http://localhost:8080/oauth2/authorization/{provider}로 요청이 전송되도록 했다.
# application.yml
spring:
security:
oauth2:
client:
registration:
google:
client-id: YOUR_GOOGLE_CLIENT_ID
client-secret: YOUR_GOOGLE_CLIENT_SECRET
redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
scope: profile, email
naver:
client-id: YOUR_NAVER_CLIENT_ID
client-secret: YOUR_NAVER_CLIENT_SECRET
redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
kakao:
client-id: YOUR_KAKAO_CLIENT_ID
client-secret: YOUR_KAKAO_CLIENT_SECRET
redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"이 설정을 통해 OAuth2 클라이언트로 Google, Naver, Kakao 로그인을 처리할 수 있게 되었다.
요약
React와 Spring Boot를 연동해 Google, Naver, Kakao 로그인을 테스트할 수 있는 기본 구조를 완성했다. 프로젝트 구조를 깔끔하게 정리하고, 필요한 컴포넌트들을 작성한 후, OAuth2 설정을 통해 백엔드와 연동하는 과정을 통해 전체적인 흐름을 잡아볼 수 있었다.
이슈 해결: sudo 권한 문제
프로젝트를 진행하는 중에 NPM 명령어 실행 시 권한 문제로 오류가 발생했다. 이 문제는 NPM의 캐시 폴더에 root 권한으로 생성된 파일들이 존재해 발생한 것이었다.
이 문제를 해결하기 위해, sudo를 사용해 캐시 폴더의 소유권을 현재 사용자에게 변경했다.
sudo chown -R $(whoami) ~/.npm이 명령어를 통해 .npm 폴더의 모든 파일과 디렉토리의 소유권을 현재 사용자에게 변경할 수 있었다. 이후에는 sudo 없이도 NPM 명령어를 사용할 수 있었다.
또한, NPM의 글로벌 디렉토리를 사용자 홈 디렉토리로 변경하는 방법도 함께 적용했다.
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'이후 환경 변수를 설정하여 글로벌 NPM 패키지가 사용자 홈 디렉토리에 설치되도록 변경했다.
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc
source ~/.zshrc이 설정 덕분에, 권한 문제를 피하면서도 NPM 명령어를 문제없이 사용할 수 있게 되었다.
이렇게 React와 Spring Boot를 이용해 OAuth 기능을 구현하면서 겪은 문제와 해결 방법들을 정리해봤다. 프로젝트 초기 세팅부터 권한 문제 해결까지, 전체적인 과정을 이해하는 데 도움이 되었길 바란다.
