JavaScript 16

[알고리즘] 백준 3107 IPv6

📖문제IPv6❓구상이 문제는 축약된 IPv6 주소를 원본으로 되돌리는 함수를 구현하는 문제이다.IPv6 주소는 32 자리의 16진수를 4자리씩 끊어 내기 때문에 입력값을 축약 전으로 돌리면 :(세미콜론) 은 7개가 존재해야하고,16진수 4자리 숫자는 총 8개가 존재해야한다.먼저 축약 조건을 확인해보면 아래와 같다.1. 각 그룹의 앞자리의 0의 전체 또는 일부를 생략 할 수 있다. 2. 만약 0으로만 이루어져 있는 그룹이 있을 경우 그 중 한 개 이상 연속된 그룹을 하나 골라 콜론 2개(::)로 바꿀 수 있다.3. 2번째 규칙은 모호함을 방지하기 위해서 오직 한 번만 사용할 수 있다. 예제 입력 2의 경우 주어진 입력이 "::1" 으로 축약되지 않은 형태로 출력하면 다음과 같은 결과가 나온다.→ 0000..

Algorithm 2025.04.08

[42장] 비동기 프로그래밍 (2)

- 목표자바스크립트 엔진이벤트 루프, 태스크 큐정리📝 자바스크립트 엔진자바스크립트 엔진은 싱글 스레드 방식으로 동작한다. 이때 싱글 스레드 방식으로 동작하는 것은 브라우저가 아닌 브라우저에 내장된 자바스크립트 엔진이라는 것에 주의해야한다. 만약에 모든 자바스크립트 코드가 싱글스레드로 동작한다면 자바스크립트는 비동기로 동작할 수 없다. 즉, 엔진은 싱글스레드로 동작하지만, 브라우저는 멀티 스레드로 동작한다.자바스크립트의 엔진(V8) 은 위 그림과 같이 크게 2개의 영역으로 구분된다.- Call Stack  : 소스 코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료 구조인 실행 컨텍스트 스택- Heap : 객체가 저장되는 메모리 공간이처럼 콜 스택과 힙으로 구성된 자바스크립트 엔진은..

[42장] 비동기 프로그래밍 (1)

자바스크립트 엔진은 싱글 스레드 방식으로 동작한다.즉, 한번에 하나의 task 만을 처리할 수 있다.싱글 스레드로 동작하는 것은안정성과단순함을 갖는 대신성능적 한계가 있을 수 있다.이러한 문제를 다루는 내용이 동기 프로그래밍과 비동기 프로그래밍이다.- 목표동기 비동기📝 동기 실행 컨텍스트 스택에 실행 컨텍스트가 여러개 있으면 FILO(First In Last Out) 구조로 컨텍스트가 실행되고 스택에서 POP 되어 제거 되기 전 까지는 실행 컨텍스트 아래의 다른 실행 컨텍스트는 실행되지 않고 task 가 대기하는 방식이다.const first = () => { console.log('First Func...');}const second = () => { console.log('Second Func..

[기술면접] ES6 이후 변경점

📘 ES6 ES6(ECMAScript 2015)는 JavaScript의 주요 업데이트 중 하나로, 코드의 가독성과 효율성을 높이기 위해 여러 새로운 기능이 추가된 JavaScript 표준이다.📋 ES6(ECMAScript2015) 주요 변경점const, letarrow functionTemplate LiteralsclassmoduleDestructuringDefault Parametersspread operator & Rest parameterPromiseSymbol⁉️ const, letvar의 자유로운 사용을 let과 const는 일부 억제함으로 보다 오류 컨트롤이 수월해졌다.var, let, const 세가지 모두 자바스크립트 엔진이 코드를 실행하기 전 실행컨텍스트를 생성하면서 메모리에 변수 및..

[37장] Set 과 Map

- 목표Set Map 기본 정의Set Map 내장 메서드Set 수학적 집합 구현정리Set Map 기본 정의1. Set - 중복되지 않는 유일한 값들의 집합- 수학적 집합을 구현하기 위한 자료구조- 배열과 유사하지만 다음과 같은 차이가 있다.구분배열Set동일한 값을 중복하여 포함훌 수 있는가?가능불가능요소 순서에 의미가 있는가?가능불가능인덱스로 요소에 접근할 수 있는가?가능불가능2. Map- key value 쌍으로 이루어진 컬렉션- 내부적으로 해시 테이블 구조를 사용하여 구현   ㄴ hash table 구조로 특정 키를 조회(get)하거나 확인(has)할 때 일정한 시간 복잡도를 가진다. (평균적으로 O(1))- 객체와 유사하지만 다음과 같은 차이가 있다.구분객체Map키로 사용할 수 있는 값의 Ty..

[35장] 스프레드 문

- 목표spread syntaxspread syntax vs rest parameterspread syntax 사용- spread syntax하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록을 만든다.es6 이전 Function.prototype.apply() 와 같은 역할을 한다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM collection(NodeList, HTMLCollection), arguments 와 같이 for...of 반복문으로 순회 가능한 이터러블 속성을 갖은 데이터에 한정된다. ※ 쉼표로 구분한 값의 목록을 사용하는 문맥 - 함수 호출문의 인수 목록- 배열 리터럴의 요소 목록- 객체 리터..

console.log("Hoisting");

📌 Hoisting- Hoisting 은 무엇인가?JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.- 출처 : MDN JavaScript 엔진이 코드를 실행하기 전에 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 것처럼 동작하는 특징이다.실제로 코드의 위치가 변경되는 것은 아니며, 변수와 함수 선언이 실행 컨텍스트 생성 단계 에서 메모리에 등록된다.변수는 선언만 끌어올려지며 초기화는 끌어올려지지 않는다.- Hoisting 과정JavaScript 는 코드를 실행하기 전에 Execution Context를 생성한다.실행 컨텍스트가 생성될 때, 변수와 함수 선언이 메모리..

frontEnd/javaScript 2024.12.19

[알고리즘] 동적계획법, DP(Dydamic Programming)

동적계획법, DP(Dynamic Programming)동적계획법은 한번 처리한 데이터에 다시 접근할 때마다 다시 계산하는 것이 아닌, 저장해둠으로 다음 처리에서 다시 활용 할 수 있게 해주는 알고리즘 패러다임이다.최적화 이론의 한 기술이며, 특정 범위까지의 값을 구하기 위해서 그것과 다른 범위까지의 값을 이용하여 효율적으로 값을 구하는 알고리즘 설계 기법이다.- MDN 동적계획법이라고 하면 어떤 패러다임인지 바로 알아차리기 어려운데, 이는 쉽게 생각하자면 "기억하며 풀기" 라고 하면 조금 더 이해하기 쉬울 것 같다.동적계획법, DP(Dynamic Programming) 패러다임 조건 및 구조동적 계획법 조건동적계획법을 적용하기 위해 필요한 조건에는 크게 4가지가 있다.중복되는 하위 문제하위의 문제가 재..

Algorithm 2024.09.19

[22장] this

- 목표this는 무엇일까?this를 써야하는 이유는?함수 호출 방식에 의해 동적으로 결정되는 this 바인딩- this 는 무엇일까?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. Java나 C++ 같은 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리키지만,JavaScript의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다. ※ JavaScript는 strict mode(엄격 모드) 역시 this 바인딩에 영향을 준다.- this 사용 이유객체는 상태를 나타내는 property와 동작을 나타내는..

console.log("JavaScript 싱글 스레드");

자바스크립트언어는 싱글 스레드 언어인데 실제 사용시에는 멀티 스레드 처럼 사용을 한다.어떻게 사용하나?  기술면접 예상 질문리스트에 답을 달던 중. 위의 질문을 보았고 다음과 같은 답변을 생각해냈다.JavaScript 비동기 처리 동작 방식을 사용해 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다.Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue에 순서대로 들어간다.Event Loop가 Call Stack이 비어 있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된 (가장 앞에 있는)작업을 Call Stack으로 보낸다. 널리 알려있듯 비동기 처리 동작 방식으로 Ja..

frontEnd/javaScript 2024.09.03