DH의 개발 공부로그

스코프(Scope) 스코프란? 번역하면 "범위" 를 뜻하며, 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다. 예를 들어 이름이 같은 2개의 변수 중 어느 것을 참조해야 하는지, 어떻게 식별해야 할지를 정할 때 필요한 것으로, 정리하자면 "식별자에 접근할 수 있는 범위" 를 정의한 것을 스코프라고 합니다. 스코프의 구분 자바스크립트의 스코프를 구분해보면 2가지로 구분할 수 있습니다. 1. 전역 스코프 (Global Scope) 2. 지역 스코프 (Local scope)전역 스코프는 전체 범위, 코드 어디에서든 참조가 가능한 스코프를 말합니다. 그리고 지역 스코프는 해당 지..

trim() trim이란? 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환해주는 메서드입니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다. 간단하게 설명하자면 자바스크립트에서 문자열의 공백을 제거할 때 사용하는 메서드입니다. 예제 const greeting = ' Hello world! '; console.log(greeting); // output: " Hello world! "; console.log(greeting.trim()); // output: "Hello world!"; trimStart() 또는 trimEnd()를 이용하여 한 쪽의 공백만을 제거할 수도 있습니다. const gre..

호이스팅 (Hoisting) 호이스팅(hoisting)이란,끌어올리다, 올리다, 게양등의 뜻으로 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 쉽게 말해서 변수 및 함수 선언이 해당 스코프의 상단으로 "끌어올려지는" 현상을 말합니다. 예시 코드를 통해서 알아보겠습니다. // 입력 코드 console.log(a) // undefined var a = 5; // 실제로는 아래와 같이 실행 var a console.log(a) // undefined a = 5 즉, 코드의 실행 순서와는 상관없이 변수 및 함수 선언이 스코프 상단으로 옮겨지는 것을 의미합니다. var과 let, const의 차이 var, let, const는 자바스크립트에서 변수를 선언하기 위해 사용이 되는..

반복문 반복문 중에서 for 또는 forEach 말고 사용은 해봤지만 자주 사용하지 않아서 헷갈리는 for...in과 for...of를 정리하고 이 둘의 차이점을 알아보겠습니다. for...in문 for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)라고 MDN 사이트에 정리가 되어있습니다. 한마디로 for...in문은 객체의 속성들을 순환하면서 작업을 수행하는 것입니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } // output //..

Script 태그 HTML 파싱 ▶️ JavaScript 파일 다운로드 후 실행 아마 대부분의 경우에 제일 많이 위치하여 사용하는 방법일 겁니다. 자바스크립트 파일을 다운로드하기 전 HTML 코드를 모두 파싱 하기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다는 장점이 있습니다. 하지만 HTML 코드가 자바스크립트 의존적인 웹사이트라면 사용자가 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다는 단점이 있습니다. 3. async 속성을 추가해 head 태그 안으로 넣기 HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱 async 속성을 추가하는 경우에는..

스토리지 자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 그리하여 보통 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하는 경우가 있습니다. 하지만 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수 있습니다. 이럴 때 이용이 가능한 것이 웹 스토리지입니다. 웹 스토리지 객체(web storage object)에는 localStorage와 sessionStorage가 있습니다. 이 두 스토리지는 브라우저 내에 키-값 쌍을 저장할 수 있으며, 페이지를 새로 고침하거나(sessionStorage의 경우) 또는 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있게 됩니..

이벤트 버블링(Bubbling) 이벤트 버블링이란 이벤트가 발생했을 때 해당 요소에 할당된 핸들러가 동작하고, 또 상위 요소에 해당 이벤트가 전달이 되어 핸들러가 동작을 하는 현상을 의미합니다. 예시를 보면 훨씬 이해가기가 쉽기 때문에 바로 확인해보겠습니다. div1 div2 div3 이런 구조에서 가장 아래에 위치한 div3을 클릭해서 이벤트가 발생을 하면 상위 요소에게 해당이벤트가 전달이 되면서 핸들러가 작동이 되는 흐름이 바로 이벤트 버블링입니다. 그렇기 때문에 결과는 이렇습니다. ※거의 모든 이벤트는 버블링 됩니다. 여기에서 중요한 키워드는 ‘거의’ 입니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있으며, 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다. 버블링 막기 가끔 버블..

서론 가격표를 표시 할 때는 10000원 보다는 10,000원 식으로 표시해야 가독성이 좋습니다. 하지만 숫자 데이터를 표시하면 콤마 없이 표시되기 때문에 이번에는 자바스크립트를 이용해서 콤마를 찍어주는 방법을 정리해보겠습니다. 1. 정규 표현식 사용하기 첫 번째 방법은 replace() 메서드에 정규 표현식을 사용하여 콤마로 변환하는 방법 입니다. const num = 123456789 console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")) // 123,456,789 ※ 정규표현식에 대해서는 글이 길어지기 떄문에 다음에 정리하겠습니다. 2. toLocaleString() 두 번째로는 toLocaleString() 메서드를 이용하여 콤마를 찍..