ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Express.js] Express 설치 및 실행
    Back-End/Express.js 2021. 2. 1. 23:14
    반응형

    😲 서론

    이 포스팅은 내게 아주 큰 의미를 가진다. 프론트엔드 개발자를 준비해온 내가, 백엔드(서버)에 관련해 처음 작성하는 글일테니!😀

     

    혼자 2차 프로젝트를 진행하면서, 데이터를 JSON의 로컬fetch() 로 대체할까 고민을 많이 했다.

    결론적으론, 동적 라우팅이나 로그인/회원가입 구현을 위해 Express로 서버를 간단히 구현해보기로 결정했다.

     

    Javascript를 처음 공부하면서 포스팅을 하지 않았던 것이 후회되어, 이번엔 학습과 정리를 동시해 진행기로 했다!!


    📗 Node.js 란?

    나는 'Node.js = 백엔드(서버)' 라고 인지하고 있었다. 이번에 Express를 공부하며 정말 잘못된 생각이라는 것을 느꼈다!

    Express 정리에 앞서, Node.js 와 npm부터 차근차근 정립할 필요성을 느꼈다.

     

    1. Node.js

    [Node.js 공식사이트]
    Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.

     

    말 그대로, Node.js는 프레임워크 보다는 하나의 생태계(플렛폼)이자 소프트웨어인 것이다.(초기에는 서버 사이드 개발용으로 제작됬다)

    Node.js는 Javascript 기반 런타임으로, JS를 브라우저 외 환경에서 사용할 수 있도록 해주며 http서버가 내장되어 있기에 주로 서버로 사용된다.

    * Node.js 위키백과 : ko.wikipedia.org/wiki/Node.js

    * 런타임 위키백과 : ko.wikipedia.org/wiki/%EB%9F%B0%ED%83%80%EC%9E%84

     

    - 설치

    Node.js 공식 홈페이지에서 설치할 수 있다.(nodejs.org/ko/) 버전은 LTS(Long Term Support) Current 두 가지를 제공한다.

     

    Node.js

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    nodejs.org

    두 가지 버전을 제공하는 이유는 새 버전이 6개월 단위로 출시되므로 사용 기업들이 따라갈 수 있는 텀을 두는 것이다.

    또한, 보통 짝수 버전을 LTS로 많이 두는데, 이는 홀수 버전은 실험적인 버전이라고 생각하면 되겠다.

     

    * Homebrew 와 같은 패키지 매니저를 통해 설치할 수도 있다. (nodejs.org/ko/download/package-manager/)

     

    - 확인

    Node.js 설치가 정상적으로 됬는지는, Terminal 에서 node -v 명령어로 확인 가능하다.

     

    2. npm (node.js package manager)

    npm은 위 풀네임 그대로, Node.js에서 자주 사용되고 재사용되는 Javascript 코드들을 패키지화하여 모아놓은 저장소(관리자)이다.

    오픈소스라는 장점으로 많은 사람들이 패키지를 공유하며, Node.js를 설치하면 기본적으로 같이 설치된다.

     

    - 확인

    마찬가지로 npm -v 명령어로 확인 가능하다.

    npm은 init, install, --save 와 같이 사용에 필요한 다양한 명령어가 있는데, 이는 이후에 정리하도록 하겠다.

     

    3. 서버 구축 준비

    Express 로 서버구축을 하기 전에, 작업할 디렉토리에서 npm init 명령어를 통해 package.json 을 만들어줘야 한다.

    package.json 은 npm 패키지들의 구성 및 버전을 관리하는 파일 정도로 우선 염두하고 진행하도록 하겠다.

    위처럼, package.json 을 생성하면서 다양한 설정을 진행한다.(패키지명, 버전, 진입점 파일 등)

    이를 생략하려면, npm init -y, npm init -f 등의 옵션을 사용하면 된다.

     

    Heropy Tech님께서, npm 사용 및 패키지 버전관리의 핵심인 package.json 정리를 잘 해주셔서 링크를 첨부했다.

    * Heropy Tech 님의 블로그 포스팅(처음 시작하는 Node.js 개발 - 2 - npm) : heropy.blog/2018/02/18/node-js-npm/

     

    처음 시작하는 Node.js 개발 - 2 - npm

    npm(Node Package Manager)은 JavaScript 및 세계 최대의 소프트웨어 레지스트리 패키지 관리자로 Node.js를 설치하면 같이 설치되어 사용할 수 ...

    heropy.blog


    📗 Express.js 란?

    [Express.js 공식 사이트]
    Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

     

    그렇다면, Express.js 는 무엇일까! 그렇다. 이것이 바로 Node.js 에서 제공하는 웹 서버 프레임워크 인 것이다.

    (Java의 Spring, php의 라라벨, Python의 Django 등이 대표적인 웹 서버 프레임워크다.)

     

    Node.js 에는 Express, Koa, Hapi 등의 웹 프레임워크를 제공하는데, Express 엔진이 가장 많이 통용되고 있다.

     

    - 주요 기능

    • HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
    • 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. 
    • 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 
    • 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

     

    - 설치

    서버작업을 하려는 디렉토리에서 npm install 로 설치할 수 있으며, npm express -v 로 설치여부를 확인할 수 있다.

    npm install express --save

     

    * --save 옵션을 사용하는 이유?

    버전을 관리하는 package.json의 dependencies 항목에 저장하기 위함이다. (모듈 의존성 관리)

    npm5 부터는 --save 옵션 없이도 dependencies 항목에 자동적으로 추가되도록 업데이트 되었다. install의 다른 옵션은 아래가 있다.

    • -P or --save-prod : package.json의 dependencies에 패키지를 등록합니다.(default)
    • -D or --save-dev : package.json의 devDepndencies에 패키지를 등록합니다.
    • -O or --save-optional : package.json의 optionalDependencies에 패키지를 등록합니다.
    • --no-save : dependencies에 패키지를 등록하지 않습니다.

    📗 Express.js 개발하기

    1. 서버 만들기 (Hello World!)

    코딩의 국룰 Hello World 다.🤣🤣🤣 첫 Express.js 서버 개장을 해보도록 하겠다! 

    // index.js
    
    const express = require('express')	// 모듈 추출
    const app = express()			// 서버 생성
    const port = 5000			// 서버주소(port) 지정
    
    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`)
    })

    우리가 진입점 파일로 설정한 index.js 에서, 위와 같이 코드를 작성하면 된다. (PORT 값은 임의로 지정하면 된다.)

     

    이제 서버를 시작해보겠다. 터미널에서 node index.js 명령어를 실행한다. (React 의, npm run start 와 같다고 생각?!)

    위 설정에 따라, 서버는 http://localhost:5000/ 포트에 개설되어 연결을 청취한다.

    node index.js

     

    브라우저의 http://localhost:5000/ 으로 이동해보면, "Hello World!" 가 send 되고 있는 것을 볼 수 있다.

    다른 경로를 확인해보면, 해당 경로에 대한 요청을 정의하지 않았기에 404 오류('Not Found')로 응답하는 것을 알 수 있다.

     

    2. Express Generator(생성기)

    Express 개발환경을 신속하게 구축하고 싶다면, express-generator 툴을 사용하면 된다. (React의 create-react-app 과 유사)

     

    1) 설치

    npm install express-generator -g

    * sudo 명령어는 글로벌 설치시, local의 권한거부 없이 설치하도록 해준다. 그렇기에, npm은 sudo 설치를 지양하기를 권장한다.

     

    2) 개발환경 구축

    express --view [engine] [디렉토리명]

    * express --view=pug 뷰 엔진을 많이 사용한다. 디렉토리 명을 넣지 않으면, 현재 디렉토리에 개발환경이 설정된다.

     

    3) 모듈 설치

    위 사진을 보면, package.json이 설치된 것을 알 수 있다. 해당 버전의 모듈들을 설치해야 하므로, npm install 명령어를 입력한다.

     

     

    4) 폴더 구조

    아래와 같이 1 depth 의 폴더구조로 이루어져 있다.

    dir % tree ./ -L 1
    ./
    |-- app.js
    |-- bin
    |-- node_modules
    |-- package-lock.json
    |-- package.json
    |-- public
    |-- routes
    `-- views
    • app.js : 접근 포인트. 핵심적인 서버 역할.
    • bin/www : 서버를 실행하는 스크립트
    • public : 외부(브라우저 등 클라이언트)에서 접근 가능한 파일들을 모아둔 곳 (이미지, JS, css 파일 등)
    • routes : 주소별 라우터들이 담긴 디렉토리
    • views : 템플릿 파일들이 담긴 디렉토리

    5) 서버 실행

    package.json 에 start script가 추가되어 있어, npm start 명령어를 통해 서버가 실행될 수 있다. (포트는 3000 default)

    위처럼, 3000 포트에서 서버가 정상적으로 동작하는 것을 알 수 있다.


    내 첫 Node.js 서버를 띄워본 역사적인 순간이다!!!!!!!

    다음엔, 로그인/회원가입 연결을 위해 서버 라우팅을 공부하면서 포스팅을 진행하겠다.

     

     

    [출처]

    - Node.js 공식 사이트 : nodejs.org/ko/

    - Express.js 공식 사이트(한국어) : expressjs.com/ko/

    - Heropy Tech 님의 블로그 : heropy.blog/2018/02/18/node-js-npm/

    - 아빠개발자 님의 블로그 : dydals5678.tistory.com/88 

    반응형
Designed by Tistory.