-
Node.js로 사칙연산 계산기를 만들어봐요 - 2편(첫 화면 띄우기)프로그래밍 언어/Node.js(노드) 2018. 11. 11. 16:37
1편에서는 Node로 서버 통신하는 부분까지 포스팅 했습니다.
저번 포스팅에 이어서 app.js를 아래와 같이 작성하겠습니다.
var express = require('express')var app = express()var bodyParser = require('body-parser')var router = require('./router/index')app.listen(3000, function() {console.log("start! express server on port 3000");});app.use(express.static('public'))app.use(bodyParser.json())app.use(bodyParser.urlencoded({extended:true}))app.set('view engine', 'ejs')app.use(router);순서대로 설명하자면, express와 app은 설명했으니 body-parser부터 설명하겠습니다.
body-parser는 핸들러로 들어오기 전에 requestBody를 미들웨어에서 파싱해주는 기능을 수행합니다.
router는 Express 모듈의 Router 입니다. 이 기능을 활용하면 기능들을 모듈별로 나눌 수 있습니다(모듈별 분리). 미들웨어로서의 역할을 수행할 수 있죠. 해당 경로에 Router를 사용하고 있습니다.
express.static은 해당 경로의 폴더 밑의 파일들을 정적인(static) 파일로 만들어 줍니다. 나중에 public이라는 폴더 밑에 정적인 파일로 쓸 파일들을 넣어줄거에요.
bodyParser.json은 이름처럼 request를 json형태로 리턴해줄 수 있습니다.
bodyParser.urlencoded({extended:true})는 중첩된 객체를 json형태로 변환해줄 수 있습니다.
예를 들면, 아래같은 식이죠. 출처: StackOverFlow
app.set('view engine', 'ejs')는 사용할 템플릿 엔진이 ejs라는 것입니다.
마지막에 선언한 app.use(router)는 router를 사용하겠다는 뜻입니다.
이제 router를 사용하겠다고 밝힌 경로로 따라가서 router로 역할을 수행할 js파일을 만들겠습니다. router라는 폴더 밑에 index.js 파일을 만들어주세요.
index.js는 아래처럼 만들어주세요.
var express = require('express')var router = express.Router()var main = require('./main/main')var calculator = require('./calculator/calculator')router.use('/main', main);router.use('/calculator', calculator);module.exports = router;제일 위의 코드 2줄은 express의 router를 사용하겠다는 뜻입니다.
main이라는 모듈에서 첫 화면이 될 부분을 만들거에요. 계산기를 팝업창으로 띄워줄 화면이 되겠죠.
calculator에서는 이 포스팅의 핵심인 계산기를 만들어줄거에요.
router.use('/main', main) 은 /main로 url을 호출하면 main이라는 모듈을 사용하겠다는 뜻입니다. 예를 들어, localhost:3000/main 이라고 선언하면 main 모듈을 사용합니다.
똑같이 /calculator로 호출하면 calculator 모듈을 사용할 수 있습니다. 하지만, 해당 모듈 안에는 default 경로(/)는 받지 않을 거라서
localhost:3000/calculator해도 아무것도 뜨진 않고 팝업 url을 호출해야 화면이 나오게 합니다.
module.exports를 통해 외부에서도 해당 모듈을 호출할 수 있도록 합니다.
다음은 계산기 팝업창을 띄워 줄 첫 화면을 만들어야겠죠? router/main이라는 폴더 밑에 main.js를 만들어보겠습니다.
localhost:3000/main이라고 하면 main.js를 향하도록 할 거에요.
main.js는 이렇게 작성해주세요.
var express = require('express')var router = express.Router()var path = require('path')router.get('/', function(req, res){console.log('main.js connect success');});module.exports = router;path는 경로를 이동을 위함이에요.
router.get을 통해 restAPI에서 get 방식으로 호출하는 것입니다. terminal로 main.js에 잘 매핑되었는지 확인해봤는데요.
그리고, 아까전 index.js에서 calculator부분은 아직 구현하지 않았기 때문에 서버가 안 올라가니까 주석처리하고 해보세요. 아래처럼 잘 나오면 잘 연동되었다는 뜻입니다!
그리고 코드 한 줄을 추가해서 이제 화면이 될 html파일을 불러보도록 할게요.
var express = require('express')var router = express.Router()var path = require('path')router.get('/', function(req, res){console.log('main.js connect success');res.sendFile(path.join(__dirname, "../../public/main.html"));});module.exports = router;res.sendFile을 통해 response로 지정한 파일로 향하도록 하겠습니다. 정적인 파일을 사용할 수 있도록, public이라는 폴더를 만들기로 했었죠?(path.join은 경로를 합쳐서 사용할 수 있게 만들어줍니다.)
public 폴더를 만들어서 main.html을 만들겠습니다.
main.html
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>main.html</title></head><body><button class="cal">계산기</button><script>document.querySelector('.cal').addEventListener('click', function(){openCalculator('http://localhost:3000/calculator/calculatorPop');})function openCalculator(url){var w = '400';var h = '257';var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ?document.documentElement.clientWidth : screen.width;var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ?document.documentElement.clientHeight : screen.height;var left = ((width / 2) - (w / 2)) + dualScreenLeft;var top = ((height / 2) - (h / 2)) + dualScreenTop;window.open(url, "계산기", 'width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)}</script></body></html>계산기 버튼을 만들고 해당 버튼을 클릭하면 openCalculator 함수를 탑니다.
함수 안에 적힌 코드들은 스크린의 중앙에 위치시키기 위함입니다. 적힌 url을 통해 calculator 모듈의 calculatorPop을 호출합니다.
calculator/calculatorPop을 호출하게 되는 것이죠.
window.open은 팝업창을 띄우는 javaScript의 메서드입니다.
그렇게해서 localhost:3000/main으로 접근하면 아래와 같은 화면이 나옵니다!
아직은 아무것도 없어서 팝업창이 위처럼 뜹니다.
포스팅이 길어져서 이번 편은 여기서 마치겠습니다!
'프로그래밍 언어 > Node.js(노드)' 카테고리의 다른 글
Node.js로 사칙연산 계산기를 만들어봐요 - 3편(계산기 완성하기) (0) 2018.11.11 Node.js로 사칙연산 계산기를 만들어봐요 - 1편(환경설정) (0) 2018.11.05
