ㅇㅅㅇ

백엔드 지식이 없거나 구축하기가 번거울 때, 간단하게 서버와 연동해서 테스트를 하고자 한다면 json-server를 설치해 사용해 볼 수 있다. json-server란? 실제 배포할 서비스용(프로덕션)이 아니라 로컬에서 혼자 연습할 때 사용하기 좋은 기본적인 Rest Api의 기능은 다 가지고 있는 라이브러리이다. json-server 설치방법 npm을 이용해 설치 npm install -g json-server 데이터베이스 역할을 할 db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "..

배열(Array)에 사용할 수 있는 내장함수 toString() : 배열을 하나의 문자열로 바꿔주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.toString()); // 애플, 구글, 아마존, 마이크로소프트, 메타 join() : 피라미터로 전달된 문자가 요소 사이사이마다 삽입되어 하나의 문자로 결합 해주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.join(" * ")); // 애플 * 구글 * 아마존 * 마이크로소프트 * 메타 console.log(brands.join(" ")); // 애플 구글 아마존 마이크로소프트 메타 p..

쇼핑몰에서 판매 중인 상품이나 장바구니 등의 정보 등 대부분의 웹 사이트에서 사용자나 서버에서 입력받은 정보를 처리하는 방식으로 동작하는데, 이러한 정보를 저장할 때 변수가 사용된다. 여기서 말하는 변수는 무엇이고 어떻게 선언할까? 변수란? 자바스크립트에서 변수는 데이터를 담는 그릇을 의미한다. 변수는 var, let, const 키워드를 사용하여 선언하고, let x; 할당 연산자(=)를 사용해 값을 할당한다. let x = "a";// 문자열 저장 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다. let x; x = 'a'; alert(x); // 변수에 저장된 값을 보여준다. 한 줄에 변수 선언과 값 할당을 할 수 있으며, 한 번에 여러 변수를 선언할 수 있다. // 한 줄에 변수 선언..

유튜브를 둘러보다 발견한 자바스크립트 라이브러리 중 하나 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 공식문서에서 말하는 장점으로는 ~4kb의 저용량 의존성 없음 매우 유연한 API SEO 친화적 을 들고 있다. *기본사용방법 여기에 지우고 다시 입력되는 등등의 옵션도 추가할 수 있다. 참고할 결과물은 아래와 같다. (코드펜에 더 좋은 예시가 많이 있으니 필요하면 그쪽을 참고하시길...) *etc 공식문서 하단에 보면 개인 및 오픈소스에는 무료지만 상업적 이용은 유료라고 한다. 용도(?)에 맞춰 잘 사용하자. 알기만 하..

바닐라 자바스크립트로 스크롤 애니메이선을 고민하며 구글링하다 알게되었다. 사용법도 간단하답 window.scroll({ top: 0, left: 100, behavior: 'smooth' }); top:창이나 요소를 스크롤하기 위해 Y축을 따라 픽셀 수를 지정 left : 창이나 요소를 스크롤하기 위해 X축을 따라 픽셀 수를 지정 behavior : 스크롤 애니메이션 설정(auto: 기본값, 즉시실행 / smooth : 부드럽게 스크롤 애니메이션) 공식문서를 보면 Window.scroll()뿐만 아니라 Window.scrollTo(),Window.scrollBy()에서도 적용가능하다고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/API/Window/scr..

모바일 디바이스를 감지해 모바일 페이지로 리다이렉트 되는 스크립트 둘 중 하나 쓰면 된당. 1. var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windowssce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { window.location.href = "이동할 경로"; } 2. 출처 : lemny.tistory.com/134 var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi..