> 웹 프론트엔드 > JS 튜토리얼 > 5에서 TypeScript를 사용하여 Node.js API를 설정하는 방법

5에서 TypeScript를 사용하여 Node.js API를 설정하는 방법

Linda Hamilton
풀어 주다: 2025-01-03 18:01:40
원래의
447명이 탐색했습니다.

How to Set Up a Node.js API with TypeScript in 5

요즘에는 Node.js와 TypeScript를 사용하여 효율적이고 확장 가능한 API를 만드는 것이 그 어느 때보다 간단하고 강력합니다. CodeInit에서는 시장 요구 사항을 충족하는 전문적인 솔루션을 구축하는 데 도움이 되는 실용적이고 간단한 튜토리얼을 제공하는 것을 목표로 합니다. 이 기사에서는 2025년 모범 사례를 사용하여 최신 API를 설정하는 과정을 단계별로 안내하겠습니다.

워크플로를 향상시키려는 초보자이든 숙련된 개발자이든 이 가이드는 여러분을 위한 것입니다. 함께 살펴보시죠!

Node.js와 TypeScript를 사용하는 이유는 무엇입니까?

Node.js는 여전히 가장 인기 있는 백엔드 기술 중 하나로, TypeScript와 결합하면 속도와 안전성이라는 두 가지 장점을 모두 누릴 수 있습니다. TypeScript는 정적 타이핑을 추가하여 코드를 더 쉽게 유지 관리하고 일반적인 오류를 줄입니다.

2025년에는 생산성을 높이고 시장 트렌드에 부합하는 도구 마스터링이 필수입니다.

시작하기 전에 필요한 것

시작하기 전에 환경이 올바르게 설정되어 있는지 확인하세요. 전제 조건은 다음과 같습니다.

  • Node.js 20 이상
  • 텍스트 편집기 – 저는 Visual Studio Code를 추천합니다
  • JavaScript 및 터미널 기본 지식
  • 시스템에 설치된 npm, Yarn 또는 pnpm

팁: 이 튜토리얼을 더 쉽게 따라하려면 VS Code의 통합 터미널을 사용하세요.

개인적으로는 pnpm을 즐겨 사용합니다. pnpm을 전역적으로 설치하려면 아래 명령을 사용하십시오.

npm i -g pnpm
로그인 후 복사
로그인 후 복사

1단계: 환경 설정

먼저 Node.js가 설치되어 있는지 확인하세요.

node -v
로그인 후 복사
로그인 후 복사

모든 것이 올바르게 설정되면 Node.js 버전이 표시됩니다. 그렇지 않은 경우 공식 홈페이지에서 최신 버전을 다운로드하세요.

이제 프로젝트 구조를 만들어 보겠습니다.

mkdir my-api && cd my-api
pnpm init -y
로그인 후 복사
로그인 후 복사

이 명령은 프로젝트 종속성을 관리하는 package.json 파일을 생성합니다.

2단계: TypeScript 설치

TypeScript는 대규모 프로젝트를 유지하고 구성하는 데 필수적입니다. 설치해 봅시다:

pnpm install typescript tsx @types/node -D
로그인 후 복사
로그인 후 복사

다음으로 tsconfig.json 파일을 생성하여 TypeScript를 구성합니다.

npx tsc --init
로그인 후 복사
로그인 후 복사

2025년 모범 사례를 반영하도록 파일을 편집하세요.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
로그인 후 복사
로그인 후 복사

코드를 정리하려면 src 디렉토리를 만드세요.

mkdir src
로그인 후 복사
로그인 후 복사

3단계: ESLint 추가

깨끗한 코드를 유지하는 것이 중요합니다. 품질과 표준화를 보장하기 위해 ESLint를 추가해 보겠습니다.

ESLint를 구성하려면 아래 명령을 사용하세요.

pnpm create @eslint/config@latest
로그인 후 복사
로그인 후 복사

권장 ESLint 설정

  • ESLint를 어떻게 사용하시겠습니까? (구문을 확인하고 문제를 찾기 위해)
  • 귀하의 프로젝트에서는 어떤 유형의 모듈을 사용합니까? (JavaScript 모듈(가져오기/내보내기))
  • 당신의 프로젝트는 어떤 프레임워크를 사용하나요? (없음)
  • 귀하의 프로젝트에서 TypeScript를 사용합니까? (예)
  • 코드는 어디에서 실행되나요? (노드)
  • 지금 설치하시겠습니까? (예)

설치가 완료되면 프로젝트 루트에 eslint.config.js 파일이 생성됩니다.

구성 예는 다음과 같습니다.

npm i -g pnpm
로그인 후 복사
로그인 후 복사

ESLint 명령 추가

package.json에 다음 스크립트를 추가하세요.

node -v
로그인 후 복사
로그인 후 복사

첫 번째 명령은 ESLint를 실행하고 콘솔에 오류를 표시하는 반면, 두 번째 명령은 오류를 자동으로 수정하려고 시도합니다.

실행:

mkdir my-api && cd my-api
pnpm init -y
로그인 후 복사
로그인 후 복사

또는

pnpm install typescript tsx @types/node -D
로그인 후 복사
로그인 후 복사

4단계: API 구축

상태 확인 경로 생성

이제 API를 시작할 시간입니다. Node.js를 위한 미니멀리스트 프레임워크인 Express를 사용해 보겠습니다.

Express 및 해당 유형 설치:

npx tsc --init
로그인 후 복사
로그인 후 복사

src/index.ts 파일을 생성하고 다음 코드를 추가하세요.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
로그인 후 복사
로그인 후 복사

package.json에 다음 스크립트를 추가하세요.

mkdir src
로그인 후 복사
로그인 후 복사

실행:

pnpm create @eslint/config@latest
로그인 후 복사
로그인 후 복사

API 상태를 확인하려면 http://localhost:3000/health를 방문하세요.

포켓몬 루트 추가

포켓몬 목록을 반환하는 경로로 API를 확장해 보겠습니다.

다음 코드로 src/index.ts를 업데이트하세요.

import pluginJs from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,ts}'] },
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      semi: 'off',
      quotes: ['error', 'single']
    }
  }
];
로그인 후 복사

경로 테스트: http://localhost:3000/pokemons.

결론

이 가이드에서는 간단한 경로로 시작하여 입력된 데이터를 포함하도록 확장하여 Node.js 및 TypeScript를 사용하여 최신 API를 설정하는 방법을 배웠습니다. 이것은 시작에 불과합니다! 이러한 기반을 통해 인증, 데이터베이스 연결 등을 구현할 수 있습니다.

이 기사가 도움이 되었다면 다른 개발자와 공유하고 더 많은 팁을 보려면 뉴스레터를 구독하세요. 함께 개발세계를 정복하자! ?

위 내용은 5에서 TypeScript를 사용하여 Node.js API를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿