'2019/06'에 해당되는 글 12건

  1. 2019.06.02 Express-generator로 express 간단히 셋팅하기.
  2. 2019.06.01 node js 파일 업로드 multer (field)

Express-generator로 express 간단히 셋팅하기.

Node.js 2019. 6. 2. 08:47

nodejs 다양한 기능을 커스터마이징해 원하는 서버를 구축하거나, 원하는 앱을 만들 수 있습니다. 하지만 이 자유로움 이면에는 다른 서버 프로그램에 비해 약간(?) 많은 작업량이 존재합니다.

이 것을 보완하기 위해 Express-generator가 제공되는 데, 1분 이내에 express 서버의 셋팅이 완료됩니다. Express 서버를 구축할 때 매번 같은 모듈을 다운로드 받고 설치하는 작업을 반복하는 것 보다 Express-generator를 사용하는 것이 좋습니다.

이 문서는 기본 적으로 node js가 설치되어 있다고 가정하고 시작합니다.

 

1. Express-generator 설치

Express-generator는 다른 모듈 처럼 npm을 통해 설치되지만, 터미털(윈도우에서는 커맨드)에서 일반 명령처럼 사용되어야 하므로, 전역에 설치되어야 하며 명령은 다음 과 같습니다.

$ npm i -g express-generator

 

2. 프로젝트 폴더 만들기.

원하는 위치에 프로젝트 폴더를 만듭니다. 저는 nodejs_express_generator 라는 폴더를 만들었습니다. 저는 맥을 사용해 터미널 명령으로 만들었지만, 파인더로 만들어도 되며, 윈도에서는 command, 탐색기 뭐든 사용해도 좋습니다.

 

 

3. express 프로젝트 생성하기.

위에서 만든 폴더의 상위 폴더에서 다음과 같이 터미널 명령을 주면, express가 자동으로 셋팅됩니다. 이 때 자동으로 셋팅되었을 뿐, 관련 모듈들이 모두 설치된 상태는 아닙니다.

$ express <프로젝트폴더명> --view=pug

저는 위에서 ndejs_express_generator라는 프로젝트 폴더를 만들었으므로, [express ndejs_express_generator --view-pug]  라고 입력했습니다.

 

 

4. 관련 모듈 설치.

현재의 상태는 프로젝트 폴더속에 package.json 에 사용할 모듈 목록만 나열되어 있는 상태 입니다. npm i 명령을 주면, packag.json에 설정된 모듈을 모두 최신으로 업데이트를 자동으로 하게됩니다. 이 기능을 통해 필요한 모듈을 설치합니다.

일단 프로젝트 폴더로 이동합니다.

$ cd ndejs_express_generator

이 후 관련 모듈을 설치하기 위해 다음 명령을 입력해 줍니다.

$ npm i

설치된 모습은 아래와 같습니다.

 

5. 실행.

실행 방법은 아래와 같으며, package.json에 설정된 파일을 실행하게 되어 있으며 설정을 보면, /bin/www 파일을 실행하도록 되어 있습니다.

$ npm start

소스를 보면 시작 포트는 3000 번으로 되어 있습니다. 웹브라우저를 통해 http://localhost:3000 에 접속해 다음과 같은 화면을 볼 수 있다면 성공 입니다.

 

 

 

 

 

'Node.js' 카테고리의 다른 글

node.js socket.io 를 이용한 소켓 구현  (0) 2019.06.03
node.js ws 를 이용한 웹소켓 구현.  (6) 2019.06.02
node js 파일 업로드 multer (field)  (0) 2019.06.01
aws node js SMS 보내기  (0) 2019.05.26
node js 파일 업로드 multer  (0) 2019.05.24
Posted by 창업닉군
,

node js 파일 업로드 multer (field)

Node.js 2019. 6. 1. 07:23

예전 multer를 이용한 파일 업로드 구현을 블로그에 게시했는데, 여러개의 필드도 업로드할 일이 있어, 사용해 보는 김에, 블로그에 남깁니다. 예전 페이지에 수정을 할 까도 생각해 봤지만, 따로 두는 것이 좋을 것 같아. (목적 별로 찾을 수 있도록) 블로그를 하나 더 남깁니다.

node js에 express 를 설치하고, multer를 이용해 업로드 처리를 하였습니다.

 

1. multer 설치.

$ npm i multer

 

2. multer 로드.

multer등 필요한 모듈을 아래와 같이 인스턴스화 해 줍니다.

var multer = require('multer');
var path = require('path');

 

 

3. multer를 초기화 합니다.

아래 코드를 참고해 multer를 생성합니다. 별 내용은 없고, 파일명을 지정하는 메소드등, 옵션 정도 설정해 초기화 합니다.
여기서는 업로드 폴더를 upload로 지정했으므로, express 서버를 시작하는 소스가 담긴 폴더에 upload 폴더를 생성해야 합니다.
대체로 "/upload" 폴더가 됩니다.

var multerNo = 1;
const uploader = multer({

  // 저장 위치 결정.
  storage: multer.diskStorage({

    destination( req, file, cb ){
      cb( null, "upload/" );
    },

    filename( req, file, cb )
    {

      const ext = path.extname( file.originalname );
      cb( null, path.basename( file.originalname, ext ) + "_" + multerNo++ + "_" + new Date().valueOf() + ext )

    }

  })


  // 저장 용량설정.
  , limit: { filesize: 5 * 1024 * 1024 }

});

 

 

4. 업로드 라우터 설정.

app.post( '/img', uploader.fields( [{name:"img_0"}, {name:"img_1"}, {name:"img_2"}, {name:"img_3"}, {name:"img_4"}] ), function( req, res, next ) {

  res.json( req.files );
  console.log( req.files );

});

 

 

5. 업로드하는 파일 폼의 html은 다음과 같습니다.

<html>

    <head>
        <title>파일 업로드 테스트를 합니다.</title>
    </head>

    <body>

        <form action="/img" method="POST" enctype="multipart/form-data">

            이미지 0 : <input type="file" name="img_0" /><br>
            이미지 1 : <input type="file" name="img_1" /><br>
            이미지 2 : <input type="file" name="img_2" /><br>
            이미지 3 : <input type="file" name="img_3" /><br>
            이미지 4 : <input type="file" name="img_4" /><br>


            <input type="submit" value="보내기" />


        </form>

    </body>

</html>

 

 

 

 

 

 

 

 

 

 

'Node.js' 카테고리의 다른 글

node.js ws 를 이용한 웹소켓 구현.  (6) 2019.06.02
Express-generator로 express 간단히 셋팅하기.  (0) 2019.06.02
aws node js SMS 보내기  (0) 2019.05.26
node js 파일 업로드 multer  (0) 2019.05.24
node.js nodemailer gmail  (0) 2019.05.24
Posted by 창업닉군
,

티스토리툴바