My Coding World

Notepad++에서 자바스크립트 코드 내 백틱(`)을 사용하는 템플릿 리터럴이 하이라이팅 되지 않거나 깨지는 문제는 종종 발생합니다. 이는 Notepad++의 기본 JavaScript 구문 강조 설정이 오래되어 최신 문법을 완전히 지원하지 않기 때문입니다.다음과 같은 방법으로 이 문제를 어느 정도 해결할 수 있습니다:✅ 1. 최신 JavaScript 구문 지원 플러그인 사용👉 "JS Tools" 플러그인최신 JS 문법 지원이 강화된 플러그인.설치 방법:메뉴에서 플러그인 → 플러그인 관리자 또는 Plugins Admin 실행.JS Tools 검색 후 설치.설치 후 파일 확장자 .js로 저장하면 템플릿 리터럴도 하이라이팅됩니다.✅ 2. 사용자 정의 언어(UDL: User Defined Language) ..

textarea 자동 높이 조절하는 간단한 방법웹사이트를 개발하다 보면 종종 textarea의 높이를 자동으로 조절하고 싶을 때가 있습니다. 기본적으로 textarea는 한 줄 또는 몇 줄까지만 표시되고, 내용이 많아지면 스크롤이 생기죠. 하지만 사용자 경험(UX)을 고려한다면, 내용이 많아질 때 자동으로 높이가 조절되는 것이 훨씬 자연스럽습니다.  오늘은 자바스크립트를 이용해 textarea의 높이를 자동으로 조절하는 방법을 소개하겠습니다. 간단한 코드 몇 줄만으로 깔끔한 UX를 구현할 수 있습니다.textarea 높이 자동 조절하는 코드먼저, 아래의 코드를 HTML 파일에 추가해 보겠습니다. Textarea 자동 높이 조절 코드 설명1. textarea 스타일 설정resize..

HTML의 요소의 글자가 화면 크기에 따라 잘리지 않도록 하기 위해 몇 가지 방법을 적용할 수 있습니다.화면이 잘리는 현상을 보완하고 싶다는 의견이 있었습니다. ✅ 1. width: 100% 설정하기화면 크기에 따라 자동으로 크기가 조절되도록 width: 100%을 적용하면, 부모 요소 크기에 맞게 조절됩니다.input { width: 100%; min-width: 100px; /* 최소 너비 설정 */ box-sizing: border-box; /* padding과 border 포함 */}✅ 2. overflow: hidden; text-overflow: ellipsis; 사용너비가 줄어들었을 때 너무 긴 텍스트가 생략(...)되도록 설정할 수도 있습니다.input { width..

웹 개발을 하다 보면 사용자 입력값에 따라 다른 값을 동적으로 계산해야 하는 상황이 자주 발생합니다. 예를 들어, 철판 수량과 무게를 계산하는 경우, 사용자가 수량을 입력하면 무게를 자동으로 계산해주고, 반대로 무게를 입력하면 수량을 계산해주는 기능이 필요할 수 있습니다.이때, 두 입력 필드 간 값이 서로 변환되도록 코드를 작성하다 보면 의도치 않게 무한 루프에 빠지는 경우가 발생할 수 있습니다. 이 글에서는 이런 무한 루프 문제를 방지하면서도 깔끔하게 값을 동적으로 변환하는 방법을 소개합니다. 두 입력 필드 간 값 변환의 어려움웹 폼에서 두 입력 필드 간 값을 변환할 때의 문제는 간단합니다.A 입력 필드에 값이 입력되면 B 필드가 업데이트됩니다.반대로 B 필드에 값이 입력되면 A 필드가 다시 업데이트됩..

웹 애플리케이션에서 숫자를 입력받을 때, 사용자 경험(UX)을 향상시키는 방법 중 하나는 숫자를 입력하는 즉시 3자리마다 콤마를 추가하고 소수점도 올바르게 처리하는 것입니다. 특히 재무, 통계, 또는 계산 관련 애플리케이션에서는 숫자 포맷팅이 매우 중요합니다. 이번 글에서는 소수점을 포함한 숫자 입력 필드에서 실시간으로 포맷을 적용하는 JavaScript 코드를 소개합니다.숫자 포맷팅의 필요성사용자가 숫자를 입력할 때, 값이 단순히 나열된 숫자라면 큰 값일수록 읽기가 어렵습니다. 예를 들어, "1234567.89"와 "1,234,567.89" 중 어느 쪽이 더 보기 쉽나요? 당연히 후자가 더 직관적입니다.또한, 숫자 입력 과정에서 소수점이 사라지거나 입력한 값이 이상하게 처리되면 사용자에게 큰 혼란을 줄..

파일 업로드는 많은 웹 애플리케이션에서 중요한 기능입니다. 특히 사용자로부터 이미지를 업로드받거나 첨부 파일을 관리해야 하는 경우, 직관적이고 효율적인 파일 업로드 시스템이 필요합니다. 이번 글에서는 JavaScript와 jQuery를 활용해 간단한 파일 업로드 및 관리 시스템을 만드는 방법을 설명합니다. 초보자도 따라 할 수 있도록 단계별로 풀어내 보았습니다. 드래그 앤 드롭과 파일 선택의 조합먼저, 파일 업로드의 핵심은 사용자가 쉽고 편리하게 파일을 업로드할 수 있도록 하는 것입니다. 드래그 앤 드롭 방식과 파일 선택 버튼을 동시에 제공하면 사용자 경험이 크게 향상됩니다. 아래 코드는 드래그 앤 드롭 영역을 설정하고, 파일이 드래그되었을 때와 드롭되었을 때의 동작을 정의합니다.const dropAre..

아래의 코드는 todolist.js 파일이다.이 파일을 여러 웹사이트에서 사용하는 모듈화를 하고 싶다. 어떤 아이디어가 있을까?이 js파일은 달력을 구현해서 스케줄을 달력에 표시해서 클릭하면 해당 발주서나 관련 파일을 보여주고, 휴일을 표시하고, 스케줄을 입력하는 등의 역할을 하는 코드이다.이 코드를 라이브러리나 모듈화해서 어떤 웹사이트에서든 불러서 사용하는 형태를 만들고 싶다.var ajaxRequest5 = null;$(document).ready(function() {let todo_currentMonth = new Date().getMonth();let todo_currentYear = new Date().getFullYear();function todo_fetchCalendarData(month..

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