Sohn SooKyoung

💛💚

최대 1 분 소요

1차적인 html/css틀 만들기

See the Pen project 3 by sohnsookyoung (@sooking87) on CodePen.

Node.js로 사진 불러오기: readFile()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http = require('http')
var fs = require('fs')
 
fs.readFile('./images/sample2.jpg', function(err, data) {
  if (err) throw err // Fail if the file can't be read.
  http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<html><body><img width="300px" height="400px" src="data:image/jpeg;base64,')
    res.write(Buffer.from(data).toString('base64'));
    res.end('"/></body></html>');
    //res.end(data) // Send the file data to the browser.
  }).listen(3000)
  console.log('Server running at http://localhost:3000/')
})
 
cs

fs.readFile(경로, function(err, data))

  • 경로에서 읽은 파일을 data로 이동시켜서 브라우저로 값을 보냄

res.writeHead(statusCode, statusMessage, headers)

  • statusCode: 숫자 유형의 상태코드, 200-정상, 404-에러
  • statusMessae: **Content-Type** 이 **text/html** 이라는 것을 알려줌
  • header: 함수, 배열, 문자열 자리

res.write()

  • 괄호 안의 컨텐츠를 보낸다.

res.end()

  • 콘텐츠 출력을 완료한다.

폴더에서 파일 리스트 가져오기: readdir()

1
2
3
4
5
6
7
const testFolder = './images';
const fs = require('fs');
 
fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);
  console.log(filelist.length);
})
cs

fs.readdir(경로, function(err, filelist))

  • filelist안에 폴더 경로에 있는 파일들을 모두 리스트 형식으로 출력한다. .length를 통해서 개수도 알 수 있다.

폴더에서 경로 가져오기: path.basename()

1
2
3
4
5
6
7
8
var path = require('path');
var fileName = "./images/sample.jpg";
var dirName = path.dirname(fileName);
var baseName = path.basename(fileName);
var extName = path.extname(fileName);
 
console.log(path);
console.log("디렉토리: %s, 파일이름: %s, 확장자: %s", dirName, baseName, extName);
cs

앞에서 readdir() 을 통해서 파일 리스트를 가져온 후 filelist[i] 를 통해서 하나씩 readFile() 을 이용하여 respnse.write 를 하면 되는 줄 알았으나, readdir 에는 파일의 경로가 필요하지만 readFile 을 통해서 정확한 경로가 들어가지 않는 것 같았다. 구체적으로 ./images/undefined라고 뜬다. 그래서 path.basename 을 통해서 파일의 경로를 찾아서 readFile() 에 넣을 예정이다.

수정할 사항

  1. 보다시피 화면 크기에 따른 배치를 진행하지 않았다.
  2. Node.js를 통해서 images 폴더에 사진을 추가만 하면 알아서 출력될 수 있도록 해야된다. 그러면 파일 경로에 해당하는 매개변수를 어떻게 처리해야될지도 알아봐야겠다.
  3. 2번의 연장선에서 사진이 추가될 때마다 사진을 원하는 모양, 위치에 추가시킬 수 있도록 해야겠다.

댓글남기기

참고