nodeJs 사용법과 Express 프레임워크
nodeJs란?
nodeJS는 자바스크립트이지만 브라우저를 벗어났다는 점에서 주목을 받았습니다. 보통 자바스크립트하면 front end 개발의 전유물이라고 생각했었지만 구글 크롬의 자바스크립트 엔진에 기반해서 서버사이드 플랫폼으로 만들어졌다는 게 큰 특징입니다.
다운로드는 홈페이지[https://nodejs.org/en/]에서 가능합니다. 다운로드 하고 나면 console에서
node -v
를 입력했을 때 버전 정보가 출력되면 정상적으로 설치된 것입니다.
npm init
를 입력하면 기본 정보들을 설정할 수 있습니다. 모두 완료하면 Package.json이라는 파일이 생기는데요. 여기까지가 nodeJs 기본 세팅 방법입니다. 이제부터는 npm을 이용해 express를 설치하고, 서버를 구축해보겠습니다.
먼저 간단하게 Express에 대해 알아보자면 간편하게 웹서버를 구축 할 수 있도록 하는 프레임워크입니다. npm은 패키지를 설치할 수 있게 해줍니다. (python을 아신다면 pip와 같은 기능을 수행합니다)
npm install <패키지명>
위 코드가 의존 패키지를 설치하는 방법인데요. 여기서는 express를 입력해 설치해줍니다.
npm install express
이렇게 하면 여러 파일들이 생기는데, index.js로 들어가 코드를 입력해줍니다.
// index.js
var express = require('express')
var app = express()
app.listen(3000);
// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
res.send('hello world')
})
코드를 살펴보겠습니다. 먼저 express라는 의존패키지를 가져와 변수로 선언해줍니다. app.listen(3000)은 포트를 지정해주는 부분인데요. 여기서는 nodeJs의 기본 포트인 3000으로 지정해주었습니다. 그 아래에는 페이지에 접속하면 ‘hello world’라는 문자열을 출력해주는 코드입니다.
수정내용을 저장한 후, 터미널에서 서버를 실행시켜보겠습니다
node index.js
액세스 허용창이 나오면 허용해주시면 됩니다. 이제 브라우저에서 localhost:3000 을 입력해 접속하면 hello world라고 표시되는 페이지가 나오는 것을 보실 수 있습니다.
여기까지는 단순히 hello world라는 문자를 띄우는 작업이었는데요. 이제부터는 html, css, js와 같은 실제 페이지를 띄워보도록 하겠습니다.
/views 디렉토리를 만들고, index.html 파일을 만들어주세요. index.html에는 이렇게 입력해줍니다.
<html>
<head>
<title>Main</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
Hey, this is index page
</body>
</html>
저장후, index.js 파일을 다음과 같이 수정해봅시다.
// index.js
var express = require('express')
var app = express()
// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
res.sendFile(__dirname + 'index.html')
});
// Port setting
var port = 3000;
app.listen(port, function() {
console.log('server on! http://localhost:' + port);
});
다시 브라우저로 접속해보면 html 페이지가 표시될 겁니다. public 폴더를 만들어 style.css를 만들어 연결하면 레이아웃도 수정이 가능합니다. 다음에 더 자세한 내용을 예제를 통해 알아보도록 하겠습니다.
이 글도 읽어보세요
node.js로 socket.io API 서버 만들기
운영중인 코로나 현황 앱(코로나콕)에서는 실시간 확진자 정보를 제공하고 있다. 실시간 확진자 정보는 1분마다 갱신되는데 이때마다 서버에 새로운 요청(ajax 이용)을 주게 되면 불필요한 트래픽이 발생해 서버에 부하를 줄 수 있다.
node.js: 카카오계정 정보 연동하기
서비스를 만들다 보면 로그인 기능을 만들어야 할 때가 많다. 이 때 OAuth라는 것을 이용하면 카카오, 네이버와 같은 다른 서버의 정보를 가지고 올 수 있다.
실시간 통신 API, WebRTC 알아보기
WebRTC란? WebRTC(Web Real-Time Communications)란, 웹 어플리케이션(최근에는 android 및 ios도 지원) 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어 혹은 텍스트, 파일 같은 데이터를 브라우져끼리 주고 받을 수 있게 만든 기술이다....
댓글