[포스코x코딩온] 동적form전송, 파일 업로드 실습

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 8. 3. 00:19

728x90

동적 form 전송

실습1. axios get 회원가입

회원가입을 axios의 get 메소드를 이용하여 받기.

작업 순서

practice_index.js을 통해 서버를 설정하고 데이터를 송수신하게 한다.
practice_index.ejs를 통해 사용자가 클릭한 데이터를 송신하고 데이터를 수신하여 화면에 띄운다.

코드

practice_index.js
axios 방식을 사용하고 get 방식이니 req.query를 사용한다.

const express = require("express");
const app = express();
const PORT = 8000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.set("view engine", "ejs");
app.set("views", "./views");

app.get("/", (req, res) => {
  res.render("practice_index");
});

//axios 방식으로 받기
app.get("/axios", (req, res) => {
  console.log("back", req.query);
  res.send(req.query);
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

practice_index.ejs
이름, 성별, 생년월일에 대한 value값은 form.(name).value를 통해 가져올 수 있지만 checkbox 타입은 select변수를 새로 지정하여 변수 안에 Array를 통해 checked된 값들을 배열로 만들어서 전달하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h1>get으로 정보받기</h1>
    <form name="register">
      이름<input type="text" placeholder="id" name="id" />
      <fieldset>
        <legend>성별</legend>
        <input type="radio" name="gender" id="gender" value="남성" />남자
        <input type="radio" name="gender" id="gender" value="여성" />여자
      </fieldset>
      <br />
      <fieldset>
        <legend>생년월일</legend>
        <select name="year" id="year">
          <% for(let i= 1990; i <=2023; i ++){ %>
          <option value="<%= i%>"><%= i%></option>
          <% } %></select
        >년
        <select name="month" id="month">
          <% for(let i= 1; i <=12; i ++){ %>
          <option value="<%= i%>"><%= i%></option>
          <% } %> ></select
        >월
        <select name="day" id="day">
          <% for(let i= 1; i <=31; i ++){ %>
          <option value="<%= i%>"><%= i%></option>
          <% } %></select
        >일
      </fieldset>
      <br />
      <fieldset>
        <legend>관심사</legend>
        <input type="checkbox" value="여행" name="hobby" id="hobby1" />여행
        <input type="checkbox" value="패션" name="hobby" id="hobby2" />패션
        <input type="checkbox" value="음식" name="hobby" id="hobby3" />음식
      </fieldset>
      <br />
      <button type="button" onclick="axiosGet()">회원가입</button>
    </form>
    <div class="result"></div>
    <script>
      const resultBox = document.querySelector(".result");
      function axiosGet() {
        console.log("axios get");
        const form = document.forms["register"];
        const select = Array.from(
          form.querySelectorAll('input[name="hobby"]:checked')
        ).map((checkbox) => checkbox.value);
        const data = {
          id: form.id.value,
          gender: form.gender.value,
          year: form.year.value,
          month: form.month.value,
          day: form.day.value,
          hobby: select,
        };
        axios({
          method: "GET",
          url: "/axios",
          params: data,
        }).then((res) => {
          console.log(res);
          const hobbyText =
            res.data.hobby.length > 0
              ? res.data.hobby.join(", ")
              : "관심사 없음";
          resultBox.textContent = `회원가입 완료!! ${hobbyText}을 좋아시는 회원님의 이름은 ${res.data.id}이고 성별은 ${res.data.gender}이시고 ${res.data.year}년${res.data.month}월${res.data.day}일에 태어나셨습니다.`;
        });
      }
    </script>
  </body>
</html>

실행결과

실습2. axios post 회원가입

id, pw를 변수로 저장해두고, 로그인하기
axios의 post 이용
로그인 성공시 파란 글자, 실패시 빨간 글자

작업 순서

practice1_index.js를 통해 서버를 설정하고 데이터를 송수신하게 한다.
practice1_index.ejs를 통해 로그인하려는 데이터를 송신하고 데이터를 수신했을 때 저장된 변수와 동일하면 로그인 성공, 다르면 로그인 실패가 뜨게 했다.

코드

practice1_index.js
post 방식이라 req.body를 사용

const express = require("express");
const app = express();
const PORT = 8000;

app.use(
  express.urlencoded({
    extended: true,
  })
);
app.use(express.json());

app.set("view engine", "ejs");
app.set("views", "./views");

app.get("/", (req, res) => {
  res.render("practice1_index");
});

app.post("/axios", (req, res) => {
  console.log("back", req.body);
  res.send(req.body);
});

app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

practice1_index.ejs
correctID와 correctPW 변수에 값을 지정해 두어서 받아오는 데이터와의 동일여부를 판단하여 로그인 성공과 실패를 구분지었다. (if ~ else if 사용)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h4>로그인하기</h4>
    <form name="register">
      <fieldset>
        <legend>로그인</legend>
        <label for="id">아이디</label>
        <input type="text" name="id" />
        <label for="pw">비밀번호</label>
        <input type="password" name="pw" />
      </fieldset>
      <button type="button" onclick="axiosPost()">로그인하기</button>
    </form>
    <div class="resultBox"></div>
  </body>
  <script>
    const correctID = 123;
    const correctPW = 456;

    const resultBox = document.querySelector(".resultBox");
    function axiosPost() {
      console.log("axios Post");
      const form = document.forms["register"];
      const data = {
        id: form.id.value,
        //id: document.querySelector("#id.").value; 도 가능하다.
        pw: form.pw.value,
      };
      axios({
        method: "POST",
        url: "/axios",
        data: data,
      }).then((res) => {
        if ((`${res.data.id}` == correctID) & (`${res.data.pw}` == correctPW)) {
          resultBox.textContent = "로그인에 성공하였습니다.";
          resultBox.style.color = "blue";
        } else if (
          (`${res.data.id}` != correctID) &
          (`${res.data.pw}` == correctPW)
        ) {
          resultBox.textContent = "아이디가 틀립니다.";
          resultBox.style.color = "red";
        } else if (
          (`${res.data.id}` == correctID) &
          (`${res.data.pw}` != correctPW)
        ) {
          resultBox.textContent = "비밀번호가 틀립니다.";
          resultBox.style.color = "red";
        } else {
          resultBox.textContent = "아이디, 비밀번호를 확인해주세요";
          resultBox.style.color = "red";
        }
      });
    }
  </script>
</html>

결과

https://github.com/DongHo-Kang/KDT-8-web/tree/cb306e36b92eccb5efc93c4504552c0872ce9e66/230801_form_dynamic

파일업로드

실습1.

회원가입 일반 폼 전송에 파일 업로드 연결하기
업로드된 파일을 "파일_아이디.확장자"로 저장하기
업로드된 이미지 보여주기

작업순서

위에 작업과 동일하게 진행
파일명을 저장할 때 입력된 아이디를 써야 해서 로직의 순서를 회원가입 버튼을 누르면 입력된 value들을 저장하고 저장된 value들 중 id를 추출하여 파일명을 저장하였고, 저장된 파일을 불러옴으로써 화면에 띄웠다.

코드

practice_index.js
코드를 살펴보면 기본 세팅은 동일하지만 파일 접근 및 경로 세팅이 post함수 안으로 들어가 있는 것을 볼 수 있다. 이렇게 함으로써 먼저 post에 있는 req.body를 통해 입력된 데이터들을 불러오고 거기서 id를 추출하여 파일을 저장하게 하였다. (이 로직을 구현하려고 코드를 많이 고쳤다... 막, post를 두번도 써보고 했지만, 결국 단순하게 함수 안에 넣으면 되는 것이었다...)

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

//view enigine
app.set("view engine", "ejs");
app.set("views", "./views");

//정적 파일 설정
app.use("/uploads", express.static(__dirname + "/uploads"));
app.use(express.json());

app.get("/", (req, res) => {
  res.render("practice_index");
});

app.post("/signUp", (req, res) => {
  console.log("back", req.body);
  console.log("id", req.body.id);
  res.send(req.body);
  const id = req.body.id;
  //파일 접근 및 경로 세팅
  const uploadDetail = multer({
    storage: multer.diskStorage({
      destination(req, file, done) {
        done(null, "uploads/");
      },
      filename(req, file, done) {
        const ext = path.extname(file.originalname);
        const filename = `${path.basename(file.originalname, ext)}_${
          req.body.id
        }${ext}`;
        done(null, filename);
      },
    }),
  });

  app.post("/signUpFile", uploadDetail.single("profile"), (req, res) => {
    console.log(req.file);
    const responseObj = {
      data: req.body,
      file: req.file,
    };
    res.send(responseObj);
  });
});


//server open
app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

practice_index.ejs
여기서도 입력된 값을 먼저 전달받고 다시 파일을 전달받기 위해 .then()을 두번 사용하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h3>개인 정보</h3>
    <form name="register">
      아이디: <input type="text" name="id" id="id" /> <br />
      비밀번호: <input type="password" name="pw" id="pw" /><br />
      이름: <input type="text" name="name" id="name" /><br />
      나이: <input type="number" name="age" id="age" /><br />
      프로필 사진: <input type="file" name="profile" id="profile" /><br />
      <button type="button" onclick="resetForm()">리셋</button>
      <button type="button" onclick="signUp()">회원가입</button>
      <div class="result"></div>
    </form>
    <script>
      let resultBox = document.querySelector(".result");

      function signUp() {
        const form = document.forms["register"];
        const data = {
          id: form.id.value,
          pw: form.pw.value,
          name: form.name.value,
          age: form.age.value,
        };

        const file = document.getElementById("profile");
        console.log(file.files[0]);

        axios({
          method: "POST",
          url: "/signUp",
          data: data,
        })
          .then((res) => {
            console.log("file", res);
            const formData = new FormData();
            formData.append("id", res.data.id);
            formData.append("profile", file.files[0]);
            return axios({
              method: "POST",
              url: "/signUpFile",
              data: formData,
              headers: {
                "content-type": "multipart/form-data",
              },
            });
          })
          .then((res) => {
            console.log("finish", res);
            console.log("img", res.data.file.path);
            resultBox.innerHTML = `<div><img src=${res.data.file.path} ></div>`;
          });
      }
    </script>
  </body>
</html>

결과

이걸 성공했을 때 되게 뿌듯했다...! 어제부터 노트북이 급격히 느려져서 커서 하나 옮기는데도 10초씩 걸렸는데 그걸 참고 해내서 더 기뻤다!!!

확실히 오랫동안 생각하고 계속 도전하다 보니 결국 성공할 수 있다는 것을 느꼈고 그 와중에 예상치 못한 지식들도 많이 얻을 수 있다는 것을 한번 더 알게 되었다.

https://github.com/DongHo-Kang/KDT-8-web/tree/cb306e36b92eccb5efc93c4504552c0872ce9e66/230802_file_upload

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

[포스코x코딩온] 데이터베이스(SQL문(DDL,DML,DCL) (0)	2023.08.04
[포스코x코딩온] 데이터베이스(DBMS 기본, MySQL 설치) (0)	2023.08.03
[포스코x코딩온] 파일업로드(multer, Axios 동적 파일 업로드) (0)	2023.08.02
[포스코x코딩온] 동적 form 전송(비동기 http 통신, ajex, axios, fetch, JSON) (0)	2023.08.02
[포스코x코딩온] Form 전송(body-parser, get, post, form validation, nodemon) (0)	2023.08.01

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

동적 form 전송

파일업로드

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

동적 form 전송

파일업로드

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바