업무 기록/WEB 11

NodeJS 이용한 엑셀 다운로드 및 차트 만들기

SpringBoot, NodeJS 코드로 Excel 파일을 생성하는 코드 이다. 여러 부분으로 나누어서 기록 후 보기위해 작성하였다. 상황에 따라 년, 월에 따라 엑셀을 자동으로 다운로드 받게 된다. 여기서는 NodeJs 단에 js 부분만 기록하였다. 1. 버튼 클릭 이벤트 핸들러 설정 $("#btnExcelDownSend").click(function(e){ e.preventDefault(); // ... }); $("#btnExcelDownSend").click: id가 "btnExcelDownSend"인 요소가 클릭되었을 때의 이벤트를 처리합니다. e.preventDefault(): 클릭 이벤트의 기본 동작을 중단시킵니다. 이 경우에는 버튼 클릭에 따른 기본 동작(예: 폼 제출)을 방지합니다. 2...

업무 기록/WEB 2023.11.16

JSP 이용한 엑셀 다운로드 및 차트 만들기, 엑셀 숫자 0 나오게 하기

JSP 코드는로 Excel 파일을 생성하는 코드 이다. 여러 부분으로 나누어서 기록 후 보기위해 작성하였다. 상황에 따라 웹사이트에서 검색한 카테고리, 번호, 등록사유에 따라 엑셀을 자동으로 다운로드 받게 된다. Request Parameter Parsing: int currentPage = request.getParameter("currentPage") == null ? 1 : Integer.parseInt(request.getParameter("currentPage")); String searchNum = request.getParameter("searchNum") == null ? "" : request.getParameter("searchNum"); String searchCAT = request..

업무 기록/WEB 2023.11.15

SpringBoot, Node Express JS 활용한 세션으로 페이지 변경

DB 값을 받아와 웹브라우저에서 해당 권한을 세션값에 따라 웹 페이지에 보여주거나 보여주지 않게 하는 동적인 부분이다. [서론] 쿠키 방식은 누구나 키를 통해 벨류를 확인할 수 있다. 그렇기 때문에 내가 하고 있는 프로젝트는 스프링을 서버로 사용하여 데이터를 저장하고 웹브라우저인 Node Express JS를 사용하여 sessionId를 활용하여 보안에 대비하고 있다. Controller 스프링에서 먼저 디비 테이블의 내용을 읽어오는 예시이다. @GetMapping("") public ResponseVO getUserInfo() { String userId = ((UserDetails) SecurityContextHolder.getContext().getAuthentication().getPrincipa..

업무 기록/WEB 2023.11.10

프로젝트 요약 정리 SpringBoot 와 Node ExpressJs

들어가며 회사에서 하는 프로젝트는 SpringBoot 와 Node ExpressJs 를 사용하고 있다. 보안적인 기능은 제외하고 웹프로젝트를 간단하게 설명하겠다. 기존 코드는 회사에서 직접 사용하는 코드는 아니고 개인적으로 회사코드를 이해하기 위해 개인적으로 공부한 코드이다. 위 프로젝트는 Spring Boot 부분은 서버 사이드 코드로 데이터베이스와 상호 작용하고 비즈니스 로직을 처리하며, Node.js 부분은 클라이언트 사이드 코드로 사용자 인터페이스를 처리하고 서버와 통신한다. Spring Boot와 Node.js가 서로 협력하여 전체 애플리케이션을 구성하는 기능을 가지고 있다. 간단하게 업데이트하는 기능인 코드 실행 부분을 설명해보겠다. Node.js 부분 프론트 .ejs 등록부분 예시 하단 코드..

업무 기록/WEB 2023.10.21

Markdown Viewer for Multiple Documents and Loader(배열이용) 랜더링

배경 연동 규격서나 다양한 정보를 모아놓은 자료실을 만들고 있다. 마크다운 정보를 DB에 넣고 자료를 관리하여 홈페이지에 내용을 띄울때는 자동으로 html로 변환하는 내용이였다. 하지만 바뀐 내용으로 정보의 양은 많지 않고 view ejs 부분 내용만 바꾸면 되기 때문에 서버를 재부팅할 필요없어 그냥 프로젝트에 정보를 넣어놓는 방식으로 바꾸기로 하였다. 그러나 ejs를 사용하면서 라우터 문제나 한 페이지 뷰를 만들기 위해서 프로젝트 구조상 index.ejs, js등 총 4개의 페이지를 새로 만들어야 한다는 문제점이 발생하였다. 만일 이 문제를 해결하지 않는다면 자료실에 1개의 내용을 추가한다면 4개의 페이지를 추가하거나 수정해야 한다는 문제점이 있어 .md 파일을 미리 만들어 놓고 자료실 페이지에서 이 ..

업무 기록/WEB 2023.09.11

자바스크립트 마크다운 검색창 만들기

#in 에 마크다운을 작성하게 되면 #out에 htm로 자동 변환되는 상황에서 검색창을 입력하여 내가 원하는 단어를 찾는 간단한 Javascript이용하여 쉽게 만들 수 있을거라고 생각하였다. 하지만 만들면서 여러 문제점이 발생하였다. 화면에 표출되는 #out 부분의 제목 부분이 #, ##, ### 과 같이 해시를 사용하여 이상한 반복이 발생하는 경우도 있고 또는 #out 부분이 없어지거나 #in 마크다운 내용으로 바뀌는 경우등 많은 문제점들이 발생하였다. 기본 HTML 틀 # News Title 1 ## Subheading 1 ### Subheading 1.1 # Another topic 이전 자동 목록 만들기와 구조는 유사하다. 전체코드 # News Title 1 ## Subheading 1 ### ..

업무 기록/WEB 2023.09.08

자바스크립트 이용한 마크다운 자동 목차 만들기

구현목표 내가 만들고자 하는 것은 마크업언어로 #in(textarea) 에 작성을 하면 #out에 html로 자동 변환되고 여기서 변환된 #out의 html 문법을 보고 목차를 자동으로 만드는게 목표이다. 작업을 하면서 구글에 많은 티스토리 블로그 자동 목차만들기를 활용해서 사용하면 되겠다고 생각하였다. 여기서는 자동목차 만들기만 확인할것이다. html 기본 구조 # 뉴스 제목 1 ## 부제목 1 ### 소제목 1.1 # 또 다른 주제 다운로드 Markdown Markdown HTML ×> 위는 기본적인 html의 뼈대이다. 생략된 css난 html 부분이 많이있다. (참고용) 결과페이지 미리보기 자바스크립트 전체 $(document).ready(function () { // 여기에 Markdown 콘텐..

업무 기록/WEB 2023.09.07

JSP 모달창 버튼 출력 조건

JSP를 이용하여 특정 조건에 따라 모달창 내에 버튼을 보이게하고 기능을 추가하는 내용을 해보겠다. 여기서 예는 확인불가 일때 삭제버튼을 보이게 하는 내용이다. ✔ 버튼 기본상태 상태 중단 정상 대기 확인불가 확인불가 OPTION을 보면 value값이 ' ' 아무것도 입력되지 않은 상황에서 확인 불가가 된다. 이때 삭제버튼이 나오게 할려고 한다. ✔ 확인 불가시 삭제 코드 var statusDropDown = document.getElementById('status').value; //var selectedStatus = statusDropDown.value; // 검수요청, 사용승인상태, 삭제불가 메시지만 보여준다. if(statusDropDown == ''){ // 삭제만 가능 etcCommentTr..

업무 기록/WEB 2023.08.30

Node js, Express js - res.render 렌더링

res.render() 메서드는 Express 애플리케이션에서 뷰 템플릿을 렌더링하여 클라이언트에게 HTML 페이지를 제공하는 역할을 한다. 이 메서드를 사용하여 뷰 템플릿과 클라이언트 사이의 상호작용을 가능하게 한다. ✔ 예제 코드 res.render('mypage', {session: req.session, email_id: email[0], email_com: email[1], userInfo: result.data, accountList: accountList, csrfToken: req.csrfToken()}); res.render() 메서드: res.render(view, [locals], callback) 형태로 사용된다. view: 렌더링할 뷰 템플릿의 이름을 지정한다. 이 이름은 뷰 템플..

업무 기록/WEB 2023.08.01

Spring Security 인증처리 SecurityContextHolder.getContext(), getAuthentication(), getPrincipal()

Spring Security 컨텍스트에서 현재 인증된 사용자의 사용자 이름(사용자 ID)을 얻는 데 사용되다. 사용자가 인증되었고 연관된 UserDetails 개체가 있다고 가정하면. 이 코드는 UserDetails 개체에서 사용자 이름을 추출하여 userId 변수에 할당하는 것이다. ✔ 예제코드 @GetMapping("") public ResponseVO getUserInfo() { String userId = ((UserDetails) SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getUsername(); System.out.println("getUserInfo"); log.debug("getUserInfo[" + us..

업무 기록/WEB 2023.07.31

JSP hidden 값 실시간 변화 감지(MutationObserver) 적용 및 조건문

✔ IP설정 - 실시간 변화 필요 최초 변하는 부분은 hidden이 아닌 부분이 변하는 줄 알았지만 이는 수정 또는 저장을 해야 변하는 부분이고 실시간으로 변하는 부분은 부분이였다. 대표ID 부분도 동일 그렇기 때문에 실시간으로 확인하는 코드와 처음 들어오는 경우 hidden 부분에는 값이 없어 화면에 아무것도 표출하지 않아 값을 넣어 주었다. ✔ 초기화 function renderIPSettings() { var dynamicIPSelect = document.getElementById('dynamicIPSelect'); dynamicIPSelect.innerHTML = ''; // 이전 옵션 초기화 dynamicIPSelect 변수: dynamicIPSelect은 IP 설정을 담고 있는 요소 dyna..

업무 기록/WEB 2023.07.14