![]()
동기 처리와 비동기 처리자바스크립트 엔진의 기본 동작 원리자바스크립트 엔진은 함수가 호출되면 해당 함수의 코드를 평가하여 함수 실행 컨텍스트를 생성한다. 이렇게 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 순차적으로 푸시되어 실행된다. 함수의 실행이 완료되면 해당 함수의 실행 컨텍스트는 콜 스택에서 팝되어 제거된다. 이러한 구조로 인해 자바스크립트 엔진은 단 하나의 콜 스택만을 사용하며, 이는 함수를 실행할 수 있는 창구가 단 하나라는 것을 의미한다. 결과적으로 자바스크립트는 동시에 2개 이상의 함수를 실행할 수 없는 싱글 스레드 방식으로 동작한다. 동기 처리(Synchronous)의 특징과 동작 방식동기 처리는 현재 실행 중인 태스크가 완전히 종료될 때까지 다음 태스크가 실행되지 않고 ..
![]()
호출 스케줄링일반적으로 함수를 호출하면 코드가 실행되는 즉시 함수가 실행된다. 하지만 개발을 하다 보면 특정 시간이 경과한 후에 함수를 호출해야 하는 상황이 발생한다. 이런 경우에 타이머 함수를 사용하여 함수 호출을 예약할 수 있으며, 이러한 행위를 호출 스케줄링이라고 한다. 자바스크립트는 호출 스케줄링을 위해 두 가지 타이머 생성 함수와 두 가지 타이머 제거 함수를 제공한다. 타이머 관련 함수들타이머 생성 함수setTimeout: 지정된 시간이 경과한 후에 콜백 함수를 단 한 번 실행한다.setInterval: 지정된 시간 간격마다 콜백 함수를 반복적으로 실행한다.타이머 제거 함수clearTimeout: setTimeout으로 생성한 타이머를 제거한다.clearInterval: setInterval로 ..
![]()
이벤트 드리븐 프로그래밍브라우저는 클릭, 키보드 입력, 마우스 이동, 드래그와 같은 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이는 사용자와 애플리케이션 간의 상호작용을 가능하게 하는 핵심 메커니즘이다. 애플리케이션에서 특정 이벤트에 반응하여 어떤 동작을 수행하고 싶다면, 해당 이벤트가 발생했을 때 실행될 함수를 브라우저에게 알려주어 호출을 위임해야 한다. 이벤트의 발생 시점을 개발자가 예측할 수 없기 때문에, 함수의 호출 시점을 브라우저에게 위임하는 방식을 사용하는 것이다. 이는 이벤트 기반 프로그래밍의 기본적인 동작 방식이다. 이러한 메커니즘에서 핵심이 되는 두 가지 개념이 있다.이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수를 말한다. 이벤트에 대한 처리를 담당하며, 이벤트 발생 시..
![]()
DOM(Document Object Model) 개요DOM은 HTML 문서의 계층적 구조와 정보를 표현하고 이를 제어할 수 있는 API를 제공하는 트리 자료구조다. 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성하는데, 이를 통해 자바스크립트가 HTML 요소들을 동적으로 조작할 수 있게 된다. DOM은 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있게 만든 인터페이스라고 할 수 있다. 노드HTML 요소와 노드 객체HTML 요소의 구조와 변환HTML 요소는 HTML 문서를 구성하는 개별적인 요소로, 시작 태그와 종료 태그, 어트리뷰트, 콘텐츠로 구성된다. 시작 태그는 요소의 시작을 나타내고, 종료 태그는 요소의 끝..
![]()
개요문제 이름: 1, 2, 3 더하기 (9095)문제 링크: https://www.acmicpc.net/problem/9095플랫폼: 백준알고리즘 분류: 다이나믹 프로그래밍소요 시간: 10분 문제 전문설명입출력 문제 풀이해설이 문제는 동적 계획법(Dynamic Programming)을 활용하여 해결할 수 있습니다. 동적 계획법은 큰 문제를 작은 부분 문제로 나누어 해결하고, 그 결과를 저장하여 재활용함으로써 효율적으로 문제를 해결하는 알고리즘입니다. 이 문제에서는 정수 n을 1, 2, 3의 합으로 나타내는 방법의 수를 구해야 합니다. 이를 위해 우선 작은 숫자부터 시작하여 점진적으로 큰 숫자에 대한 해답을 구하는 접근 방식을 취합니다.1을 만드는 방법: 1 (1가지)2를 만드는 방법: 1+1, 2 (2가..
![]()
개요웹 애플리케이션을 개발할 때 가장 중요한 것은 브라우저 환경을 제대로 이해하는 것이다. 특히 클라이언트 사이드 자바스크립트는 대부분 브라우저에서 HTML, CSS와 함께 동작하기 때문에, 브라우저의 렌더링 과정을 깊이 이해하면 더 효율적인 프로그래밍이 가능하다. 렌더링 과정을 이해하기 위해서는 먼저 두 가지 핵심 개념을 알아야 한다. 바로 '파싱'과 '렌더링'이다. 파싱(Parsing)의 상세 과정파싱은 단순한 텍스트 분석 이상의 복잡한 과정이다. 프로그래밍 언어로 작성된 텍스트 문서를 읽어 실행 가능한 형태로 변환하는 과정을 말한다. 이는 크게 두 단계로 나눌 수 있다.첫 번째는 어휘 분석(Lexical Analysis) 단계로, 문서의 문자열을 의미 있는 토큰으로 분해한다. 두 번째는 구문 분석(..
![]()
개요 문제 이름: 경로 찾기 (11403)문제 링크: https://www.acmicpc.net/problem/11403플랫폼: 백준알고리즘 분류: DFS소요 시간: 2시간 문제 전문설명입출력 문제 풀이해설이 문제는 주어진 방향 그래프에서 모든 정점 쌍 (i, j)에 대해 i에서 j로 가는 경로가 있는지 판별하는 문제입니다. 이를 위해 DFS(깊이 우선 탐색) 알고리즘을 사용하여 각 정점에서 시작하여 도달 가능한 모든 정점을 탐색하고, 그 결과를 인접 행렬 형태로 저장합니다. DFS는 그래프의 탐색 알고리즘 중 하나로, 시작 정점에서부터 한 방향으로 갈 수 있는 만큼 깊이 탐색하다가 더 이상 갈 수 없게 되면 다시 가장 가까운 갈림길로 돌아와서 다른 방향으로 탐색을 계속 반복하여 모든 정점을 방문하는 순..
![]()
배열 디스트럭처링 할당디스트럭처링 할당(Destructuring Assignment)은 '구조 분해 할당'이라고도 부르며, 배열이나 객체와 같은 구조화된 데이터를 해체하여 각각의 요소나 프로퍼티를 개별 변수에 할당하는 것을 의미한다. 이 기능은 ES6에서 새롭게 도입되었으며, 특히 배열이나 객체 리터럴에서 필요한 값들만 추출하여 변수로 할당하고자 할 때 매우 유용하게 사용할 수 있다. ES5에서 ES6로의 진화기존 ES5에서는 배열의 요소들을 각각의 변수에 할당하기 위해서 배열의 인덱스를 통해 하나씩 접근해야만 했다. 이는 코드가 길어지고 가독성이 떨어지는 결과를 초래했다.// ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = ar..
![]()
개요스프레드 문법(Spread Syntax)은 ES6에서 새롭게 도입된 문법이다. 이 문법은 마침표 세 개(...)를 사용하여 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 변환한다. 여러 값을 하나로 뭉친 배열이나 객체와 같은 데이터를 전개해서 개별 값들로 분리할 때 유용하게 사용할 수 있다. 스프레드 문법의 사용 가능 대상스프레드 문법은 모든 데이터 타입에 사용할 수 있는 것이 아니다. for...of 문으로 순회할 수 있는 이터러블 객체에만 사용할 수 있다는 제약이 있다. 구체적으로 다음과 같은 데이터 타입들이 스프레드 문법의 대상이 될 수 있다.Array: 가장 대표적인 이터러블 객체로, 배열의 요소들을 개별 값으로 펼칠 수 있다.String: 문자열도 이터러블이므로 각 문자..
![]()
함수의 구분자바스크립트는 ES6 이전까지 함수를 다양한 목적으로 사용했다. 이는 언어의 유연성을 보여주는 특징이었지만, 동시에 여러 문제를 야기했다. 하나의 함수가 일반 함수, 생성자 함수, 메서드 등 여러 역할을 수행할 수 있었기 때문에 코드의 의도를 파악하기 어려웠고, 예상치 못한 동작을 일으킬 수 있었다. ES6 이전의 함수는 모두 callable이면서 동시에 constructor였다. 이는 함수를 일반적인 방식으로 호출할 수 있을 뿐만 아니라, new 연산자와 함께 사용하여 객체를 생성할 수도 있었다는 것을 의미한다. 이러한 특성은 다음과 같은 코드를 가능하게 했다.var foo = function() { return 1;};foo(); // 일반 함수로 호출new foo(); // 생성자 함수..
![]()
개요문제 이름: 토마토 (7569)문제 링크: https://www.acmicpc.net/problem/7569플랫폼: 백준알고리즘 분류: BFS소요 시간: 2시간 문제 전문설명입출력문제 풀이해설이 문제는 3차원 공간에서 토마토의 익는 시간을 구하는 문제입니다. BFS (Breadth-First Search) 알고리즘을 사용하여 해결할 수 있습니다. BFS는 너비 우선 탐색으로, 시작점에서 가까운 노드부터 차례대로 탐색하는 알고리즘입니다. 입력받은 토마토 상자 정보를 3차원 배열로 저장합니다.익은 토마토의 위치를 큐에 넣고, 방문 표시를 합니다.BFS를 수행하면서, 익은 토마토의 인접한 위치에 있는 익지 않은 토마토를 익게 만들고, 익은 토마토의 위치를 큐에 넣습니다.BFS가 종료되었을 때, 모든 토마토..
![]()
클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어다. ES5까지는 클래스 없이 생성자 함수와 프로토타입을 통해 객체지향 프로그래밍을 구현했다.var Person = (function () { function Person(name) { this.name = name; } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; return Person;}());var me = new Person('Lee');me.sayHi(); // Hi! My name is LeeES6에서 도입된 클래스는 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있게 한..
![]()
개요문제 이름: 숨바꼭질 (1697) 문제 링크: https://www.acmicpc.net/problem/1697플랫폼: 백준알고리즘 분류: BFS소요 시간: 1시간 문제 전문설명입출력문제 풀이해설이 문제는 BFS(Breadth-First Search, 너비 우선 탐색) 알고리즘을 사용하여 해결할 수 있습니다. BFS는 그래프나 트리에서 인접한 노드를 먼저 탐색하는 알고리즘으로, 시작 노드에서 가까운 노드들을 먼저 방문하고 멀리 떨어진 노드를 나중에 방문합니다. 문제에서 수빈이는 현재 위치에서 걷거나 순간이동을 할 수 있습니다. 걸을 때는 X-1 또는 X+1로 이동하고, 순간이동을 할 때는 2*X의 위치로 이동합니다. 이를 그래프로 표현하면, 각 노드는 수빈이의 현재 위치를 나타내고, 각 노드에서 인접..
![]()
개요문제 이름: 바이러스 (2606)문제 링크: https://www.acmicpc.net/problem/2606플랫폼: 백준알고리즘 분류: DFS소요 시간: 2시간 문제 전문설명입출력문제 풀이해설이 문제는 주어진 컴퓨터 네트워크에서 1번 컴퓨터가 웜 바이러스에 감염되었을 때, 1번 컴퓨터와 직접 또는 간접적으로 연결된 컴퓨터 중에서 웜 바이러스에 감염되는 컴퓨터의 총 개수를 구하여 출력해야 하는 문제입니다. DFS 알고리즘을 사용하여 그래프를 탐색하는 전형적인 예시라고 할 수 있겠습니다. 그래프를 생성하고, 시작점(1번 컴퓨터)부터 DFS 탐색을 수행하여 연결된 컴퓨터들을 방문하고, 방문한 컴퓨터의 수를 세어주는 과정으로 해결할 수 있습니다. 사실상 주어진 네트워크 상에서 1번 컴퓨터와 직접 또는 간접..
![]()
개요문제 이름: 전쟁 - 전투 (1303) 문제 링크: https://www.acmicpc.net/problem/1303플랫폼: 백준알고리즘 분류: 그래프 이론, 그래프 탐색, 너비 우선 탐색, 깊이 우선 탐색소요 시간: 3시간 문제 전문설명입출력 문제 풀이해설이 문제는 전쟁터에서 각 병사의 위치와 소속팀이 주어졌을 때, 각 팀의 전투력을 계산하는 문제입니다. 전투력은 같은 팀의 병사들이 인접해 있을 때 그 그룹의 크기의 제곱으로 계산됩니다. 이 문제는 그래프 탐색 알고리즘 중 하나인 DFS(Depth-First Search, 깊이 우선 탐색)를 사용하여 해결할 수 있습니다. 문제 해결을 위해 다음과 같은 접근 방식을 사용할 수 있습니다.전쟁터를 2차원 배열로 표현하고, 각 병사의 위치와 소속팀을 입력받..
