profile
프론트엔드 개발자 | 문제가 있는 내용이 있다면 댓글로 알려주세요.
post-thumbnail

[기술면접 | JS] var, let, const

요약 var, let, const는 JavaScript에서 변수를 선언하는 키워드이다. var 키워드는 ES5 이전까지 유일했던 변수 선언 키워드이고, 변수의 선언과 동시에 초기화가 함께 진행되는 특징이 있다. let, const 키워드는 ES6 이후 추가된 변수 선언 키워드로, 변수의 선언과 초기화가 분리되어 진행되는 특징이 있다. let, const는 선언 이후 초기화가 진행되기 전까지 TDZ에 존재하여 접근할 수 없다. var는 초기화가 함께 진행되기 때문에 호이스팅이 되어 선언문 이전에도 접근할 수 있다. var 키워드란? JavaScript ES5 이전까지 유일했던 변수 선언 키워드 var 키워드의 특징 및 문제점 변수 중복 선언 허용 위의 예시처럼 동일한 변수를 중복으로 선언하면 초기화문의 유무에 따라 결과값이 달라진다. 초기화문이 있다면 var 키워드는 없는 것처럼 동작되고 변수의 값에 새로운 값이

2023년 9월 13일
·
0개의 댓글
·
post-thumbnail

[기술면접 | JS] 렉시컬 스코프(Lexical Scope)

렉시컬 스코프 중첩된 함수 그룹에서 내부 함수가 상위 범위의 변수 및 리소스에 접근 할 수 있음을 나타내는 범위 규칙 정적 스코프라고도 불림 함수 정의가 평가되는 시점에 함수가 정의된 환경(= 렉시컬 환경)에 의해 결정됨 함수 내부에서 변수를 접근할 때, 접근을 시도한 함수 내에서 변수를 찾아본다. 변수가 존재하지 않다면 렉시컬 스코프에 의해 렉시컬 환경인 상위 함수에서 다시 변수를 탐색한다. foo() 함수가 동작되면 bar() 함수가 동작되며, console.log(X); 가 동작된다. 이 때, foo() 함수에서 호출되었기 때문에 X의 값은 2가 되어야 할 것 같지만, X는 1이다. 이는 렉시컬 스코프의 특징으로, 함수가 정의될 때의 렉시컬 환경에 따라 범위가 변경되기 때문이다. bar() 함수의 정의된 위치가 렉시컬 환경이 되는데, 전역 위치에서 정의하고 있기 때문에 bar()의 렉시컬 환경은 전역이다. 따라서, 렉시컬

2023년 9월 12일
·
0개의 댓글
·
post-thumbnail

[기술면접 | JS] Node.js 동작 방식

요약 Node.js는 V8 엔진을 기반으로 브라우저 외부에서 JavaScript를 실행하기 위한 비동기 이벤트 주도 JavaScript 런타임이다. 비동기는 논블로킹 I/O 방식으로 수행한다. 논블로킹 I/O 방식은 OS 커널이나 libuv의 스레드 풀에서 I/O 블로킹에 관련된 작업을 처리하고 이벤트 루프를 통해 콜백 함수를 동작시키는 방식이다. 이벤트 주도는 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 말한다. Node.js JavaScript를 브라우저 밖에서도 실행할 수 있도록 하는 JavaScript 런타임 비동기 이벤트 주도 JavaScript 런타임으로 확장성 있는 네트워크 애플리케이션을 제작할 수 있도록 설계되었다. Node.js의 특징 Node.js는 싱글스레드 논블로킹 모델로 구성되어 있으며, 하나의 스레드로 동작하지만 비동기 I/O 작업을 통해 동시에 많은 요청들을 비동기로 수행함으로써 싱글 스레드임에도

2023년 9월 9일
·
0개의 댓글
·
post-thumbnail

[기술면접 | JS] V8 Engine

요약 V8 엔진은 구글이 개발한 오픈소스 자바스크립트 엔진입니다. Node.js와 Chrome에서 사용하고 있으며 Ignition, JIT, TurboFan이라는 컴파일러와 인터프리터를 사용하여 자바스크립트 코드를 기계어로 변환시켜준다. 자바스크립트 엔진 자바스크립트 코드를 CPU가 이해할 수 있게 기계어로 변환해서 실행하는 프로그램 또는 인터프리터 컴파일러와 인터프리터 컴파일러 파일 전체를 읽은 후에 컴파일하여 기계어로 변환하는 프로그램 인터프리터 코드를 한 줄씩 해석하여 기계어로 번환하는 프로그램 코드를 실행하기 전 컴파일 단계가 없기 때문에, 초기 실행 속도는 빠르지만 전체적인 실행 속도는 일반적으로 컴파일러보다 느리다. V8 엔진 구글이 만든 웹 브라우저를 만드는데 기반을 제공하는 오픈소스 자바스크립트 엔진 ECMAScript 규격의 C++로 작성되었고, 자바스크립트를 바이트 코드로 컴파일하고 바이트 코드를 최적화된

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

[기술면접 | JS] 클로저 closure

요약 클로저란 함수가 선언된 렉시컬 환경과 함수의 조합이며 함수가 선언된 환경의 변수를 기억하고 사용할 수 있다. 렉시컬 환경 특정 코드가 작성, 선언된 환경 렉시컬 스코프 중첩된 함수 그룹에서 내부 함수가 상위 범위의 변수 및 리소스에 접근 할 수 있음을 나타내는 범위 규칙 정적 스코프라고도 불림 함수 정의가 평가되는 시점에 함수가 정의된 환경(= 렉시컬 환경)에 의해 결정됨 함수 내부에서 변수를 접근할 때, 접근을 시도한 함수 내에서 변수를 찾아본다. 변수가 존재하지 않다면 렉시컬 스코프에 의해 렉시컬 환경인 상위 함수에서 다시 변수를 탐색한다. 클로저 > 함수와 그 함수가 선언된 렉시컬 환경과의 조합 > 함수가 선언된 환경 외부에서 실행되더라도, 함수가 선언된 환경의 변수를 기억하고 사용할 수 있다. 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수들로 구성된다. 함수는 선언문

2023년 9월 4일
·
0개의 댓글
·
post-thumbnail

[Error Handling] CRLF, LF

CRLF, LF란? > 문자 또는 문자열에서 텍스트의 한 줄이 끝났다는 표시를 하는 "새줄 문자"를 의미합니다. CRLF는 CR과 LF를 결합한 문자를 의미합니다. CR이란 Carriage Return의 약자로, Escape 코드에서 \r을 의미하며 현재 라인에서 커서를 맨 앞으로 옮기라는 의미입니다. LF란 Line Feed의 약자로, Escape 코드에서 \n을 의미하며 다음 라인으로 줄을 넘기라는 의미입니다. ❓ 왜 Line Feed가 줄바꿈인가? Line Feed(줄 먹이기)는 이름만 봐서는 전혀 이해되지 않는 말입니다. 줄을 먹인다는 표현이 현대 사회에서 거의 사용되지 않는 말이기 때문인데, CR과 LF는 타자기에서 기반되었습니다. <img src=https://velog.velcdn.com/images/player1552/post/7e6a489e-

2023년 3월 21일
·
0개의 댓글
·
post-thumbnail

[JavaScript] this의 사용 방식

this란? > 여러 호출 방식에 따라 정의가 달라지는 실행 함수의 호출자이다. (너무 많고 다양한 의미로 부르기에, 내가 이해할 수 있는 언어로 작성했다.) this 키워드의 상태는 크게 네 가지의 방식에 따라 나뉘는데, 함수 호출, 메소드 호출, 객체 생성 함수, (apply, call, bind) 이다. 그 전에, 바인딩에 대해서 짧게 설명하고 넘어가자. 바인딩 변수와 값을 연결하는 과정을 의미 메모리 공간의 주소를 변수에 할당하는 행위 함수 호출 방식 일반적인 함수 내에서 this는 전역 객체(window)를 바인딩한다. this.name 처럼 함수 내에서 사용할 수 있는 변수가 있어도, window 객체의 key 값을 가져오게 된다. 메소드 호출 방식 객체 안에 있는 함수(메소드)에서의 this는 해당 메소드를 소유한 객체를 바인딩한다. this.prop

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 얕은 복사, 깊은 복사

얕은 복사, 깊은 복사는 참조 자료형에서 발생한다. 참조 자료형부터 간단하게 짚고 넘어가보자. 참조 자료형 메모리 공간에 값이 아닌 주소를 할당하여, 할당된 주소 안의 값을 호출 및 수정한다. 참조 자료형의 값을 다른 변수에 할당하면 주소 자체가 할당되어, 새로운 변수에서 값을 변경하면 원본 값도 함께 변경된다. 할당된 주소의 위치는 heap이라는 공간에 존재한다. 종류 : array, object, function 참조 자료형의 복사 방법 배열 1. slice() slice()는 배열의 원본 값에서 특정 범위를 제한하여 새로운 배열을 반환하는 메소드 새로운 배열을 반환하기 때문에, 메모리 공간에도 새롭게 할당되며, 원본과 연결되지 않는다. 2. spread syntax(스프레드 문법) 배열의 내부 요소 값들을 펼쳐서 출력해주는 문법 객체 **1. Object.a

2023년 3월 2일
·
0개의 댓글
·