[새싹x코딩온] 풀스택 개발자 부트캠프 과정 5주차-1 회고 | 동적 폼 처리, nodejs multer

동적 데이터처리

AJAX

자바스크립트를 이용해 클라이언트와 서버간 데이터를 주고 받는 비동기 통신 방법중 하나이며 자바스크립트에 내장되어있지않아 외부 라이브러리(Jquery)를 불러와야 사용이 가능하며 Promise 기반이 아닙니다

$.ajax({
url: '/ajax', //요청경로
type: 'GET', //요청방식
data: data, // 요청으로 보낼 데이터
success: function(data){
	console.log(data);
    
}

Axios

Node.js 와 브라우저를 위한 Promise API를 활용 비동기 HTTP 통신이 가능하며 return이 Promise 객체로 들어오며 1차 then 으로 들어올때 들어오는 데이터의 형태를 확인 하고 2차 then에 넘겨 사용하는 방법이 존재합니다

 //Axios CDN 필수
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
axios({
          method: "post",
          url: "/data",
          data: data,
        }).then((res) => {
          console.log(res.data);
        });

axios는 method, url, data 등 3가지의 필수 지정값이 존재하는데 method는 많은 요청 명령어가 존재합니다

request, get, delete, head, options, post, put, patch등 이 있고 명령어 메소드 사용시 url, method, data 속성을 별도로 지정할 필요가 없으며 메소드의 응답처리에 관한 처리는 then과 catch를 통해 처리할 수 있습니다 then은 성공했을 경우, catch는 실패 했을 경우를 뜻합니다

 

 

Fetch

ES6부터 들어온 JavaScript 내장 라이브러리 이며 Promise 기반으로 동작하는 비동기 통신 방법중 하나입니다 ES6에 추가된 자바스크립트 내장 라이브러리 이므로 별도의 라이브러리를 외부에서 불러올 필요가 없으며 Axios와 같은 Promise 기반입니다 상대적으로 Axios에 비해 기능이 부족하다는것이 단점이긴 하나 간결하고 직관적인 구문을 갖고 있습니다

fetch(`/fetch?name=${data.name}&gender=${data.gender}`)
          .then(function (res) {
            console.log(res);
            //서버에서 넘어온  문자열을 뽑아내기위해 메소드 사용
            // text() 객체에서 텍스트 본문을 뽑아내기 위해
            return res.json();
            // json() 객체에서 오브젝트 본문을 뽑아내기 위해)
          })
          .then((txt) => {
            console.log(txt);
            resultBox.textContent = `get / fetch 요청완료!! ${txt.name} 의 성별은 ${txt.gender}입니다`;
            resultBox.style.color = "limegreen";
          })
          .catch((err) => {
            console.log(err);
          });

 

 

 

Node.JS multer

멀터는 nodejs 에서 파일 업로드를 처리하기위해 많이 사용되는 미들웨어입니다 특히 express.js 와 함게 사용되며 멀티파트 폼 데이 형식의 데이터를 처리할 수 있도록해줍니다 멀터는 이미지 외에도 다양한 형식의 파일을 업로드를 지원합니다

 

멀터는 2가지 저장방식을 제공하는데요 하나는 디스크저장(서버 디스크에 저장), 두번째는 메모리 저장(버퍼로 메모라에 저장합니다) 

 

기본적인 사용방법

const express = require('express');
const multer = require('multer');
const path = require("path");
const app = express();
const PORT = 8080;

// 파일이 저장될 경로와 파일 이름 설정
const storage = multer.diskStorage({
  destination: (req, file, done) => {
    done(null, 'uploads/'); // 파일이 저장될 폴더 설정(이미 존재해야함 폴더가)
  },
  filename: (req, file, done) => {
  
  // extname 파일의 확장자 가져오기
  const extension = path.extname(file.originalname);
  
    done(null,path.basename( `${Date.now()}-${file.originalname}`+extension)); // 파일 이름 설정
  },
});

// multer 인스턴스 생성
const upload = multer({ storage: storage });

// 단일 파일 업로드 처리
app.post('/upload', upload.single('myFile'), (req, res) => {
  try {
    console.log(req.file); // 업로드된 파일 정보 출력
    res.send('파일 업로드 성공');
  } catch (error) {
    res.status(400).send('파일 업로드 실패');
  }
});

// 서버 실행
app.listen(PORT, () => {
  console.log('서버가 8080번 포트에서 실행 중입니다');
});

 

멀터는 기본적으로 다양한 메서드를 지원하지만 저장될 경로, 파일의 저장형식을 기본적으로 직접 셋팅을 해야 정상적으로 사용 할 수 있습니다 위 예제에선 파일을 받아온 뒤 확장자를 따로 받아와 최종 업로드시 확장자를 직접 붙여 정상적으로 사용 할 수 있도록 저장하는 예제입니다

 

멀터에서는 다양한 입력방식을 지원하는데요 아래의 예제에서 알아보겠습니다

하나의 폼에서 하나의 파일만 받기

app.post("/upload", uploadDetail.single("userfile"), (req, res) => {}

 

하나의 폼에서 여러개 파일 받기

app.post("/uploads/array", uploadDetail.array("multifiles"), (req, res) => {}

 

다중폼을 이용한 여러개 파일 받기

app.post("/uploads/fields", uploadDetail.fields([{ name: "file1" },{ name: "file2" },{ name: "file3" },]),
  (req, res) => {}

 

각각 코드에서 입력을 받는 방식이 조금씩 틀려지게 됩니다 우선 하나의 폼에서 하나의 파일을 받을땐 uploadDetail(멀터객체)에서 .single("input name") 으로 받아올 수 있습니다 기본적으로 input file은 많은 데이터를 포함하고있기때문에 get 방식으론 받아올 수 가없기때문에 반드시 post 방식으로 받아야합니다

 

그리고 두번째 하나의 폼에서 여러개 파일을 업로드를 받으려면 uploadDetail(멀터객체).array("input name") 으로 받아 올 수 있습니다 메서드에서 유추할 수 있듯 배열로 업로드된 데이터가 들어오게됩니다 물론 파일 확장자 및 이름을 지정하는 방식도 다르게 직접 설정하여야합니다

 

세번째 여러개의 폼에서 각가 파일 받기 다중폼을 이용하려면 uploadDetail(멀터객체).fields 메서드로 받아 올 수 있는데요 메서드의 메개변수로는 객체배열이 들어가게됩니다 [{ name: "input name"},{ name: "input name" }] 파일을 업로드 받게되면 서버측에선 똑같이 객체배열로 반환됩니다