JavaScript

cypress & cypress studio 사용하기 (e2e 테스트)

e2e 테스트는 End to End 테스트로, 유닛 단위 테스트와는 정 반대로 전체적인 테스트를 의미한다. 웹페이지는 자주 수정이 일어날 수 있기 때문에 이런 전체적인 테스트가 어렵다고 생각했었는데, 이번에 Cypress와 Cypress Studio를 사용해보고 생각이 바뀌었다. 이렇게 손쉽게 테스트를 작성할 수 있다면, 몇 번이라도 테스트를 세팅할 수 있을 것 같다! 🌧️ Cypress 설치하기 npm i -D cypress 🌧️ Cypress 실행하기 npx cypress open 설치와 실행 모두 위와 같이 간단하게 할 수 있다. 실행을 따라가면, spec을 생성하고 이곳에서 직접 화면을 보며 테스팅을 진행할 수 있다. 그렇지만, 테스트 코드는 직접 작성해야 한다. 그러나, Cypress에서는 HT..

Drag Event에서 dataTransfer로 데이터 전달하기

Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..

input 붙여넣기 방지하기

때로는 보안과 같은 이유로 input에 붙여넣기가 허용되지 않을 수 있다. 이 경우, 붙여넣기 이벤트를 탐지하고 해당 이벤트가 제대로 작동하지 못하도록 해주어야 한다. 이번엔 이를 어떻게 구현할 수 있을지 알아보았다. 다음과 같이 input이 있다. 이 input에 붙여넣기를 허용하지 않기 위해서는 어떻게 해야할까? eventListner를 사용하면, 이를 간단하게 구현할 수 있다. const input = document.querySelector("input"); input.addEventListener('paste', (event) => { event.preventDefault(); alert("!") }); paste 이벤트가 발생하였을 때, 기존의 이벤트를 없애고 알림창을 띄운다. 만약 당신이 위..

Javascript 메모리 누수가 발생하는 경우

자바스크립트에서 때때로 메모리 누수가 발생하는 경우가 있다. 가비지 컬렉터가 파악하지 못해 할당된 메모리가 해제되지 못할 수 있다. 이런 경우, 메모리 누수가 누적이 되면 성능저하와 심할경우 프로세스가 중단될 수도 있다. 메모리 누수가 발생하는 경우를 알고 이를 피하는 것이 좋은 자바스크립트 개발자이므로, 어떤 경우 메모리 누수가 발생하는지 알아보았다. 전역 변수의 사용 function fn() { leak = "Global Variable Memory Leak"; } 위와 같은 전역 변수는 프로세스가 종료될 때 까지 메모리에 존재하므로, 사용하지 않는 전역 변수는 메모리 누수의 원인이 될 수 있다. 이벤트 리스너를 해제하지 않음 function EventListnerLeak() { const btn =..

localStorage와 sessionStorage 알아보기

브라우저에 데이터를 저장하는 방법으로 localStorage와 sessionStorage 두 방법이 있다. 두 저장소의 차이점으로는, 둘 다 새로고침을 해도 브라우저에 데이터가 남는다. 다만, 창을 닫으면 session storage는 데이터가 사라지는 반면 local storage는 창을 닫아도 브라우저에 여전히 데이터가 남아있는 특징이 있다. localStorage는 브라우저 전체에서 공유되는 반면, sessionStorage는 같은 브러우저 탭 내부에서만 데이터가 공유된다. 기본적인 사용법은 두 스토리지 모두 같다. sessionStorage.setItem("key1", 123); const value = sessionStorage.getItem("key1"); console.log(value); ..

브라우저 인터넷 연결 확인하기 (with Javascript, React 커스텀 훅)

브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..

자바스크립트 최단거리 알고리즘 (다익스트라 알고리즘, Dijkstra)

최단거리를 구하는 알고리즘은 다양한 방법으로 구현할 수 있다. 최단거리 알고리즘은 코딩테스트에서도 많이 사용되고, 생각보다 최단거리를 구해야할 경우가 종종 있기에 이번 기회에 정리하도록 하였다. 이번에는 자바스크립트로 가장 기본적인 최단거리 알고리즘 방법인 다익스트라(Dijkstra) 알고리즘을 구현해보도록 하였다. 🥩 다익스트라 알고리즘은 최단거리를 구하는데 사용되는 대표적인 알고리즘 중 하나이지만, 그 외에도 벨만-포드 알고리즘, A* 알고리즘, 플로이드-워셜 알고리즘 등 다양한 알고리즘을 통해서 최단거리를 구할 수 있다. 🧀 알고리즘의 선택은 문제의 제약사항과 성능 요구사항에 따라 달라질 수 있다. 다익스트라 알고리즘은 하나의 출발점에서 다른 모든 정점까지의 최단거리를 구하는 알고리즘으로 아래는 다..

webpack의 기초에 대해서 알아보기

webpack은 대표적인 자바스크립트 번들러이다. 이 번들러는 js 파일들을 최적화하고 하나의 파일로 만들어주는 역할을 하는데, 거기에 더해서 자바스크립트에서 번들링이 필요한 이유를 이해할 필요가 있다. webpack의 필요성 기본적으로 js파일은 script 태그를 통해서 html에 연결된다. 일반적인 html 파일 이 경우, js 파일이 하나라면 문제가 없지만 대부분의 경우 프로젝트가 조금만 커져도 js 파일은 여러개가 될 것이다. 위의 예에서 html에 사용된 js 파일은 각각 다음과 같다. // index.js let zombie = "one"; // hi.js zombie = 777; // bye.js window.alert(zombie); html 파일을 열어보면, 777 이라는 값을 보여주는..