My Coding World

웹 애플리케이션에서 숫자를 입력받을 때, 사용자 경험(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. 입력 값..

자바스크립트로 문자열을 날짜 형식으로 변환하는 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 라이브러리입니다. 이 라이브러리를 사용하면, 복잡한 필터링이나 정렬 로직을 ..

해당 문제는 "Mixed Content" 경고와 관련이 있습니다. HTTPS로 보호된 페이지에서 HTTP 프로토콜을 사용하는 리소스를 요청하면, 브라우저에서 보안 위험을 경고하거나 해당 리소스를 차단하는 경우가 있습니다. 이 문제를 해결하려면 다음 단계를 따라야 합니다. Mixed Content 문제 해결 방법이미지 URL을 HTTPS로 변경문제의 이미지를 요청하는 URL을 HTTPS로 변경해야 합니다. 예를 들어:기존: http://8440.co.kr/img/eworks_reach.png수정: https://8440.co.kr/img/eworks_reach.png만약 HTTPS 버전의 리소스가 존재하지 않는다면, 서버에서 이를 지원하도록 설정해야 합니다.서버 설정 확인해당 이미지 파일이 HTTPS에서 ..

조직도를 그리는 방법과 우리가 가져야 할 자세조직도는 회사, 기관, 단체의 구조를 한눈에 볼 수 있도록 시각적으로 표현하는 도구입니다. 조직도를 통해 우리는 각 부서의 역할과 책임, 보고 체계 등을 명확히 파악할 수 있습니다. 하지만 단순히 조직도를 만드는 기술만 배우는 데 그치지 않고, 조직도에 담긴 메시지와 삶의 교훈을 함께 이해하는 것이 중요합니다. 이번 글에서는 Google Charts를 활용해 조직도를 만드는 방법을 소개하고, 이 과정에서 우리가 가져야 할 자세를 함께 이야기해 보겠습니다.Google Charts를 활용한 조직도 작성 방법Google Charts는 무료로 제공되는 데이터 시각화 도구입니다. 이 도구를 사용하면 복잡한 데이터를 간단하게 시각화할 수 있고, 특히 조직도와 같은 계층 ..