자바스크립트 비동기 처리의 진화자바스크립트는 기본적으로 한 번에 하나의 작업만 처리하는 동기 언어입니다.하지만 네트워크 요청이나 타이머처럼 시간이 오래 걸리는 작업이 전체 프로그램의 실행을 멈추게 할 수는 없겠죠.이 때문에 자바스크립트는 비동기작업을 처리할 수 있는 특별한 메커니즘을 발전시켜 왔습니다. 이 글에서는 비동기 처리를 다루는 세 가지 핵심 방식,콜백 함수, Promise, Async/Await가 어떻게 발전해왔는지 알아보겠습니다. 콜백 함수 비동기 처리의 시작점 정의콜백 함수란, 다른 함수의 인수로 전달되어 그 함수 내부에서 특정 시점에 호출되는 함수를 말합니다."나중에 다시 불러줘"라고 맡기는 함수인것이죠 콜백 함수는 실행 방식에 따라 동기 콜백과 비동기 콜백으로 나뉩니다. 동기 콜백함수가 ..

이벤트 등록과 이벤트 전파이벤트 등록은 특정 요소에 이벤트 핸들러(이벤트 발생 시 실행될 함수)를 연결하는 과정입니다.자바스크립트에서는 주로 addEventListener() 메서드를 사용합니다.// 이벤트 등록의 기본 형태요소.addEventListener('이벤트타입', 이벤트핸들러); 이벤트 전파는 이벤트가 발생했을 때 DOM 트리를 따라 전달되는 현상을 말합니다!이는 크게 세 단계로 나뉩니다.캡처링 단계: 윈도우 객체에서 시작하여 이벤트가 발생한 타겟 요소까지 내려오는 단계입니다. (기본적으로 비활성화)타겟 단계: 이벤트가 실제로 발생한 타겟 요소에 도달한 단계입니다.버블링 단계: 타겟 요소에서 시작하여 윈도우 객체까지 위로 올라가며 전달되는 단계입니다. (대부분의 이벤트에서 기본적으로 활성화) ..

직무 전환을 결심하며게임QA 직무로 근무하다 퇴사를 결심하기 전후로 여러 가지를 생각해 보았고, 개발에 대한 갈증이 생겨 한동안 놓고 있었던 게임 개발공부를 다시 시작하려던 와중에 꼭 게임 클라이언트 개발자여야만 할까? 라는 의문이 들었습니다.그렇게 저는게임 쪽보다 취업 풀 자체가 넓고,기존에 공부하던 게임 클라이언트 직무와 비슷하다고 느낀 프론트엔드에 끌리게 되었답니다. 물론 이 과정에서 엄청난 고민이 있었지만 결론만 말하니 상당히 가볍게 보이는군뇨.. 저는 지방에 거주하고 있어, 온라인으로 진행되는 부트캠프 과정을 1순위로 설정하고 찾아보았고그 중 데브코스의 커리큘럼이나 취업 지원 내용이 가장 마음에 들어 지원하게 되었습니다. 합격까지의 과정서류지원 - 코테 - 전화면접총 3단계로 진행되는 과정이었습..

생성자 함수생성자 함수는 말 그대로 객체를 생성하는 함수,new 키워드와 함께 사용되어 새로운 인스턴스를 만들어냅니다생성자 함수로 만들어진 객체 = 인스턴스 function Person(name = "unknown") { this.name = name; this.getName = function () { return this.name; };}const user1 = new Person(); // new 키워드로 인해 함수의 리턴 결과가 객체가 됨console.log(user1);console.log(user1.name);생성자 함수 이름의 첫 글자는 대문자로 시작하는 규칙이 있습니다. 프로토타입생성자 함수로 여러 인스턴스를 만들 때, 각 인스턴스에 공통으로 필요한 함수가 있다면 어떻게 될까요?..

변수 보호와 은닉의 필요성일반적으로 전역 변수는 어디서든 접근하고 수정할 수 있다는 위험이 있습니다.그렇다면 변수를 전역이 아닌, 함수 내부에 선언하면 어떨까요?function levelup() { let level = 1; // 함수가 실행될 때마다 초기화 level += 1; return level;}let level = levelup();level = levelup();console.log(level); // 여전히 2 level 변수가 함수가 호출될 때마다 새로 생성되기 때문에 상태를 유지하지 못합니다.여기서 변수의 상태를 유지하면서 외부로부터 보호하는 방법이 바로 클로저입니다. 클로저가 필요한 이유#데이터 은닉 - 외부에서 데이터에 직접 접근 불가 #상태 유지 - 함수 호출 간 변수를 계..

실행 컨텍스트와 콜 스택자바스크립트 코드가 실행되는 환경을 실행 컨텍스트라고 합니다. 자바스크립트 코드가 실행되면 가장 먼저 전역 실행 컨텍스트가 생성되어 콜 스택에 들어갑니다.이후 함수가 호출될 때마다 해당 함수의 함수 실행 컨텍스트가 생성되어 콜 스택의 맨 위에 순서대로 쌓입니다.이 실행 컨텍스트들은 콜 스택에 쌓이고 사라지면서 코드 실행 순서를 제어합니다. (FILO 순서)실행 컨텍스트코드를 실행하는 데 필요한 변수, 함수 등을 담는 박스콜 스택실행 컨텍스트들을 차례대로 쌓아 올리는 공간FILO(First In, Last Out): 마지막에 들어간 컨텍스트가 가장 먼저 제거되는 원리로 동작합니다. 컨텍스트의 구성실행 컨텍스트는 Lexical 환경을 가지고 있고, 렉시컬 환경은 두 가지로 나뉩니다.R..

해시 함수해시함수 mdn 도큐먼트 - Hash_function해시 함수는 임의의 길이 Key를 고정된 길이의 값으로 매핑하는 함수입니다.이때 매핑되어 나온 고정된 길이의 값이 해시 값 인거죠!같은 Key값에 대해서는 언제나 같은 해시 값이 나와야 하고, 반대로 서로 다른 Key값에 대해서는 가능한 서로 다른 해시 값을 생성해야 하는 것이 핵심 포인트입니다.그런데 해시 함수로 만들어 낸 해시 값은 보통 크고 예측하기 어려운 값으로 나오게 됩니다!그래서 필요한게 버킷 사이즈죠버킷 사이즈hash(key) 값으로 2131245이 나왔다면? key-value 값을 2131245번 인덱스에 저장해야 할까요?이건 좀 그렇죠? 그래서 필요한 것이, 버킷 사이즈를 이용한 아래 공식입니다!실제 저장 위치(인덱스) = 해시..

추상 구문 트리(abstract syntax tree, AST)에 대하여..AST가 만들어지는 과정컴파일러가 소스 코드를 처리하는 단계 [이미지 출처 및 학습한 사이트] - dev.to위 이미지를 설명하자면 아래와 같습니다.소스 코드는 먼저 어휘 분석 과정(Lexer)을 통해 토큰이라는 더 작은 단위로 나뉩니다.어휘 분석은 소스 코드를 토큰으로 분해하므로 토큰화 라고도 합니다 .그런 다음 토큰은 파서(Parser)에 의해 구문 트리라고 하는 트리로 구문 분석됩니다.이 과정을 거쳐서 최종적으로 AST가 만들어지게 됩니다.해당 순서에 대한 자세한 설명은 아래에서 진행하도록 하겠습니다! 컴파일러의 첫 번째 단계 : 어휘 분석렉서(Lexer) = 어휘분석렉서는 소스 코드를 읽어 토큰(Token)이라는 의미 있는..

JS에서는 C++과 같이 arr[n][n]으로 2차원 배열을 생성할 수 없습니다! 대신 배열안에 배열을 선언하는, 비슷해 보이지만 엄연히 다른 방식으로 생성해야하죠 반복문을 이용한 방법let gameBoard = new Array(m); // m은 행의 개수for(let i = 0; i 위와 같이 개수가 명시된 배열을 생성하고, 그 배열을 반복문으로 돌면서 배열 내부에 배열을 만들어주는 방식으로 선언할 수 있습니다.잘못된 .fill 을 이용한 방법 (하면안됨)// 이 방법은 얕은 복사 문제를 일으킬 수 있습니다let gameBoard = new Array(m).fill(new Array(n).fill(""));// gameBoard[0][0] = "X"; 라고 하면, 모든 행의 첫 번째 요소가 "X"로 ..

단축 속성명단축 속성명(Shorthand Property Names)은 ECMAScript 2015 (ES6)에서 도입된 JavaScript 문법으로, 객체 리터럴(object literal)을 정의할 때 객체의 속성 이름(key)과 그 속성에 할당하려는 변수(또는 상수)의 이름이 동일한 경우 코드를 더 간결하게 작성할 수 있게 해주는 기능입니다.핵심 규칙:객체 리터럴 내에서 { 속성명: 변수명 }과 같이 작성해야 할 때, 만약 속성명과 변수명이 같다면, 간단히 { 변수명 } 이라고만 작성할 수 있습니다.// ES6 이전let x = 10;let y = 20;let point1 = { x: x, // 속성명 'x'와 변수명 'x'가 같음 y: y // 속성명 'y'와 변수명 'y'가 같음};cons..