{
"name": "react-front",
"version": "1.1.1",
"private": true,
"main": "index.js",
"author": "rontDevelop",
"scripts": {
"dev": "next -p 8080",
"build": "next build",
"start": "next start -p 80",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.14.1",
"@next/bundle-analyzer": "^14.0.1",
"@testing-library/jest-dom": "^5.17.0",
"axios": "^1.4.0",
"base-64": "^1.0.0",
"cookie": "^1.1.1",
"cross-env": "^7.0.2",
"crypto-js": "^4.1.1",
"date-fns": "^3.0.0",
"immer": "^9.0.15",
"js-cookie": "^3.0.5",
"next": "^16.0.7",
"next-redux-wrapper": "^8.1.0",
"prop-types": "^15.8.1",
"react": "^19.2.1",
"react-datepicker": "^8.10.0",
"react-dom": "^19.2.1",
"react-intersection-observer": "^9.5.3",
"react-redux": "^9.2.0",
"react-select": "^5.8.0",
"redux": "^5.0.1",
"redux-saga": "^1.1.3",
"swiper": "^10.2.0",
"watch": "^1.0.2",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^8.45.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.0",
"eslint-plugin-react-hooks": "^4.6.0",
"nodemon": "^3.0.1",
"webpack": "^5.88.2"
}
}
package.json 기준.
Next.js, React, Redux (with Redux-Saga), Emotion (for styling), 및 다양한 유틸리티 라이브러리(axios, crypto-js, date-fns 등)를 사용하는 프로젝트.
이는 현대적인 서버-사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 기능을 갖춘 대규모 React 애플리케이션 개발에 적합한 환경.
파일 구조, 기본 설정 파일, 그리고 핵심 소스 코드 예시는 아래와 같음.
Next.js와 Redux를 함께 사용하는 일반적인 프로젝트 구조.
/react-cs-front
├── /node_modules/
├── /pages/ # Next.js 페이지 컴포넌트 (파일 기반 라우팅)
│ ├── _app.js # 최상위 앱 컴포넌트 (Redux Provider, 전역 스타일 적용)
│ ├── _document.js # 서버에서 렌더링되는 문서 구조 (<html>, <body> 태그)
│ ├── index.js # 메인 페이지 (/)
│ └── /api/ # API Routes (Next.js 백엔드 엔드포인트)
│ └── example.js
├── /components/ # 재사용 가능한 UI 컴포넌트
│ ├── Layout.js # 전체 레이아웃 (헤더/푸터 등)
│ ├── common/ # 작은 공용 컴포넌트
│ └── views/ # 페이지 전용 컴포넌트
├── /store/ # Redux 관련 파일
│ ├── /modules/ # Redux 모듈 (액션, 리듀서, 타입)
│ │ ├── user.js
│ │ └── index.js # rootReducer
│ ├── /sagas/ # Redux-Saga 파일
│ │ ├── userSaga.js
│ │ └── index.js # rootSaga
│ └── configureStore.js # 스토어 설정
├── /public/ # 정적 파일 (이미지, 폰트 등)
│ ├── favicon.ico
│ └── images/
├── /styles/ # 전역 스타일 및 공통 스타일 파일
│ └── globalStyle.js
├── /utils/ # 유틸리티 함수 (API 호출, 암호화 등)
│ ├── api.js # axios 인스턴스 설정
│ └── helper.js
├── next.config.js # Next.js 설정 파일
├── package.json
└── README.md
next.config.jsNext.js 설정을 정의. proxy는 이미 package.json에 정의되어 있지만,
좀 더 복잡한 설정을 위해 Next.js 설정 파일에서도 환경 변수, 번들 분석 등을 설정.
JavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// package.json의 proxy 설정 대신 Next.js의 rewrites 기능을 사용하여 프록시 설정
// 개발 환경(dev)에서만 동작하도록 설정하는 것이 일반적.
// 이 예시는 package.json의 proxy를 사용하지 않고 Next.js 내부에서 처리하는 방법.
async rewrites() {
return [
{
source: '/api/:path*',
destination: '<https://TEST.co.kr/api/:path*>', // 실제 백엔드 주소
},
];
},
reactStrictMode: true,
// Emotion SSR 설정을 위해 Next.js 12 이후 버전에서 이 설정을 권장.
compiler: {
emotion: true,
},
// 기타 설정 (예: 환경 변수)
env: {
API_BASE_URL: process.env.NODE_ENV === 'production' ? '<https://TEST.co.kr>' : '<http://localhost:8080>',
}
};
module.exports = nextConfig;
pages/_app.js앱의 최상위 컴포넌트. Redux 스토어와 스타일을 전역적으로 적용.
JavaScript
// pages/_app.js
import React from 'react';
import PropTypes from 'prop-types';
import { Global } from '@emotion/react';
import { wrapper } from '../store/configureStore'; // Redux Wrapper
import globalStyle from '../styles/globalStyle'; // 전역 스타일
const App = ({ Component, pageProps }) => {
return (
<>
{/* Emotion Global Styles 적용 */}
<Global styles={globalStyle} />
{/* 현재 페이지 컴포넌트 렌더링 */}
<Component {...pageProps} />
</>
);
};
App.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};
// Next.js Redux Wrapper를 사용하여 App 컴포넌트를 감싸.
// 이로 인해 모든 페이지에서 Redux store에 접근
export default wrapper.withRedux(App);
styles/globalStyle.jsEmotion을 사용한 전역 스타일.