Node.js Express - 이미지 불러오기

업로드한 이미지를img src 태그로 출력해 볼게요.img src="폴더/파일명"으로 하면 출력이 안될 거예요.먼저 노드에서 정적 파일을 제공해 줘야 됩니다.저는 upload 폴더 안에 이미지를 업로드했습니다. app.js//imgapp.use(express.static('upload')) index.ejs  logo.png랑 1671157986921_image.png는 동일한 이미지입니다.제일 첫 페이지 메인 섹션에 이미지 두 개만 출력했습니다.  귀여운 루피가 두 마리!!

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms

Node.js Express - 파일 업로드

노드에서 폼데이터와 Multer를 이용하여 파일 업로드를 진행해 볼게요.하면서 파일 이름이 중복되면 안 되니까 파일 이름도 같이 바꿔보도록 할게요.. Multer 모듈을 먼저 설치해줍니다. npm install multer 하고 저는 업로드하는 Router를 따로 만들어 줬습니다. 프로젝트 구조  index.ejs에 파일 업로드 폼 추가 파일 업로드  upload.jsvar express = require('express');var router = express.Router();//multervar multer = require('multer');const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(n..

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms

Node.js Express - JQuery 사용하기

https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com npm jquery 문서 노드에서 자바스크립트 라이브러리 jquery를 사용해 봐요.먼저 npm으로 jquery를 설치합니다.npm install jquery 설치 완료 ..

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms

Node.js Express - Routing

라우팅은 HTTP 요청에 대한 응답하는 방법을 결정하는 것입니다.웹 페이지를 확장시켜 나가면서 코드가 길어지면 유지 보수하기가 상당히 까다롭습니다.그래서 노드에서 라우터를 분리하여 개발하는 것이 효율적입니다.분리하여 어떻게 모듈화할지는 개발자 나름입니다. 프로젝트 구조 router - index.js / result.jsrouter 폴더를 만들어서 라우터를 분리했습니다. index.js var express = require('express');var router = express.Router();router.get('/', function (req, res) { res.render('index');});module.exports = router; result.js var express = require..

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms

Node.js Express - POST Method 전송

이전에 노드에서 GET 방식으로 메소드를 전달했는데파라미터가 URL에 노출되지 않도록이번엔 폼에서 POST 방식으로 메소드를 전달해 볼게요. 결과 화면  파라미터가 URL에 노출되지 않습니다.index.ejs에 저는 post로 보내는 폼을 하나 더 추가해 줬습니다.  익스프레스 메인페이지 입니다. 메소드를 GET으로 보내기 값 1 : 값 2 : 메소드를 POST로 보내기 값 1 : 값 2 :  POST로 값을 전송할 땐 HTTP 패킷의 Request Body 영역의 값을 가져와야 합니다.그러기 위해선 Express의 내장 함수를 사용하거나외부 라이브러리 B..

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms

Node.js Express - Bootstrap 사용하기 + 헤더 분리

이전 게시글에서 ejs를 사용했는데 view로 ejs를 사용하면서 bootstrap을 적용해 볼게요.npm install bootstrap 해당 명령어로 노드에 부트스트랩을 설치합니다.  package.json에 종속성이 알아서 추가됩니다.  js 파일에서 부트스트랩을 설정해 줍니다.// bootstrapapp.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // bootstrap JSapp.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // bootstrap CSS 페이지에 적용시켜줍니다.// header에 추가 // foote..

• format_list_bulleted JavaScript/Node.js
• · 2025. 2. 18.
• textsms