React, Express.js 초기 설정, DeprecationWarning, ESLint, npm audit

React와 Express는 Node.js 환경에서 실행되므로, Node.js가 설치되어 있지 않다면 먼저 설치한다. Node.js 공식 웹사이트(https://nodejs.org)에서 안내에 따라 설치할 수 있다.

Node.js — Run JavaScript Everywhere

 

터미널을 열고, 원하는 위치에 프로젝트를 위한 새 디렉토리를 생성한다.

mkdir my-web-app
cd my-web-app

 

Create React App을 사용해 React 프론트엔드 애플리케이션을 생성한다.

npx create-react-app client

 

이 명령은 client라는 이름의 디렉토리에 React 애플리케이션을 생성한다.

 

React 애플리케이션 외부에서 Express 애플리케이션을 설정한다.

 

루트 디렉토리(my-web-app)로 돌아가고 Express 애플리케이션을 위한 server 디렉토리를 생성하고 초기화한다.

mkdir server
cd server
npm init -y

 

Express를 설치한다.

npm install express

 

server 디렉토리 내에 index.js 파일을 생성하고, 기본 서버 설정을 추가한다.

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

 

개발 중에 React 애플리케이션과 Express 서버를 동시에 실행하기 위해, 루트 디렉토리(my-web-app)에 concurrently와 nodemon을 사용하는 설정을 추가한다.

 

my-web-app로 돌아가 package.json 파일을 생성한다.

npm init -y

 

concurrently와 nodemon을 설치한다.

npm install concurrently nodemon --save-dev

 

my-web-app/package.json 파일에서 scripts 섹션을 다음과 같이 수정한다.

"scripts": {
  "client": "cd client && npm start",
  "server": "cd server && nodemon index.js",
  "dev": "concurrently \"npm run server\" \"npm run client\""
}

 

이 설정을 통해, npm run dev 명령으로 React 애플리케이션과 Express 서버를 동시에 실행할 수 있다.

 

이러면 DeprecationWarning 이 뜨는데,

 

DeprecationWarning은 React 스크립트나 사용 중인 라이브러리에서 더 이상 사용하지 않는 기능을 사용했을 때 발생한다. 이 경고들은 주로 개발 환경 설정에 관련되어 있으며, 애플리케이션의 실행에는 직접적인 영향을 주지 않는다. 만약 webpack 관련 버전 문제로 DeprecationWarning이 났고 이를 해결하기 위해서는 webpack 설정을 확인하고 업데이트하는 것이 좋다. React와 관련된 설정은 node_modules 안의 관련 라이브러리 설정에서 찾을 수 있으며, 일반적으로 사용자가 직접 수정할 필요는 없다.

 

webpack 설정 확인하고 업데이트 하는 법:

 

프로젝트 폴더에서 터미널을 열고, 현재 설치된 Webpack 버전을 확인한다.

npm list webpack

 

npm 레지스트리에서 Webpack의 최신 버전을 확인한다.

npm view webpack version

 

원하는 버전(대개 최신 버전)으로 Webpack을 업데이트한다.

npm install webpack@latest --save-dev

 

@latest 대신 특정 버전을 지정하고 싶다면, @ 뒤에 해당 버전 번호를 명시한다 (예: webpack@4.44.1). --save-dev는 이 패키지가 개발 의존성임을 나타낸다.

 

Webpack과 함께 사용되는 로더(loader) 및 플러그인(plugin)도 최신 버전으로 업데이트하는 것이 좋다. 이는 호환성 문제를 방지하기 위함이다.

npm install webpack-cli@latest webpack-dev-server@latest --save-dev

 

여기서 webpack-cli와 webpack-dev-server는 Webpack을 사용하는 데 흔히 필요한 패키지이며, 프로젝트에 따라 추가적인 로더나 플러그인이 필요할 수 있다.

 

업데이트 후 프로젝트가 여전히 정상적으로 작동하는지 확인해야한다. 때때로 메이저 버전 업데이트는 기존 설정이나 코드와 호환되지 않을 수 있으므로, 특히 중요한 변경 사항을 적용한 후에는 프로젝트를 꼼꼼히 테스트해야 한다.

 

업데이트 후 의존성 문제나 버전 충돌이 발생할 수 있다. 이런 경우, 해당 패키지의 문서를 참고하여 새 버전에 맞게 설정을 조정하거나 필요한 변경을 적용한다.

 

최신 버전으로 업데이트 한 후에도 여전히 동일한 경고 메시지가 나타나면, react - scripts 패키지 내부에서 사용되는 webpack 설정 때문에 발생할 수 있다. react - scripts 는 Create React App을 통해 생성된 프로젝트에서 Webpack과 같은 도구들을 추상화해 제공한다. 때문에 react - scripts 내부의 webpack 설정은 직접적으로 수정할 수 없다.

 

Create React App 팀이 react-scripts의 새 버전을 출시하여 이러한 경고를 해결할 수 있다. 따라서 react-scripts의 최신 버전을 확인하고 업데이트하는 것이 좋다.

npm install react-scripts@latest --save

 

ESLint 경고는 개발자가 직접 해결할 수 있다. App.tsx 파일에서 사용하지 않는 logo 변수를 제거하면 된다.

 

npm audit은 보안 취약점에 대한 경고다. npm audit 또는 npm audit fix를 실행하여 취약한 의존성을 해결할 수 있다. 일부 의존성은 메이저 업데이트를 필요로 할 수 있으며, npm audit fix --force를 사용하여 강제로 수정할 수 있다. 하지만, 이는 기존 코드에 영향을 줄 수 있으므로 주의해서 사용해야 한다.

 

npm audit를 정기적으로 실행하여 보안 취약점을 확인하고 해결하는 것이 좋다.