Never give up

기본적으로 우리가 사용하는 Rest API는 클라이언트에서 서버로 요청하는 형태로 단방향으로 클라이언트가 서버를 바라보는 형태인데 그 반대의 경우는 어떻게 처리해야될지 고민하다가 예전에 WebRTC문서를 읽을 때 SSE(Server Sent Event)에 관해 읽었던 기억이 있어서 찾아봤고, 약간 편법같지만 목적에 부합한다 생각해서 한번 예제를 만들어보게 되었습니다 시작하기 전에 무엇을 해결하기 위해 만들어졌을까 하는 생각을 하면서 찾아봤는데 1. 스포츠 중계처럼 서버가 클라리언트를 꾸준히 업데이트 해주지만 양방향 통신이 필요 없을 때 2. 알람을 줄 때 3. 서버가 특정 상황을 기다린 후 데이터를 전송해야될 때 이부분을 해결하기 위해 polling( + long polling), socket, sse ..

axios는 fetch에 비해 여러가지 장점이 있습니다 response timeout 구형 브라우저 지원 json 변환과정 생략 가능 기타 등등 그래서 아마 대부분의 개발자분들이 사용하실텐데 공통적으로 셋팅하면 좋은 부분들을 예제와 함께 준비해봤습니다 src/service/api.ts import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; export default class Api { private instance: AxiosInstance; constructor(baseURL = '', timeout = 30000) { this.instance = axios.create({ baseURL, timeout, }); this.instance...

이전에 html을 pdf로 만드는 간단한 예제는 해봤는데 (https://devmemory.tistory.com/98) 수정 가능한 doc file을 만들어야 될 필요가 있어서 한번 만들어 봤습니다 App.tsx const Main = () => { let text: string const downloadDoc = (e: React.MouseEvent, isDownload: boolean) => { e.preventDefault() if (text === undefined) { const quill = document.querySelector('#div_quill > .ql-editor') text = `${quill?.innerHTML}` } const doc = makeDoc(text, 'test')..

이번에는 리액트로 파일 드래그 앤 드롭을 구현해봤습니다 계속 js만 써왔는데, 나중에 ts도 필요할 수도 있을거 같아서 일단 한번 사용해봤습니다 drag_drop.css /* 드래그 앤 드롭 */ .div_images { padding: 10px; font-size: 0.8em; color: grey; margin: 10px 0 10px 30px; box-shadow: 0 0 5px #cccccc; display: flex; flex-direction: column; justify-content: center; align-items: center; } .div_preview { display: flex; flex-direction: row; justify-content: center; padding: 1..

오늘은 전에 만들었던것들중 하나인 소셜 로그인 부분을 포스트 해보려고 합니다 로그인 별로 개발자 콘솔에서 설정까지 따로따로 포스트 하고 싶지만.. 귀찮아서1 다른 포스트도 밀린게 많아서 하나에 정리해봤습니다 추가로 설정부분은 다루지 않을예정이고, 페이지 디자인한 html과 css는 생략하겠습니다 (생략은 하되 github링크에 포함되어 있습니다) service/social_login.js import util from "util/util"; export default class SocialLogin { // 카카오 로그인 kakaoLogin() { const src = "https://developers.kakao.com/sdk/js/kakao.min.js" let kakaoScript = util.ch..

이번에는 특정 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..