My Coding World

지금 진행하는 프로젝트의 한 부분입니다. 이런 코드를 만들어야 한다면?로트번호 입력과 성적서 보기 기능 구현하기웹 개발을 하다 보면 입력한 값을 기반으로 데이터를 불러오거나, 화면에 동적으로 표시해야 하는 경우가 많습니다. 이번 포스팅에서는 로트번호 입력 후 버튼 클릭으로 성적서를 불러오는 기능을 구현하는 방법을 친절히 설명드리겠습니다. 초보자 분들도 따라 하실 수 있도록 하나씩 차근차근 설명드릴게요!  1. HTML 구조 설계먼저, 로트번호를 입력할 input 필드와, 성적서를 보기 위한 span 버튼을 만들어야 합니다. 아래처럼 HTML을 구성해 주세요. ✨ Tip: span 태그의 data-lotnum 속성을 활용해 입력된 로트번호를 저장할 예정입니다.2. 입력 값..

크롬 개발자 도구(Chrome Developer Tools)를 사용하여 AJAX 요청 및 응답을 확인하는 방법은 아래와 같습니다. 이 도구를 사용하면 서버에서 반환한 데이터를 상세히 분석할 수 있습니다. 1. 크롬 개발자 도구 열기웹 브라우저에서 F12 키를 누르거나, 우클릭 > 검사를 클릭합니다.개발자 도구 창이 열리면 상단 탭에서 **네트워크(Network)**를 선택합니다.2. 네트워크 탭 활성화네트워크 탭은 페이지에서 발생하는 모든 요청(HTML, CSS, JavaScript, AJAX 등)을 모니터링합니다.상단에 **Preserve log(로그 유지)**를 활성화하면 페이지를 새로고침해도 이전 요청 기록을 유지할 수 있습니다.3. AJAX 요청 확인필터링:네트워크 탭 상단의 필터에서 XHR(AJ..

aria-hidden 속성의 문제는 주로 접근성(Accessibility) 관점에서 발생합니다. 이 문제는 aria-hidden이 설정된 요소나 그 상위 요소에 포커스된 엘리먼트가 포함된 경우 발생하며, 이는 스크린 리더와 같은 보조 기술 사용자들에게 문제를 일으킬 수 있습니다. 문제의 원인aria-hidden 설정된 요소에 포커스가 이동: aria-hidden="true"가 설정된 요소나 상위 요소에 자식이 포커스를 가지면, 해당 포커스는 보조 기술에서 무시됩니다.aria-hidden과 모달 창의 충돌: 부트스트랩 모달 창은 보통 모달이 열린 상태에서 배경의 접근성을 차단하기 위해 aria-hidden을 사용합니다. 하지만 잘못된 설정으로 모달 내부의 버튼이나 포커스 가능한 요소에 문제가 생길 수 있습..

PHP에서 문자열 길이를 제한하는 방법: $update_log 수정하기PHP를 사용하다 보면 긴 문자열을 처리해야 할 때가 많습니다. 예를 들어, 업데이트 로그를 관리하는 변수 $update_log가 있다고 가정해봅시다. 이 변수에 날짜, 사용자 이름, 그리고 업데이트 내용이 모두 추가되면서 문자열의 길이가 점점 길어질 수 있습니다.하지만 데이터베이스나 화면에 표시할 때, 문자열 길이가 너무 길어지면 문제가 될 수 있습니다. 이를 해결하기 위해 문자열의 길이를 제한하는 방법을 알아보겠습니다.문제 상황: $update_log의 길이 제한아래는 $update_log를 업데이트하는 기존 코드입니다:$update_log = date("Y-m-d H:i:s") . " - " . $_SESSION["name"] ...

Python ezdxf로 AutoCAD처럼 치수선 꾸미기 - 초보자 가이드AutoCAD에서 치수선을 만들 때, 실제 측정값 앞에 문구를 추가해 꾸미는 기능을 사용해본 적 있으신가요? 예를 들어 "직선거리 1000"처럼 말이죠. 오늘은 Python의 ezdxf 라이브러리를 이용해 AutoCAD와 동일한 기능을 구현하는 방법을 초보자도 쉽게 이해할 수 있도록 설명드리겠습니다.ezdxf란?ezdxf는 Python으로 DXF(Drawing Exchange Format) 파일을 생성하고 수정할 수 있는 라이브러리입니다. DXF는 AutoCAD에서 사용하는 도면 파일 형식으로, 이 라이브러리를 사용하면 CAD 소프트웨어 없이도 도면 작업을 자동화할 수 있습니다.설치하기ezdxf는 Python 패키지로 간단히 설치할..

PHP에서 isset으로 Input Value 기본값 설정하기웹 개발을 하다 보면 사용자가 입력 폼에서 데이터를 제출했을 때, 이전에 입력한 값이 자동으로 채워지도록 만들어야 할 때가 많습니다. 특히 PHP로 폼을 작성할 경우, 값이 없을 때 빈 문자열을 기본값으로 설정하는 것이 매우 중요합니다. 이 글에서는 PHP의 isset 함수를 사용해 이를 쉽게 처리하는 방법을 설명합니다. 기존 코드의 문제점아래는 기본값 설정 없이 입력 필드의 value 속성을 사용한 코드입니다. 품목 코드 " autocomplete="off">위 코드에서는 $item_code가 선언되지 않았거나 값이 없을 경우 에러가 발생하거나, 화면에 의도치 않은 빈칸이 출력될 수 있습니다. 이를 방지하려면 값이 없는 경우 기본값..

자바스크립트로 문자열을 날짜 형식으로 변환하는 specialFormatDate 함수 만들기프로그래밍을 하다 보면 문자열에서 특정 패턴을 제거하고 원하는 형식으로 데이터를 변환해야 하는 경우가 많습니다. 이번 포스팅에서는 입력받은 문자열에서 24라는 고정 값을 제거한 후, 나머지 숫자를 MM-DD(월-일) 형식으로 변환하는 자바스크립트 함수, specialFormatDate를 만드는 과정을 살펴보겠습니다.목표입력문자열이 24로 시작합니다. 예를 들어, 2412101123과 같은 형식입니다.우리는 24를 제거하고 나머지 숫자 중 첫 두 자리는 월(MM), 그다음 두 자리는 일(DD)로 변환합니다.출력변환된 결과는 12-10처럼 월-일 형식으로 출력됩니다.유효하지 않은 입력값에 대해서는 X를 반환합니다.spe..

Isotope.js: 쉽고 멋진 필터링과 정렬 효과를 구현해보세요!웹 개발을 하다 보면, 사용자가 원하는 정보만 보기 쉽게 정렬하거나 필터링할 필요가 있습니다. 예를 들어, 상품 목록에서 특정 카테고리만 보여주거나, 사진 갤러리에서 특정 태그에 해당하는 이미지만 보여주는 기능이 필요할 수 있죠. Isotope.js는 이런 기능을 쉽고 멋지게 구현할 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 Isotope.js의 역할과 기본 사용법에 대해 초보자도 이해할 수 있도록 친절히 설명해 드릴게요.  Isotope.js란?Isotope.js는 웹 페이지에서 동적인 레이아웃과 필터링, 정렬을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면, 복잡한 필터링이나 정렬 로직을 ..