리셋 되지 말자

[NodeJS] nodejs 그림 불러오기 본문

NodeJS

[NodeJS] nodejs 그림 불러오기

kyeongjun-dev 2020. 9. 16. 00:09

html src

보통 그림을 가져올 때,  html 파일에서 src 태그를 이용해 그림을 불러온다.

파일구조가 위와 같을 때, index.html 파일 기준으로 그림 파일은 './picture/picture.PNG' 경로를 갖게된다. 그렇다면 아래와 같은 html 코드로 불러올 수 있다.

 

그림이 나타나지 않는다. 

위의 그림은 크롬의 개발자 도구의 Source탭에 나타나는 코드이다. 

나타나지 않는 이유는, 서버에 picture.PNG가 없기 때문이다. 무슨 얘기냐면, 저 코드로 picture.PNG를 불러오기 위해서는 url로 접근이 가능해야 한다. 예를 들어 localhost:3000/picture/picture.PNG로 접속했을 때, 해당 그림 파일이 표시되어야 한다. 지금은 그림을 올린 서버가 없다고 가정하고 해결방법을 제시해 본다.

 

요청에 따른 그림파일 응답

  • main.js
var http = require('http');
var fs = require('fs');

var app = http.createServer(function(request, response){
    console.log(request.url);
    
    if(request.url ==='/'){
        response.writeHead(200);
        response.end(fs.readFileSync(__dirname + '\\index.html'));    
    }
});
app.listen(3000);

위의 index.html파일과 main.js파일을 위에서 언급한 디렉토리 구조 상태에서, main.js를 node로 구동시킨 후, localhost:3000으로 접속했을 때의 로그는 아래와 같다. (7번째 줄의 console.log의 결과이다.)

localhost:3000으로 접속했을 때, 요청으로 들어오는 url이 '/' 이고, src 태그를 만나서 <img src>에 입력한 경로대로 다시 요청이 들어오는 것을 확인할 수 있다. 그렇다면 이 요청에 따라서 그림파일을 읽어서 client에 쏴주면(?) 될것 같다. main.js와 index.html 모두 손보자.

 

  • main.js
var http = require('http');
var fs = require('fs');

var app = http.createServer(function(request, response){
    console.log(request.url);
    
    if(request.url ==='/'){
        response.writeHead(200);
        response.end(fs.readFileSync(__dirname + '\\index.html'));    
    }
    if(request.url==='/picture'){
        fs.readFile('./picture/picture.PNG', function(err, data){
            console.log('picture loading...');
            response.writeHead(200);
            response.write(data);
            response.end();    
        });
    }
});
app.listen(3000);

 

  • index.html
<!DOCTYPE html>
    <head>
        <title>my test</title>
    </head>
    <body>
        <h1>test page</h1>
        <img src="/picture" width="200px">
    </body>
</html>

index.html 파일의 <img src> 요청 경로를 간단하게 '/picture'로 수정하였다. 그러면 요청 url로 '/picture'가 들어올 것이고, 그러면 fs.readFile을 이용해 그림 파일을 읽은 뒤 읽은 그림을 client로 전송하도록 구성하였다. 로그는 아래와 같다.

/favicon.ico는 일단 무시하도록 하자.

'/'경로 요청이 들어온 뒤, '/picture'경로 요청이 들어오는 것을 확인할 수 있다.

  • 페이지 접속 결과

그림이 출력되는것을 확인할 수 있다.

저작자표시

'NodeJS' 카테고리의 다른 글

[express] 미들웨어 종류와 실행 순서  (0) 2020.09.23
[NodeJS] nodejs 동기/비동기 테스트  (0) 2020.09.16
[NodeJS] file system을 이용한 동적 페이지 생성 시 동작 방식  (0) 2020.09.15
2장-알아두어야할 자바스크립트 (2-2 프런트엔드 자바스크립트)  (0) 2020.09.04
[nodejs 교과서] 2장-알아두어야할 자바스크립트 (2-1 ES2015+)  (0) 2020.09.04
'NodeJS' Related Articles more
Comments