Never give up

간만에(?) 개발하던 웹 소스를 봤는데 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()..

오늘은 간단하게 react에서 kakao map을 만들어봤습니다 먼저 세팅부분은 가이드에 나와있는대로 해주고 (링크 : https://apis.map.kakao.com/web/guide/) 카카오맵 웹 예제에 나와있는 키워드 목록을 포함한 부분으로 테스트를 해봤습니다 (링크 : https://apis.map.kakao.com/web/sample/keywordList/) Kakaomap example.js /*global kakao*/ import React, { Component } from 'react' import './kakaomap_example.css' class KakaoMapExample extends Component { constructor() { super() this.markers =..

html과 css만 이용해서 간단한 페이지를 따라서 만들어봤습니다 먼저 참고한 사이트는 material ui 사이트의 album page입니다 (링크 : https://mui.com/getting-started/templates/album/) 이미지 부분 처리가 잘못되어있는것 같은데 일단 정상이라고 가정하고(?) 한번 만들어봤습니다 album import React from 'react' import { AiFillCamera } from 'react-icons/ai' import './album.css' function Album() { // example : https://mui.com/getting-started/templates/album/ return ( Album layout Album lay..

이전 포스트에 이어서 react부분을 정리해봤습니다 (링크 : https://devmemory.tistory.com/78) 다만 class형만 다루고 함수형은 나중에 숙련도가 조금 더 올라가면 함수형으로 간단한 예제를 한번 만들어볼까 합니다 api import { response } from 'util/util' const baseURL = "api" // 성공: code: 1, data : object // 실패: code: -1, data : 실패 message class API { getTasks = async (pageNo, pageSize) => { let url = `${baseURL}/task` if(pageNo){ url += `?pageNo=${pageNo}` } if(pageSize){..