IT 성장일기

자바스크립트를 이용해서 예쁜 토스트 메시지 만들기꼭 알러트를 띄워야만 할까?좋아요를 누르거나 클립보드에 무언가를 복사하는 등 사용자 이벤트가 발생할 때 알림을 보내기 위해 alert 함수를 이용한다면모달창을 닫지 않으면 다른 행동을 할 수 없기 때문에 사용자의 입장에서는 굉장히 불편합니다. 사용자에게 무언가를 요구하지 않고 화면 한 쪽에 스르륵 나타났다가 사라지는 알림을 토스트 메시지라고 하죠.HTML이나 CSS 코드 추가 없이 스크립트만으로 심플한 토스트 메시지를 띄우는 방법을 정리해 보겠습니다.Javascript코드는 어렵지 않습니다. 스크립트를 통해 스타일과 HTML 요소를 정의한 후 필요한 곳에서 함수를 호출하기만 하면 됩니다.선언부function toastOn(text){ //내용을 매개변수로..

SNS 공유하기공유하기 기능은 프론트 웹 개발자라면 한 번쯤은 경험하게 되는 필수적인 기능입니다.최근 공유하기 기능 개발을 접하게 되어 관련 내용을 정리해 보도록 하겠습니다.SNS 목록NAVERBANDX(TWITTER)FACEBOOKKAKAO TALKHTML먼저 버튼 목록을 만들어줍니다. Javascript공유하고자 하는 페이지의 URL과 타이틀을 설정해 주도록 하겠습니다.const url = window.location.href.replace('#', ''); //현재 URL 획득const encodedUrl = encodeURIComponent(url); //URL 인코딩const message = encodeURIComponent('공유하기 샘플이예요~');..

뒤로 가기를 통해 페이지로 돌아왔을 때 함수 실행하기페이지에서 다른 특정 페이지로 이동한 후 다시 오리진 페이지로 돌아왔을 때 어떤 함수가 실행되어야 하는 경우가 있습니다.저의 경우를 예를 들어 아래와 같은 상황을 상정할 수도 있습니다.이벤트 페이지가 있음이벤트 페이지 첫 로드 시 사용자의 이벤트 참여 상태를 가져오는 함수가 있음이벤트 페이지에는 타겟 페이지로 점프시키는 링크가 있음타겟 페이지 방문 후 이벤트 페이지로 돌아옴이벤트 페이지에서 자동으로 참여 상태를 업데이트 해주어야 함이럴 때 popstate 이벤트 리스너를 사용할 수 있습니다.//뒤로가기를 통해 페이지로 돌아왔을 때 함수 호출window.addEventListener('popstate', function(event) { callSom..

디스트럭처링 문법(Destructuring Assignment) 파헤치기객체에서 값을 가져와 변수에 할당하는 코드 중 처음 보는 방식이 있어 따로 조사 및 정리를 해보았습니다.궁금증이 생긴 코드는 아래와 같고 조사해 본 결과 디스트럭처링 문법이라고 합니다.const { day, area } = dayElement.dataset; 디스트럭처링(Destructuring) 문법이란?구조화된 배열이나 객체를 비구조화하여 변수에 할당하는 방식을 의미합니다.ES6에서 도입된 이 문법은 코드를 간결하고 명확하게 작성하도록 해줍니다.디스트럭처링의 기본 사용 방법1. 배열 디스트럭처링 : 배열의 요소를 순서에 따라 개별 변수로 할당합니다.// 배열 디스트럭처링const arr = [1, 2, 3];const [first..

숫자 단위에 맞춰 쉼표, 서수 표현, 단위 이니셜 추가하기 웹에서 숫자를 표시하다 보면 단위나 상황에 따라 후처리를 해주는 경우가 종종 있습니다. 예를 들면 천 단위가 넘어가는 금액을 '1000000＄'와 같이 쓴다면 가독성도 떨어지고 조금 부족해 보입니다. 자바스크립트를 이용해 숫자에 아래처럼 여러 가지 효과를 주는 코드를 공유하겠습니다.😊 쉼표 추가하기 서수로 표현하기 단위 이니셜 추가하기 쉼표 추가하기 const numberWithCommas = (number) => { if (typeof number !== 'number') { throw new Error('Input must be a number.'); } return number.toLocaleString(); // 브라우저의 언어 설정에 따..

Javascript에서 반복문 사용하기 자바스크립트에서도 코드 반복을 위한 반복문을 작성할 수 있습니다. 자바와 마찬가지로 do-while문, while문, for문 세 종류를 사용할 수 있습니다. do-while do-while문은 while의 조건이 true인 경우 do 블록 안의 코드를 반복합니다. 주로 조건의 true, false 여부와 상관없이 코드를 최소 한 번은 실행시키기 위해 사용합니다. 아래 코드는 i가 0보다 클 동안 i의 값을 알림 창으로 띄워주는 코드입니다. let i = 10; do { alert(i); i-- } while (i); while while문은 조건이 먼저 명시되고 실행코드가 나중에 나타나게 됩니다. 조건이 true인 한 코드를 반복하게 됩니다. 아래 코드의 경우는 ..

HTML 문서에 Javascript 삽입하기 HTML 문서에는 여러 가지 태그를 사용할 수 있는데 이렇게 스크립트 태그 내부에 src 속성으로 파일 경로를 입력하면 외부 스크립트 파일을 HTML 문서에 추가할 수 있습니다. 외부 스크립트를 가져오는 경우는 크게 두가지로 나눌 수 있습니다. 스크립트의 길이가 너무 길어 HTML 문서에 삽입하면 코드의 길이가 너무 길어지는 경우 여러 HTML 문서에서 공용으로 사용하게 될 스크립트인 경우 여러 개의 스크립트를 불러오고 싶다면 도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻 감사합니다.🙂

Javascript에서 데이터 형식 변환하기 자바스크립트도 데이터 형 변환을 지원합니다. 대표적으로 alert 함수는 값을 문자열의 값으로 자동 변환하고 수식 연산자는 전달받은 값을 숫자로 자동 변환합니다. 문자형으로 변환하기 alert 메서드는 매개변수로 문자형을 받기 때문에 alert 메서드가 호출될 때 괄호 안의 값은 자동으로 문자열로 변환됩니다. 또는 String() 함수를 호출해 괄호 안에 값을 전달함으로써 명시적으로 문자열 형식으로 변환할 수 있습니다. 변수에 따옴표나 큰따옴표 기호를 더하는 방식으로도 문자열로 형변환을 할 수 있습니다. 문자열 변환하기 function castingToString(){ let a = 1; let b = 1+''; let c = String(a); alert(t..

실시간으로 두 개의 input 요소의 값 비교해서 이벤트 발생시키기 예를 들면 입력한 두 개의 비밀번호 값이 일치하는지 검사해야 하는 경우는 정말 자주 있습니다. 그럴 때 값을 비교해서 이벤트를 발생시키는 방법을 기록합니다. Template 두 개의 input 요소를 추가해 줍니다. New password Enter again Script document.addEventListener("DOMContentLoaded", function() { const newPassword = document.querySelectorAll(".newPassword"); let password1 = ""; let password2 = ""; newPassword.forEach((input, index) => { input..