본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그

JavaScript13

trim() 함수 Javascript에서 문자열의 앞뒤 공백을 제거하는 함수이다 let password = " secret ";if (password.trim() === "secret") { console.log("Password is correct");} else { console.log("Password is incorrect");} let password = "       secret     "는 trim을 사용하면 "secret"이 된다 하지만 문자열 중간 중간에 있는 공백은 제거되지 않는다 예) "      Hello World     "는 "Hello World"가 된다 " HelloWorld"가 되지 않는다 2024. 6. 10.
import 시 index.js 생략 예를들어 현재 파일과같은 위치에 있는 main 폴더 아래에 index.js 파일이 있다고 가정하면 import '~/main/index.js'; 일반적으로 이렇게 추가하는데 index.js 파일의 경우 파일명이 생략 가능하다import '~/main'; 이런식으로 index.js 파일은 노드 모듈 시스템 및 대부분의 모듈 번들러에서 기본적으로 가져오는 파일명이라 그렇다고 한다. 2024. 5. 7.
객체 속성을 정의하는 두가지 방법 자바스크립트에서 객체를 생성했을때 속성을 정의하는 방법은 두가지가 있다. 1. 객체 축약 문법을 사용한 방법export default { name: 'app', data() { return { testStatus: false, }; },}; ES6의 객체 축약 문법을 사용한 방법이고 2. 객체 리터럴 문법을 사용한 방법export default { name: 'app', data: { loadingStatus: false, },}; 이 두 가지 방법의 가장 큰 차이점은 자바스크립트 객체를 생성하는 방식이다.첫 번째 방법은 data 속성을 함수로 정의하고, 그 함수가 호출될 때마다 새로운 객체를 생성하여 반환한다. 이렇게 함으로써 각 컴포넌트 인스턴스가 고유한 데이터 객.. 2024. 5. 2.
onkeydown, onkeyup, onkeypress onkeydown 키를 눌렀을때 이벤트이다. shift, alt, controll, capslock 등의 모든 키에 동작한다. 단 한영변환, 한자 등의 특수키는 인식 못한다. onkeyup 키를 눌렀다가 땠을 때 이벤트이다. onkeydown과 인식하는 키가 같다. onkeypress 실제로 글자가 써질때 이벤트이다. shift, tap, enter 등의 특수키는 인식 못한다. 2024. 3. 25.
CK Editor 게시판이나 블로그에 보면 글 자체가 html 형태로 저장되는걸 볼수있다. 개인 프로젝트로 블로그를 개발했을땐 그저 본문을 텍스트로 저장했는데 회사 사이트의 게시판 기능 분석중 글 내용이 html 형식으로 저장되어 있는것을 확인했다. 알아보니 CK Editor란 라이브러리를 사용한것 사용법은 다음과 같다 CKEditor 해당 코드를 입력하면 블로그나 카페 등에서 자주 보이는 글 작성 폼이 보이는것을 확인할 수 있다. 2024. 3. 13.
웹 애니메이션 구현 방법 setTimeout() or setInterval() let count = 0; function animate() { setTimeout(() => { if(count >= 20) return; console.log('현재시각은', new Date()); count++; animate(); },500); } animate(); requestAnimationFrame var count = 0; var el=document.querySelector(".outside"); el.style.left = "0px"; function run() { if(count > 70) return; count = count + 1; el.style.left = parseInt(el.style.left) + count + "p.. 2024. 2. 28.