MERN TypeScript 설정 가이드

안녕하세요, TypeScript를 사용하여 MERN 스택 프로젝트 설정에 대한 가이드에 오신 것을 환영합니다. 이 가이드는 초보자와 숙련된 개발자 모두 MERN 스택 개발을 위한 완전한 기능의 개발 환경을 설정하는 데 도움을 주기 위해 작성되었습니다.

이제 설정을 시작해 보겠습니다.

요구사항

• Node.js(버전 14 이상 권장)
• MongoDB 데이터베이스 또는 MongoDB 커뮤니티 서버
• 다음 명령을 사용하여 TypeScript를 설치합니다.

npm install -g typescript

루트

1. 다음 명령을 사용하여 프로젝트용 디렉터리를 만듭니다.

<span>mkdir my-app</span>

2. 다음 디렉토리로 이동하세요:

<span>cd my-app</span>

3. 다음 명령을 실행하여 디렉터리의 노드를 초기화합니다.

설명: 이 명령은 새 Node.js 프로젝트를 초기화하고 기본값으로 package.json 파일을 생성합니다.

npm init -y

클라이언트

클라이언트의 경우 Vite 또는 Create React App을 사용할 수 있습니다. 두 가지에 대한 지침은 다음과 같습니다.

Vite 사용

1. 루트 디렉터리에서 다음 명령을 입력하세요.

설명: 이 명령은 client

라는 디렉터리에 새 Vite 응용 프로그램을 만듭니다.

npx create-vite@latest client

2. 다양한 옵션이 표시되면 반응
을 선택하세요.3. 옵션을 선택하세요: TypeScript SWC.
4. 완료되면 다음 명령을 사용하여 클라이언트 디렉터리로 이동합니다.

<span>cd client</span>

클라이언트 디렉터리에서 다음 명령을 실행해야 합니다.

5. 클라이언트 디렉터리에서 다음 명령을 실행하여 모든 종속성을 설치합니다.

설명: 이 명령은 package.json 파일에 나열된 종속성을 설치합니다.

npm install

6. 설치가 완료되면 다음 명령을 사용하여 프로젝트의 루트 디렉터리로 이동합니다.

<span>cd ..</span>

Create React 앱 사용

1. 루트 디렉터리에서 다음 명령을 입력합니다.

설명: 이 명령은 client.

디렉터리에 새로운 Create React App 애플리케이션을 생성합니다.

npx create-react-app client --template typescript

서버

1. 루트 디렉터리에 서버 디렉터리를 생성해 보겠습니다.

설명: 이 명령은 server라는 새 디렉토리를 생성합니다.

<span>mkdir server</span>

2. 다음 명령을 사용하여 server 디렉터리로 이동합니다.

<span>cd server</span>

우리가 생성한 서버 디렉토리 내에서 다음 명령을 실행해야 합니다.

3. 이 명령을 실행하면 package.json 파일

이 자동으로 생성됩니다.

npm <span>init -y</span>

4. 이제 다음 명령을 실행하여 종속 항목을 설치하세요.

설명: 이 명령은 서버에 필요한 종속성을 설치합니다. cors는 CORS 활성화에 사용되며, dotenv는 환경 변수 로드에, express는 서버 구축에, mongoose는 MongoDB 연결에 사용됩니다. 개발 종속성에는 TypeScript 및 패키지에 대한 유형 정의는 물론 개발 중에 서버를 실행하기 위한 nodemon 및 ts-node가 포함됩니다.

npm install -g typescript

5. .gitignore 파일을 만들고 다음 줄을 추가합니다.

설명: .gitignore 파일은 Git이 무시해야 하는 의도적으로 추적되지 않은 파일을 지정합니다.

<span>mkdir my-app</span>

6. 이제 TypeScript를 설정하고 tsconfig.json

이라는 파일을 생성해 보겠습니다.

설명: tsconfig.json 파일은 TypeScript용 구성 파일입니다. 프로젝트를 컴파일하기 위한 루트 파일과 컴파일러 옵션을 지정합니다.

7. 복사하여 붙여넣기 다음 구성:

<span>cd my-app</span>

8. 다음 명령을 사용하여 서버 디렉터리 내에 src라는 디렉터리를 만듭니다.

npm init -y

우리가 생성한 src 디렉터리 내에서 다음 명령을 실행해야 합니다.

9. server.ts

라는 파일을 만듭니다.

설명: 이 server.ts 파일은 MongoDB 데이터베이스에 연결하고 지정된 포트에서 수신 대기를 시작하는 Express 서버를 설정합니다.

10. server.ts 파일의 기본 구현은 다음과 같습니다.

npx create-vite@latest client

11. 다음 명령을 사용하여 server 디렉토리로 돌아가겠습니다.

<span>cd client</span>

설명: 이 명령은 현재 디렉터리를 상위 디렉터리로 변경합니다.

다음 내용은 서버 디렉토리에 대한 내용입니다.

12. 이제 서버 디렉터리에 있는 package.json파일로 이동해 보겠습니다.

13. 개발을 위해 ts-node로 nodemon을 실행할 수 있도록 명령을 추가해 보겠습니다.

14. package.json의 스크립트 부분에 다음 줄을 복사하여 붙여넣으세요:

npm install

15. 이 작업이 완료되면 다음 명령을 사용하여 루트 디렉터리로 이동해 보겠습니다.

<span>cd ..</span>

프로젝트 실행

다음 내용은 프로젝트 루트 디렉터리에 대한 내용입니다

1. 개발 종속성을 동시에 설치하려면 다음 명령을 실행하세요.

설명: 동시는 여러 npm 스크립트를 동시에(동시에) 실행할 수 있는 패키지입니다.

npx create-react-app client --template typescript

2. 루트 디렉터리의 package.json 파일로 이동합니다. 이 파일에는 프로젝트 및 해당 종속성에 대한 메타데이터가 포함되어 있습니다.

3. 클라이언트를 생성하는 데 사용한 도구(Vite 또는 Create React App)에 따라 해당 코드 블록을 복사하여 package.json 파일의 스크립트 섹션에 붙여넣습니다.

초대

npm install -g typescript

React 앱 만들기

<span>mkdir my-app</span>

4. 이제 다음 명령을 사용하여 프로젝트 를 실행해 보겠습니다.

<span>cd my-app</span>

5. 이제 클라이언트와 서버가 동시에 실행되어야 합니다. 터미널에 다음 출력이 표시됩니다.

npm init -y

위 내용은 MERN TypeScript 설정 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!