승밈

데이터를 DB에서 가져와서 검색 조건에 맞게 조회하는 화면을 구상하다보면 조건에 맞춰서 다시 조회를 해야하나 싶지만 페이지 렌더링시 전체 데이터 조회, 그 후 Filter() 함수 를 사용하여 필터링하면 DB에 다시 조회할 필요가 없습니다. Filter() 함수를 사용하여 DB에서 가져온 데이터들을 검색조건 적용시키는 방법입니다. 저는 filesData라는 배열에 검색 키워드가 filename 또는 keyword에 포함되면 일치하도록 해놨습니다. 값이 포함된지 체크하는 함수는 기존에는 indexOf()를 사용했지만, ES6 문법에서 추가된 includes() 함수를 사용했습니다. includes() 함수는 대소문자를 구별합니다. 대소문자 상관없이 하고싶으신분들은 toLowCase()나 toUpperCas..

React에서 FormData()를 사용하여 File 및 Json,Array 데이터 넘기기에 이어 Server단 코드 입니다. https://seung-min.tistory.com/44 [React] FormData()사용 file 및 json, array 데이터 보내기 위 사진과 같이 파일과 파일에 해당하는 파일명, 설명, 태그 등 사용자에게 입력 받은 값을 서버로 전송해야할 일이 있습니다. file 만 보내는글은 많지만 json까지 같이 보내는건 많지 않아서 작 seung-min.tistory.com 넘어온 데이터를 보면 다음과 같습니다. 위의 결과에서 보면 Json,array,File이 한번에 넘어온걸 볼 수 있습니다. const multer = require("multer"); const fs =..

위 사진과 같이 파일과 파일에 해당하는 파일명, 설명, 태그 등 사용자에게 입력 받은 값을 서버로 전송해야할 일이 있습니다. file 만 보내는글은 많지만 json까지 같이 보내는건 많지 않아서 작성해봅니다. 일반적으로 axios를 사용하여 body 부분에 json 형식으로 추가해서 보냈지만 file전송을 위해 FormData()를 사용했을 경우 body 부분에 json 형식의 데이터를 보낼 수 없습니다. formData에 append()를 사용하여 file 및 json, array를 보내는 방법은 다음과 같습니다. /*FormData 변수 */ const [file, setFile] = useState(null); // 파일 저장 할 State //파일 추가 const handleChange = (fi..

Node.js에서 PDF 파일 만들기 입니다. ( 수작업으로 노가다 해야하는 부분이라서 틀 만들어서 올립니다.) * 이미지 크기 208 * 117 로 resize 필요 * 값이 5개가 넘어갈 경우 자동으로 다음 페이지 생성 * 데이터가 1~4개 일 경우 남은 칸은 줄긋기 X 모듈 설치 npm install pdfkit A4 용지 크기로 만들어 놨습니다. 커스텀이 필요한 경우 주석을 달아 놨으니 아래의 링크 보고 수정하시면 됩니다. https://pdfkit.org/docs/getting_started.html Getting Started with PDFKit Getting Started with PDFKit Installation Installation uses the npm package manager..

Cookie를 사용한 아이디 기억하기 기능 구현 모듈 설치 npm install reack-cookie useCookies 선언 import { useCookies } from "react-cookie"; JS 부분 /*====== Cookie에 저장하여 사용할 값 선언======*/ const [userid, setUserid] = useState(""); /*============================*/ /*====== Cookie 관련 선언======*/ const [cookies, setCookie, removeCookie] = useCookies(["rememberUserId"]); #Cookies 이름 const [isRemember, setIsRemember] = useState(f..

필요한 모듈 설치 npm install xlsx xlsx에 내장된 함수들은 아래의 링크 참조 https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: a month ago. Start using xlsx in your project by running `npm i xlsx`. There are 3029 other projects in the npm registry using xlsx. www.npmjs.com const fs = require("fs"); const xlsx = require("xlsx"); resultText.push({ c..

react-spinners를 사용한 로딩창 만들기 modal을 활용해서 만들면 화면 위에 Loading창이 띄워지게 만들기 가능 공통 함수로 만들어 놓고 사용하면 유용하게 사용 가능 필요한 모듈 설치 react-spinners npm install --save react-spinners react-bootstrap의 modal을 사용하기 위해 설치 npm install --save react-bootstrap LoadingModal.js //Moudle import React, { useEffect, useState } from "react"; import { Button, Modal, ModalDialog } from "react-bootstrap"; import "../css/User.css"; im..

웹에서 보낸 base64 이미지 파일을 받아서 decode 및 저장하는 방법입니다. react 에서 base64 형태로 이미지 업로드 방법은 https://seung-min.tistory.com/37 여기에 있습니다. [React] base64로 여러 장의 이미지를 서버로 전송 React에서 formData를 사용하여 파일을 전송하다보면 body에 다른값들을 같이 전송해야하는데 잘 되지않는 경우가 있더라구요. 이미지를 base64 형식으로 서버에 전송하는 방법입니다. 서버에서 전달 seung-min.tistory.com const fs = require("fs"); app.post("/api/saveimgs", (req, res) => { const fileCount = req.body.sendImgs...