본문 바로가기
[js] 자바스크립트 null 이지만 0은 아닐 때 자바스크립트에서 변수가 null 이지만 0은 아닐 때를 찾는 방법입니다. 자바스크립트 null 이지만 0은 아닐 때 null이지만 0을 걸러낼 경우 if (!foo && foo !== 0)
[js] 서버 없이 form에서 데이터 전송 기능 구현 (ft. Google Apps Mail) 웹사이트에서 서버 없이 프론트에서 contact 기능을 구현 합니다. 웹사이트에서 본인의 이름, 연락처, 메일, 메시지를 보내는 컨택트 기능을 사용할 때, 보통 백엔드를 이용해 서버에 데이터를 저장합니다. 하지만 서버가 없는 간단한 랜딩페이지로 구성된 사이트의 경우. 서버 없이 프론트에서 바로 데이터를 전송하고, 저장하는 방법이 있습니다. 참고 사이트: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us..
[js] 배열과 배열의 비교 (compare arrays in javascript) 배열과 배열이 같은지 여부를 확인하는 방법입니다. 배열과 배열을 === 로 비교하였을 때 값은 false 입니다. let arr1 = [1,2,3]; let arr2 = [1,2,3]; console.log(arr1===arr2); //false 배열과 배열의 비교 두 배열의 길이가 같은지 비교 한 배열의 각 요소가 다른 비교 대상의 배열에도 존재하는지 여부 let arr1 = [1,2,3]; let arr2 = [1,2,5]; const result = arr1.length === arr2.length && arr1.every((value, idx) => value === arr2[idx]); console.log(result) //true
[js] 디데이 카운더 기능 라이브러리 웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sky, and the June solstice marks the beginning of summer in the Northern Hemisphere. www.timeanddate.com 먼저 구글에서 time and dat를 검색하거나 위의 링크를 눌러 사이트로 이동하세요. 메인 화면에서 오른쪽 상단 메뉴에서 Free Fun > Free Countdown For Your Site 선택. 여기서 카운..
[js] 팝업창 오픈 후 배경 스크롤 방지 자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.style.overflow = 'hidden' body.style.width = '100%' } const onCloseGuide = () => { //팝업창 닫을때 body.style.removeProperty('overflow') body.style.removeProperty('width') }
[js] 천자리 콤마 적용 (천자리 점찍기) 자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다. toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈 값이면 사용자 로컬 환경의 locale을 default로 사용합니다. Number(no)?.toLocaleString('en') 정규식 사파리 환경 지원을 하지 않아 아이폰 개발을 원한다면 사용하면 안됩니다. num.toString().replace(/\B(?
[js] 페이지내 특정 위치로 스크롤 이동하기 제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 태그 내에 삽입합니다. easing 효과를 위해 jquery.easing 스크립트 파일을 태그 내에 삽입합니다. easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다. html 버튼 script //네이게이션 menu click시 easing기능으로 부드럽게 이동 $(".btn").click(function(event){ event.preventDefault(); //이전의 이벤트를 기본값 x = $(this).attr("href"); /..
[js] 문자열 특정 문자 추출하기 substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코드만 추출할 경우입니다. http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL... 애프터 코드: AgAFQlg5MTRIeXp/kL 문자열 특정 문자 추출하기 let url = http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL let data = url.substring(url.indexOf('=') + 1) // = 다음 문자열부터 끝까지 추출 console.log..
[js] 배열 map으로 object에 key 추가하기, value 추가 map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6: {day: '2022-05-16'} 가공 후 after 0: {day: '2022-05-10', data: ''} 1: {day: '2022-05-11', data: ''} 2: {day: '2022-05-12', data: ''} 3: {day: '2022-05-13', data: ''} 4: {day: '2022-05-14', data: ''} 5: {day: '2022-0..
[js] 자바스크립트 debugger 활용 자바스크립트에서 디버깅시 debugger 기능을 활용할 수 있습니다. debugger debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음 Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있음 실행 흐름을 따라가면서 코드를 체크하여 검증할 수 있음 debugger 코드 사용 debugger; 라고 코드 중간에 삽입하여 사용하면 debugger 실행 시점일때 개발자 도구가 source로 바뀌면서 화면이 멈춥니다. debugger; 사용 화면 디버깅 버튼을 누르며 한줄씩 코드를 실행드가 실행해보면 각 변수에 할당되는 값이 우측에 표시되기 때문에 디버깅을 위해 console이나 alert로 값을 일일이 찍어서 확인할 필요가 없습니다. 오른쪽에 도돌이표처럼 생긴 버튼..
[js] 자바스크립트 함수 선언과 함수 호출 자바스크립트 함수와 함수 호출에 관한 설명입니다. 함수 선언 코드 형식1 es6 함수 문법: 화살표 함수 아래 함수에서 { } 는 객체가 아니라 블럭 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = () => ({ ... }) const add = () => a+b; //함수 선언 //const add = () => {return a+b} 위의 함수와 같음 //const add = () => ({a+b}) 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 코드 형식2 매개변수를 넣어 다양한 함수 활용 가능 function cal(func,a,b) { //함수 선언 return func(a,b) //명령 } //conts cal = (func,a,b) => func(a,b) 와 위..
[js] onclick 이벤트 링크 넣기 onclick 이벤트를 이용해 링크를 넣는 방법입니다. html에서 링크를 연결할 때는 주로 를 연결하는데 다른 방법으로 태그에 onclick 이벤트를 걸어 링크를 삽입할 수 있습니다. onclick 이벤트 링크 넣기 onclick="location.href='';" onclick 이벤트 링크 예제 ...
[js] html 이미지 저장하기 기능 구현 (ft. html2canvas) html 라이브러리를 통해 이미지 저장하기 기능입니다. html2canvas html을 canvas로 변환하여 캡처된 화면을 이미지 저장해주는 라이브러리 입니다. https://www.npmjs.com/package/html2canvas html2canvas Screenshots with JavaScript. Latest version: 1.4.1, last published: 2 months ago. Start using html2canvas in your project by running `npm i html2canvas`. There are 1381 other projects in the npm registry using html2canvas. www.npmjs.com html2canvas 적용 코..
[js] 단어 filtering 다중 단어 filtering (ft. includes, some) 원하는 단어 또는 다중 단어 한번에 필터링하기 입니다. 배열 안에서 특정 단어 또는 text가 들어간 요소만 추출하거나 제외시키는 작업이 필요할 경우 사용합니다. filtering에 자바스크립트의 includes와 some 메소드를 사용하여 구현합니다. includes는 true, false를 반환합니다. some은 한가지라도 참일 때 true를 반환하고 빈 배열이면 false를 반환합니다. 단어 필터링 배열 안에 "AA"가 들어가는 단어를 필터링할 때 Array.filter(el => el.includes('AA')) Array.filter(el => el.includes('AA')).map(el => {el}) 배열 안에 "AA"가 들어가는 단어만 빼고 필터링 할때 Array.filter(el => ..
[js] 반응형 이미지 맵 구현 (ft. image-map 라이브러리) js 또는 react에서 라이브러리를 이용해 반응형 이미지 맵을 구현합니다. react에서 resposive image map 구현을 시도할때 가장 유명한 라이브러리는 jQuery를 이용한 rwdimagemap 라이브러리인데 react에서 jQuery 을 설치하고 싶지도 않았고, 설치하였구나 작동이 안되고 오류 메시지가 출현하였습니다. 그래서 react에서 할 수 있는 다른 javascript responsive image map 라이브러리를 찾았습니다. 반응형 이미지 맵 구현 하기 구현 화면 image-map 라이브러리 image-map 이라는 라이브러리고 구글에서 image-map을 검색하여 npmjs 사이트에 가면 자세한 자료를 볼 수 있습니다. image-map 라이브러리 사용법 image 좌표 ..