1. 프로젝트 생성 및 Gitee 저장소 연동

새로운 React TypeScript 프로젝트를 생성하려면 create-react-app을 사용할 수 있습니다.

// Node.js 설치 확인
node -v

// create-react-app 설치
npm install -g create-react-app

// TypeScript 프로젝트 생성
npx create-react-app my-ts-project --template typescript

// 프로젝트 디렉토리 이동 및 개발 서버 실행
cd my-ts-project
npm start

Gitee 저장소에 프로젝트를 업로드하려면 다음 명령어를 실행합니다.

git remote add origin <저장소 주소>
git add .
git commit -m "Initial commit"
git push -u origin master

2. 브라우저별 개발 환경

프로젝트를 개발할 때, Google Chrome뿐만 아니라 Firefox에서도 모바일 스캐너 기능을 활용해 실시간으로 변경 사항을 반영하면서 모바일 환경에서의 결과물을 확인할 수 있습니다.

3. 라우팅 설정

react-router-dom을 사용하여 간단한 라우팅 구조를 설정할 수 있습니다.

// app.tsx 파일 예시
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const App = () => {
  const mainWidth = 375;
  const mainHeight = 667;

  return (
    <div id="app">
      <div className="app-main" style={{ width: `${mainWidth}px`, height: `${mainHeight}px` }}>
        <Router>
          <Routes>
            <Route path="/verify" element={<Verify />} />
          </Routes>
        </Router>
      </div>
    </div>
  );
};

export default App;

4. 네트워크 요청 처리

Axios를 통해 API 요청을 관리할 수 있습니다.

// http.ts 파일 예시
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 8000,
  headers: { 'Content-Type': 'application/json' },
});

apiClient.interceptors.request.use(
  (config) => {
    // 요청 전 로직 추가
    return config;
  },
  (error) => Promise.reject(error)
);

apiClient.interceptors.response.use(
  (response) => response.data,
  (error) => Promise.reject(error)
);

export default apiClient;

Axios 인스턴스를 다음과 같이 사용할 수 있습니다.

// service.ts 파일 예시
import api from './http';

export const fetchVerifyList = (params: any) =>
  api.post('/endpoint', params);

5. 크로스 도메인 해결 방법

Webpack Dev Server를 통해 프록시 설정을 추가하면 크로스 도메인 문제를 해결할 수 있습니다.

// webpackDevServer.config.js 예시
proxy: {
  '/api': {
    target: 'http://localhost:5000', // 백엔드 서비스 주소
    ws: true,
    changeOrigin: true,
    pathRewrite: { '^/api': '' },
  },
},

6. 프로젝트 화면 적응성 최적화

반응형 UI를 구현하기 위해 다양한 방법이 있으며, CSS 미디어 쿼리 또는 라이브러리를 활용할 수 있습니다. 자세한 내용은 참고 문서를 참조하세요.