📌 실행 컨텍스트란?실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행되는 환경을 정의하고 관리하는 개념이다. 여기에는 코드를 실행하는 데 필요한 변수, 함수 선언, this 바인딩 정보 등을 포함하며, 코드가 실행되는 동안 이를 추적하고 관리한다. 자바스크립트는 싱글 스레드 기반으로 동작하므로, 한 번에 하나의 코드 블록만 실행할 수 있다. 하지만 실행 컨텍스트를 콜 스택(Call Stack)으로 관리하면서 여러 코드 블록을 실행할 수 있도록 조율하게 된다. 📌 실행 컨텍스트의 종류✅ 1) 전역 실행 컨텍스트 (Global Execution Context)전역 실행 컨텍스트는 코드가 실행될 때 가장 먼저 생성되는 컨텍스트로, 프로그램이 종료될 때까지 유지된다.전역에서 선언..
클라이언트 사이드 렌더링 (CSR) 프론트엔드 개발자에게 상대적으로 익숙한 방식은 클라이언트 사이드 렌더링(CSR)이다. CSR은 클라이언트(브라우저)가 웹 페이지를 요청할 때, 서버는 최소한의 HTML만 제공하고 이후 자바스크립트가 실행하면서 페이지를 렌더링하는 방식이다. 예를 들어 리액트, 뷰, 앵귤러와 같은 프론트엔드 라이브러리나 프레임워크들은 CSR을 기본적으로 사용한다. 리액트 프로젝트를 생성하면 index.html파일은 거의 비어 있고, index.js에서 자바스크립트가 동적으로 컨텐츠를 삽입하며 화면을 구성하게 된다. // index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";..
개발을 하다 보면, 자바스크립트에서 객체를 다룰 때 단순한 변수 복사와 다르게 객체의 복사는 사용하는 방식에 따라 예상과 실제 로직의 값이 다르게 나오기도 한다. 이는 객체가 참조 타입으로 지정되기 때문이며, 원본과 복사본이 어떻게 연결되는지에 따라 동작이 달라진다. 특히, 얕은 복사와 깊은 복사의 차이를 이해하지 못하면 원본 객체가 의도치 않게 변경되는 문제가 발생할 수 있다. 이를 올바르게 활용하려면 먼저 원시 값과 객체 값이 메모리에 할당되는 방식을 이해한 뒤, 두 복사 방식의 차이와 사용해야 하는 상황을 명확히 알아야 한다. 그렇다면 자바스크립트에서 데이터가 어떻게 저장되고, 복사될 때 어떤 방식으로 동작하는지 알아보자. 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 원시 타입(Numbe..
자바스크립트는 동적 타이핑 언어로, 변수 선언 시 타입이 정해지지 않고 변수에 할당된 값(원시 값 또는 객체 값)에 의해 타입이 결정된다. 또한 자바스크립트는 약타입 언어이므로, 타입 에러 대신 암묵적 타입 변환이 발생하게 된다. 이러한 특성은 자바스크립트를 유연한 언어로 만들어 주지만, 동시에 예상치 못한 버그를 초래할 수도 있다. 예를 들어, null과 undefined의 차이를 정확히 알지 못하면 조건문에서 의도치 않은 결과를 얻을 수 있다. 또한 객체를 복사할 때 참조가 공유된다는 사실을 모른다면 한 곳에서의 변경이 예상치 못한 사이드 이펙트를 일으킬 수 있다. 따라서 자바스크립트의 데이터 타입을 제대로 이해하면 변수에 저장되는 값의 특성을 명확히 파악할 수 있어 불필요한 버그를 예방하고, 효율적..
모던 프론트엔드 프레임워크인 리액트나, 뷰에서 대부분의 요청을 비동기로 진행해야 한다는 이야기를 자주 듣곤 한다. 그렇다면 왜? 굳이 비동기 프로그래밍을 해야 할까? 에 대한 궁금증이 생겼다. 따라서 비동기가 뭔지, 왜 비동기 프로그래밍을 하게 됐는지, 어떻게 하는지, 어떤 장점이 있는지를 흐름에 따라서 간단하게 정리해보고자 한다. 동기와 비동기 동기는 어떤 작업을 요청했을 때, 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식이다. 반면 비동기는 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다리지 않고, 다른 작업을 먼저 수행하고 있다가 요청했던 작업이 종료되면 그에 대한 추가 작업을 진행하는 방식이다. 예시를 들어 설명해보자면 동기는 음식을 주문한 후 그 요리가 완료되어 내게 ..
캔버스의 개념캔버스의 개념 HTML5에 새롭게 등장한 요소인 캔버스. 캔버스는 이름처럼 코드를 이용해 그림을 그릴 수 있는 공간을 제공한다. 코드에 단순히 라는 태그만 작성하게 되면 화면에 무언가 나타나거나 하지는 않는다. 캔버스라는 영역 위에 자바스크립트를 이용해 하나하나 그림을 그려가야 원하는 결과물을 볼 수 있다. 이런 기능을 활용해 애니메이션, 데이터 시각화 등의 다양한 그래픽 작업에 사용된다. 캔버스의 장점 이러한 캔버스 태그를 사용해 그래픽 작업을 하게 되면, 아래와 같은 장점이 있다.브라우저 안에서 직접 렌더링하기 때문에 그래픽 성능이 뛰어나다.또, 요즘의 모던 브라우저는 캔버스 태그를 지원하기 때문에 파이어폭스, 크롬, 엣지 가리지 않고 호환성에 유리하다.그리고 다양한 그래픽 요소를 사..
업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다. 객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..
객체의 프로퍼티에 접근하는 두 가지 방법 객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다. const name = { firstName: 'olivia', lastName: 'kim'} 위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.점 표기법: name.firstName대괄호 표기법: name['firstName'] 점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기 대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다. 프로퍼티의 키가 숫자인 경우 다만, 프로퍼티 키가 숫자일 ..
요소가 한국어인 배열을 sort()로 정렬하기 설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다. 이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까? const kors = ['대한민국', '호주', '독일', '가나'];const nums = ['100', '1', '3', '0', '000', '99'];// 일반적인 sortconsole.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]console.log(nums.sort((a, b) => a -..
문제수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.completion의 길이는 participant의 길이보다 1 작습니다.참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예participantcompletionreturn["leo", "kiki", "eden..
