Ama_gramer

- 목차 route groups 란?왜 필요할까?예제route groups 와 layout 병합레이아웃 병합이란?병합 순서예제정리📝 Route GroupsNext.js 13부터 도입된 App Router는 파일 기반 라우팅을 더 유연하고 강력하게 만들어준다.그중에서도 Route Groups는 프로젝트 구조는 깔끔하게 유지하면서도 URL 구조에 영향을 주지 않도록 해주는 아주 유용한 기능이다.📌 Route Groups란?Route Groups는 URL 경로에는 포함되지 않지만, 폴더 구조를 논리적으로 그룹화(logical groups) 할 수 있도록 해주는 기능이다. Next.js에서는 폴더 이름을 () 괄호로 감싸면 해당 폴더는 URL 경로에 포함되지 않는다.📂 예: (auth)이 폴더는 실제 U..

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

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

📖문제1, 2, 3 더하기 7❓구상이 문제는 "1, 2, 3 더하기" 문제 시리즈중 7번째 문제다. 앞서 풀어본 "1, 2, 3 더하기" 문제는 모두 Dynamic Programming 알고리즘 유형이였기 때문에 비슷하게 접근을 해보려했다. 하지만, 여태 풀어본 DP 문제는 피보나치수열처럼 단순히 N번째의 DP 값을 구하면 되는 문제였는데 이 문제 같은 경우는 T개의 테스트 케이스개수가 주어지고, 그 아래로 T개의 n, m 의 쌍이 있다. 즉, 여태 풀어본 DP 문제는 n 과 m 이 주어지는게 아닌 n 이 주어져서 n번째 DP 값을 구하면 되는 문제였는데, 이번에는 1, 2 ,3 을 이용해 만들 수 있는 n의 갯수 + 1, 2, 3 숫자 m 개를 사용해서 n이 되도록 하는 문제인것이다. 어떻게 접근하면..

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

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

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

- 목표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 반복문으로 순회 가능한 이터러블 속성을 갖은 데이터에 한정된다. ※ 쉼표로 구분한 값의 목록을 사용하는 문맥 - 함수 호출문의 인수 목록- 배열 리터럴의 요소 목록- 객체 리터..

버블정렬(Bubble sort)버블정렬은 정렬 알고리즘 종류 중 한 기법으로 길이가 N 인 배열을 정리할때 index 가 0 인 값과 1인 값을 비교한 후 조건에 맞는 값을 왼쪽으로 정렬후 기존 0, 1 인덱스에 각각 1을 더한 값을 반복적으로 비교하여 결과적으로 값의 변화가 아무것도 없을 때 까지 정렬을 반복하는 비교 기반 알고리즘이다.버블정렬, Bubble sort 패러다임 및 동작버블정렬 패러다임반복(iterative) : 버블정렬은 반복적인 방식으로 배열의 인접한 요소들을 비교하여 정렬한다.비교 기반(comparison based) : 요소 간의 대소 비교를 통해 정렬 순서를 정한다.제자리 (in place) : 추가 메모리 공간을 거의 사용하지 않으며, 기존 배열 내에서만 정렬 작업이 이루어..

📖문제걷다보니 신천역 삼❓구상N자리수의 숫자에서 0, 1, 2 만 가지고 만들 수 있는 3의 배수의 갯수를 출력해야 하는데 일정 패턴이 있는지 파악을 하면 동적 프로그래밍을 활용하면 문제를 풀 수 있을 것으로 생각된다. 우선, 입력값 N 에 따른 출력 갯수를 파악하기 위해 백트래킹으로 출력값을 파악해보기로 했다. 패턴파악을 위한 백트래킹을 사용한 코드.const result = [];const N = 10;const backTracking = (arr, line) => { if (line.length !== N) { const len = arr.length; for (let i = 0; i !(e % 3)).length % 1000000009);  출력위의 코드로 N이 2, 4, 5, ..