Back-end 설정은 아래 내용을 참조하면 된다.https://kamsi76.tistory.com/entry/Spring-Security-Back-End-%EC%84%A4%EC%A0%95With-JWT Frontend는 React + typescript + nextjs 와 axios를 사용하였다.사전 준비프로젝트 생성# nextjs 설치D:\project\src\main> npm install -g create-next-app# 버전확인D:\project\src\main> create-next-app --version15.1.0# 프로젝트 생성D:\project\src\main> npx create-next-app frontend√ Would you like to use TypeScript? ... Y..

function b64toBlob(b64Data, contentType, sliceSize) {if( b64Data == "" || b64Data == undefined ) return null; contentType = contentType || '';sliceSize = sliceSize || 512; var byteCharacters = atob(b64Data);var byteArrays = [];for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {var slice = byteCharacters.slice(offset, offset + sliceSize);var byteNumbers = new Array(slice.l..

TABjQuer .html 테스트버튼테스트위와 같은 HTML 소스를 jQurery의 .html() 또는 DOM의 InnerHTML로 가져 올경우에 문제점이 있습니다.이렇게 출력할 경우 결과는TABjQuer .html 테스트버튼테스트위와 같이 col 이나 br 또는 input 등의 닫힘이 없어 지는 현항이 있습니다.이 소스를 가지고 PDFWriter을 이용하여 PDF를 만들고자 할 때 오류가 발생합니다.Invalid nested tag head found, expected closing tag col.이러한 오류가 발생합니다. 그래서 처리 방법은 new XMLSerializer() 이넘을 이용하는 방법이 있습니다.위 소스의 결과는 TABjQuer .html 테스트버튼테스트이렇게 출력됩니다.결과 물을 보면 ..

Restfull을 사용 할 때 method 방식에 put 또는 delete 의 경우 jquery에서는 $.ajax를 사용하여만 하는 번거로움이 있습니다. Method PUT을 사용할 경우 123456789$.ajax({ url : "/user", type : "PUT", data : $("#testForm").serialize(), dataType : "text", success: function(result) { console.log( result ); }}); Method DELETE를 사용할 경우 1234567$.ajax({ type : "DELETE", dataType : "text", success: function(result) { console.log( result ); }}); 위의 소스를..

Express.js의 라우팅은 URI(경로), HTTP 요청 Method(GET, POST 등)의 특정 엔드포인트에 대한 클라이언트 요청에 응답하는 방법을 결정하는 것을 말합니다. 라우트 Method 설정 라우터의 기본 구조는 다음과 같습니다. app.method(path, handler)method - HTTP 요청 Methodpath - 엔드포인트 경로handler - 클라이언트 접속 시 실행 되는 함수 위의 구조를 보듯이 각 메소드 별로 처리 라우터를 지정할 수 있다. 1. GET 방식 호출 123app.get('/', (req, res) => { res.send('Hello World!');}); 2. POST 방식 호출 123app.post('/', (req, res) => { res.send(..

Express.js를 사용하기 위하여서는 express 모듈을 로딩해야 합니다. const express = require("express"); 이후 어플리케이션을 생성합니다. const app = express(); app.get() 함수를 이용하여 라우팅 정의를 합니다. app.get("/", (req, res) => {res.send("Hello world!!!");}); 마지막으로 app.listen(port[, callback]) 함수를 통해 포트를 지정해 줍니다. app.listen(3000, ()=> {console.log( "Express Test Server started on port 3000" );}); 전체 소스는 다음과 같습니다. 12345678910const express = r..