Node.js 시작을 위한 초보자 가이드

Node Js Sijag Eul Wihan Choboja Gaideu



Node.js는 효율성, 안정성 및 확장성으로 인해 개발자들 사이에서 인기를 얻으며 웹 개발에서 강력한 도구임이 입증되었습니다. 어떤 일에 뛰어들기 전에 기본적인 이해를 하고, 한 자리에서 모든 것을 아는 것은 상당한 느낌입니다. Node.js에 대한 심층적인 이해를 발전시키려면 올바른 위치에 와야 합니다. 이 기사를 읽은 후 사용자는 Node.js에서 코드 스크립트를 작성하는 여정을 시작할 수 있습니다.

이 게시물에서는 다음 내용을 다룹니다.

Node.js란 무엇입니까?

Google 검색 엔진에서 가장 자주 검색되는 쿼리는 Node.js란 무엇입니까? 가장 인기 있는 질문은 Node.js가 프로그래밍 언어입니까?입니다. 프레임워크인가요? 도서관인가요? 단순화하기 위해 Node.js를 JS 라이브러리에서 지원하는 런타임 환경으로 정의할 수 있습니다.







잘 알려진 오픈 소스 크로스 플랫폼 Javascript 런타임 환경 중 하나는 Node.js입니다. 적응성으로 인해 모든 프로젝트나 응용 프로그램에서 사용할 수 있습니다. 이를 차별화하는 것은 Google Chrome을 구동하는 것과 동일한 엔진인 V8 엔진을 사용한다는 것입니다. 따라서 Node.js는 서버 측에서 스크립팅하고 개발 환경 외부에서 코드 스크립트를 실행하기 위한 최적의 선택입니다.



Node.js는 다른 서버측 프로그래밍 언어와 상당히 다릅니다. 백엔드 서버나 웹 서버가 아니라는 점에 유의해야 합니다. 단독으로는 아무것도 할 수 없지만 모듈 모음은 확장 가능한 프로젝트를 만드는 데 도움이 됩니다. 단일 서버에서 실행되며 모든 단일 요청에 대해 추가 스레드를 생성하지 않습니다. 또한 대부분의 NodeJS 라이브러리를 작성하는 데 비차단 패러다임이 사용되므로 차단 동작은 규칙이 아닌 예외입니다. 비동기 I/O 기본 요소는 JavaScript 코드가 차단되지 않도록 하는 Node.js 표준 라이브러리의 기능입니다.



Node.js가 네트워크를 통해 거친 작업을 수행하는 것과 같은 I/O 작업을 수행하면 스레드를 차단하지 않고 응답을 기다리는 CPU 주기를 낭비하지 않습니다. 대신 응답을 받은 후 작업을 재개합니다.





Node.js 간단한 예

Node.js의 개념을 이해하는 간단한 예는 웹 서버를 만들고 텍스트를 작성하는 것입니다. Node.js에 대한 소개이므로 웹 포트에 소개 줄을 추가해 보겠습니다.

const http = 필요하다 ( 'http' ) ;

const 서버 포트 = 3000 ;

const 섬기는 사람 = http. 서버 생성 ( ( 요청, 입술 ) => {

입술. 상태코드 = 200 ;

입술. 헤더 설정 ( '컨텐츠 타입' , '텍스트/일반' ) ;

입술. ( 'Node.js 시작을 위한 초보자 가이드! \N ' ) ;

} ) ;

섬기는 사람. 듣다 ( 서버 포트, ( ) => {

콘솔. 통나무 ( `http에서 실행 중인 서버 : //localhost:${서버포트}/`);

} ) ;

이 코드에서는:



  • 'const http = require('http')'는 HTTP 서버를 생성하고 이와 관련된 기능을 처리하는 데 도움이 되는 http 모듈을 가져옵니다.
  • 'const serverPort = 3000'은 서버가 작동할 포트를 정의합니다.
  • 'const server = http.createServer((req, res) => {})'는 http 모듈의 create server 메소드를 사용하여 두 개의 인수를 취하는 콜백 함수가 있는 서버를 생성합니다. 하나는 요청이고 다른 하나는 응답입니다. 요청에 대해 생성됩니다.
  • 콜백 함수 내에서 HTTPS 상태 코드는 200으로 설정되고 응답 콘텐츠 유형은 일반 텍스트로 설정됩니다. 또한 웹 서버에는 'Node.js 시작을 위한 초보자 가이드'라는 제목의 메시지가 표시됩니다.
  • 'server.listen(serverPort, () =>{})'는 서버를 시작하고 서버에서 들어오는 모든 요청을 수신하기 위해 호출됩니다. 콜백 함수는 서버 시작 후 호출되며 서버가 시작되는 포트를 알려주는 메시지를 터미널에 표시합니다.

산출

실행하려면 아래 줄을 사용하십시오.

노드 앱. JS

어디 App.js 애플리케이션 이름입니다.

터미널의 출력은 다음과 같습니다.

이는 서버가 시작되어 들어오는 요청을 수신하고 있음을 나타냅니다. 서버의 응답을 확인하려면 다음 링크를 사용하십시오. http://localhost:3000/ '.

서버 측의 출력은 다음과 같이 표시됩니다.

Node.js는 어떻게 작동하나요?

Node.js는 서버가 많은 요청을 동시에 처리할 수 있도록 돕는 플랫폼입니다. 요청을 처리하기 위해 하나의 스레드만 사용하지만 스레드를 사용하여 입력 및 출력 작업을 효과적으로 관리합니다. 스레드는 동시에 작업을 수행하는 명령 그룹입니다. Node.js는 다음 작업을 시작하기 전에 하나가 완료될 때까지 작업을 멈추지 않고 제어하는 ​​이벤트 루프와 함께 작동합니다.

Node.js 이벤트 루프는 연속적이고 반무한 루프입니다. 이 루프는 Node.js의 동기 및 비동기 이벤트를 관리합니다. Node.js 프로젝트가 시작되자마자 실행이 트리거되어 어려운 작업을 시스템에 원활하게 전송합니다. 이를 통해 메인 스레드의 다른 작업이 원활하게 실행될 수 있습니다.

Node.js의 이벤트 루프에 대한 자세한 개념을 이해하고 파악하기 위해 다음을 작성했습니다. 전용 기사 이 주제에 대해.

Node.js의 장점

Node.js의 주요 장점은 다음과 같습니다.

  • 확장성 : 수평적, 수직적 양방향으로 앱의 성장을 단순화합니다.
  • 실시간 웹 앱 : 빠른 동기화가 필요하고 HTTP에 대한 과도한 로드를 방지하는 작업에 가장 적합합니다.
  • 속도 : 데이터베이스에 데이터 넣기/내보내기, 네트워크 연결, 파일 처리 등의 작업을 빠르게 수행합니다.
  • 학습의 용이성 : Node.js는 Javascript를 사용하기 때문에 초보자도 배우기 쉽습니다.
  • 캐싱 이점 : 한 부분만 저장하므로 요청 시 코드를 다시 실행할 필요가 없습니다. 캐시는 메모리 속도가 빠르고 추가 로딩 시간을 절약해 줍니다.
  • 데이터 스트리밍 : HTTP 요청과 응답을 서로 다른 이벤트로 처리하여 성능을 향상시킵니다.
  • 호스팅 : PaaS, Heroku 등의 웹사이트에 쉽게 올릴 수 있습니다.
  • 기업지원 : Netflix, SpaceX, Walmart 등 대기업에서 사용됩니다.

Windows에 Node.js를 설치하는 방법은 무엇입니까?

Node.js 애플리케이션 개발을 시작했기 때문에 Windows 환경이라면 Node.js 환경을 설정해야 합니다. Windows 운영 체제에서 Node.js 환경을 설정하려면 아래의 단계별 지침을 따르세요.

1단계: Node.js 설치 프로그램 패키지 다운로드

Node.js 공식 웹사이트로 이동하세요. Node.js 공식 웹사이트 최신 버전의 Node.js를 다운로드했는지 확인하세요. 또한 Node.js 애플리케이션을 확장하는 데 중요한 역할을 하는 npm 패키지 관리자가 함께 설치되어 있는지 확인하세요.

Windows Installer를 클릭하면 다운로드가 시작됩니다. 다운로드한 버전은 64비트이며 LTS(Long Term Support) 버전을 권장합니다. 설치 프로그램 패키지 도구를 실행하여 Node.js를 설치하세요.

2단계: 컴퓨터에 Node.js 및 NPM 모듈 설치

다음과 같은 화면이 나오므로 Next 버튼을 클릭합니다.

다음을 클릭하면 Node.js msi 라이브러리를 다운로드할 경로를 입력하라는 메시지가 표시되는 새 창이 나타납니다.

이제 아래 창에서 원하는 경로를 선택하고 다음 버튼을 클릭하십시오.

다음 버튼을 클릭하면 설치하려는 패키지를 선택하라는 사용자 정의 설치 창이 나타납니다. 이 창에서 npm 패키지 관리자를 선택하면 기본적으로 Node.js 런타임이 선택됩니다. npm 패키지 관리자에는 Node.js와 npm 패키지가 모두 설치됩니다.

마지막으로 설치 버튼을 클릭하여 여정을 시작하세요.

3단계: 설치된 버전 확인

어떤 버전이 설치되어 있는지 확인하는 것이 중요하므로 확인하려면 Windows 검색 창으로 이동하여 명령 프롬프트를 입력하세요.

명령 프롬프트 창이 열리면 확인을 위해 두 가지 명령을 입력합니다.

Node.js 버전

Node.js 버전은 명령 프롬프트에서 다음 명령을 사용하여 확인할 수 있습니다.

마디 - ~에

설치된 버전이 표시됩니다.

NPM 버전

npm 버전 확인을 위해서는 다음 명령어를 사용하세요.

npm - ~에

npm 버전이 터미널에 나타납니다.

이제 Node.js 환경 설정을 통해 애플리케이션 개발을 시작할 수 있습니다.

모든 사용자가 Windows를 사용하고 있지 않으므로 모든 사람의 요구를 충족시키는 것이 바람직합니다. 다음은 Mac에 Node.js를 설치하는 과정입니다.

Mac에 Node.js를 설치하는 방법은 무엇입니까?

Mac을 사용하는 사용자의 경우 설치는 Windows와 거의 동일합니다. 로 이동 Node.js 공식 사이트 Mac용 패키지를 다운로드하세요.

1단계: Mac용 패키지 관리자 다운로드

Node의 공식 웹사이트를 방문하여 NodeJS의 MacOSInstaller를 다운로드하세요.

https://nodejs.org/en/download/current

위 화면에서 지정된 버튼을 클릭하면 다운로드가 시작됩니다.

사용자는 설치할 위치를 지정할 수 있습니다.

2단계: Node.js .pkg 파일 설치

설치 프로그램 파일을 실행하고 설치 가이드를 따르십시오.

“설치” 버튼을 클릭하면 Node.js 설치가 시작됩니다.

NodeJS 설치가 완료되면 요약이 표시됩니다.

'닫기' 버튼을 클릭하시면 설치가 완료됩니다.

3단계: Node.js 설치 및 버전 확인

Node.js가 설치되었는지 확인하고 버전을 확인하려면 다음 명령을 사용하십시오.

마디 -- 버전

4단계: NPM을 전역적으로 업그레이드

“–global” 플래그를 사용하여 모든 시스템 사용자에 대해 NPM을 업그레이드하려면 아래에 입력한 명령을 실행하십시오.

sudo apt 설치 npm -- 글로벌

5단계: 노드 경로를 $PATH 변수로 설정

NodeJS에 대한 PATH 변수를 설정하려면 다음 명령을 실행하십시오.

수출 경로 =/ 우리 / 현지의 / 자식 / 큰 상자 :/ 우리 / 현지의 / 큰 상자 : $PATH

메모: 위 명령에서 '/usr/local/bin'은 NodeJS가 기본적으로 설치되는 위치입니다.

6단계: '.bash\_profile'에서 PATH 세부 정보 업데이트

아래 명령을 사용하여 '~/.bash\_profile'에 경로 세부 정보를 추가합니다.

에코 '내보내기 경로=/usr/local/bin:$PATH' >> ~ / . 세게 때리다 \_프로필

7단계: ~/.bashrc 업데이트

모든 사용자가 사용할 수 있도록 하려면 아래 명령을 실행하십시오.

출처 ~ / . bashrc

NodeJS를 설치하고 MacOS에서 NodeJS용 PATH 변수를 설정하는 방법은 이것입니다.

Linux에 Node.js를 설치하는 방법은 무엇입니까?

Debian 기반 Linux 운영 체제에 Node.js를 설치하려면 아래에 제공된 단계별 절차를 따르십시오.

1단계: 터미널 열기

먼저 'CTRL+ALT+T' 키보드 단축키를 사용하여 터미널을 실행합니다.

2단계: 시스템 업데이트 및 업그레이드

아래에 입력한 명령을 실행하여 시스템 저장소를 업데이트하고 업그레이드하십시오.

sudo 적절한 업데이트 && sudo 적절한 업그레이드 - 그리고

3단계: apt 패키지 관리자를 사용하여 Node 설치

시스템 저장소를 업데이트한 후 다음 명령을 사용하여 공식 APT 패키지 관리자에서 Node.js를 설치합니다.

sudo apt 설치 nodejs

4단계: 노드 설치 확인

설치가 완료되면 아래 명령을 사용하여 Node.js 버전을 확인하여 설치를 확인하세요.

마디 - ~에

5단계: NPM 설치

대부분의 경우 NPM이 필요하므로 NodeJS와 함께 NPM을 설치하는 것이 좋습니다. NPM은 공식 APT 저장소에서도 사용할 수 있으며 다음 명령을 사용하여 설치할 수 있습니다.

sudo apt 설치 npm

6단계: NPM 설치 확인

NPM 버전도 확인하여 다음 명령을 사용하여 NPM 설치를 확인하세요.

npm - ~에

Debian 기반 Linux 운영 체제에 Node 및 NPM을 설치하는 방법은 다음과 같습니다.

첫 번째 Node.js 프로그램을 작성하는 방법은 무엇입니까? (안녕하세요 월드)

Node.js에서 애플리케이션을 개발하는 과정에서 모든 것이 시작될 예정입니다. 매우 일반적인 첫 번째 프로그램을 만들어 보겠습니다. 누구든지 새로운 언어나 프레임워크를 배우기 시작할 때마다 첫 번째 프로그램은 일반적으로 'Hello World'를 인쇄하는 것입니다. 모든 사람에게 다른 방식으로 인사하는 것은 우리의 새로운 여정의 시작을 알리는 느낌이자 의미가 깊습니다. 다음은 시작하는 코드입니다.

// App.js

콘솔. 통나무 ( '안녕하세요!' ) ;

이 코드 스크립트를 실행하려면 다음 명령을 사용하십시오.

노드 앱. JS

산출

Hello World 문이 터미널에 기록됩니다.

노드 코어 모듈을 가져오는 방법은 무엇입니까?

사용자는 코드 스크립트에서 작업하려는 모듈을 사용하려면 'require()' 함수를 사용해야 합니다. 예를 들어 'fs'(파일 시스템) 모듈을 사용하는 경우 가져오기 코드 줄은 다음과 같습니다.

const FS = 필요하다 ( 'fs' )

이렇게 하면 해당 모듈의 모든 기능을 가져오고 런타임에 콘텐츠를 변경할 수 없음을 의미하는 상수 변수인 fs 변수에 저장합니다. 그런 다음 'fs' 변수를 사용하여 사용자는 원하는 기능을 구현할 수 있습니다.

이제 모듈을 가져오고 해당 기능을 코드 스크립트에서 사용하는 간단한 코드 예제를 만들어 보겠습니다.

예: HTTP 모듈 사용

const http = 필요하다 ( 'http' ) ;

// 간단한 HTTP 서버

const http서버 = http. 서버 생성 ( ( 요청, 입술 ) => {

입술. 쓰기머리 ( 200 , { '컨텐츠 타입' : '텍스트/html' } ) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '<머리>' ) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '안녕하세요!' ) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '<본문>' ) ;

입술. 쓰다 ( '

안녕하세요, 세계!

'
) ;

입술. 쓰다 ( '' ) ;

입술. 쓰다 ( '' ) ;

입술. ( ) ;

} ) ;

// 포트 3000에서 수신 대기

http서버. 듣다 ( 3000 , ( ) => {

콘솔. 통나무 ( '포트 3000에서 수신 대기하는 서버' ) ;

} ) ;

이 코드에서는:



  • 'const http = require('http')'는 http 모듈의 콘텐츠를 가져와서 상수 변수 'http'에 저장합니다.
  • 'const httpServer = http.createServer((req, res) =>'는 간단한 HTTP 서버를 생성하고 일부 기본 HTML과 함께 Hello World 텍스트를 추가합니다. createServer 메소드는 두 개의 인수를 사용하여 서버를 생성합니다. 하나는 서버에 대한 요청이고, 두 번째는 해당 요청에 대해 생성된 응답입니다.
  • 'httpServer.listen(3000, () =>'는 로컬 호스트의 포트 3000을 지정하고 서버가 활성화되어 포트 3000에서 수신 대기 중이라는 메시지를 터미널에 기록합니다.

Node App을 실행하려면 아래와 같이 node 명령으로 JS 파일을 실행하십시오.

노드 앱. JS

App.js는 파일 이름입니다.







산출



이 코드를 실행할 때 터미널에 표시되는 메시지는 다음과 같습니다.







이제 서버측 출력을 확인하고 'Hello World' 메시지가 인쇄되는지 확인해야 합니다.



메시지가 서버에 성공적으로 인쇄되었으며 일부 기본 HTML을 사용하여 글꼴이 조정되었습니다.

Node.js: 핵심 모듈

Node.js의 일부 모듈은 다음과 같습니다.

  • http: Node.js에서 HTTP 서버를 만들 수 있습니다.
  • 주장하다: Assert 함수 모음은 주로 테스트에 도움이 됩니다.
  • fs: 파일 작업을 처리할 수 있습니다.
  • 길: 파일 경로를 처리하는 일련의 메소드
  • 프로세스: 현재 Node.js 프로세스에 대한 정보와 제어 기능을 제공합니다.
  • 너: 운영체제에 관한 정보를 제공합니다.
  • 쿼리 문자열: URL 쿼리 문자열을 구문 분석하고 형식화하는 데 사용되는 도구
  • URL: 이 모듈은 URL 확인 및 구문 분석을 위한 도구를 제공합니다.

NPM 패키지를 설치하는 방법은 무엇입니까?

NPM(노드 패키지 관리자)은 Node.js 프로젝트에서 타사 라이브러리나 도구를 관리하고 사용하는 데 도움이 됩니다. NPM 패키지를 설치하려면 아래 단계를 따르세요.

1단계: 원하는 패키지 설치

Node.js에서 웹 애플리케이션을 개발하는 데 흔히 사용되는 Express 모듈을 설치해 보겠습니다. Express를 설치하려면 다음 명령을 사용하십시오.

npm 설치 익스프레스

이 명령줄은 프로젝트 폴더에 Express 모듈을 설치합니다.

2단계: 모듈을 Package.json에 저장

NPM은 새로운 종속성을 사용하여 package.json 파일을 자동으로 업데이트합니다. 프로젝트 종속성 개발로 명시적으로 저장하려면 –save-dev 또는 –save 플래그를 사용하세요.

npm 설치 익스프레스 -- 구하다 - dev # 개발 종속성으로 저장

npm 설치 익스프레스 -- save # 프로덕션 종속성으로 저장

NPM 패키지가 중요한 이유는 무엇입니까?

NPM 패키지는 Node.js 개발 환경에서 매우 중요합니다. 가능한 이유는 다음과 같습니다.

  • 코드 재사용성: NPM 패키지는 다시 사용할 수 있는 코드 기록을 보관합니다. 최적화된 기성 방법을 제공하여 개발자의 시간을 절약합니다.
  • 종속성 관리: NPM을 사용하면 프로젝트 요구 사항을 더 쉽게 처리할 수 있습니다. 프로젝트 요구 사항 목록은 프로젝트 요구 사항을 더 쉽게 사용하고 공유할 수 있도록 해주는 package.json 파일에 있습니다.
  • 지역 사회 기여: NPM은 다른 사람들이 많은 무료 소프트웨어 패키지에서 사용할 수 있도록 자신의 작업을 공유하는 대규모 개발자 그룹을 구축하는 데 도움이 됩니다. 이러한 집단적 기여로 애플리케이션 개발 기간이 단축됩니다.
  • 버전 관리: NPM을 사용하면 프로젝트의 패키지 버전을 기록할 수 있습니다. 이를 통해 필요한 변경 사항을 원활하게 작업하고 처리할 수 있습니다.
  • 효율성과 일관성: 효율적인 패키지를 사용하면 프로젝트 효율성이 향상되고 개발 팀 전체에서 코드 일관성을 유지할 수 있습니다.

그게 다야. 원하는 패키지를 설치하는 방법을 배웠을 뿐만 아니라 Node.js 개발 환경에 이러한 패키지가 필요한 이유도 이해했습니다.

Express JS를 시작하는 방법은 무엇입니까?

효율적인 웹 애플리케이션을 만들기 위해 Express.js 프레임워크가 사용됩니다. 'express' 모듈은 Node.js에서 웹 애플리케이션을 구축하는 데 적합합니다. 다음은 이 패키지를 시작하는 방법에 대한 절차입니다.

1단계: Express 설치

Express를 설치하려면 터미널에서 다음 명령을 사용하십시오.

npm 설치 익스프레스

Express 모듈이 이미 설치된 경우 설치되며 이 명령은 모듈을 업데이트합니다.

2단계: 애플리케이션에서 Express 모듈 테스트

위 단계에서는 패키지 폴더에 express를 설치하고 사용자는 'require' 모듈을 다음과 같이 사용하여 코드 스크립트에서 모듈을 가져와 사용할 수 있습니다.

const 표현하다 = 필요하다 ( '표현하다' )

Express 모듈의 기능을 사용하는 간단한 코드 스크립트를 테스트해 보겠습니다.

const 표현하다 = 필요하다 ( '표현하다' ) ;

const = 표현하다 ( ) ;

앱. 얻다 ( '/' , ( 요청, 입술 ) => {

입술. 보내다 ( '안녕하세요 익스프레스!' ) ;

} ) ;

const 포트 = 3000 ;

앱. 듣다 ( 포트, ( ) => {

콘솔. 통나무 ( `서버가 $ 포트에서 수신 대기 중입니다. { 포트 } ` ) ;

} ) ;

위 코드에서:

  • const 표현 = 요구('표현') ”는 express 모듈을 가져와서 이를 상수 변수 “express”에 저장합니다. 이를 통해 이 라이브러리와 관련된 기능을 사용할 수 있습니다.
  • const 앱 = 표현() ”는 Express 애플리케이션을 정의하는 데 사용됩니다.
  • 'app.get('/', (req, res) =>' Express 애플리케이션이 응답을 보내는 경로를 정의합니다. “안녕 익스프레스” 익스프레스 애플리케이션에.
  • 항구 3000 로컬 호스트의 'port'라는 상수 변수에 지정됩니다.
  • 'app.listen(포트, () =>' 포트 3000에서 리스너를 생성하고 서버가 지정된 포트에서 수신하고 있다는 메시지를 터미널에 기록합니다.

산출

이 애플리케이션을 실행하려면 아래 명령을 사용하십시오.

노드 앱. JS

터미널의 출력은 다음과 같이 나타납니다.

따라서 서버는 활성 상태이며 로컬 호스트의 포트 3000에서 수신 대기합니다. 브라우저에서 해당 링크에 액세스하면 출력이 다음과 같이 표시됩니다.

Express 모듈을 설치하고, 애플리케이션을 생성하고, 서버 포트를 시작하는 방법에 대한 모든 것입니다.

Express에서 정적 파일을 렌더링하는 방법은 무엇입니까?

Express에서 express.static() 함수는 HTML, CSS, 이미지 등과 같은 정적 파일을 렌더링하는 데 사용됩니다. 다음은 Express에서 정적 파일을 렌더링하는 프로세스입니다.

1단계: 프로젝트 생성

시작하기 전에 Express가 설치되어 있는지 확인한 후 다음 명령을 실행할 수 있습니다.

npm 설치 익스프레스 -- 구하다

이 명령은 node_modules 폴더에 로컬로 express 모듈을 설치하고 package.json 파일에서 업데이트합니다.

2단계: 정적 파일용 파일 생성

둘째, 작업 디렉터리에 폴더를 만듭니다. 렌더링할 정적 파일을 저장하기 위해 public이라는 폴더를 만듭니다. 모든 HTML 및 CSS 정적 파일을 이 디렉터리에 배치하여 렌더링합니다.

3단계: 정적 파일을 렌더링하도록 Express 설정

사용자가 렌더링하려는 정적 파일의 디렉터리를 지정하려면 express.static() 메서드를 사용하세요.

파일 렌더링에서는 공용 폴더에 있는 HTML 코드를 사용하는 백엔드용으로 두 개의 코드 스크립트를 사용합니다. 백엔드에 중점을 두기 때문에 HTML 코드는 단순하게 유지됩니다.

Node.js 스크립트

const 표현하다 = 필요하다 ( '표현하다' ) ;

const = 표현하다 ( ) ;

앱. 사용 ( 표현하다. 공전 ( '공공의' ) ) ;

const 포트 = 3000 ;

앱. 듣다 ( 포트, ( ) => {

콘솔. 통나무 ( `서버가 $ 포트에서 수신 대기 중입니다. { 포트 } ` ) ;

} ) ;

이 코드에서는:

  • 'const express = require('express')' 해당 기능을 사용하기 위해 스크립트에서 Express 모듈을 가져옵니다.
  • 'const app = express()' 응용 프로그램을 시작합니다
  • 'app.use(express.static('공개'))' 파일을 가져올 디렉터리를 지정하고 해당 파일을 사용하고 렌더링할 수 있는 Express 애플리케이션을 제공합니다.
  • 항구 3000 Express 애플리케이션에 대해 지정되었습니다.
  • “:app.listen(포트, () =>” 이는 서버가 활성 상태이고 메시지를 기록하여 지정된 포트에서 수신 대기 중임을 나타냅니다.

HTML 스크립트

문서 유형 HTML >

< HTML만 = '안에' >

< 머리 >

< 메타 문자셋 = 'UTF-8' >

< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1.0' >

< 제목 > 공전 렌더링 예 제목 >

머리 >

< >

< h1 > Express를 사용하여 렌더링 공전 파일 h1 >

>

HTML >

이 코드에서는 프론트엔드가 아닌 백엔드에 초점이 맞춰져 있으므로 제목만 만들었지만 필요에 따라 추가 기능을 추가할 수 있습니다.

산출

이제 다음 코드로 Node.js 스크립트를 실행하십시오.

노드 앱. JS

서버가 준비되었으며 포트 3000에서 수신 대기 중임을 나타내는 다음 메시지가 터미널에 기록됩니다.

Express 모듈에서 렌더링된 HTML 코드 스크립트를 보려면 브라우저에서 로컬 호스트 포트 3000을 엽니다.

Express에서 정적 파일을 렌더링하는 것이 전부입니다. 이제 동적 파일을 렌더링하는 방법을 살펴보겠습니다.

Express에서 동적 파일을 렌더링하는 방법은 무엇입니까?

사용자는 템플릿 엔진을 사용하여 Express에서 동적 파일을 렌더링하여 데이터를 기반으로 HTML을 동적으로 생성할 수 있습니다. 아래에 사용된 템플릿은 동적 파일을 렌더링하는 데 널리 사용되는 EJS(Embedded Javascript)입니다.

1단계: EJS 설치

다음 명령을 사용하여 프로젝트 폴더에 EJS를 설치하십시오.

npm 설치 ejs -- 구하다

2단계: EJS로 Express 설정

Node.js 파일에서 EJS 템플릿을 뷰 엔진으로 설정합니다.

//App.js

const 표현하다 = 필요하다 ( '표현하다' ) ;

const = 표현하다 ( ) ;

const 포트 = 3000 ;

앱. 세트 ( '뷰 엔진' , '아니요' ) ;

앱. 사용 ( 표현하다. 공전 ( '공공의' ) ) ;

앱. 얻다 ( '/사용자/:ID' , ( 요청, 입술 ) => {

const 사용자 ID = 요구사항 매개변수 . ID ;

const 사용자 데이터 = {

ID : 사용자 ID,

사용자 이름 : `사용자$ { 사용자 ID } `,

이메일 : `사용자$ { 사용자 ID } @예. ~와 함께 `,

} ;

입술. 세우다 ( '사용자' , { 사용자 : 사용자 데이터 } ) ;

} ) ;

앱. 듣다 ( 포트, ( ) => {

콘솔. 통나무 ( `서버가 http에서 실행 중입니다. : //로컬호스트:${PORT}`);

} ) ;

위 코드로 수행되는 작업은 다음과 같습니다.

  • 'const express = require('express')'는 노드 모듈에서 express 모듈을 가져옵니다.
  • 'const app = express()'는 Express 애플리케이션에 대한 인스턴스를 생성합니다.
  • 'app.set('view Engine', 'ejs')'는 ejs 템플릿으로 express를 구성하여 파일을 동적으로 렌더링합니다.
  • 'app.use(express.static('public'))'을 사용하면 Node 프로젝트의 public 폴더에 저장된 정적 파일을 제공할 수 있습니다.
  • 'app.get('/user/:id', (req, res) => {…})'는 요청을 수신하는 ar 따옴표를 정의합니다.
  • 'res.render('user', { user: userData })'는 EJS 템플릿 파일을 렌더링합니다.
  • 'app.listen(PORT, () => {...})'는 포트 3000에서 서버를 시작하고 사용자는 ' http://localhost:3000/user/123 ” 브라우저에서.

3단계: EJS 템플릿

프로젝트 디렉터리에 'views'라는 디렉터리가 생성되고 이 폴더 안에 EJS 템플릿 파일 'user.ejs'가 생성됩니다. 이 파일에는 사용자가 렌더링하려는 동적 콘텐츠가 포함됩니다. 이 파일에 다음 코드를 붙여넣으세요.

문서 유형 HTML >

< HTML만 = '안에' >

< 머리 >

< 메타 문자셋 = 'UTF-8' >

< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1.0' >

< 제목 > 유저 프로필 제목 >

머리 >

< >

< h1 > 유저 프로필 h1 >

< > 사용자 ID : <%= 사용자. ID %> >

< > 사용자 이름 : <%= 사용자. 사용자 이름 %> >

< > 이메일 : <%= 사용자. 이메일 %> >

>

HTML >

주요 목표는 파일 내용을 동적으로 렌더링하는 것이므로 필요한 전면 코드만 사용되었습니다.

4단계: 서버 시작

이제 사용자는 다음 코드 조각을 사용하여 Express 애플리케이션을 시작할 수 있습니다.

노드 앱. JS

App.js는 디렉터리에 있는 파일의 이름입니다. 이 코드를 실행하면 터미널에 다음 메시지가 표시됩니다.

이제 사용자는 링크를 사용할 수 있습니다 http://localhost:3000/user/123 브라우저에서 콘텐츠는 다음과 같이 동적으로 렌더링됩니다.

Node.js의 express 모듈을 사용하여 파일 내용을 동적으로 렌더링하는 것이 전부입니다.

결론

이 기사에서는 Node.js를 처음부터 끝까지 설명하고 수많은 이벤트에 대한 논스톱 이벤트 기반 JavaScript 시간과 함께 작동하는 방법을 보여줍니다. 잘 알려진 웹 구축 도구인 Express를 살펴보고 NPM과 웹 사이트에 정적 또는 동적 정보를 표시하는 방법에 대해서도 설명합니다. 이 기사에서는 모든 것을 자세히 설명하지만 Node.js를 배우기 위한 좋은 초보자 가이드입니다.