아직 초보이며, 서버에 대한 기초지식이 부족한 관계로, 처음에는 가볍게
3계층 구조를 시도해 볼 생각입니다.
client - was - dbms 로 1차 구현 입니다.
express 를 이클립스에 올리기를 어제 실패했습니다.
보통 인터넷에 알려주는 방법은 npm을 사용하는데, 아직은 방법을 이해하지 못했습니다.
조금 더 알아보았고, 결국은 eclipse용 express를 설치하는데 성공했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//express 사용방법. package.json이 선언되어 있어야 한다.
var express = require('express');
var app = express();
var route = require('./router/main.js')(app); //라우트 폴더의 js파일을 인식시키게 하는 코드,(app)로 인자값 전달.
app.set('views',__dirname+'/views');
app.set('view engine','ejs');
app.engine('html',require('ejs').renderFile);
app.use(express.static('public')); //css파일,이미지,동영상등 변하지 않는 리소스들을 보관하는 폴더엔 public 내부를 인식.
var server = app.listen(8081, function(){
console.log('Express erver ist on at 8081');
});
//app.get('/',function(request,response){
// response.send('Hello World');
//})
//라우터 사용방법. 라우터란 jsp의 mvc패턴의 controller와 비슷한 기능을 제공하는 기능이다.
//올바른 코드를 위해서는, 라우터 코드를 따로 폴더에 저장한다.
|
express 에서는기존의 Node의 서버 실행과는 조금 다른방식으로, 변수에 express를 불러와서,
그 변수를 이용하여 서버를 세팅하고, 구동합니다. 위의 코드에서 app 라는 variable이 그 역활을 담당합니다.
서버의 오픈은 11번 라인입니다.
이후 서버로부터 사용자의 요청을 받기 위해서는, 라우터가 필요합니다.
라우터는 JSP에서 controller를 부분적으로 담당하는 기능입니다.
클라이언트로부터 들어온 요청대로 경로를 뿌려주는 기능입니다.
아래 15번 라인이 라우터의 예시입니다. 메인 소스에 지저분하게 얹히는것이 싫기 때문에, 코드를 따로 뺍니다.
./router/main.js 에 라우터를 설정합니다.
1
2
3
4
5
6
7
8
9
|
module.exports = function(app)
{
app.get('/',function(request,response){
response.render('index.html');
});
app.get('/about',function(request,response){
response.render('about.html');
});
}
|
이로써 따로 빼낸 라우터가 준비되었습니다. 처음의 4번 라인에서, 방금 만든 코드를 인클루드 합니다.
이제 html들을 준비합니다.
만든 html파일들을 따로 보관하기 위해,
./views/ 안에 html들을 저장했습니다.
라우터 코드에 html들의 이름이 적혀져 있습니다. 하지만 정확한 html의 실행 경로는 설정 되어 있지 않기 때문에, 제일 상단의 6번 라인을 선언합니다. 이로써views 는 ./views/ 로 설정이 된다 합니다.
css, 정적인 이미지나, 동영상 등은 정적이므로, node에서 여러번 생성 할 필요가 없습니다.
그런 이유에서 상기의 리소스들을 static화를 시킵니다.
css 파일을
./public/css/style.css 위치에 지정했습니다.
메인클래스에서 static선언과, 위치를 알려주는 코드는 9번 라인 입니다.
이제 html에서는
1
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
를 헤더에 선언하면, 적용이 된 css를 볼 수 있게 됩니다.
이정도 까지..
보고 배운, 출처 블로그 : https://velopert.com/294
