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

  • 아티클

Node.js를 처음 사용하는 경우 이 가이드의 몇 가지 기본 사항으로 시작할 수 있습니다.

전제 조건

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

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

  1. 명령줄을 열어 새 디렉터리를 만듭니다(mkdir HelloNode). 그런 다음, 디렉터리를 입력합니다(cd HelloNode).

  2. 내부에 "msg"라는 변수를 사용하여 "app.js"라는 JavaScript 파일을 만듭니다(echo var msg > app.js).

  3. 명령을 사용하여 VS Code에서 디렉터리와 app.js 파일을 엽니다(code .).

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

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

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

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

참고 항목

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

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

Express는 최소화되고 유연하며 간소화된 Node.js 프레임워크로, Express를 사용하면 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 Node 패키지를 실행합니다. express 명령을 사용하거나 express --version을 사용하여 설치된 Express의 버전을 확인하려는 경우에는 Express를 찾을 수 없다는 응답을 받게 됩니다. 반복적으로 다시 사용하기 위해 전역적으로 Express를 설치하려면 npm install -g express-generator를 사용합니다. npm list를 사용하여 npm에 의해 설치된 패키지 목록을 볼 수 있습니다. 패키지는 수준(중첩된 디렉터리 수)별로 나열됩니다. 직접 설치한 패키지는 수준 0이 됩니다. 해당 패키지의 종속성은 수준 1이 되고, 추가 종속성은 수준 2 등이 됩니다. 자세한 내용은 StackOverflow의 npx와 npm 간 차이점을 참조하세요.

  4. VS Code에서 프로젝트를 열고 code .를 입력하여 Express가 포함한 파일 및 폴더를 확인합니다.

    Express에서 생성되는 파일은 처음에는 약간 어려워 보이는 아키텍처를 사용하는 웹앱을 만듭니다. VS Code 탐색기 창(보려는 경우 Ctrl+Shift+E)에서 다음 파일 및 폴더가 생성되었음을 알 수 있습니다.

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

  5. 이제 HelloWorld Express 앱(package.json 파일에 정의된 대로 서버 실행과 같은 작업에 사용되는 패키지)을 빌드 및 실행하기 위해 Express에서 사용하는 종속성을 설치해야 합니다. 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 명령은 package.json 파일에서 스크립트를 실행하도록 npm에 지시합니다.

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

    Screenshot of Express app running in a browser

  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을 통해 사용할 수 있는 도구가 훨씬 더 많습니다. 이러한 모듈은 다음과 같은 다양한 작업에 유용할 수 있습니다.

도구 사용 목적
gm, sharp JavaScript 코드에서 직접 편집, 크기 조정, 압축 등을 비롯한 이미지 조작 수행
PDFKit PDF 생성
validator.js 문자열 유효성 검사
imagemin, UglifyJS2 축소
spritesmith Sprite sheet 생성
Winston 로깅
commander.js 명령줄 애플리케이션 만들기

컴퓨터의 운영 체제에 대한 일부 정보를 얻기 위해 기본 제공 OS 모듈을 사용해 보겠습니다.

  1. 명령줄에서 Node.js CLI를 엽니다. node를 입력하면 > 프롬프트에 Node.js를 사용하고 있다고 표시됩니다.

  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, Linux, SunOS 등의 경우 darwin/.sh입니다(예: var isWin = process.platform === "win32";).