현인

실행 컨텍스트는 자바스크립의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X eval 코드 빌트인 전역 함수인 ev..

this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 이루어져 있다. 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 식별자에 생성된 객체가 할당된 이후다. 따라서 메서드 내부에서 재귀 참조가 가능하다 하지만 재귀 참조 방식은 일반적이지 않으며 바람직하지 않다. 생성자 ..

자바스크립트는 멀티 패러다임 프로그래밍 언어이다. 명령형 함수형 프로토타입 기반 객체지향 프로그래밍 클래스 기반 객체지향 프로그래밍 언어 C++, Java 등 프로토타입 기반 객체지향 프로그래밍 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력하다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 원시 타입의 값을 제외한 나머지 값들은 모두 객체이다. 객체지향 프로그래밍 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 실제 세상의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작. 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, ..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. 개발자가 직접 접근할 수 있는 공개된 프로퍼티는 아니다. 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있다 [[Prototype]]이라는 내부 슬롯을 __proto__를 통해 간접적으로 접근할 수 있다. 자바스크립트 엔진의 내부 로직 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본 값으로 자동 정의한다. 프로퍼티 어트리뷰트는 내부 슬롯에..

var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 1. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. 초기화문이 있는 경우 var 키워드가 없는 것처럼 동작 초기화문이 없는 경우 무시된다 에러 발생 X 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고, 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다. 2. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. 예를 들어 반복문이나 조건문 같은 코드 블록 내에서 선언했을 때 함수 레..

MST(Minimum Spanning Tree) - 최소 신장 트리 Spanning Tree(신장 트리)란? 그래프 내의 모든 정점을 포함하는 트리 단, 최소 연결 그래프 형태이다. n개의 정점을 가지는 그래프에서 n-1개의 간선으로 연결된 트리이다. 하나의 그래프에는 여러 개의 신장트리가 존재한다. Minimum Spanning Tree(최소 신장 트리)란? 신장 트리 중에서 사용된 간선들의 가중치 합이 가장 작은 신장 트리 MST 구현 방법 크루스칼(Kruskal) 프림(Prim) 크루스칼 (Kruskal) 간선을 기준으로 접근한 방법 모든 간선을 가중치가 낮은 간선을 우선으로 정렬한 후에 가중치가 가장 낮은 간선부터 하나 씩 MST 집합에 추가를 한다 이 때, 사이클을 형성하는지 검사를 한다 사이클..

8장 제어문 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로는 제어문이나 함수를 정의할 때 사용한다. 문의 끝에는 세미콜론을 붙이는 것이 일반적이다. 다만, 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. // 블록문 { var foo = 1; } // 제어문 var x = 1; if (x < 10) { x++; } 조건문 조건문은 주어진 조건식의 평가 결과..

삼성 청년 SW 아카데미(SSAFY) 수료를 앞두고 채용박람회 기업으로 티맥스 계열사들이 왔다. 사용하고 있는 기술 스택도 좋고 많이 배울 수 있는 기회라 생각해서 티맥스 커머스 프론트엔드 엔지니어로 지원했다. SSAFY 전형이라고 해서 절차가 크게 다르진 않았다. 다만 서류만 SSAFY 입사지원서 양식이었고 지원 동기와 진행한 프로젝트들에 대해 적었다. 서류가 합격하고 공식 홈페이지에 입사지원을 다시 해달라는 연락을 받았고 코딩 테스트 일정을 안내해줬다, 생각보다 쉽지 않은 난이도 였고 2시간 3문제였다. 그래도 백준 기준으로 골드급 문제 잘푸는 사람들은 수월하게 풀었을 것 같다. 코테를 생각보다 잘 못봐서(약 1.8솔..) 걱정했지만, 다행히 면접 기회가 주어졌다. 면접에 대한 자세한 내용은 기술하지..

들어가며 프론트엔드 개발에 관심이 있는 사람들이라면 한 번쯤 들어봤을 법한 단어들입니다. 저는 프론트엔드 직무 면접을 보면서 CSR 방식과 SSR 방식의 차이를 설명해달라는 질문을 종종 받았습니다. 개인적으로 궁금해서 공부했던 내용이지만 실제 면접에서도 물어보는 것을 보면 프론트엔드 개발자라면 짚고 넘어갈 필요가 있는 지식이라고 생각합니다. 지금부터 CSR과 SSR이 무엇인지 간단히 알아보고, 두 방식에는 어떤 차이점이 있는지 알아보겠습니다. CSR과 SSR CSR, SSR이라는 용어는 렌더링 방식을 뜻하는 용어입니다. 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정입니다. 감이 잘 안오시죠? 우리의 경험을 한 번 되짚어 보겠습니다. 웹 사이트를 접속했는데 어떤 페이지는 어느정도 틀이..

7장 연산자 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 피연산자는 "값" 이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할을 한다고 볼 수 있다. 산술 연산자 산술 연산자(arithmetic operator)는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 산술 연산자는 이상 산술연산자와 단항 산술 연산자로 구분된다. 이상 산술 연산자 이상 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다...