저장소

[ 서론 ] 평소 내가 개발 및 관리하는 대부분의 구조는 Back 단과 Front 단이 나뉘어저 있다. Back 단은 jar 파일로 되어있어 한 글자라도 수정을 해야 하는 경우 서비스를 내렸다가 다시 올려야 하는 불편함이 있다. 이번에는 데이터를 정렬하는 문제가 있어 수정해달라는 간단한 문제가 있었다. 물론 데이터를 정렬하는데 있어 백엔드에서 해야 성능 효율성, 데이터 전송 및 네트워크 효율성, 보안 등 훨씬 좋지만 정렬 데이터가 많아야 10개 뿐인데 백엔드를 수정하기 싫어 그냥 프론트단에서 바꾸자 마자 바로 적용될 수 있는 방법을 수행하였다.  [ 코드 예제 ] 해당 체널값을 출력해주는 프론트 단에서 날짜별로 내림차순 해달라는 간단한 내용이였다. new Date(b.crea..

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

window.onload와 DOMContentLoaded 이벤트는 웹 페이지의 로딩 상태에 따라 다르게 동작하는 JavaScript 이벤트 이번 문제는 기존에 구현된 내용들을 참고하여 새로운 기능을 구현하면서 직접 짠 자바스크립트 내용을 추가하면서 문제가 발생하게 되었다. 기존 스크립트가 작동을 안하는 문제였다. 코드가 너무 오래되고 지저분한 부분도 있고 내 실력이 부족한 부분도 있어 이 문제를 해결하는데 생각보다 많은 시간이 들어 정리를하게 되었다. 자바스크립트의 실행 시점 때문에 발생하는 문제였다. 페이지 전체가 로드되기 전에 발생해야 하는 내용이였기 때문이다. 그런 이유로 문제의 원인은 DOMContentLoaded방식을 사용하여 해결하였다. window.onload 이벤트: 1. 이 이벤트는 웹 ..

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

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

간단한 자바스크립트 파일 용량 제한이다. function fnExcelFileCheck() { // 1. 파일 선택 input 엘리먼트를 가져옵니다. var fileElements = document.getElementById('excelFile'); // 2. 파일이 선택되지 않았을 경우 경고 메시지를 표시하고 업로드를 중단합니다. if (fileElements.value == '') { alert("엑셀 파일이 첨부되지 않았습니다."); return false; } // 3. 파일이 선택된 경우, 첫 번째 파일의 크기를 바이트 단위로 가져옵니다. var fileSize = fileElements.files[0].size; // 4. 최대 파일 크기 (3MB)와 비교하여 크기가 초과하면 경고 메시지를 ..

코드는 입력 문자열을 가져와 대괄호 안의 참조를 번호가 매겨진 참조로 바꾸고 끝에 번호가 매겨진 참조 목록을 추가하여 형식을 지정하는 JavaScript 함수 'formatThesis' function formatThesis(input) { let references = new Map(); let referenceCounter = 1; // 참고문헌 번호를 위한 카운터 초기화 let revisedInput = input.replace(/\[(.*?)\]/g, (match, titles) => { // 대괄호 안의 텍스트를 참고문헌 번호로 대체 let titleList = titles.split(",").map(title => title.trim()); // 쉼표로 구분된 제목들을 분리하고 공백 제거 le..

✔ set //set 순서가 없는 중복되지 않은 집합 const set = new Set([1,2,3,4,5]); console.log(set) // Set(5) { 1, 2, 3, 4, 5 } // 사이즈 확인 console.log(set.size) // 5 // 데이터가 존재하는지 확인 console.log(set.has(2)) //true console.log(set.has(7)) // false // 순회 set.forEach((item) => console.log(item)) // == 위 아래 동일한 문장이다. for(let value of set.values()){ console.log(value) } // set에 있는 데이터를 하나씩 넘겨주는 기능으로 //set에 있는 데이터 수만큼 반복..

✔ function //✔ 1. 함수의 기본 - 자바스크립트에서는 함수도 메모리로 인식 function sum(num1, num2){ console.log('sum() 호출!'); return num1 + num2; }// 선언형 // sum() 호출! // 13 const result = sum(10,3); console.log(result); //✔ 2.함수의 메모리 const add = sum; console.log(sum(10,3)); console.log(add(10,3)); // 위와 동일한 결과 값 // sum() 호출! // 13 //✔ 3. 함수 작성법(팁!) function print(num){ if(num a+b; //return도 자동 화살표함수 const calc_multiply ..

✔ 정규식 표현 - MDN 정규식 정리 참고 사이트https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions  정규 표현식 - JavaScript | MDN정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec() (en-US)와 test() 메서드를 사용할 수 있습니다. String의 match()developer.mozilla.org정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴    - /   ~   / 시작과 끝    -  ^ : 패턴의 시작    - [ ] : 안의 문자를 찾음    - [x-..

✔ history 객체 - 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 - 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 접근 방법을 제한 back() - 뒤로 이동 forward)_ : 앞으로 이동 go(0) : 새로고침 location.reload() : 새로고침 DOCTYPE html> history history 뒤로 앞으로 새로고침 ✔ navigator 객체 - 내 위치를 알려쥬눈 역할 정도만 사용한다. 브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 정보를 저장하는 객체 geolocation : GPS정보를 수신하는 프러퍼티 DOCTYPE html> navigator const success = function(loc){ console.log(loc.c..

✔ 배열(Array) - 이름과 index로 참조되는 정렬된 값의 집합(자료구조) - 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함 배열 선언 let 배열명; 배열 초기화 배열명 = [요소1, 요소2, 요소3 ....]; let arr; arr =[ 100, 200, 300]; let arr = [100,2 00, 300]; 배열 객체로 생성 let 배열명 = new Array(요소1, 요소2....) 자바스크립트 배열의 특징 1. 배열 요소의 타입이 고정되어 있지 않음 let arr = [1, 1.5, '김사과', true] // 자바는 요소 타입이 동일해야 하지만 자바스크림트는 아니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 됨 let arr;..