본문 바로가기

Javascript6

자바스크립트의 클로저(Closure)와 스코프(Scope) 아주 쉽게 이해하기 개요최근에 자바스크립트를 배우는 친구와 대화를 나누면서 클로저(Closure)와 스코프(Scope)에 대한 질문을 받았다. 많은 개발자들이 이 두 개념을 처음 접했을 때 혼란스러워하는 것을 보았다. 그래서 이번 글에서는 자바스크립트의 클로저와 스코프를 쉽게 이해할 수 있도록 설명해 보려고 한다. 스코프란 무엇인가?스코프는 변수의 유효 범위를 정의하는 개념이다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있다. 전역 스코프는 코드의 어디에서나 접근 가능한 반면, 지역 스코프는 특정 함수 내에서만 접근할 수 있다. 예를 들어, 아래와 같은 코드를 보자.let globalVar = "나는 전역 변수다!";function testScope() { let localVar = "나는 지역 변수다!"; .. 2024. 10. 5.
Screenlog.js 로그 쉽게 확인하기 (모바일 버전 작업) 개요웹 프론트엔드 개발을 하다보면 ajax를 통해 페이지 일부를 갱신하는 작업을 많이 하게 된다. 이 때 서버에서 받아온 데이터가 개발자의 의도와 달라 화면에 제대로 뿌려지지 않거나 하는등의 현상을 쉽게 접해볼 수 있는데, 개발자는 이러한 경우 가장 쉽게 이슈를 처리할 수 있는 방법으로 console.log와 개발자 도구를 사용하곤 한다. 이 외에도 화면상에서 클라이언트와 몇 번의 인터렉션을 거친 뒤 특정 api를 호출하기 전 validation을 한다던지 등의 작업을 할때에도 console.log를 사용하여 쉽게 값을 확인할 수 있는데, 문제는 이 값을 확인하려면 개발자도구를 열어야 한다는 점에서 발생한다. 모바일 vs PC현재 내가 회사에서 작업하고 있는 서비스들은 공통적으로 PC 웹 화면 뿐만 아니.. 2024. 10. 4.
[JavaScript] 이벤트 버블링과 캡처링 개요차세대 프로젝트에서 제이쿼리를 이용하여 프론트엔드 개발 중, 의도치 않은 이벤트 중첩으로 인해 알람창이 중복으로 뜨는 등의 문제를 경험한 적이 있다. 처음에는 이런 현상이 왜 발생하는지 몰랐는데, 알고 보니 자바스크립트의 이벤트 흐름인 버블링과 캡처링 개념을 제대로 이해하지 못했기 때문이었다. 이번 글에서는 이 두 가지 개념을 쉽게 설명하고자 한다. 이벤트 버블링이란?이벤트 버블링(Event Bubbling)은 자바스크립트에서 이벤트가 발생한 자식 요소에서 시작해 부모 요소로 전파되는 방식이다. 물 속에서 발생한 기포 방울(Bubble)이 아래에서 위로 올라가는 이미지를 연상하면 쉽다. 즉, 가장 구체적인 요소에서 이벤트가 발생하면 그 이벤트가 상위 요소들로 차례차례 전달된다. 예를 들어, 안에 있.. 2024. 9. 26.
[JavaScript] 자바스크립트에서의 객체 비교 방법 (=== vs ==) 개요자바스크립트를 사용하다 보면 객체를 비교하는 상황을 자주 마주하게 된다. 그때마다 ===와 ==를 사용하면서 혼란스러울 때가 많았다. 겉보기에는 똑같아 보이지만 두 연산자의 작동 방식이 다르기 때문이다. 특히 객체 비교에서 이 차이는 더욱 두드러지게 나타난다. 그래서 이 개념을 정리하고, 다른 개발자들과 공유하고자 한다.  ===와 ==의 차이점 자바스크립트에서 ==는 느슨한 동등 비교, ===는 엄격한 동등 비교라고 부른다. 차이점은 ==는 비교할 때 데이터 타입을 자동으로 변환해 동등 여부를 판단하지만, ===는 타입 변환 없이 값과 타입이 모두 일치해야 true를 반환한다.console.log(2 == '2'); // true, 타입 변환 발생console.log(2 === '2'); // f.. 2024. 9. 23.