web developer

Select 박스에서 '직접 입력' 옵션으로 입력란 토글하기1. html  형식 선택 1번 2번 3번 4번 5번 직접 입력 2. jsfunction syncInputWithSelect() { // select 박스의 첫번째 option 값으로 초기화 var selectBox = $("#selectBox"); selectBox.val(selectBox.find('option:first').val()); // input 태그의 값 var inputValue = $("#inputText"..

Date 객체의 모든 인스턴스에서 사용할 수 있는 새로운 메서드 yyyymmdd를 정의해보았다.Date.prototype.yyyymmdd = function(month) { // 현재 날짜에서 month를 뺀 새로운 날짜 생성 let date = new Date(this); date.setMonth(date.getMonth() - month); // 년, 월, 일 값을 가져와서 두 자리 형식으로 변환 let yyyy = date.getFullYear().toString(); let mm = (date.getMonth() + 1).toString().padStart(2, '0'); let dd = date.getDate().toString().padStart(2..

(1) 뷰포트 정의 뷰포트(viewport)란 웹 페이지를 볼 때 보이는 영역을 말합니다. 모바일 기기에서는 디스플레이의 크기가 작아서 뷰포트가 작은 경우가 많습니다. 이 경우, 웹 페이지의 컨텐츠가 작게 보일 수 있고, 가독성이 떨어질 수 있습니다. 이를 해결하기 위해 뷰포트를 조정할 수 있습니다. 뷰포트는 HTML 문서의 태그를 이용하여 조정할 수 있습니다. 위 코드에서 width=device-width는 뷰포트의 너비를 기기의 너비로 설정한다는 의미입니다. initial-scale=1.0은 페이지 로딩 시 초기 축소/확대 비율을 1로 설정한다는 의미입니다. 이렇게 설정하면, 모바일 기기에서 웹 페이지가 자연스럽게 보이게 됩니다. 뷰포트를 설정할 때 주의할 점은, 뷰포트를 설정하면 반드시 미디어 쿼리..

자바스크립트에서 == 연산자는 값의 타입을 변환하여 비교하며, 이 과정에서 타입 간의 형 변환이 이루어집니다. 따라서 0 == ""가 true로 평가되는 이유는 다음과 같습니다 0은 숫자이고, ""는 빈 문자열입니다. 자바스크립트에서 == 연산자를 사용할 때, 두 피연산자가 서로 다른 타입이면 타입 변환이 이루어지며, 둘 중 하나의 피연산자가 숫자이고 다른 하나가 문자열인 경우, 문자열을 숫자로 변환합니다. 빈 문자열 ""은 숫자로 변환하면 0이 됩니다. 결국, 0 == 0으로 비교되어 true가 됩니다. 이러한 현상은 '==' 연산자가 동등성 비교에서 타입 간 변환을 수반하기 때문에 발생합니다. 이러한 동등성 비교를 정확하게 하고자 한다면 '===' 연산자를 사용하여 타입 변환 없이 엄격한 비교를 수행..

https://take-it-into-account.tistory.com/198 [js] monthpicker 기본 설정, 월 비활성화하는 방법CDN (content delivery network) monthpicker 설정하기 1. input 태그 한줄 작성 2. 현재 시간 ; 2022년 8월 month 값을 통해서 아직 다가오지 않은 9, 10, 11, 12의 값을 fot문을 통해서 months 에 담아줍니다. $(document).readtake-it-into-account.tistory.com이번글은 위의 글과 같이 monthpicker를 생성한 이후 단계입니다. 1. 위에 파란색으로 active되어 있는 부분을 초기화시킨다.// monthpicker 초기화$('.ui-state-default.m..

1. getDay() 정의 data 함수 중에 getFullYear(), getMonth(), getDate(), getDay()를 이용하면 오늘 날짜의 연도, 월, 일을 알 수 있습니다. 이 중 getDay() 에 대해서 살펴보겠습니다. 1) 0 ~ 6 숫자로 반환. 0 : 일요일 (Sunday) 1 : 월요일 (Monday) 2 : 화요일 (Tuesday) 3 : 수요일 (Wednesday) 4 : 목요일 (Thursday) 5 : 금요일 (Friday) 6 : 토요일 (Saturday) 2) 6으로 나눈 나머지가 0인지 여부에 따라 평일/주말 구분 가능. 평일: (반환값%6 != 0) 주말: (반환값%6 ==0) 2. getDay() 구문 Date.getDay() * 매개변수 : X 3. getDa..

배열 let arr = [];arr = [1, 3, 5, 7, 9]; // 배열에 값 할당console.log(arr); // [1, 3, 5, 7, 9]배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있습니다. (번호는 0부터 매김)그 값들은 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분해줍니다.대괄호'[ ]'를 통해 배열을 만듭니다.객체let user = {};// 객체에 값 할당user = { name: "Jun", email: "jun@gmail.com", city: "Busan"}console.log(user);// {name: "Jun", email: "jun@gmail.com", city: "Busan"}항상 키와 값(key-value p..

.attr() 메서드 .attr() : html 의 속성(attribute)을 다룬다. .attr() 메서드를 통해서는 element가 가지는 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅하는 형식 .prop() 메서드 .prop() : javascript 프로퍼티(property)를 다룬다. ​.prop() 메서드를 통해서는 element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)를 제어하는 업무 $( '.selectCheck' ).click( function() { $( '.test' ).prop( 'checked', this.checked ); }); 출처 : https://www.codingfactory.net/10341

Moment.js Moment.js는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리입니다. Moment.js는 JavaScript에서 날짜 및 시간과 관련된 라이브러리 중에서 가장 오래되었지만, 현재 다음 두 가지 이유로 개발이 중단되었습니다. Moment.js의 용량 문제 너무 오래되어 신규 기능 추가가 어려움 Moment.js 개발자 중 한 명은 Moment.js의 단점을 극복하기 위해 Luxon.js라는 라이브러를 만들었으며, 날짜 및 시간을 조작하는 라이브러리는 Luxon.js 외에도 Day.js, date-fns.js 등 여러 가지가 존재합니다. import moment from 'moment'; const moment = require('..

웹 개발 시 Chrome의 console 창에서 Uncaught TypeError: ~.replace is not a function 에러 메시지가 나타나는 경우가 발생합니다. 이러한 에러 메시지가 발생하는 원인으로는 replace를 하려고 하는 데이터가 parseInt, 즉 숫자일 때에 발생하는 오류입니다. 이러할 때에는 문자열로 교체하고 replace 하게 되면 정상적으로 오류를 해결할 수 있습니다. 또한 인코딩이 지정되지 않으면 원시 버퍼가 반환되기 때문에 발생하는 오류이기도 합니다. replace() 함수는 원시 버퍼가 아닌 인코딩 처리한 문자열로 처리되어야 하는 함수입니다. replace를 하려고 하는 데이터를 .toString()를 사용하여 문자로 변경하여 처리하도록 합니다. 출처 : http..

CDN (content delivery network) monthpicker 설정하기1. input 태그 한줄 작성2. 현재 시간 ; 2022년 8월month 값을 통해서 아직 다가오지 않은 9, 10, 11, 12의 값을 fot문을 통해서 months 에 담아줍니다.function loadMonthPicker() { var months = []; var dateObj = new Date(); var selectYear = dateObj.getFullYear(); var month = dateObj.getMonth() + 1; for(var i = month; j = 0; i 3. months에 담겨있는 9월, 10월, 11월, 12월을 비활성화 시킵니다./* disableMo..

보통 click 이벤트를 사용하여 알람:alert 을 주곤 하는데, 오류가 발생하는 경우가 생깁니다. $("#selector").click(function(){ alert("OK"); }); 이런 경우에는 아래와 같이 'click' 이벤트가 아니라 'on' 이벤트로 변경하고, 선택자를 적어주면 됩니다. $(document).on("click", "선택자 : selector", function(){ alert("알림 : alert"); }); 출처 : https://vlog.tion.co.kr/%ED%95%B4%EA%B2%B0-jquery-click-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%95%88%EB%90%A8-%EB%8F%99%EC%A0%81-%ED%8E%98%EC%9D%B4%EC%..