Sohn SooKyoung

💛💚

최대 1 분 소요

일단 자세한 사항은 이게 되는지 아닌지 먼저 확인을 하고 진행할 예정이다.

Node.js를 이용해서 폴더에 이미지 개수만큼 이미지’들’ 넣기

images 폴더에 이미지가 추가되기만 하면 알아서 사진이 올라갈 수 있게끔하기 위해서 필요하다고 생각함. 얘는 main.js 수정을 통해서 가능하도록 만들 예정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var http = require('http');
var fs = require('fs');
var url = require('url');
const imgFolder = './images'; //데이터 폴더 경로
//__dirname + _url : 경로
//queryData : 쿼리 스트링
//response.end(template)를 해야 출력화면에 코드 작성한 것이 뜬다. template -> .html파일을 복붙한 변수.
 
var app = http.createServer(function(request, response) {
 
  var queryData = request.url;
  if (queryData === '/') {
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + '\\index.html'));
  }
 
  fs.readdir(imgFolder, function(err, filelist) {
    if(request.url === '/images'){
      for (var i = 0; i < filelist.length; i++) {
        fs.readFile(`./images/${filelist[i]}`, function(err, data){
          console.log('picture loading...');
          response.writeHead(200);
          response.write(data);
          response.end();
        });
      }
    }
  });
 
});
var port = 3000
app.listen(port);
console.log(`Server runnin;g at http://localhost:${port}/`);
cs

일단은 fs.readFileSync(__dirname + ‘\index.html’)) 때문에 html과 Node.js가 연결되는 것 같긴 하다. 이때, html의 img src를 폴더 이름으로만 해놓아야 한다. 하지만 여기서 문제는 파일을 읽어서 이미지 개수만큼 웹상에 출력하고 싶은데, 만약에 이미지가 3개가 있다면 3번 반복은 도는 것은 맞지만 이게 결국 마지막 사진이 모든 img란에 추가된다는 것이 문제다.

Node.js에서의 값을 html에서 이용하기

아이디, 비밀번호를 입력하여서 Node.js를 이용하여 사용자가 입력한 아이디와 비밀번호를 보여주는 코드이다. 이를 이용하여서 폴더에 있는 이미지 개수만큼에 해당하는 코드를 js를 통해서 생성하고자 한다. 얘는 index.html 수정을 통해서 가능하도록 만들 예정.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--post.html-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form method="POST">
      <div>
        <label>ID: </label>
        <input type="text" name="id">
      </div>
      <div>
        <label>PWD: </label>
        <input type="password" name="pwd">
      </div> <input type="submit">
    </form>
 
  </body>
</html>
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//postParam.js
var http = require('http');
var url = require('url');
var fs = require('fs');
var querystring = require('querystring');
 
http.createServer(function(req, res){
  console.log(req.method);
  if(req.method == 'GET') {
    fs.readFile('./check/post.html', function(err, data) { res.writeHead(200, {'Content-Type':'text/html'});
    res.end(data);
  });
  } else if(req.method =='POST') {
    req.on('data', function(chunk) {
      console.log(chunk.toString());
      var data = querystring.parse(chunk.toString()); res.writeHead(200, {'Content-Type':'text/html'});
      res.end('id : ' + data.id + ' pwd : ' + data.pwd);
    });
  }
}).listen(3000, function(){ console.log('server running on 3000.'); });
 
cs

위 코드는 https://xzio.tistory.com/1753에서 참고하였음을 밝힙니다.

.js파일을 봤을 때, req.method 는 웹 상에서 받아오면 GET, 출력하려면 POST를 쓰는 것 같다. req.method == ‘GET’이라면 fs.readFile을 통해서 Node.js를 통해서 html의 값이 출력됨을 알 수 있다.(한마디로 Node.js -> html) 거기서 받아온(res.end(‘data’)) data 는 사용자의 아이디와 비밀번호임을 알 수 있다. req.method == ‘POST’라면 GET에서 받아온 data를 req.on을 통해서 사용할 수 있는 것 같다.(한마디로 html -> Node.js) (아직 자세하지는 않음)

댓글남기기

참고