Never give up

이번에는 특정 html element를 pdf로 만들어서 활용하는 예제를 만들어봤습니다 먼저 사용한 라이브러리는 2개로 jspdf : pdf를 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/jspdf) html2canvas : html element를 canvas에 그려 이미지 파일로 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/html2canvas) 찾다보니 html2pdf란 친구(?)도 있는데 9년전 업데이트 그리고 낮은 다운로드수로 일단 사용해보지는 않았습니다. 혹시 필요하신 분들을 위해 (링크: https://www.npmjs.com/package/html2pdf) 최근에 사용중인 라이브러리인데 페이지가 여러장인 ..

최근에 graphql사용하는 곳들이 생기면서 궁금해서 한번 예제를 만들어봤습니다 해당 예제는 apollo server, client로 만들었습니다 apollo-server : https://www.npmjs.com/package/apollo-server apollo/client : https://www.npmjs.com/package/@apollo/client 먼저 노드 서버쪽을 보면 server/index.js const ApolloServer = require('apollo-server').ApolloServer; const resolvers = require('./resolvers/index') const typeDefs = require('./typedefs/index') const server ..

해당 포스트는 npx Create-React-App 없이 개발을 해볼 용도로 만들어봤고 정말 기본적인 프리셋(?)만 설정해서 사용하는 방법을 여기저기 찾아보면서 정리해봤습니다 (본 목적은 나중에 헷갈릴 때 찾아볼 용도로...) 1. 폴더를 만들고 내부에서 npm init -y를 입력해서 package.json파일을 만들어줍니다 해당 방법으로 node 프로젝트라는 정의(?)를 해줍니다 2. react, react-dom 설치 React 라이브러리와 DOM과 연결시켜주는 react-dom을 설치해줍니다 3. babel 설치 babel은 transpiler로 es6 이상을 es5 형식에 맞게 변환을 해주는 역할을 합니다 preset-react는 jsx를 js형태로 사용할 수 있도록 해주는 프리셋이고, pre..

간만에(?) 개발하던 웹 소스를 봤는데 createStore가 deprecated되었더군요.. 밑에 내용을 확인해보니 redux toolkit에 있는 configureStore로 하라고 해서 사용법을 찾아봤습니다 (링크: https://redux-toolkit.js.org/) 필자가 사용하던 createStore와 reducer가 configureStore, createSlice로 대체됐습니다 createStore -> configureStore reducer -> createSlice src/store.js import { configureStore } from "@reduxjs/toolkit" import counter from "slices/counter" import dialog from "sli..

요즘 엑셀 작업할 일들이 조금 있어서 최대한 자동화를 해보려고 이런저런 삽질(?)을 하다보니.. 이런 포스트도 있으면 좋겠다 싶어서 만들어봤습니다 server.js const express = require('express') const app = express() const port = process.env.PORT || 8080 const excel = require('./excel/index') app.use(express.json()) app.use(express.urlencoded({ extended: true })) app.use('/excel', excel) app.listen(port, () => { console.log(`Started! express server on port ${por..

오늘은 테스트용으로 SMTP를 이용해서 메일 보내기를 한번 해봤습니다 먼저 소스코드를 보면 server.js require('dotenv').config() const express = require('express') const app = express() app.use(express.urlencoded({ extended: true })) app.use(express.json()) const port = process.env.PORT || 8080 const emailHandler = require('./email') app.post('/send-mail', async (req, res) => { const data = req.body if (emailHandler.validation(data)) {..

이번에는 google analytics에서 축적된(?) 데이터를 chart js로 시각화 그리고 excel파일로 만들어서 다운받는 예제를 만들어봤습니다 먼저 google cloud platform에서 api활성화, 그리고 계정 생성, domain 설정(필자는 localhost:8080), 환경변수 등록이 필요합니다 자세한 내용은 링크를 참고해주세요 (링크: https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries#node.js_1) 위 링크대로 api를 활성화 하고, credentials.json파일을 적당한곳(필자는 프로젝트 폴더)에 넣어줍니다 그 후 환경변수에 다음과 같이 등록해줍니다 (..

해당 예제에서는 node로 이미지 업로드 및 이미지 리스트 및 이미지 가져오는 부분을 구현하고 react에서 이미지 업로드 및 가져와서 보여주기를 구현해봤습니다 서버쪽에 만든 api 3개 get : image/get-imglist 서버에 저장된 이미지 리스트를 가져옵니다 get : image/:url 서버에 저장된 이미지를 보여줍니다 post : image/upload 서버에 이미지를 업로드합니다 image/index require('dotenv').config() const formidable = require('formidable'); const express = require('express'); const fs = require('fs'); const router = express.Router()..