들어가며 📖 자바스크립트를 이해하는 데 있어서 실행 컨텍스트(Execution Context)의 개념에 대해서 숙지하는 것은 중요합니다. 자바스크립트의 핵심 개념 중 하나로, 자바스크립트의 코드의 실행 순서와 방식을 결정하게 되죠. 실행 컨텍스트(Excution Context)란❓ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다. 그래서 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 아래와 같은 동작을 수행합니다. 호이스팅(hoisting) 외부 환경 정보 구성 this 값 설정 등등 이로 인해 다른 언어에서는 발견할 수 없는 특이한 형상들이 발생합니다. 동작 과정 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보..

📖 들어가며 비동기 처리 패턴을 알아보기 앞서, 비동기 처리란 무엇일까요? 비동기 처리란? 특정 코드의 연산이 완료될 때까지 전체 코드의 실행을 중단하지 않고, 다음 코드를 우선적으로 실행하는 방식을 말합니다. 이렇게 동작하는 함수를 자바스크립트에서는 '비동기 함수'라고 합니다. 비동기 처리의 한계점은 작업 완료 시점을 예측하기 어렵다는 점입니다. 하지만 이것은 비동기 처리의 본질적인 특성이며, 이를 효과적으로 관리하는 것이 중요합니다. 자바스크립트는 기본적으로 싱글 스레드(single-threaded) 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 즉, 자바스크립트는 코드가 작성된 순서대로, 위에서 아래로, 동기적으로 처리된다는 것을 의미합니다. 그렇다면 어떻게 자바스크립트가 비동기적인 ..

this 키워드의 정의 자바스크립트에서 this는 현재 실행 컨텍스트를 참조하는 특별한 키워드입니다. 기본적으로 실행 컨텍스트가 생성될 때 함께 결정이 되는데요. 즉, this의 값은 함수가 어떻게 호출되었는지에 따라 변하며, 일반적으로는 함수를 호출한 객체를 참조합니다. 일반 함수에서의 this 일반함수에서 this는 '전역 객체'를 가리킵니다. 전역 객체란? 브라우저 환경에서는 window, Node.js 환경에서는 global 객체를 가리킵니다. function main() { console.log(this); } main(); // window 객체 또는 global 객체 출력 위와 같이 이렇게 전역적으로 함수를 호출하는 것은 function main() { console.log(this); } ..

📖 들어가며 자바스크립트의 핵심 개념 중 하나인 이벤트 버블링과 캡쳐링에 대해서 알아보겠습니다. 버블링(Bubbling) 이벤트 버블링이란 무엇일까요? 한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 해당 과정이 반복이 됩니다. 간단한 아래 코드 예제를 보면 바로 이해가 될 것입니다. 가장 안쪽에 있는 p태그를 클릭했는데 3개의 핸들러가 동작하는 게 보이시나요? p에 할당된 onclick 핸들러 실행 바깥의 div에 할당된 핸들러 실행 그 바깥의 form에 할당된 핸들러 실행 documnet 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 마찬가지로 div를 클릭하면 div -..

📖 들어가며 자바스크립트에서 코드의 실행 순서와 스코프를 이해하는 데 중요한 역할을 하는 중요한 개념 중 하나인 호이스팅(hoisting)에 대해서 알아보겠습니다. 호이스팅(hoisting)이란 ❓ 호이스팅은 자바스크립트 엔진이 스크립트를 해석하고 실행하는 과정에서, 변수나 함수, 클래스 선언을 코드의 맨 위로 '끌어올리는' 것과 같은 현상을 말합니다. 보통 호이스팅에 대한 설명을 보면 '끌어올려진다'라고 대부분 설명이 되어 있는데 호이스팅이 실제로 코드를 물리적으로 최상단으로 옮기는 것은 아닙니다. 이는 자바스크립트 엔진의 내부 동작 방식을 설명하는 개념일 뿐입니다. 호이스팅은 실행 컨텍스트의 생성 단계에서 일어납니다. 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 말합니다. 생성 단계에서는 변수..

📖 들어가며 자바스크립트에서 이벤트 루프(Event Loop)는 무엇이고, 왜 중요한 개념일까요? 싱글 스레드(Single Thread)란? 자바스크립트는 싱글 스레드 기반의 언어입니다. 그렇다면 싱글 스레드란 무엇일까요? 싱글 스레드를 이해하기 전에 스레드라는 개념을 먼저 알아야 합니다. 스레드는 프로세스의 실행 단위입니다. 즉, 일을 처리하는 작은 요원과 같은 역할을 한다고 생각하면 됩니다. 싱글 스레드라는 것은 말 그대로 스레드가 하나만 존재, 일을 처리하는 작은 요원이 한 명 밖에 없는 얘기입니다. 블로킹(Blocking)과 논블로킹(Non-blocking) 우리의 작은 요원은 한 명이라서 모든 일을 한 번에 처리할 수 없습니다. 만약 우리가 컴퓨터에게 맡긴 일 중 하나가 너무 오래 걸린다면 어떻..

💡 slice() 배열 메서드 slice() 메서드는 배열의 복사본을 만들거나 배열의 일부를 반환하는 데 사용할 수 있다. slice() 메서드는 원래 배열을 변경하지 않고 대신 얕은 복사본을 생성한다는 점에 유의해야 한다. 기본 구문은 다음과 같다. slice(optional start parameter, optional end parameter) 이 예시에서는 과일 목록을 만들었다. const fruits = ['apple', 'banana', 'mango', 'melon']; slice() 메서드를 매개변수 없이 사용하는 방법 ❓ slice() 메서드를 활용해 해당 배열의 얕은 복사본을 만들 수 있다. console.log(fruits.slice()); // ['apple', 'banana', 'm..

📖 들어가며 이렇게 자바스크립트의 for문의 종류에 대한 글을 정리하는 이유는 현재 나중에 취업을 위한 코딩 테스트 알고리즘을 자바스크립트로 준비하면서 for문을 작성할 때가 많은데, 공부를 하면서 for문에 종류가 다양하게 있는 건 알았지만 실제로 자바스크립트를 공부하면서 제가 자주 사용한 for문은 기본적인 for문과 forEach문만 자주 사용하였고, 그 외에는 거의 한 번도 사용해 본 적이 없었다. 자바스크립트로 알고리즘 공부를 하면서 다양한 for문과 접촉 해보면서 각각의 상황에 따라 각 for문마다 장점이 있고, 성능의 차이도 있기 때문에 이번 기회에 확실하게 알면 좋을 것 같아서 간단하게 어떤 역할을 하는 정도인지에 대해서 정리한다. 💡 알아볼 것들 (전형적인) for for in for o..

📖 들어가며 안녕하세요. 오늘은 자바스크립트에서 버튼 클릭으로 오디오를 제어하는 방법에 대해서 정리하려고 합니다. 버튼 클릭으로 음악을 켜고 끄고, 다음 음악으로 넘기는 여러 음악을 제어하는 기능을 구현하면서 HTML에는 audio태그를 사용하지 않고, 오직 자바스크립트에서만 audio 제어를 했다가 막혔지만, 결국 잘 해결을 해서 따로 정리하게 됩니다. 아주 간단한 예를 들어서, const audio = new Audio('audio_file.mp3'); audio.play(); HTML에 따로 오디오 태그를 작성하지 않고 이런 식으로 audio 코딩을 해서 로컬에서 잘 작동하는 것을 확인하고, 깃허브 퍼블리싱을 하여 사이트로 배포하니깐 아래와 같은 오류로 오디오 재생이 작동하지 않는 것을 확인했습니다..