본문 바로가기

JavaScript

(15)

[ JS ] e.stopPropagation 과 e.preventDefault 차이 알고 넘어가기 e.stopPropagation()과 e.preventDefault()는 비슷하게 사용되지만, 아예 다른 이벤트이다.e.stopPropagation()은 이벤트 핸들러가 상위 태그에서 실행되지 않도록 막는 역할을 한다. 다시말해 이벤트의 버블링을 중지하여 현재 이벤트가 상위 요소(부모)로 전파되는 것을 막는다.e.preventDefault() 는 기본 브라우저 동작을 가진 일부 이벤트가 해당 기본 동작을 실행하지 않도록 방지한다. 보통 링크 클릭 시 페이지 이동막기, 폼 제출시 페이지 리로드 방지등의 기본 동작 제어 역할을 한다. e.stopPropagation() 이벤트 핸들러의 버블링을 방지해준다.( 버블링 : 이벤트의 자식 컴포넌트에서 부모로 (안쪽 -> 바깥쪽) 전파되는 것. ) ex..

[ JS ] Promise VS async await 비교 자바스크립트에서 비동기 작업을 처리하는 주요 방식인 Promise와 async/await에 대해 비교해보려고 한다. 평소 작업을 하면서 둘을 사용하는데, 정확히 어떻게 다른지 차이점과 특징을 비교해보려고 한다. (둘 다 ES6+ 이후에 도입되었다.) 1. 문법 - Promise: `.then()`, `.catch()`, `.finally()` 메서드를 체인으로 연결하여 사용. - async/await: 더 동기적인 코드 스타일이며 `try/catch` 구문으로 에러를 처리한다. 2. 가독성 - Promise: 복잡한 비동기 로직에서는 중첩된 `.then()`으로 인해 "콜백 지옥"과 유사한 상황이 발생할 수 있다. - async/await: 일반적으로 더 읽기 쉬운 직관적인 코드를 ..

[ JS ] Event.stopPropagation와 Event.preventDefault 의 차이점 알아보기. JavaScript에서 자주 사용되지만 종종 혼동되는 두 가지 메서드인 Event.stopPropagation()과 Event.preventDefault()에 대해 정리를 해보려고 한다. Event.stopPropagation() `stopPropagation()` 메서드는 이벤트의 버블링을 중지시킨다. element.addEventListener('click', function(event) { event.stopPropagation(); // 이벤트 처리 로직}); 주요 특징 )- 이벤트가 상위 요소로 전파되는 것을 막는다.- 중첩된 요소에서 특정 이벤트를 독립적으로 처리하고 싶을 때 유용하다. 사용 예시 )중첩된 div에서 클릭 이벤트가 발생했을 때, 해당 div에서만 이..

[ TypeScript ] 협업을 위한 interface 에 힌트 주석 달기. ts로 프로젝트를 개발 중에 interface에 추가적인 설명이 있으면 좋겠다~! 라는 생각이 들어서 평소에는 method나 method parameter에 대한 설명을 달아줄 때 자주 사용하던 JSDoc을 이용하여 interface 설명을 추가해 보았다. 먼저 JSDoc에 대해 설명하자면, JSDoc은 자바스크립트용 API 문서 생성기로 자바스크립트 애플리케이션 또는 라이브러리의 API를 문서화하는 목적으로 사용한다. module, namespaces, classes, methods, method parameters 등과 같은 항목들을 문서화할 수 있다. JSDoc은 코드 자체와 함께 소스코드에 직접 문서 주석을 추가하는 기능을 가지고있다. JSDoc 주석은 일반적으로 문서화하려는 코드 바로 앞에 위치..

[TS] 프로젝트에 tsconfig 설정하기. 프로젝트를 처음 세팅할 때, TypeScript 로 타입 체크를 어디까지 허용할지, 어떤 설정으로 우리의 프로젝트를 쓸지 고민하던 중 팀원들(+나)의 타입스크립트 능숙도가 그리 높지 않다는 것을 알게되어 기본 타입스크립트 세팅을 하며 쓰는 글. tsconfig.json 설정 fucntion add(a,b){ return a+b; } add(10, null); // noImplicitAny 설정이 꺼져있다면 위의 코드는 타입체커를 통과하고, // noImplicitAny 설정이 켜져있다면 오류가 된다. **위의 예시의 경우, 타입스크립트의 설정에 따라 동일 코드라도 타입 체커의 통과 가능여부가 달라진다. 타입스크립트는 설정이 100개 가까이 되기때문에, 우리 프로젝트에서 어떤 타입스크립트 설정을 사용하는지..

[ JavaScript ] async await 문법 ES8에서 간단하고 가독성 좋게 비동기 처리를 동기처럼 동작하도록 구현할 수 있는 async/await가 등장했다. async/await는 프로미스를 기반으로 동작하며, async/await를 사용하면 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다. async 함수는 async 키워드를 통해 정의하고, 프로미스를 사용하여 결과를 반환한다. async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: "resolved" } asyncCall(); await 키워드는..

[ JavaScript / Promise ] 자바스크립트의 Promise에 대하여 자바스크립트는 싱글 스레드 방식으로 동작하는 언어이기 때문에 동기 방식으로 태스크를 처리한다. 그래서 비동기 방식으로 처리를 하려면 과거에는 주로 콜백 패턴을 사용했는데, 콜백 패턴은 콜백 헬로 인해 가독성이 좋지 않고 에러 처리 및 여러 개의 비동기 처리를 한번에 하기도 힘들다는 단점이 있기 때문에 ES6에서 도입된 Promise를 이용하면 이러한 단점들을 보완하며 비동기 처리를 가능하게 한다. 비동기 함수란? 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술로 작업이 완료되면 프로그램이 결과를 제공한다. 이 때문에 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결괴를 외부로 반환하거나 상위 스코프의..

[ JavaScript ] undefined와 null의 차이에 대해 알아보기. 자바스크립트에서 '빈'값을 의미하는 비슷한 원시 값이 존재하는데 바로 null과 undefined 이다. 1. undefined ES6기준 7개의 데이터 타입중 하나인 undefined는 var 키워드를 통해 선언을 하면 선언과 동시에 자바스크립트 엔진에 의해 undefined로 초기화 되기 때문에, 할당문 이전에 변수를 참조하려고 하면 undefined가 반환된다. ( let 키워드와 const 키워드는 undefined로 초기화되지 않음. ) var user; console.log(user); // undefined undefined의 값은 undefined가 유일하며 개발자가 의도적으로 준 빈 값이 아니라, 자바스크립트 엔진에 의해 undefined로 초기화된 값이다. console로 찍었을 때 u..

이전 1 2 다음

티스토리툴바