Language/JS(Node.js)22

• 

  NVM을 활용하여, Node Version을 관리하는 방법 서론 오늘은 NVM을 활용하여, Node Version을 관리하는 방법에 관해서 알아보도록 하겠습니다. 설치 방법 설치 방법에는 2가지가 있습니다. curl로 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash wget으로 설치 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash 그러면 아래와 같은 메세지가 출력됩니다. => Appending nvm source string to /home/lesstif/.bash_profile => Appending bash_completion source string to /hom.. Language/JS(Node.js) 2023. 4. 22.

• 

  [Javascript] Array.prototype.forEach vs Array.prototype.Map 서론 오늘은 배열을 순회하는 내장 메서드인 forEach와 Map의 차이점을 알아보도록 하겠습니다. 본론 forEach 먼저 forEach에 대해서 살펴보겠습니다. const arr = [1, 2, 3, 4, 5]; arr.forEach((i) => console.log(i+1)); console.log(arr); 배열을 순회하며, 각 원소에 1을 더하는 간단한 함수를 forEach 메서드의 콜백함수로 등록해줍니다. 아래와 같이 출력되는 것을 볼 수 있습니다. 2 3 4 5 6 [1, 2, 3, 4, 5] forEach 메서드를 사용하면 원본 배열에 영향을 주지 않으며, 반환 값도 없습니다. map 이번엔 map 메서드를 살펴보겠습니다. 동일한 예제를 사용하여 비교해보겠습니다. const arr2 = [.. Language/JS(Node.js) 2022. 4. 3.

• 

  [Javascript] 자바스크립트 함수와 클래스의 this binding 서론 오늘은 자바스크립트에서의 함수와 클래스의 this binding의 차이점에 대해서 알아보도록 하겠습니다. 차이점을 알기 위해선, this가 동작하는 방식에 관해 이해해야 합니다. 본론 함수에서의 this 함수에서의 this는 실행환경(런타임)과 함수가 선언된 방식에 따라서 다릅니다. 먼저 런타임이 node.js에서 확인해보도록 하겠습니다. 함수 선언식과 함수 표현식으로 선언된 함수 안에서의 this는 global 객체를 가리킵니다. 반면, 화살표 함수로 선언된 this는 module.exports를 가리킵니다. 그 까닭은 후자에선 상위 스코프의 this를 가리키는데, 전역 스코프에서의 this가 가리키는 것이 module.exports 이기 때문입니다. function printThis() { co.. Language/JS(Node.js) 2022. 3. 29.

• 

  [자바스크립트] map 함수에서 비동기 콜백 처리하기 학습목표 Promise.all을 활용하여, 비동기 콜백함수의 응답을 처리할 수 있다. 본론 흔히 배열을 순회해, 원하는 형태의 값으로 변환할 때 우리는 Array.prototype.map 함수를 사용합니다. 문제는 map 함수를 순회하는 과정에서 네트워크 요청을 거쳐야 한다면 일반 콜백함수가 아니라, 비동기 콜백을 처리해야 할 것입니다. 이 때, 비동기 콜백 함수가 실행된 결괏값을 리턴 받으려면 어떻게 해야 할까요? Promise 대신 말이죠. 정답은 Promise.all을 사용해주면 됩니다. Promise.all(iterable) Promise.all 메서드는 파라미터로 순회 가능한 객체를 전달 받을 수 있습니다. 이 경우에는 map 함수의 리턴 값이 되는 객체가 되겠죠. 리턴 값은 요청이 성공적일 때.. Language/JS(Node.js) 2022. 3. 28.

• 

  [Javascript] 이벤트란 무엇인가? 해당 글은 향후 수정될 수 있습니다. 참고 바랍니다 (1/23) 본론 이벤트 객체 앞서 DOM 구조를 살펴보았습니다. DOM의 가장 상위 객체는 Object이고 그 하위 객체는 Event입니다. 그래서 해당 요소를 상속함으로써 활용할 수 있는 요소들을 살펴보겠습니다. 아래와 같이 말이죠. 대표적으로 type 정보가 있고, target 프로퍼티가 있습니다. 전자는 이벤트 타입에 대한 정보를, 후자는 이벤트를 발생시킨 DOM 요소를 반환하죠. 참고한 사이트 https://velog.io/@niyu/40%EC%9E%A5-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Language/JS(Node.js) 2022. 1. 23.

• 

  [Javascript] DOM(Document Object Model)이란? 서론 오늘은 브라우저를 이해하는 가장 중요한 개념 중 하나인 DOM에 대해서 알아보겠습니다. 또한 Event Programming에 대해서도 간략하게 설명 드리겠습니다. 그럼 바로 본론으로 가겠습니다. 본론 정의 1) DOM은 HTML 문서의 계층적 구조와 정보를 표현한다. 2) DOM은 자료구조이다. 트리 자료구조이다. 그래서 DOM tree라고도 부르는데, 이는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다. 3) DOM은 API이다. DOM은 프로퍼티와 메소드를 갖는 객체를 제공하며, 프로그래머는 이를 활용하여 자신에 접근하고 수정할 수 있다. 그래서 DOM API(Application Programming I.. Language/JS(Node.js) 2022. 1. 23.

• 

  [ES11] Nullish Coalescing Operator // 1번 { const name = "Lee"; const userName = name || "Guest"; } // 2번 { const name = "Lee"; const userName = name ?? "Guest"; } 1번의 문제점은 name = ""과 같이 공백으로만 사용자가 입력해도 "Guest"를 반환한다는 점입니다. 2번은 1번의 단점을 보완할 수 있는데요, name이 전혀 입력되지 않으면 name에 "Guest"가 할당되기 때문입니다. Language/JS(Node.js) 2022. 1. 19.

• 

  [Javascript] Script defer & async 해당 글은 추후에 수정 보완될 수 있습니다. (1/15) script async 와 defer의 차이점 head 태그 안에 삽입할 경우 body 태그 맨 아래에 삽입할 경우 head + async : HTML parsing과 동시에 발생한다. head + defer 💡 결론은 head + defer 방식이 가장 안전하고 효율적!! defer도 async처럼 비동기적으로 파싱되는 것은 맞으나, HTML 파싱이 끝난 후 스크립트가 실행된다. 참고 사이트 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) Language/JS(Node.js) 2022. 1. 15.

• 

  [Javascript] 스코프란? 해당 글은 추후에 수정 보완될 수 있습니다. (1/15) 서론 먼저 알아야 할 점 var와 let, const의 스코프는 다르게 작동한다. 스코프는 변수 그리고 함수와 깊은 연관이 있다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // ReferenceError: x is not defined 본론 스코프 블록 스코프, 전역 스코프, 지역 스코프 .. Language/JS(Node.js) 2022. 1. 15.

• 

  [ES6] Symbol이란 무엇인가? 해당 글은 Javascript Info 글을 재구성한 글입니다. 참고해서 봐주시면 감사하겠습니다. 본론 심볼이란? 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하죠. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴보았습니다. 이번 챕터에선 프로퍼티 키로 심볼값을 사용해 보면서, 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하겠습니다. '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다. 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다릅니다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만.. Language/JS(Node.js) 2022. 1. 15.

• 

  [memory] Javascript에서 Swap 하는 방법 (+ 얕은 복사와 깊은 복사) 들어가기에 앞서 혹시 두 개념을 들어본 사람이 있을지 모르겠습니다. 아마 처음 듣는 사람이라면 어떤 개념인지 와닿지 않을 수 있습니다. 그러나 C언어와 같이 low level language를 학습해본 사람이라면 대략적으로 어떤 개념인지 유추해볼 수 있을 겁니다. 이는 Call by Value와 Call by Reference의 차이와도 비슷하기 때문이죠. 또한 이는 함수형 프로그래밍에서 중요하게 다루는 Mutable/Immutable 개념과도 관련이 있으니, 오늘 다 같이 공부해봅시다. C언어에서의 메모리 접근 방법 둘을 비교하기 위해, 두 값을 서로 바꿔야만 하는 상황이 있다고 가정해봅시다. 가장 먼저 떠오르는 방법은 swap이란 함수를 새롭게 만들고, 파라미터로 서로 변환하고자 하는 두 값을 파라미.. Language/JS(Node.js) 2022. 1. 2.

• 

  [Javascript] 클로저란 무엇인가? 서론 대상독자 일급함수, 렉시컬 스코프 등의 자바스크립트 개념을 알고 있는 웹 개발자 학습목표 클로저란 무엇인지 이해하고 알맞은 상황에 클로저를 활용하여 문제를 해결할 수 있다. 본론 클로저의 정의 클로저는 자바스크립트 개발자라면 한 번 이상은 들어봤을 개념일텐데요, 함수형 프로그래밍 언어인 스칼라(Scala), 하스켈(Haskell), 얼랭(Erlang) 등 에서도 활용될 수 있는 범용적인 개념입니다. 클로저란 함수와 그 함수가 선언된 렉시컬 환경과의 조합을 말합니다 - MDN. 정의만으로는 설명이 잘 와닿지 않을 것입니다. 그래서 내용을 좀 더 세분화해보겠습니다. 렉시컬 환경이란? 렉시컬 환경이란 무엇일까요? 렉시컬 환경은 다음의 3가지 정보를 기록하는 자료구조입니다. 1) 식별자 : 변수나 함수, .. Language/JS(Node.js) 2021. 12. 30.