javascript30 자바스크립트 경과시간 체크하기 안녕하세요. 오늘은 자바스크립트에서 간단하게 경과시간 체크하는 방법을 포스팅하려고 합니다. 보통 성능 체크를 하거나 서비스의 로딩 체크 등 실제 걸리는 시간을 체크할 때 많이 사용합니다. 그럼 어떤 방식으로 시간 체크를 하는지 알아볼까요?! 1. Date.now() 먼저 위의 예제 소스 코드를 보게 되면 간단하게 예제 함수를 만들었습니다. 경과 시간을 체크하기 위해서 로직의 시작 전 시간과 종료된 종료 시간을 체크해야 합니다. 시간 체크를 위해서 Date.now() 함수를 사용하였습니다. 시작 시간 : var startTime = Date.now(); 종료 시간 : var endTime = Date.now(); 이렇게 로직의 시작과 종료 시점에서 시간을 체크하고, 체크가 끝난 후 마지막에 두 시간차를 구.. 2023. 1. 25. 자바스크립트 히스토리 (history) 알아보기 ! 안녕하세요. 오늘은 자바스크립트의 히스토리(history) 기능에 대해 정리해보려고 합니다. 히스토리 기능은 브라우저의 페이지를 다루는 기능이며, 서버 통신 없이 간단하게 페이지 전환이 가능한 기능입니다. 물론 요즘 많이 사용하는 SPA framework (react.js, vue.js, angular.js 등)를 사용하면 라우터 처리 및 페이지 전환 기능이 잘 구현되어 있어 사용할 경우가 많지는 않지만 자바스크립트의 순 기능들이 필요한 경우가 꼭 한 번씩 올 때가 있습니다! 그렇기 때문에 히스토리 기능의 동작 원리를 정리해 두시면 도움이 많이 되실 겁니다 :) 그럼 바로 알아볼까요?! 1. back 현재 페이지에서 뒤로 한 페이지 이동 history.back(); history.back()의 기능은 현.. 2023. 1. 25. 자바스크립트 프로미스 이해하기 ! 안녕하세요. 오늘은 자바스크립트의 프로미스(Promise)에 대한 포스팅을 하려고 합니다. 지난 시간에 정리했던 자바스크립트의 콜백지옥! 에 이어서 콜백지옥의 탈출구인 프로미스입니다! 프로미스는 자바스크립트의 깊이 있는 콜백, 콜백 함수의 sync를 맞춰 순서를 보장할 수 있는 방식이며, 기존의 콜백 지옥을 경험해 보셨다면 프로미스 방식은 훨씬 더 간결하면서 자바스크립트를 전문적으로 다루는 느낌도 듭니다 :) 물론 개인의 차이는 있겠지만 보통은 그렇더라고요! ㅎㅎ 그럼 프로미스는 콜백지옥과 어떤 차이가 있는지 예제를 통해서 하나씩 알아보도록 하겠습니다. Promise 프로미스는 자바스크립트에서 비동기 처리되는 여러 함수들을 순차적으로 처리될 수 있도록 지원하는 기능입니다. 물론 개발하는 업무에 따라서 기.. 2023. 1. 22. [javascript] 자바스크립트 콜백지옥 알아보기! 안녕하세요. 오늘은 자바스크립트의 콜백지옥에 대해 포스팅하려고 합니다. 말만 들어도 지옥 같은 콜백의 지옥... 저도 콜백지옥에 대한 이해와 해결 방안을 깨닫기 위해서 수많은 경험과 검색을 통해 알게 되었고, 이를 잊지 않기 위해 글로 남겨놓고자 하였습니다. 이해하고 나면 정말 별거 없지만 이해될 때까지 경험하고 보다 보면 이해가 되실 거예요! 그럼 몇 가지 예제를 통해 하나씩 알아보겠습니다. 콜백 지옥 1. 콜백(callback) 지옥이란 자바스크립트에서 비동기 처리 로직을 위해 콜백 함수를 연달아 계속해서 사용하다 보면 코드의 깊이가 깊어지면서 이를 보고 콜백지옥이라 함. 2. 함수가 다른 함수를 호출하고 그 함수는 또 다른 함수를 호출하고... 그렇게 여러 번 반복되다 보면 코드가 순식간에 깊어지고.. 2023. 1. 21. [javascript] 자바스크립트 Failed to execute 'replaceState' on 'History': A history state object with URL 에러 해결하기! 자바스크립트에서 history를 다루다 보면 'Failed to execute 'replaceState' on 'History': A history state object with URL '...' cannot be created in a document with origin 'null' and URL'와 같은 에러가 발생하는데, 해당 에러는 history의 replaceState() 기능을 사용하다 보면 발생하는 에러다.history.replaceState()history.replaceState() 함수는 HTML5의 History API에 속하는 메서드 중 하나로, 브라우저의 세션 기록(히스토리)을 수정하여 현재 페이지의 URL과 상태를 변경한다. 이 함수를 사용하면 페이지를 새 URL로 변경.. 2023. 1. 20. 자바스크립트 호이스팅의 특징 이해하기 (var, let, const 차이) 오늘은 자바스크립트의 호이스팅(hoisting)에 대해 정리해 보려고 한다. 자바스크립트의 변수를 선언하다 보면 종종 이상현상을 확인할 수 있는데, 보통 변수를 선언한 위치보다 위에서 값이 호출되는 현상들이 있다. 이러한 현상을 호이스팅 되었다고 보면 된다. 호이스팅은 영어로 hoist의 뜻이 '끌어올리는'의 의미로 자바스크립트를 실행하게 되면 소스 코드의 최상단으로 변수들을 끌어올리게 된다다. 이러한 현상을 호이스팅이라고 한다.보통 인터프리터 언어를 개발하다 보면 유사한 현상을 볼 수 있는데, 자바스크립트 언어를 다룰 때 호이스팅은 정말 중요하며, 알고 있는 것과 모르고 있는 것의 차이는 너무 크기 때문에 호이스팅에 대한 다양한 글을 보면서 내용을 이해하는 것이 중요하다. 호이스팅 (hoist.. 2023. 1. 18. 이전 1 2 3 4 5 다음
