자습서: 초보자를 위한 Node.js

Node.js사용하는 것을 새롭게 접하는 경우 이 가이드를 통해 몇 가지 기본 사항을 시작하는 데 도움이 됩니다.

• Node.js을 Visual Studio Code에서 사용해 보세요.
• Express를 사용하여 첫 번째 Node.js 웹앱 만들기
• Node.js 모듈을(를) 사용해보세요

필수 조건

• Windows 또는 linux용 Windows 하위 시스템에 Node.js 설치

Visual Studio Code를 사용하여 NodeJS 사용해 보기

Visual Studio Code를 아직 설치하지 않은 경우 위의 필수 구성 요소 섹션으로 돌아가 Windows 또는 WSL에 연결된 설치 단계를 따릅니다.

1. 명령줄을 열고 새 디렉터리를 만듭니다. mkdir HelloNode다음 디렉터리를 입력합니다. cd HelloNode

2. 다음 명령을 사용하여 VS Code에서 디렉터리를 엽니다. code .

3. "app.js" 파일을 만듭니다.

4. "Hello World"라는 간단한 문자열을 변수 msg에 추가한 다음 "app.js" 파일에 입력하여 문자열의 내용을 콘솔로 보냅니다.

   var msg = 'Hello World';
   console.log(msg);
   

5. Node.js을 사용하여 "app.js" 파일을 실행하려면 VS Code 내에서 터미널을 열려면 보기>터미널을 선택하세요 (또는 백틱 문자를 사용하여 Ctrl+`를 선택하세요). 기본 터미널을 변경해야 하는 경우 드롭다운 메뉴를 선택하고 기본 셸 선택을 선택합니다.

6. 터미널에서 다음을 입력합니다 node app.js. "Hello World"라는 출력이 표시됩니다.

비고

'app.js' 파일에 console을 입력하면 VS Code가 IntelliSense 기능을 사용하여 console 객체와 관련된 지원 옵션을 표시해 선택할 수 있습니다. 다른 JavaScript 개체를 사용하여 Intellisense를 실험해 보세요.

Express를 사용하여 첫 번째 NodeJS 웹앱 만들기

Express는 최소한의 유연성과 간소화된 Node.js 프레임워크로, GET, PUT, POST 및 DELETE와 같은 여러 유형의 요청을 처리할 수 있는 웹앱을 더 쉽게 개발할 수 있습니다. Express에는 앱에 대한 파일 아키텍처를 자동으로 만드는 애플리케이션 생성기가 함께 제공됩니다.

Express.js사용하여 프로젝트를 만들려면:

1. 명령줄(명령 프롬프트, Powershell 또는 원하는 항목)을 엽니다.

2. 새 프로젝트 폴더 mkdir ExpressProjects 를 만들고 해당 디렉터리를 입력합니다. cd ExpressProjects

3. Express를 사용하여 HelloWorld 프로젝트 템플릿을 만듭니다. npx express-generator HelloWorld --view=pug

   비고

   여기서 명령을 사용하여 npx 실제로 설치하지 않고 Express.js 노드 패키지를 실행합니다(또는 원하는 방식에 따라 일시적으로 설치). 명령을 사용하거나 다음express을 express --version 사용하여 설치된 Express 버전을 확인하려고 하면 Express를 찾을 수 없다는 응답을 받게 됩니다. Express를 전역적으로 설치하여 반복해서 사용하려면 다음 npm install -g express-generator을 사용합니다. 를 사용하여 npm listnpm에 의해 설치된 패키지 목록을 볼 수 있습니다. 깊이(중첩된 디렉터리 수)에 따라 나열됩니다. 설치한 패키지의 깊이는 0입니다. 해당 패키지의 종속성은 깊이 1, 깊이 2의 추가 종속성 등입니다. 자세한 내용을 알아보려면 StackOverflow의 npx와 npm의 차이점?을 참조하세요.

4. VS Code에서 프로젝트를 열어 Express가 포함한 파일 및 폴더를 검사합니다. code .

   Express에서 생성하는 파일은 처음에는 약간 압도적인 것처럼 보일 수 있는 아키텍처를 사용하는 웹앱을 만듭니다. VS Code Explorer 창에서 다음 파일 및 폴더가 생성된 것을 볼 수 있습니다( Ctrl+Shift+E를 보려면).

   • bin; 앱을 시작하는 실행 파일을 포함합니다. 서버를 실행하고(다른 포트가 지정되지 않으면 3000번 포트에서) 기본 오류 처리를 설정합니다.
   • public; JavaScript 파일, CSS 스타일시트, 글꼴 파일, 이미지 및 사용자가 웹 사이트에 연결할 때 필요한 기타 자산을 포함하여 공개적으로 액세스한 모든 파일을 포함합니다.
   • routes; 애플리케이션에 대한 모든 경로 처리기를 포함합니다. 응용 프로그램의 경로 구성을 분리하는 방법의 예로 사용할 수 있도록 index.js 및 users.js 두 개의 파일이 이 폴더에 자동으로 생성됩니다.
   • views; 템플릿 엔진에서 사용하는 파일을 포함합니다. Express는 렌더링 메서드를 호출할 때 일치하는 보기를 확인하도록 구성됩니다. 기본 템플릿 엔진은 Jade이지만, Jade는 Pug로 대체되어 더 이상 지원되지 않으므로, --view 플래그를 사용하여 보기(템플릿) 엔진을 변경했습니다. --view을 사용하여 express --help 플래그 옵션 및 기타 항목을 볼 수 있습니다.
   • app.js; 앱의 시작 지점입니다. 모든 항목을 로드하고 사용자 요청을 제공하기 시작합니다. 기본적으로 모든 부분을 하나로 묶는 접착제입니다.
   • package.json; 프로젝트 설명, 스크립트 관리자 및 앱 매니페스트를 포함합니다. 주요 목적은 앱의 종속성 및 해당 버전을 추적하는 것입니다.

5. 이제 Express에서 HelloWorld Express 앱을 빌드하고 실행하기 위해 사용하는 종속성을 설치해야 합니다(파일에 정의된 package.json 대로 서버 실행과 같은 작업에 사용되는 패키지). VS Code 내에서 보기>터미널을 선택하여 터미널을 엽니다(또는 백틱 문자 `을 사용하여 Ctrl+`를 누릅니다). 'HelloWorld' 프로젝트 디렉터리에 있는지 확인하세요. 다음 명령어를 사용하여 Express 패키지의 종속성을 설치합니다.

   npm install
   

6. 이 시점에서 다양한 API 및 HTTP 유틸리티 메서드 및 미들웨어에 액세스할 수 있는 여러 페이지 웹앱에 대해 프레임워크를 설정하여 강력한 API를 더 쉽게 만들 수 있습니다. 다음을 입력하여 가상 서버에서 Express 앱을 시작합니다.

   npx cross-env DEBUG=HelloWorld:* npm start
   

   팁 (조언)

   위의 명령 부분에서는 DEBUG=myapp:* Node.js 디버깅을 위해 로깅을 켜고 싶다고 말하는 것을 의미합니다. 'myapp'을 앱 이름으로 바꾸어야 합니다. 파일의 package.json "name" 속성 아래에서 앱 이름을 찾을 수 있습니다. 모든 터미널에서 npx cross-env를 사용하여 DEBUG 환경 변수를 설정할 수 있으며, 터미널에 맞는 방법으로도 설정할 수 있습니다. 이 npm start 명령은 npm에게 파일에서 package.json 스크립트를 실행하도록 명령합니다.

7. 이제 웹 브라우저를 열고 localhost:3000로 이동하면 실행 중인 앱을 볼 수 있습니다.

   

8. 이제 HelloWorld Express 앱이 브라우저에서 로컬로 실행되고 있으므로 프로젝트 디렉터리에서 'views' 폴더를 열고 'index.pug' 파일을 선택하여 변경해 보세요. 열리면 h1= title을 h1= "Hello World!"으로 변경한 다음, 저장(Ctrl+S)를 선택합니다. 웹 브라우저에서 localhost:3000 URL을 새로 고쳐 변경 내용을 봅니다.

9. Express 앱 실행을 중지하려면 터미널에서 다음을 입력합니다 . Ctrl+C

Node.js 모듈을 사용해보세요

Node.js 서버 쪽 웹앱을 개발하는 데 도움이 되는 도구가 있으며, 일부는 기본 제공되며 npm을 통해 더 많이 사용할 수 있습니다. 이러한 모듈은 다음과 같은 많은 작업에 도움이 될 수 있습니다.

도구	사용 목적
그램, 샤프	JavaScript 코드에서 직접 편집, 크기 조정, 압축 등을 포함한 이미지 조작
PDFKit	PDF 생성
validator.js	문자열 유효성 검사
imagemin, UglifyJS2	축소
스프라이트스미스	스프라이트 시트 생성
윈스턴	로깅 (로그 기록)
commander.js	명령줄 애플리케이션 만들기

기본 제공 OS 모듈을 사용하여 컴퓨터의 운영 체제에 대한 몇 가지 정보를 살펴보겠습니다.

1. 명령줄에서 Node.js CLI를 엽니다. 입력한 후 Node.js 사용 중이라는 > 프롬프트가 표시됩니다. node

2. 현재 사용 중인 운영 체제를 식별하려면(Windows에 있음을 알리는 응답을 반환해야 합니다) 다음을 입력합니다. os.platform()

3. CPU 아키텍처를 확인하려면 다음을 입력합니다. os.arch()

4. 시스템에서 사용할 수 있는 CPU를 보려면 다음을 입력합니다. os.cpus()

5. .exit를 입력하거나 Ctrl+C를 두 번 눌러 Node.js CLI를 종료하세요.

   팁 (조언)

   Node.js OS 모듈을 사용하여 플랫폼을 확인하고 플랫폼별 변수를 반환하는 등의 작업을 수행할 수 있습니다. Windows 개발용 Win32/.bat, Mac/unix용 darwin/.sh, Linux, SunOS 등 var isWin = process.platform === "win32";).