🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

function a(){ let b = 10; function c(){ console.log(b); } c(); } a(); console.log(b); 위의 코드가 실행될 때 자바스크립트 엔진이 돌아가는 과정은 다음과 같다. 1. 먼저 전역 스코프에 위치하고 있는 변수 a를 담고, 변수 a에는 정의되어있는 함수를 할당한다. 2. 그 다음 a 함수가 호출되고 전역 컨텍스트에서 a가 실행되어 let b = 10 코드가 실행된다. 3. 이제 call stack memory에 a함수가 저장된 것과 마찬가지로 식별자 b와 c가 callstack에 저장된다(b : 10, c : function(){}). 4. 다음 c함수가 호출되고 console.log(b)를 만난다. 현재 활성화 상태인 c 컨텍스트에서 b를 검..

스코프(scope) 스코프란 쉽게 말해 변수의 유효범위이다. function start(){ for (let i = 0; i < 5; i++){ console.log(i); } console.log(i); } start(); 위의 코드를 실행 시켜보면 for 문 안에 console.log(i) 는 잘 실행된 반면, for 문 밖의 console.log(i)는 i가 정의되어 있지 않다고 에러가 뜬 것을 볼 수 있다. 그 이유는 i가 for 문 안에서만 유효한 변수이기 때문이다. 위의 오류를 해결하고 싶다면 아래와 같이 변수를 아예 밖에서 선언하여 스코프의 범위를 for문 밖으로 확장시킬 수 있다. function start(){ let i = 0; for(i = 0; i < 5; i++){ console...

기본형과 참조형을 구분하는 기준 데이터 타입의 종류는 크게 기본형과 참조형 2가지로 나뉜다. 기본형과 참조형을 구분 짓는 가장 큰 점은 실제 값 전체 복사 vs 실제 값이 들어있는 주소 값 복사이다. - 기본형 (copy value of a) let a = 1; let b = a; a += 10; console.log(a) //11 console.log(b) //1 위의 코드를 살펴보면 a의 값이 변하더라도 b의 값은 그대로 인 것을 볼 수 있다. let b = a; 코드를 통해 a값 전체가 복사되어 b라는 변수에 담겼다. a, b는 서로 영향을 받지 않고 독립적으로 존재하는 것을 볼 수 있다. 기본형 데이터가 저장될 때는 아래와 같은 순서로 저장된다. 1. 변수 영역에서 빈 공간(@1003 : 임의의 ..

병합 정렬(merge sort) 병합 정렬 또는 합병 정렬은 비교 기반의 정렬 알고리즘이다. 예를 들어, 정렬된 두 개의 배열이 있다고 하자. let arr1 = [4,6,7,8]; let arr2 = [1,5,6,7]; let result = []; 정렬된 두 배열을 하나의 배열로 합치기 위해서는 어떻게 해야할까? 가장 빠른 방법은 이미 두 배열이 정렬된 상태이기 때문에 가장 작은 값끼리 비교를 하는 것이다. 여기서 말하는 가장 작은 값은 0번째 인덱스에 위치한 원소이다. 처음에는 4와 1을 비교하는데 1이 4보다 작으므로 result에 1이 먼저 들어가게 된다. 4 > 1 result.push(1); 그 다음 비교대상은 4와 1의 다음 숫자인 5이다. 4 < 5 result.push(4); 더 작은 ..

연결 리스트(Linked List) 연결 리스트는 크기가 동적인 자료구조로, 자료구조를 구성하는 요소인 노드(Node)의 연결로 이루어진 자료구조이다. 연결 리스트에 값이 들어올 때마다 노드를 만들어 저장하게 된다. 노드(Node) 노드는 자료구조를 구성하는 요소들을 가리키는 데, 노드의 구성은 크게 링크, 데이터 필드로 구성되어있다. 리스트(List) 자료구조 연결 리스트를 이해하기 전에 리스트 자료구조를 이해해보자. List는 Dynamic Array로 동적인 어레이를 뜻한다. 데이터가 들어올 때마다 동적으로 메모리를 할당하는 자료구조이다. 리스트 자료구조가 아닌 정적인 어레이(배열) 를 사용하면 딱 우리가 지정해준 만큼의 공간을 사용해야 한다. 그렇기 때문에 인덱스 번호를 사용하여 관리하기 쉽다는 ..

웹 개발을 공부할 때 자주 등장하는 단어 '웹팩', 웹팩이란 무엇일까? 하나의 웹 페이지를 만들기 위해서는 .sass파일(css), .js파일, .html파일, .jpg 이미지 파일 등 수많은 파일이 생겨난다. naver.com 페이지에 접속하더라도 굉장히 많은 JS,CSS, Img 파일들을 불러오는 것을 확인할 수 있다. 하지만 이렇게 많은 파일을 서버와 계속 통신하며 받아올 경우, 렌더링 속도가 느려질 것이다. 또한, 같은 변수명을 사용하는 다른 파일이 있다면, 덮어씌워지는 등 문제점이 생긴다. 바로 위의 문제를 해결하기 위해서 도입된 개념은 모듈(module)이다. 스크립트의 타입을 모듈로 바꾼 후, export, import를 사용해서 같은 변수를 가지고 있더라도 각각 분리해서 사용할 수 있다. ..

🤔 Route 53이란 무엇일까? 아마존에서 제공하는 Domain Name System 웹서비스이다. 웹 페이지에 도메인을 붙여주는 서비스로, 사용자의 요청을 ec2, elastic load balancing 로드 밸런서, s3 버킷 등 aws에서 실행되는 인프라에 연결할 수 있도록 도와준다. 나는 S3버킷과 연결을 해야 하기 때문에 이 서비스를 이용하기로 했다. 나는 가비아에서 도메인을 구매했지만, route 53에서도 도메인 구매 서비스도 제공한다. 내가 할 일은 1. example.com 도메인 이름 등록 2. Amazon S3버킷을 만들고 웹 사이트를 호스팅하도록 버킷을 구성 이 두 가지이다. 성공했을 시에는 브라우저를 열고 도메인 이름을 입력하였을 때, 호스팅한 웹페이지가 잘 렌더링 되어야 한다..

스택(stack) 이렇게 책이 무더기로 쌓여있을 때, 가장 마지막에 쌓은 책을 가장 먼저 꺼낸 후에 다른 책을 꺼낼 수 있다. 스택은 가장 마지막에 들어온 것이 가장 먼저 나가는 자료구조이다(LIFO : Last In, First Out). 뒤로가기, 계산기 등도 스택 자료구조를 이용한 예이다. 여러가지 메서드 stack의 주요 메서드로는 push, pop, top/peek 등이 있다. 1. push : 스택공간에 데이터를 집어넣는(저장하는) 메서드이다. 2. pop : 스택공간의 최상단에 있는 데이터를 꺼내는 메서드이다. 3. peek : 제일 최근에 들어간 데이터, 최상위 데이터(top)를 읽는 작업이다. (데이터에 영향을 주지 않는다) 스택 자료구조 코드로 작성해보기 class Stack{ cons..