To create a full-stack JavaScript/TypeScript application using React, Node.js, and MongoDB, follow these steps:

1. Set up the project structure

Create a new directory for your project and navigate to it in your terminal.

```
mkdir shopping-list-app
cd shopping-list-app
```

Inside this directory, create two folders: one for the client-side (React) and another for the server-side (Node.js).

```
mkdir client
mkdir server
```

2. Set up the server-side with Node.js and Express

Navigate to the `server` folder and initialize a new Node.js project.

```
cd server
npm init -y
```

Install necessary dependencies:

```
npm install express mongoose cors dotenv jsonwebtoken bcryptjs
npm install --save-dev typescript ts-node @types/node @types/express @types/mongoose @types/cors @types/jsonwebtoken @types/bcryptjs
```

Create a `tsconfig.json` file in the `server` folder with the following content:

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

Create a `src` folder inside the `server` folder and add an `index.ts` file with the following content:

```typescript
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;

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

Add the following scripts to the `package.json` file in the `server` folder:

```json
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}
```

3. Set up MongoDB with Mongoose

Create a `.env` file in the `server` folder and add your MongoDB connection string:

```
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/database-name?retryWrites=true&w=majority
JWT_SECRET=your_jwt_secret_key
```

Replace `<username>`, `<password>`, and `database-name` with your actual credentials.

Update the `index.ts` file to connect to MongoDB using Mongoose:

```typescript
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import mongoose from 'mongoose';

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI as string, { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.connection.once('open', () => {
  console.log('Connected to MongoDB');
});

const PORT = process.env.PORT || 5000;

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

4. Create models, routes, and controllers for the shopping list items and user authentication

In the `src` folder, create three new folders: `models`, `routes`, and `controllers`. Inside each of these folders, create TypeScript files for the shopping list items and user authentication:

- `models/itemModel.ts`
- `models/userModel.ts`
- `routes/itemRoutes.ts`
- `routes/userRoutes.ts`
- `controllers/itemController.ts`
- `controllers/userController.ts`

Implement the necessary CRUD operations and JWT-based authentication in these files.

5. Set up the client-side with React

Navigate to the `client` folder and create a new React app using Create React App:

```
cd ../client
npx create-react-app . --template typescript
```

Install necessary dependencies for state management and API calls:

```
npm install axios react-query
```

6. Implement the shopping list UI and connect it to the server

Create components for displaying, adding, updating, and deleting items in the shopping list. Use Axios and React Query to make API calls to your Node.js server.

7. Implement user authentication

Create components for login and registration forms. Connect these components to your Node.js server using Axios and store JWT tokens in local storage or cookies.

8. Test your application

Run both the server and client applications and test all CRUD operations and user authentication features.

To run the server:

```
cd server
npm start
```

To run the client:

```
cd client
npm start
```

Now you have a full-stack JavaScript/TypeScript application using React, Node.js, and MongoDB that allows users to create, read, update, and delete items from a shopping list while implementing user authentication and authorization using JWT tokens.
React, Node.js, MongoDB를 사용하여 풀스택 자바스크립트/타입스크립트 애플리케이션을 생성하려면 다음 단계를 따르세요.

1. 프로젝트 구조 설정

프로젝트를 위한 새 디렉터리를 생성하고 터미널에서 해당 디렉토리로 이동합니다.

```
mkdir shopping-list-app
cd shopping-list-app
```

이 디렉토리 안에 클라이언트 측(React)과 서버 측(Node.js) 폴더를 각각 하나씩 생성합니다.

```
mkdir client
mkdir server
```

2. Node.js 및 Express

를 사용하여 서버 측을 설정합니다. `서버` 폴더로 이동하여 새 Node.js 프로젝트를 초기화합니다.

```
cd server
npm init -y
```

필요한 종속성을 설치합니다:

```
npm install express mongoose cors dotenv jsonwebtoken bcryptjs
npm install --save-dev typescript ts-node @types/node @types/express @types/mongoose @types/cors @types/jsonwebtoken @types/bcryptjs
```

서버` 폴더에 다음 내용으로 `tsconfig.json` 파일을 생성합니다:

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

서버` 폴더 안에 `src` 폴더를 만들고 다음 내용이 포함된 `index.ts` 파일을 추가합니다:

```typescript
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;

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

`server` 폴더의 `package.json` 파일에 다음 스크립트를 추가합니다:

```json
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}
```

3. Mongoose

로 MongoDB 설정하기 `server` 폴더에 `.env` 파일을 생성하고 MongoDB 연결 문자열을 추가합니다:

```
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/database-name?retryWrites=true&w=majority
JWT_SECRET=your_jwt_secret_key
```

`<username>`, `<password>`, `<database-name>`을 실제 자격 증명으로 바꿉니다.

Mongoose를 사용하여 MongoDB에 연결하려면 `index.ts` 파일을 업데이트합니다:

```typescript
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import mongoose from 'mongoose';

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI as string, { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.connection.once('open', () => {
  console.log('Connected to MongoDB');
});

const PORT = process.env.PORT || 5000;

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

4. 쇼핑 목록 항목 및 사용자 인증을 위한 모델, 경로 및 컨트롤러 생성

`src` 폴더에 `models`, `routes`, `controllers`라는 세 개의 새 폴더를 생성합니다. 각 폴더 안에 쇼핑 목록 항목 및 사용자 인증에 대한 TypeScript 파일을 만듭니다:

- `models/itemModel.ts`
- `models/userModel.ts`
- `routes/itemRoutes. ts`
- `routes/userRoutes.ts`
- `controllers/itemController.ts`
- `controllers/userController.ts`

이 파일에서 필요한 CRUD 작업 및 JWT 기반 인증을 구현합니다.

5. React로 클라이언트 측 설정하기

`client` 폴더로 이동하고 Create React App을 사용하여 새 React 앱을 생성합니다:

```
cd ../client
npx create-react-app . --template typescript
```

상태 관리 및 API 호출에 필요한 종속성을 설치합니다:

```
npm install axios react-query
```

6. 쇼핑 목록 UI를 구현하고 서버에 연결

쇼핑 목록의 항목을 표시, 추가, 업데이트, 삭제하기 위한 컴포넌트를 생성합니다. Axios와 React Query를 사용하여 Node.js 서버에 API 호출을 수행합니다

7. 사용자 인증 구현

로그인 및 등록 양식용 컴포넌트를 생성합니다. Axios를 사용하여 이러한 구성 요소를 Node.js 서버에 연결하고 로컬 저장소 또는 쿠키에 JWT 토큰을 저장합니다.

8. 애플리케이션 테스트

서버 및 클라이언트 애플리케이션을 모두 실행하고 모든 CRUD 작업 및 사용자 인증 기능을 테스트합니다.

서버를 실행합니다:

```
cd server
npm start
```

To run the client:

```
cd client
npm start
```

이제 사용자가 쇼핑 목록에서 항목을 만들고, 읽고, 업데이트하고, 삭제하는 동시에 JWT 토큰을 사용하여 사용자 인증 및 권한을 구현할 수 있는 React, Node.js 및 MongoDB를 사용하는 풀스택 JavaScript/TypeScript 애플리케이션을 갖게 되었습니다.