JAVA 백엔드 개발자인 내가 React로 백오피스 만들기1

3월 10, 2025

1편: 개발 환경 설정 (Node.js, React 설치 및 기본 세팅)

이 시리즈는 React와 Spring Boot를 사용해 업무 관리 시스템 백오피스를 구축하는 과정을 다룹니다. 이번 첫 번째 글에서는 React 개발 환경을 설정하는 방법에 대해 설명합니다. Node.js와 React를 설치하고, 프로젝트를 초기화하여 기본적인 개발 환경을 준비하는 과정을 차근차근 따라갈 수 있도록 안내합니다.

1. 개발 환경 개요

React 백오피스 개발을 위해 필요한 도구를 설치하고 프로젝트를 초기화합니다. 이번 글의 주요 내용은 다음과 같습니다.

Node.js 및 npm 설치
Git 및 VS Code 설치
React 프로젝트 생성 및 폴더 구조 소개
ESLint와 Prettier 설정

2. 필수 도구 설치

Node.js 설치

React 프로젝트를 만들기 위해 Node.js가 필요합니다. Node.js 공식 사이트에서 최신 LTS(Long-Term Support) 버전을 다운로드하여 설치하세요.

설치가 완료되었으면 터미널에서 다음 명령어로 버전이 정상적으로 확인되는지 확인합니다.

node -v  # Node.js 버전 확인
npm -v   # npm 버전 확인

yarn 설치 (선택 사항)

yarn은 npm의 대안으로, 더 빠르고 효율적인 패키지 매니저입니다. 설치하려면 아래 명령어를 실행하세요.

npm install -g yarn
yarn -v  # yarn 버전 확인

Git 설치

버전 관리를 위해 Git이 필요합니다. Git 공식 사이트에서 다운로드 후 설치하세요. 설치 후 다음 명령어로 설치가 정상적으로 되었는지 확인합니다.

git --version  # Git 버전 확인

VS Code 설치

코드 편집기로 Visual Studio Code를 추천합니다. VS Code 다운로드 페이지에서 설치할 수 있습니다.

3. React 프로젝트 생성

이제 React 프로젝트를 생성하여 초기 세팅을 진행합니다.

npx create-react-app my-backoffice
cd my-backoffice
npm start

또는 TypeScript를 포함한 프로젝트를 생성하려면:

npx create-react-app my-backoffice --template typescript

명령어가 완료되면 my-backoffice 디렉토리 안에 React 프로젝트가 생성됩니다.

4. 프로젝트 폴더 구조

생성된 프로젝트의 기본 폴더 구조는 다음과 같습니다.

my-backoffice/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   ├── App.tsx
│   ├── index.tsx
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json (TypeScript 사용 시)

5. ESLint 및 Prettier 설정

코드 품질을 유지하고 일관된 스타일을 유지하기 위해 ESLint 및 Prettier를 설정합니다.

npm install -D eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier

.eslintrc.json 파일 생성 및 설정

프로젝트 루트에 .eslintrc.json 파일을 생성하고 다음과 같이 설정합니다.

{
  "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

6. 프로젝트 실행 및 테스트 방법

로컬 서버 실행
```
npm start
```
테스트 체크리스트✅ http://localhost:3000에서 화면이 정상적으로 뜨는지 확인✅ 브라우저 개발자 도구(F12)에서 오류 메시지가 없는지 확인
✅ src/App.tsx를 수정 후 저장하면 자동으로 반영되는지 확인

7. Git 초기화 및 첫 커밋

Git을 사용해 프로젝트를 버전 관리할 준비를 합니다.

git init
git add .
git commit -m "Initialize React backoffice project"

다음 단계

이제 React 프로젝트의 구조를 설정하고 초기 화면을 구성하는 2편으로 넘어갑니다!

이 블로그 검색

yando