자바스크립트에서 변수가 선언되기 전에 접근하면 어떤 결과가 발생할까? 룰과 매너를 지킨 개발자라면 다음과 같은 에러가 발생할 것이다. console.log(a);const a = "asd"Uncaught ReferenceError: a is not defined ... a라는 변수가 선언되기 전에 호출을 했으니 당연한 결과일 것이다. 하지만 var 키워드를 사용한다면 다음과 같은 결과가 발생할 것이다. console.log(a);var a = "asd"undefined undefined 라고 출력이 되고 에러를 발생시키지 않는다.지난번 스코프에서도 경험했지만 var 키워드를 멀리해야 하는 이유 중 하나이다.  JavaScript로 로직을 작성하는 과정에서 에러를 만나게 되면 동작을 멈추고 화면에 노출된다..

const variablesArea = function () { let confined = "I'm trapped!";}console.log(confined); // confined is not defined ... JavaScript에서 함수에 선언한 값이 외부에서 호출되지 않는다. 이것은 Scope라는 개념이 있어서 그렇다.  우선 전역 스코프와 지역 스코프에 대해서 먼저 알아보자 .  전역 스코프, 지역 스코프 let x = 0; const scopeTest = function () { let y = 1; console.log(x); // 0}console.log(x); // 0console.log(y); // y is not defined ... 위 코드의 전체 영역을 전역 스코프 공간이..

html 파일에서 스크립트의 실행 순서는 위에서부터 읽어온다. 그렇기 때문에 대부분의 스크립트 파일을 body 제일 마지막에 넣어주는 방식으로 처리한다.  // ...  이렇게 사용하는 이유는 script 태그에 있는 코드가 html 코드에 영향을 받아서 실행되기 때문에 먼저 script가 로드되고 html 코드가 불러와지면 오류가 발생할 수 있다.   head에 있는 querySelector가 실행되는 시점에는 div.test가 로드되지 않았기 때문에 아무것도 불러오지 못한다. 그런 상태에서 ele 관련 속성을 사용하면 오류가 발생하는 것이다.  하지만 script 태그 내부에서 적어주는 방식이 아닌 파일을 가지고 오거나 외부 플러그인을 가지고 오는 경우 head에 작성해도 문제..

React나 Vue 같은 라이브러리가 아닌 html에 바로 Script 태그를 사용할 때 주의해야 할 것이 전역변수이다. const나 let으로 변수를 만들 때 잘못하면 전역에서 만들어지기 때문이다.  // ... // ...  위와 같이 JavaScript 코드를 작성했다고 생각해보자.  여기서 전역변수는 vari 와 clickHandler이다. 단순 이렇게 사용하는 것이 문제가 되는 것은 아니다. 하지만 추후 다른 개발자가 동일하게 vari와 clickHandler로 변수를 만들 수 있는 여지가 있다면 어떻게 될까? 코드가 합쳐지면서 동일한 명칭을 가진 변수가 생기면서 오류가 발생할 것이다.  이것을 해결하는 방법은 2가지가 있다. 즉시 실행 함수 표현식정의되자마자 즉시 실행되는 ..

React에서는 React Router Dom, Next에서는 next/navigation 을 사용해서 주소와 관련된 처리를 한다. 프론트엔드 작업을 하면서 History 관련 코드를 직접 사용하는 경우는 많이 없다.  그럼 History을 잊어도 상관 없을까? 하지만 골수까지 뽑아먹어야 될테니 History에 뽑아먹을 게 있는지 알아보려고 한다.  History브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 설명을 보면 심상치 않은 복잡한 기능이 가능할 것 같다.방문 기록을 조작한다면 들어오지 않은 페이지를 들어왔던 것처럼 변경도 할 수 있는건가?  속성 length세션 기록의 길이를 나타내는 정수를 반환한다.  여기서 말하는 세션 기록..

DOM을 사용하는 경우는 React를 사용하면서 많이 줄어들었다.  하지만 특정 애니메이션 등을 작업하기 위해서 State 등을 사용할 수 있겠지만 Ref를 사용해서 DOM을 변경하는 것도하나의 방법이다. 즉, React를 사용하면서 Ref를 사용한 DOM 스크립트를 사용할 수 있는데, 사용하는 경우가 적다보니 자주 사용하는 명령어 외엔 어떤게 있는지 모르는 경우가 있어 정리를 해보자  DOM 선택하기  const el = document.querySelector(".element2") 가운데에 있는 요소를 가지고 오기 위해서는 querySelector를 사용하면 간단하게 가지고 올 수 있다.  document.getElementById 같은 방식으로 가지고 오는 것이 더 익숙한 사람도 있겠지만..

자바스크립트에서 객체를 사용할 때 data && data.list.map 과 data?.list.map 을 사용하는 경우가 있다. 둘다 작동되는 것은 동일한데 어떤 경우에 뭘 사용하는게 좋을까? data && data.list.map && 는 data가 truthy한 값 ( null, undefined, false, 0, NaN, "" [ 빈문자열 ]이 아닌 값 )일 때 data.list.map을 실행한다. 여기서 data는 truthy한 값을 가지고 있지만 data.list가 없으면 data.list.map은 오류를 발생시킨다. data?.list.map ? 는 data가 null 또는 undefined가 아닌 경우에만 data.list.map을 실행시킨다. 만약 data는 존재하지만 data.list..

자바스크립트에서 이벤트는 아주 많이 사용되는 녀석이다. 사용된다고 말할 수준이 아닌 뺄 수 었는 녀석이다. 이때 JavaScript의 이벤트는 자식에서 부모로 전파가 된다. 이것을 버블링이라고 하는데, 조금 더 자세하게 설명하면 요소에 이벤트가 발생하면 제일 상단의 요소를 만날 때 까지 모든 이벤트를 전파시킨다. 또는 a 태그는 클릭하면 페이지를 이동시키고, form 태그는 내부 입력값을 전송한다. 이것은 자식 요소를 클릭해도 동일한 기능을 한다. 이러한 이벤트 전파를 막아버리는 것이 바로 e.preventDefault와 e.stopPropagation이다. e.preventDefault 앞서 이야기 했지만 form 태그나 a 태그는 각각 특수한 기능을 하고 있다. form은 form 안에 있는 입력 요..