728x90 javascript6 왜 console.log는 내가 찍은 값이 아닌 바뀐 값이 보일까? 개요Javascript로 개발을 하다 보면 가장 자주 사용하는 기능 중 하나가 console.log 이다. 서버에서 내려준 응답 값을 확인하거나, 디버깅을 위해 중간 결과를 출력할 때 없어서는 안 될 도구이다. 그런데 최근 개발 중 위 기능이 예상과 다르게 동작하는 것을 발견했다. 서버에서는 a라는 값을 내려주었고, 프론트에서 해당 값을 변경하기 전에 console.log를 찍었으나 브라우저의 개발자도구를 통해 확인한 값은 변경된 값이 보였다. 이번 글에서는 이러한 현상이 왜 발생하는지, 어떻게 의도한 대로 값을 확인할 수 있는지 정리한다. 문제 상황다음은 이해를 돕기 위한 간단한 예시 코드이다.fetch("/api/data") .then(res => res.json()) .then(data => {.. 2025. 8. 30. 자바스크립트의 클로저(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. 이전 1 2 다음
