Step 1: 프로젝트 초기 세팅

1. React 프로젝트 환경 이해하기

   • src 폴더 구조를 살펴보고, 불필요한 파일들을 정리합니다.
   • App.js를 중심으로 동작하며, 각 기능은 컴포넌트라는 단위로 관리됩니다.

2. 필요한 라이브러리 설치

   • UI 및 라우팅을 위해 다음 라이브러리를 설치합니다:

     npm install react-router-dom axios
     

     • react-router-dom: 페이지 간 이동(라우팅) 관리.
     • axios: SyncWave 백엔드와의 API 통신.

3. 폴더 구조 초기화

   • 프로젝트 폴더를 정리해 사용하기 편리하게 만듭니다:

     src/
     ├── components/    # UI 컴포넌트
     ├── pages/         # 페이지 단위 컴포넌트
     ├── services/      # API 통신 로직
     ├── App.js         # 메인 컴포넌트
     └── index.js       # 프로젝트 진입점
     
     

4. 확인 단계

   • npm start로 개발 서버를 실행하며 환경 설정이 문제없는지 확인합니다.

Step 2: 기본 레이아웃 만들기

1. React Router 설정

   • App.js에 라우터를 추가해 기본 페이지 네비게이션을 구현합니다:

     import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
     import HomePage from './pages/HomePage';
     import LoginPage from './pages/LoginPage';
     
     function App() {
       return (
         <Router>
           <Routes>
             <Route path="/" element={<HomePage />} />
             <Route path="/login" element={<LoginPage />} />
           </Routes>
         </Router>
       );
     }
     
     export default App;
     
     

2. 왼쪽 네비게이션 메뉴 구현

   • components/Sidebar.js 파일을 생성하여 네비게이션 컴포넌트를 만듭니다:

     import { Link } from 'react-router-dom';
     
     function Sidebar() {
       return (
         <nav>
           <ul>
             <li><Link to="/">Home</Link></li>
             <li><Link to="/login">Login</Link></li>
           </ul>
         </nav>
       );
     }
     
     export default Sidebar;
     
     

3. 기본 레이아웃 적용

   • App.js에 Sidebar를 추가하여 네비게이션 메뉴를 표시합니다:

     import Sidebar from './components/Sidebar';
     
     function App() {
       return (
         <div>
           <Sidebar />
           <main>
             {/* 라우터로 표시할 페이지 */}
           </main>
         </div>
       );
     }
     
     export default App;
     
     

Step 3: 로그인 페이지 구현

1. 기본 로그인 폼 작성

   • pages/LoginPage.js 파일을 생성합니다:

     import { useState } from 'react';
     
     function LoginPage() {
       const [username, setUsername] = useState('');
       const [password, setPassword] = useState('');
     
       const handleSubmit = (e) => {
         e.preventDefault();
         console.log({ username, password }); // 여기에 API 호출 추가
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <div>
             <label>Username:</label>
             <input
               type="text"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
             />
           </div>
           <div>
             <label>Password:</label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
           </div>
           <button type="submit">Login</button>
         </form>
       );
     }
     
     export default LoginPage;
     
     

2. SyncWave 백엔드 연동

   • services/auth.js 파일을 생성하여 로그인 API를 호출하는 로직을 작성합니다:

     import axios from 'axios';
     
     const API_URL = '<http://localhost:8080/api>';
     
     export const login = async (username, password) => {
       const response = await axios.post(`${API_URL}/auth/login`, { username, password });
       return response.data; // 토큰 또는 사용자 데이터 반환
     };
     
     

   • LoginPage에서 API 호출을 연결:

     import { login } from '../services/auth';
     
     const handleSubmit = async (e) => {
       e.preventDefault();
       try {
         const data = await login(username, password);
         console.log('Login Success:', data);
       } catch (error) {
         console.error('Login Failed:', error);
       }
     };
     
     

Step 4: 회원가입 페이지 구현

1. 회원가입 페이지 작성
   • 로그인 페이지와 비슷한 방식으로 pages/RegisterPage.js를 작성합니다.
   • API는 SyncWave 백엔드의 회원가입 엔드포인트를 사용합니다.

향후 계획