전체 글
-
[코어 자바스크립트] 프로토타입Javascript 2024. 4. 7. 18:28
프로토타입 개념 이해1. constructor, prototype, instance저자 정재남선생님께서, 프로토타입을 다음 그림과 같이 하나의 도식으로 추상화를 하였는데, 이 단순한 추상화는 프로토타입의 개념을 압축한다. 아래의 코드 내용을 다음과 같이 도식화한 내용이다.var instance = new Constructor();왼쪽 꼭지점에는 Constructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor.prototype이라는 프로퍼티를 위치시켰다. 왼쪽 꼭짓점으로부터 아래를 향한 화살표 중간에 new가 있고, 화살표의 종점에는 instance가 있다. 오른쪽 꼭짓점으로부터 대각선 아래로 향하는 화살표의 종점에는 instance.__proto__이라는 프로퍼티를 위치시켰다. 자 흐름을 ..
-
[코어 자바스크립트] 클로저Javascript 2024. 3. 2. 15:15
클로저?클로저를 설명하는 단어는 여럿 있지만, 저자는 클로저를 다음과 같은 정의로 설명한다.클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부함수로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다.내부함수를 외부로 전달하는 방법에는 함수를 return하는 경우뿐 아니라 콜백으로 전달하는 경우도 포함된다. 이런 정의로, 정확하게 이해되지 않는다. 예시를 보자.예제 1.var outer = function () { var a = 1; var inner = function () { console.log(++a); } inner();}outer(); // 2outer(); // 2inner 함수 내부에서는 a를 선언하지 않았기 때문에..
-
[코어 자바스크립트] thisJavascript 2024. 2. 22. 22:51
대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 따라서, 혼란의 여지가 없거나 많지 않은데 자바스크립트 에서는 this는 어디서든 사용할 수 있다. 또한 상황에 따라 this가 바라보는 대상이 달라지는데 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 엉뚱한 대상을 바라보는 경우도 있다. 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 즉, this는 함수를 호출할 때 결정된다는 말이다. 전역 공간에서의 this 전역 공간에서의 this는 전역 객체를 바라본다. 개념상 전역 ..
-
[코어 자바스크립트] 실행 컨텍스트Javascript 2024. 2. 22. 21:30
실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집한다. 동일한 환경에 있는 코드들을 실행할 떄 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 처음 자바스크립트를 실행하는 순간, 전역 컨텍스트가 콜 스택에 담긴다. 전역 컨텍스트라는 개념은 일반적인 실행 컨텍스트와 특별히 다를 것이 없으나 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 자동으로 활성화된다. 이후, A 함수를 “호출”하게 되면 자바스..
-
[코어 자바스크립트] 데이터 타입Javascript 2024. 2. 18. 22:08
데이터 타입의 종류 기본형(원시형, Primitive Type) 숫자, 문자열, 불리언, null, undefined 참조형(Reference Type) 객체, 배열, 함수, 날짜, 정규표현식과 ES6에서 추가된 Map, Set 등이 객체의 하위 분류에 속한다. 그렇다면 어떤 기준으로 기본형과 참조형을 구분하는 걸까? 기본형은 값이 담긴 주솟값을 바로 복제하는 반면, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다. 기본적으로 이를 기본형은 불변값이고 참조형은 가변값이라고 표현한다. 변수 선언과 데이터 할당 // 1번 var a; a = 'abc'; // 2번 var a = 'abc'; 위 예시에서, 1번은 변수 a를 선언하고 다음 줄에 a에 'abc'라는 값을 할당했다. 2번은..
-
Auth.js (구 Next Auth)를 사용하여 Next.js 인증 구현하기Next.js 2024. 1. 28. 17:57
1. Auth.js 공식문서에서 Auth.js란 웹 어플리케이션에서 인증을 위한 완벽한 오픈 소스 인증 솔루션이라고 설명하고 있다. 사실 Next Auth라는 이름으로 더 익숙한 이 라이브러리는, 4버전까지는 Next.js를 위한 솔루션이었으나, 5버전 부터는 Svelte, Express 등 더 많은 프레임 워크를 지원하며 Auth.js라는 이름으로 변경하였다. 확장성을 고려하여 이름을 바꾼 것 같다. 또한, 현재는 사실 베타 버전 즉 실험적 단계에 불과하여 Next Auth 공식문서와 Auth.js dev 공식문서를 번갈아가면서 확인하며 작성했다. Auth.js 사용의 장점은 다음과 같다. - OAuth Provider를 통하여 다양한 OAuth 기능을 쉽게 사용할 수 있다. 현재 79개 이상의 유명한..
-
AWS CLI를 통하여 Code Deploy 실행인프라 2024. 1. 12. 22:52
상황 기존 배포 프로세스는, 크게 AWS Code piepeline을 통한 CI/CD로 구축되어 있었다. 즉, Github 등 원격 저장소와 연결하여 소스코드가 푸시되면 자동으로 배포되도록 구성되어 있다. 잠시 워크플로우를 살펴보자. 1. Github 등 원격 저장소에 푸쉬하면 연결되어 있는 브랜치에 의하여 Code piepline에서 트리거로 작동한다. 2. 소스 코드를 Code Build에서 빌드하고 아티팩트를 S3에 저장한다. 3. Code Deploy에서 빌드에 성공한 S3에 저장되어 있는 아티팩트를 기반으로 배포를 준비한다. 4. EC2에 배포한다. 그러나, 로컬에서 빌드에 성공하여 테스트를 한 이후에도 AWS Code Build에서 빌드를 해야하는 번거로움이 있다. 이 때, 시간이 꽤나 걸리게..
-
너비 우선 탐색(BFS, Breadth First Search)알고리즘 2023. 10. 29. 12:04
너비 우선 탐색? 어떤 노드를 방문하여 확인한 후, 목표한 노드가 아니면 그 노드와 연결된 정점들 중에서 우선 순위가 동일한 다른 노드를 찾고 그 순위에 없으면 그 다음 순위 노드를 차례대로 찾는 방법 즉, 깊게 탐색하기 전 넓게 탐색하는 방법이다. * 두 노드의 최단 경로를 찾고 싶은 경우에 이 방법을 선택 * BFS보다 복잡하다. 구현 방법 큐(Queue)를 사용한다. 문제 다음과 같이 입력이 주어질 때 너비 우선 탐색을 한 순서대로 노드의 인덱스를 공백 구분으로 출력하시오. 데이터 graph = {'E': ['D', 'A'], 'F': ['D'], 'A': ['E', 'C', 'B'], 'B': ['A'], 'C': ['A'], 'D': ['E','F']} 출력 E D A F C B 문제 풀이 가까..