전체 글 79

키보드 아스키(ASCII) 코드

특정 키를 눌렀을때 작동되게 하고 싶을때 $("#id").on('keypress', function(e) { if (e.keyCode === 13) { // Enter = 13 fnList(); // 조회 실행 }}); 자바스크립트에서 키보드 이벤트를 받았을 때 키 값을 구별할 수 있는 Keycode (ASCII 코드) 목록입니다.알파벳(대소문자 동일함)키MozillaIEOperapseudo ASCII codesa65b66c67d68e69f70g71h72i73j74k75l76m77n78o79p80q81r82s83t84u85v86w87x88y88z90기능키키MozillaIEOperapseudo ASCII codesBackspace8Tab9Enter13Shift16Control17Al..

ETC 2025.02.28

리눅스 telnet 대체 명령어 정리 및 사용법

💡 리눅스에서 telnet은 원격 서버의 특정 포트가 열려 있는지 확인하는 데 유용하지만, 보안 문제와 기능 제한으로 인해 사용이 점점 줄어들고 있습니다. 대신, 다양한 대체 명령어를 활용하면 더 강력하고 안전한 네트워크 진단이 가능합니다.🔹 telnet의 역할과 문제점telnet의 역할원격 서버의 특정 포트 연결 테스트SMTP, HTTP 등 텍스트 기반 프로토콜 디버깅단순 TCP 연결 확인telnet의 문제점❌ 보안 취약 (암호화 없음)❌ 기본적으로 설치되지 않는 경우 많음 (특히 최신 리눅스 배포판)❌ 단순 TCP 연결 외 기능 부족✅ 대안이 필요하다면? nc, curl, openssl 등을 사용해 보세요!🔹 telnet 대체 명령어 6가지1️⃣ nc (netcat) – 가장 많이 쓰이는 대체 ..

LINUX 2025.02.28

동적 테이블 생성 및 모달 데이터 선택 기능 구현

🎯 1. 프로젝트 목표이 프로젝트는 JavaScript & jQuery를 활용하여 다음 기능을 구현합니다.✅ 동적으로 테이블을 추가/삭제할 수 있음✅ 각 테이블마다 개별적으로 데이터를 추가할 수 있음✅ 모달을 이용해 데이터 선택 가능✅ 같은 테이블에서 중복된 데이터 추가 방지✅ 각 테이블에서 개별적인 데이터 삭제 가능📌 2. 완성된 UI 및 기능 설명💡 기본 화면+ 테이블 추가 버튼을 클릭하면 새로운 테이블이 생성됨데이터 선택 버튼을 클릭하면 모달 창이 열리고 데이터 선택 가능모달에서 선택된 데이터는 해당 테이블에 추가됨같은 테이블 내에서 중복된 데이터가 추가되지 않도록 방지삭제 버튼을 클릭하면 해당 데이터가 삭제됨📌 결과 예시------------------------------------| 테..

Front-end 2025.02.20

PDF 다중 업로드 & 미리보기

웹 애플리케이션에서 여러 개의 PDF 파일을 업로드하고 미리보기할 수 있도록 구현한 최종 코드를 소개합니다. 이 코드에서는 PDF가 아닌 파일을 선택하면 자동으로 제거하고, 유효한 파일만 유지하여 미리보기를 제공하며, AJAX를 통해 서버로 업로드할 수 있도록 구성되었습니다.✅ 1. HTML + jQuery (프론트엔드 코드) PDF 다중 업로드 및 미리보기 업로드 ✅ 2. 코드 상세 설명1️⃣ PDF 파일 검증 및 선택 제한사용자가 파일을 선택하면 change 이벤트가 발생.file.type !== "application/pdf"인 경우, 경고 메시지를 띄우고 추가하지 않음.dataTransfer 객체를 활용해 유효한 PDF만 유지한 채 input에 다시 설..

Front-end 2025.02.18

jQuery를 활용한 이미지 미리보기 및 파일 업로드 구현하기

웹 애플리케이션에서 파일 업로드 기능은 필수적인 요소 중 하나입니다. 특히, 사용자가 업로드할 이미지를 미리 볼 수 있도록 하면 더욱 직관적인 UX를 제공할 수 있습니다. 이번 글에서는 jQuery와 AJAX를 활용하여 이미지 미리보기와 파일 업로드 기능을 구현하는 방법을 살펴보겠습니다.1. 프로젝트 개요이 코드에서는 사용자가 이미지를 선택하면 미리보기를 제공하고, 버튼을 눌러 서버로 업로드할 수 있도록 설계되었습니다.구현 기능파일 입력 필드를 통해 이미지 선택선택한 이미지를 미리보기AJAX를 활용한 서버 업로드 기능2. HTML 코드아래는 파일 입력 필드, 전송 버튼, 그리고 이미지를 표시할 영역을 포함한 HTML 코드입니다. 파일 전송 ..

Front-end 2025.02.18

[JQuery로 파일 확장자 추출 및 검증하기]

웹에서 파일을 업로드할 때 파일의 확장자를 추출하고 특정 확장자만 허용하고 싶을 때가 있다.이번 글에서는 jQuery를 활용하여 파일 확장자를 가져오는 방법과엑셀 파일(.xls, .xlsx)만 허용하는 코드를 정리해보겠다.✅ 1. 파일 확장자 추출 방법파일이 선택되었을 때, 파일명을 가져와 확장자만 추출하는 방법은 여러 가지가 있다.📍 1) split('.')을 활용한 확장자 추출 (가장 간단한 방법)function getFileExtension(filename) { return filename.split('.').pop().toLowerCase(); // 마지막 요소(확장자)를 반환 (소문자로 변환)}// 사용 예시console.log(getFileExtension("example.xlsx"))..

Front-end 2025.02.14

전자정부 프레임워크에서 페이징 처리하기

전자정부 프레임워크(이하 eGovFramework)는 국내 공공기관과 정부 프로젝트에서 자주 사용되는 프레임워크입니다. 이 글에서는 전자정부 페이징(PaginationInfo)을 활용하여 페이징 기능을 구현하는 방법을 다룹니다.📌 1. 전자정부 프레임워크의 페이징 개요전자정부 프레임워크는 PaginationInfo 클래스를 제공하여 간단한 설정만으로 페이징 기능을 구현할 수 있습니다.페이징은 일반적으로 다음과 같은 과정을 거칩니다:사용자의 요청(현재 페이지 정보)을 컨트롤러에서 받음PaginationInfo 객체를 생성하고 페이징 관련 값을 설정MyBatis 또는 SQL에서 데이터 조회를 위한 시작 인덱스(firstRecordIndex)와 페이지당 데이터 개수(recordCountPerPage)를 서비..

eGovFrame 2025.02.05

[ACE Hand Wash - 트러블 슈팅] Bootstrap 첫 걸음: JSP 충돌 해결 스토리

배경전자정부 프레임워크를 사용하여 세차장 관리 시스템을 개발하던 중, 각 JSP 파일에 헤더와 푸터를 포함하는 과정에서 JSP의 디렉티브 설정으로 인한 충돌 문제가 발생했습니다.문제 상황헤더와 푸터 분리 및 적용 과정공통 헤더(header.jsp)와 푸터(footer.jsp)를 별도의 파일로 분리한 뒤, 각 JSP 페이지에서 및 를 통해 호출했습니다.각각의 JSP 파일에 이미 디렉티브가 포함되어 있던 상태였습니다.발생한 에러기존 JSP 파일과 분리된 헤더/푸터 파일 모두 디렉티브를 포함하고 있었습니다.이로 인해 JSP 페이지가 실행되지 않으며, "두 개의 contentType이 설정되어 있다"는 충돌 에러가 발생했습니다.원인 분석JSP 파일마다 디렉티브가 중복되어 JSP 컨테이너(Tomcat 등)..

[library- 트러블 슈팅] 패키지 설치의 덫: GPG 인증 문제 해결기

문제AWS EC2 인스턴스에서 MySQL 설치를 진행하던 중 GPG 키 인증 오류가 발생하여 패키지 설치가 중단됨. RPM 패키지를 여러 번 다운로드했으나 동일한 문제가 반복 발생.원인GPG 키가 누락되거나 만료되어 MySQL 설치 시 패키지 인증이 실패한 것이 원인.해결 과정1. GPG 키 수동 추가sudo rpm --import  2. 이후 MySQL 설치 재시도sudo yum install mysql-community-server -y 3. GPG 체크 생략 옵션 사용    위 방법으로도 해결되지 않을 경우, GPG 체크를 생략하고 설치sudo dnf install mysql-community-server --nogpgcheck 3. MySQL 서비스 시작 및 상태 확인    MySQL 설치 후 서..

[library - 기술적 의사 결정] 프리 티어 한계를 넘어서: 메모리 부족과의 전쟁

문제AWS 프리 티어 환경에서 EC2 인스턴스(기본 1GB 메모리)를 사용 중, 스프링부트 애플리케이션 실행 시 메모리 부족으로 인해 성능이 저하되거나 애플리케이션이 비정상적으로 종료되는 문제가 발생.해결 방안 분석문제를 해결하기 위해 두 가지 방안을 고려:Swap 메모리 설정장점:비용 추가 없이 현재 인스턴스에서 메모리 부족 문제를 완화할 수 있음.설정이 간단하고 빠르게 적용 가능.단점:디스크 기반으로 메모리를 확장하므로 I/O 성능 저하 발생 가능.높은 트래픽 상황에서는 여전히 불안정할 수 있음.설정 방법인스턴스 업그레이드장점:CPU와 메모리 모두 확장 가능, 애플리케이션의 안정성과 성능을 보장.Swap 설정 없이 물리적 리소스 증가로 I/O 병목 문제 해결.단점:프리 티어의 무료 범위를 벗어나 추가..