Node.js와 TypeScript를 사용하여 블로그 엔진을 구축하는 방법

블로그

지난 10년 동안 동적으로 유형이 지정된 언어가 유명해지면서 유형이 없는(또는 무법이라고 해야 할까요?) 프로그래밍이 표준이 되었습니다. 백엔드 뿐만 아니라 프론트엔드 .



많은 사람들은 단순히 코드를 작성하는 것이 개념 증명 또는 응용 프로그램 프로토타이핑을 제공하는 데 효율적이라고 믿습니다.






그러나 이러한 애플리케이션이 성장함에 따라 애플리케이션을 구축하는 데 사용되는 유형 없는 코드는 종종 엄청나게 복잡해지고 관리하기 더 어려워집니다(일부는 불가능하다고 말할 수도 있음).



최악의 경우 개발자는 함수 이름 변경과 같은 간단한 작업이 전체 복잡한 시스템을 손상시키지 않기를 바라며 테스트와 기도에 의존하게 됩니다. 그러나 개발자는 처음부터 코드를 빌드하여 코드베이스를 대규모로 읽을 수 있도록 만들 수 있습니다.



TypeScript를 구출

큰(또는 작은!) 코드베이스를 읽을 수 있게 만드는 핵심은 앱을 통해 흐르는 모든 데이터 유형을 추적하는 것입니다.






개발자를 돕기 위해, 타입스크립트 일반 old의 유형화된 상위 집합을 제공했습니다. 자바스크립트 . 이는 정기적인 자바스크립트 개발자의 기존 지식이 적용되는 타입스크립트 .

개발자가 지식과 코드를 새로운 방식으로 사용할 수 있는 다른 효율적인 방법이 있습니다. 사용하는 개발자 노드JS 이제 재활용할 수 있습니다. 프론트엔드 코드 백엔드 , 그 반대.

또한 정적 타이핑을 도입하여 자바스크립트 개발자는 오래된 Java/C# 지식을 재사용하여 NodeJS 코드베이스를 유지 관리할 수 있습니다.

오늘의 프로젝트: 간단한 블로깅 엔진

이 튜토리얼에서는 새로운 백엔드가 필요합니다. 블로깅 엔진 . 이 앱에는 제목, 콘텐츠 및 작성자가 있는 블로그 게시물 목록이 포함됩니다.

작성자는 쿠키 세션 방식을 사용하여 등록하고 로그인할 수 있습니다. Okta가 사용자를 관리하고 모든 블로그 게시물은 메모리에 저장됩니다.

백엔드에 대한 문서는 클래스 및 메서드에 대한 TypeScript 입력에서 생성된 Swagger 사양으로 노출됩니다.

NodeJS Typescript 샘플 앱의 종속성

  • 네스트JS 서버를 부트스트랩하려면
  • 서버 문서를 정의하는 Swagger
  • 사용자 관리 및 인증을 위한 Okta
  • 노드JS
  • |_+_| 입력 유효성 검사를 위한 npm 라이브러리
  • 변경될 때마다 서버를 자동으로 다시 시작하는 nodemon

초기화

빈 디렉토리 생성 |_+_|, |_+_| 입력하고 |_+_| 거기. |_+_|를 누른 후 키 몇 번, 노드JS 프로젝트가 시작됩니다.

타입스크립트 구성 JSON

같이 타입스크립트 매우 구성 가능하며 대부분의 TypeScript 프로젝트 사용해야 하는 언어 기능을 선택하기 위한 구성을 포함합니다.

프로젝트 루트에 tsconfig.json을 만듭니다.

validate-class

모든 종속성 추가

bloggeur

이러한 종속성의 대부분은 간단해야 하지만 그 중 일부는 약간의 설명이 필요합니다.

  • 인증 및 권한 부여 미들웨어에는 |_+_| 패키지
  • |_+_| 패키지는 일부입니다 NestJS 플랫폼 , 높은 수준의 래퍼 익스프레스.js API 문서용 TypeScript 메타데이터 기능을 지원하는
  • |_+_| 패키지는 메타데이터 기능을 노출합니다.
  • |_+_| 그리고 |_+_| 컨트롤러에 전달하기 전에 클라이언트 입력을 확인하십시오.

서버 시작 만들기

진입점(|_+_|)을 만들어 설정하십시오. 타입스크립트 컨텍스트를 만들고 일반 |_+_|을 사용하여 프로젝트를 실행합니다. 명령:

cd

또한 |_+_| 디렉토리, 소스 코드용.

NestJS 모듈 생성

둘 다 노드.js 그리고 .NET은 NestJS에 크게 영감을 받았습니다. 그래서 모든 것이 놀라운 일이 아닙니다. NestJS 앱 모듈의 묶음일 뿐입니다.

(거의) 빈 만들기 NestJS 모듈 |_+_|. 여기에는 쿠키 파서 미들웨어만 포함되며 모든 애플리케이션(현재 존재하지 않는) 컨트롤러가 포함됩니다.

npm init

NestJS 서버 부트스트랩

만들기 |_+_| 서버를 가동하려면:

ENTER

애플리케이션 테스트 실행

실행하여 |_+_| 또는 |_+_|, 서버는 포트 3000에서 시작되어야 합니다.

하지만 |_+_|를 사용하여 실행해야 합니다. 자동 재시작을 허용하려면:

@okta

서버를 실행한 후 브라우저를 |_+_|로 이동합니다. 사양에 정의된 작업 없음 메시지와 함께 API 콘솔이 열립니다.

이제 몇 가지 작업을 만들어 보겠습니다!

만들기 |_+_| 기준 치수

디렉토리를 만듭니다 |__+_|. 그 안에 |_+_| 모든 게시물을 포함하려면:

@nestjs

브라우저 페이지 새로고침 |_+_| 및 실행 |_+_| API 콘솔에서.

인증 모듈 만들기

를 위한 디렉토리 생성 인증 모듈: reflect-metadata.

인증 부담을 덜어주기 위해 인증, 권한 부여 및 사용자 계정 관리에 Okta를 사용합니다.

영구 무료 Okta 계정 및 애플리케이션 생성

여기를 클릭 계정을 생성합니다.

Okta 대시보드에 로그인한 후 애플리케이션 메뉴에서 클릭하고 애플리케이션 추가 . 마법사에서 다음을 선택합니다. 서비스 클릭 다음 .

응용 프로그램 설정 화면에서 응용 프로그램의 이름을 지정합니다(저는 mine-blog-backend로 지정했습니다).

응용 프로그램이 성공적으로 생성되면 클라이언트 ID와 클라이언트 암호를 |_+_| 프로젝트의 루트에 있는 파일.

dotenv(.env) 파일은 개발 환경 변수를 저장합니다. 애플리케이션 코드를 개발에서 프로덕션 또는 타사 제공업체의 참조 계정으로 전환합니다.

이 파일은 |_+_| 귀하의 |_+_| 파일. |_+_|의 값을 복사합니다. 파일을 |_+_| 전역 변수. 빈 만들기 |_+_| 프로젝트의 루트 디렉토리에 있는 파일.

애플리케이션은 Okta와 통신하기 위해 API 토큰이 필요합니다. Okta 대시보드에서 , 그 다음에 토큰 , 새 페이지에서 토큰 생성 . 값을 |_+_|에 복사합니다. 파일도.

또한 Okta 계정의 도메인을 |_+_| 파일. 현재 사용 중인 Okta 대시보드의 호스트 이름이지만 |_+_| 부분. |_+_|와 같아야 합니다.

모든 값을 작성한 후 |_+_| 파일은 다음과 같아야 합니다.

class-transformer

이 모든 값은 다음 섹션에 필요합니다.

Okta API와 인증 통합

이 프로젝트에 필요한 Okta API는 인증 API와 사용자 관리 API입니다.

둘 다 npm 패키지를 통해 멋지게 노출됩니다 |_+_| 그리고 |_+_|.

만들기 |_+_| 해당 서비스와 통합할 파일:

class-validator

이제 Okta에 사용자를 등록하고, 이메일과 비밀번호를 사용하여 세션 ID를 생성하고, ID로 사용자를 가져오는 기능을 노출했습니다.

이것이 이 프로젝트의 사용자 관리 및 인증에 필요한 전부입니다.

로그인 엔드포인트 생성

인증을 허용하려면 로그인 엔드포인트가 필요합니다. 만들기 |_+_| 파일:

server.js

이제 |_+_|에서 Swagger 페이지를 새로 고칠 수 있습니다. 새로운 시도 |_+_| 끝점.

현재 서버를 통해 사용자를 등록할 수 있는 방법이 없으므로 Okta의 대시보드를 사용하여 생성한 다음 |_+_| 해당 이메일 및 비밀번호를 사용하여 엔드포인트에 연결합니다.

사용자 생성 및 가져오기를 위한 엔드포인트 생성

즉, 사용자 생성 및 가져오기를 위한 엔드포인트를 생성해 보겠습니다.

만들기 |_+_| 파일을 만들고 그 안에 |_+_| 파일:

node

|_+_|를 제외하고 모든 것이 여기에서 거의 동일합니다. 그리고 |_+_| 검증인.

이는 서버로 전송된 데이터에 유효한 이메일과 비어 있지 않은 이름 및 성 및 암호가 포함되어 있지 않은 경우 요청이 실행되는 것을 방지합니다.

새로고침하여 해당 유효성 검사기를 사용해 볼 수 있습니다 |_+_| 페이지 및 실행 |_+_| 일부 잘못된 데이터가 있는 엔드포인트.

API 보안

를 위해 두 가지가 더 필요합니다. 보안 API : 로그인한 사용자를 식별하기 위한 인증 미들웨어와 |_+_| 익명 액세스로부터 비공개 엔드포인트를 보호하기 위한 가드.

만들기 |_+_| 파일:

src

이 미들웨어는 |_+_| 쿠키에서 세션 정보를 |_+_| 요청 객체의 키.

생성된 미들웨어를 사용하려면 Application 모듈에 적용합니다. |_+_| 변경 후 다음과 같아야 합니다.

바이낸스에서 쿠코인으로 옮기는 방법
src/application.module.ts

다음은 인증 가드입니다. 만들기 |_+_| 파일:

src/server.ts

이제 드디어 블로그 게시물을 작성할 준비가 되었습니다!

블로그 게시물 만들기

블로그 게시물 작성을 허용하려면 |_+_| |_+_| 방법. 메소드는 인증되지 않은 사용으로부터 보호되어야 하며 |_+_|를 사용하도록 수정되어야 합니다. 사용자의 세션에서 추출됩니다.

이것이 |_+_| 파일은 |__+_|를 추가한 후의 모습입니다. 방법:

npm start

새로고침 후 |_+_| 페이지가 다시 표시되면 마침내 블로그 게시물을 작성할 수 있어야 합니다(로그인 성공 후에만 가능).

잘 했어요!

축하합니다. NodeJS와 TypeScript를 사용하여 작은 블로그 엔진을 완성했습니다.

TypeScript의 타이핑 시스템을 활용하여 간단한 REST API를 구현하고 문서화했습니다.

API 문서와 구현이 따로따로 작성되지 않고 함께 유지되는 방법에 주목하십니까? 이는 API가 발전함에 따라 문서와 구현을 동기화 상태로 유지하는 데 도움이 됩니다.



#node-js #typescript #javascript #웹 개발 #각도

developer.okta.com

Node.js와 TypeScript를 사용하여 블로그 엔진을 구축하는 방법

이 튜토리얼에서는 블로그 엔진을 위한 새로운 백엔드가 필요합니다. 이 앱에는 제목, 콘텐츠 및 작성자가 있는 블로그 게시물 목록이 포함됩니다. NodeJS 및 TypeScript를 사용하여 블로깅 엔진을 구축하는 방법을 배우게 됩니다.