JavaScript45 [JS] 널 병합연산자 Nullish Coalescing Operator ?? : 널 병합연산자 (Nullish Coalescing Operator)JavaScript에서 제공되는 독특한 연산자왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 값을 반환하는 문법|| 논리합 연산자(OR연산자) 와 비슷해 보이지만,||는 0, 문자열 ("") , false 같은 "falsy" 값도 오른쪽 값으로 대체하는 반면??는 null과 undefined만 처리➡️ 기본값 설정이 필요한 경우 많이 사용. 값이 0, 빈 문자열(""), false 등의 falsy 값일 때도 그대로 사용하는 것이 중요한 상황에서 사용.router.push(path ?? '/login');/*path ?? '/login'는 path가 null이거나 undefined인 경우에만 '/login'을 반환하.. 2024. 10. 27. [HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM) 🔊 오디오 재생 let track = new Audio(); let flag = 0; // flag를 사용하여 재생 중인 오디오 있으면 정지 const playVoice = (audioSrc) =>{ track.src = audioSrc; console.log(track.paused) if(flag === 0){ flag = 1; playAudio(); }else{ flag = 0; stopAudio() } } const playAudio = () => { track.play(); track.paused = false iconAnimation("play"); } const stopAudio = () => { track.pause(); track.currentTime = 0; iconAnimation("s.. 2023. 12. 1. [JS] 날짜 형식 커스텀 yyyy-mm-dd // dataFormat.js const leftPad = (value) => { if (value >= 10) { return value; } return `0${value}`; } const toStringByFormatting = (source, delimiter) => { const year = source.getFullYear(); const month = leftPad(source.getMonth() + 1); const day = leftPad(source.getDate()); return [year, month, day].join(delimiter); }; const dataFormat = { toStringByFormatting, }; export default dataFormat; 날짜.. 2023. 7. 19. [JS] value로 key값 찾기 value로 key값 찾기 const list = { "a": "netmable", "b": "nexon", "c": "ncsoft", "d": "kakaogames", } function getKeyByValue(object, value) { return Object.keys(object).find((key) => object[key] === value); } getKeyByValue(list, "nexon") // b 2023. 7. 19. [NextJS] input type="date"을 활용한 기간 선택 NextJS와 NextUI를 사용하여 구현한 프로젝트. 실질적으로는 React(JS), HTML가 뒤섞인 코드입니다. ❗날것의 코드 주의 📆구현 기능날짜선택을 통한 기간 지정 조회 옵션 : 최근 1개월, 최근 3개월, 최근 6개월 선택가능하게 🧶고려할 점. 1. 기본값 시작일은 프로젝트 생성한 1월 1일로 가정. 종료일은 오늘(가장 최근) 날짜. 그 이후 날짜는 disable. 2. 날짜 변경 시 - 시작일은 종료일보다 전이어야함 (시작일 { setDate({ startDate: '2023-01-01', endDate: today, }); }, []); const [limitDate, setLimitDate] = useState({ minStartDate: '2023-01-01', maxStartDate.. 2023. 4. 5. #TIL #230329 요즘 쪽대본(?)같은 업무들이 밀려들고 있습니다. (수정 된 기획을 몇 시간안에 디자인, 개발, QA까지 끝내야하는...) 급하게 하는 일 중에서도 '미쳐 생각지 못한, 그동안 사용해보지 못했던, 몰랐던 또는 변화한 코드'들이 찰나로만 스쳐가는게 아까워 메모 수준으로라도 끄적여 둬야겠다고 다짐하는 요즘입니다. 2023.03.29 (화) 1. 기본(?)을 포기하고 디자인을 잡은 사례😅 [기획, 디자인 등 요청 사항] ✅ input 숫자만 입력 가능하게 this.value = this.value.replace(/[^0-9.]/g, '') .replace(/(\..*)\./g, '$1'); // 숫자만 입력가능한 정규식 .replace(/[^0-9.]/g, '') 숫자 (0-9)과 수수점 값이 아니면 '공백'.. 2023. 3. 30. [JavaScript] encodeURIComponent()를 사용한 URI 공유 💥'텔레그램 링크 공유하기' 기능을 구현에 있어 '+'문자열이 무시되는 경우 발생. https://t.me/+_abscefb1234 위와같은 링크를 아래와 같은 함수로 전달했다. function shareTelegram() { let sendUrl = "https://t.me/_abscefb1234"; window.open("https://telegram.me/share/url?url=" + "&url=" + sendUrl); } 하지만 다음과 같이 + 가 빠진 상태로 전달되는 현상 발생 https://t.me/_abscefb1234 이렇게 공유가 되었다. 주소창에는 원하는 url이 잘 전달 되었기에 (+모바일에서는 url 문자열이 완벽히 출력됨. PC앱에서만 문제가 생김._ 텔레그램 자체의 어떤 상황으.. 2022. 7. 4. [JavaScript] 오늘 하루 보지 않기 (cookie) JavaScript를 사용하여 '오늘 하루 보지 않기 팝업' 구현하기 '오늘 하루 보지 않기' 체크박스 선택 후 닫음 > 오늘 하루 보지 않기 '오늘 하루 보지 않기' 체크박스 해제 후 닫음 > 페이지 접속 시 마다 계속 보이기 See the Pen Untitled by KANG DAN (@kangdanne) on CodePen. const btnClose = document.querySelector('.btn_close'); const popupMask = document.querySelector('.popup_mask'); const popup = document.querySelector('.popup_wrap'); btnClose.addEventListener('click', function(){ .. 2022. 4. 11. 이전 1 2 3 4 ··· 6 다음
