-
[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 두 가지를 제공한다.
두 가지 버전을 제공하는 이유는 새 버전이 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/
📗 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
반응형'Back-End > Express.js' 카테고리의 다른 글
[Express.js] 미들웨어(Middleware) (0) 2021.02.15 [Express.js] CORS(Cross-Origin Resource Sharing) (0) 2021.02.13 [Express.js] Query String, Semantic URL (0) 2021.02.07 [Express.js] 인증/인가(Bcrypt, JWT) (0) 2021.02.04 [Express.js] Routing(express.Router()) (0) 2021.02.02