My Coding World

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

JavaScript에서 opener를 호출할 때 안전하게 다루는 방법웹 개발에서 부모 창(opener)과 자식 창 간 데이터를 주고받는 작업은 흔히 발생합니다. 하지만 opener를 호출할 때, 해당 요소가 존재하지 않는 경우 오류가 발생할 수 있습니다. 이런 문제를 방지하려면 어떻게 해야 할까요? 오늘은 학생이 이해하기 쉽도록, 부모 창과 자식 창의 관계를 비유로 설명드리겠습니다. 부모 창과 자식 창의 관계란?부모 창(opener)은 웹 페이지 간 데이터를 교환할 수 있도록 자식 창과 연결된 창입니다. 마치 선생님(부모 창)이 학생(자식 창)에게 데이터를 전달하는 것과 같습니다. 학생이 어떤 정보를 요청할 때, 선생님이 자료를 정확히 준비했는지 확인하지 않고 무작정 전달하려고 하면 문제가 생기겠죠? 웹..

위와 같은 메시지창이 우측하단에서 메일이나, 쪽지가 올때 나오는 것을 우린 종종 봅니다.이런것을 우리도 만들수 있을까?여기서 출발합니다.chatGPT를 통해서 이 코드를 만드는 과정을 담아봅니다. 누군가에게는 도움이 될 것 같습니다.시작) 알람 내용 확인하세요                              쪽지가 3통 도착했습니다.            위의 코드는 화면의 우측 하부에 모달창처럼 나오는 코드이다.popper.min.js를 사용해서 만든 코드 같은데, 이 사용법에 대해서 설명해줘. Popper.js는 툴팁, 드롭다운, 팝오버 같은 UI 요소를 동적으로 위치시키는 데 사용되는 JavaScript 라이브러리입니다. 주로 요소를 특정 대상과 연관 지어 배치하거나, 위치를 조정하는 데 사용됩니..

위 문장은 구글 크롬(Chrome)이 제3자 쿠키(Third-party cookies) 없이 브라우징할 수 있는 새로운 경험을 제공하기 위해 변화하고 있음을 의미합니다. 이를 통해 사용자는 개인 정보 보호를 강화할 수 있습니다. 구체적으로:제3자 쿠키란?제3자 쿠키는 사용자가 방문한 웹사이트가 아닌 다른 도메인(예: 광고 네트워크 또는 추적 서비스)에서 생성한 쿠키입니다.이 쿠키는 사용자의 온라인 활동을 추적하여 맞춤 광고를 제공하거나 사용자 행동을 분석하는 데 주로 사용됩니다.구글 크롬의 변화 방향크롬은 개인정보 보호를 강화하기 위해 제3자 쿠키 지원을 점진적으로 제거하고 있습니다.대신, **프라이버시 샌드박스(Privacy Sandbox)**라는 대안을 도입하여 사용자 데이터를 익명화하거나 그룹화된 ..

며칠을 시름했을까?긴 터널을 빠져나온 기분이네요~이 코드를 완성하고 한결 마음이 편안해 졌습니다.이미지, 첨부파일에 대한 고민을 조금은 덜은 것 같군요~       사진 첨부                   파일(10M 이하) pdf파일 첨부             이 컨셉으로 실행하면 아래의 화면과 같이 활용가능합니다. 코드를 담는 것으로 다시 정리하면,html 부분 사진 첨부 파일(10M 이하) pdf파일 첨부 자바스크립트 부분

// 파일 업로드 처리 함수가 있다. 이를 이용해서 chatGPT로 원하는 결과를 도출하는 과정을 함께 담아본다.1. 쳇GPT에서 기존 코드로 질문하기function uploadFiles(files) {         isUploading = true;  // 업로드 중 상태 설정         showUploadModal();  // 업로드 중 모달 표시         var formData = new FormData($('#board_form')[0]); // 현재 폼 데이터에 추가된 파일 이름 목록 추적 var existingFiles = new Set(); for (var pair of formData.entries()) { if (pair[0] === 'upfile[]') { existingFi..

실전코드에서 현재 날짜를 넣는 간단한 코드를 공유합니다.행을 추가할때 현재의 날짜를 넣고 싶다?이런 경우 많잖아요~// 정비내역 행 추가 함수 function addRow_maintenance(tableBody, rowData = {}) {     var newRow = $('');     // 일련번호     newRow.append('');     // 정비일자 (Date 필드)     var maintenanceDate = rowData.maintenance_date || new Date().toISOString().split('T')[0]; // 현재 날짜 기본값으로 설정     newRow.append('');     // 정비내역 기록 (Text 필드)     var maintenanceRec..

몇시간째 고생해서.. 만든코드입니다.소계,합계산출내역서... 가지고 만들어봅니다.function inputNumber(input) {     // 현재 커서 위치를 저장     const cursorPosition = input.selectionStart;     // 입력값에서 숫자만 남기고 제거     const value = input.value.replace(/,/g, '');         // 천 단위 콤마 추가     const formattedValue = Number(value).toLocaleString();     // 포맷팅된 값으로 설정     input.value = formattedValue;     // 포맷팅 후에도 원래 커서 위치 유지     input.setSelecti..