JavaScript

NPM에 패키지 배포하고 사용해보기 (+ 타입스크립트)

NPM에서 라이브러리를 설치받는 일은 매우 빈번했지만, 내가 실제로 NPM에 라이브러리를 배포하는 경험은 없었다. NPM은 개인이나 팀으로 유료 요금제도 제공하여 private하게 패키지를 관리할 수 있는 기능도 제공하고 있기에, 앞으로 사용할 일이 있을 것이라 생각하고 이번에 테스트로 배포를 진행해보았다. https://www.npmjs.com npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and ..

javascript에서 class 사용하기

ES6부터 자바스크립트에서도 class 문법이 지원된다. 클래스는 객체를 생성하는 탬플릿으로 재사용할 수 있고, 내부의 변수와 메서드를 추상화할 수 있다. class 사용하기 // class 표현식 const Data = class { constructor(name) { this.name = name; } get name() { return "이름은 " + this._name + "입니다."; } set name(name) { if (name.length

자바스크립트 generator 함수란?

제네레이터 함수는 ES6부터 지원되는 자바스크립트의 기능이다. 제네레이터 함수를 사용하면, 실행한 함수를 중간에 중단(pause)한 뒤 다시 재개(resumed)할 수 있다. 제네레이터 함수가 사용되는 대표적인 예로는 redux saga가 있다. 중간 중간에 중단점이 있음으로써, 디버깅에 큰 도움이 된다. const generator = function* () { console.log("1st"); yield; console.log("2nd"); yield; console.log("3rd"); yield 3; }; generator genetator 함수는 위와같이 function*() {} 의 형태로 작성할 수 있다. 기존의 함수 선언식에 *을 붙여준 모양새이다. yield는 단순히 표현하면 중단점으로..

javascript 스코프와 실행 컨텍스트

자바스크립트의 스코프와 실행 컨텍스트에 대해서 정리하기로 하였다. 선언된 변수가 어디서 어디까지 유효한지에 대해 정확히 알기위해서는 이 내용들을 알아야겠다고 생각하였다. 스코프 (scope) 스코프는 식별자(변수)에 대한 유효범위로, 현재 실행중인 콘텍스트를 의미한다. 🧃 변수 또는 다른 표현식이 해당 스코프내에 존재하지 않으면 사용할 수 없다. 스코프는 계층적인 구조를 갖기에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. const a = 10; { const b = 20; console.log(a); // 10 console.log(b); // 20 } console.log(a); // 10 console.log(b); // Uncaught Refere..

javascript의 호이스팅(hoisting) 알아보기

선언한 변수가 맨 위 상단으로 끌어올려지는 것을 의미한다. 🧁 인터프리터가 변수와 함수의 메모리 공간을 선언(변수, 함수) 전에 미리 할당하는 것을 호이스팅이라고 한다. 선언은 호이스팅되지만, 값의 할당은 호이스팅이 되지 않는다. console.log(name); // undefined var name = "zone"; 위의 코드는 오류가 발생하지 않는데, var 변수 name의 선언 이 먼저 일어났기 때문이다. 다만, 값이 할당되지는 않았기에 undefined이 출력된다. 위와 같은 코드를 let으로 작성하면 오류나 난다. let과 const도 호이스팅은 일어나지만, undefined으로 변수를 초기화하지는 않기 때문이다. 🍲 let과 const는 블록 스코프를 가지고, var은 함수 수준 스코프를 가..

util.format() 으로 문자열 동적 생성하기

자바스크립트에서 문자열을 동적으로 생성하기 위해서는 보통 ``와 같이 백틱을 많이 사용한다. 하지만 노드 환경에서 제공하는 util의 format 메서드를 사용하면, 마치 C언어에서 문자열을 만드는 것 처럼 동적으로 문자열을 생성할 수 있다. const util = require('util'); const str1 = util.format('%d, %s, %j', 10, '안녕', { name: 'Park'}); console.log("str : ", str1, "\ntype :", typeof str1); /* str : 10, 안녕, {"name":"Park"} type : string */ const endpoint1 = "hi"; const endpoint2 = "bye"; const str2 =..

JSON과 JSON.stringify, JSON.parse

JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 오늘날에는 자바나 파이썬과 같은 언어에서도 많이 사용된다. // JSON 예시 { "text": "Hi, I am human", "readonly": true, "creadtedYear": 2019 } JSON은 자바스크립트의 객체와 유사한 형태를 띄고 있지만, JSON에는 또 다른 규칙들이 있다. 🥙 자바스크립트 객체에서 키는 따옴표 없이 쓸 수 있지만, JSON에서는 반드시 큰 따옴표를 붙여야 한다. 🥨 자바스크립트 객체에서는 문자열의 값에 '나 "나 `와 같이 어떠한 형태의 따옴표도 사용할 수 있지만, JSON에서는 반드시 큰따옴표로 감싸야 한다. 🍝 깊은 복사를 할 때에도 사용될 수 있..

자바스크립트 클로저(Closures)란?

자바스크립트는 기본적으로 함수 내부에서 선언된 변수를 외부에서 접근할 수 없다. 함수 내부의 변수는 함수의 실행이 끝나면 메모리 할당이 해제되기 때문이다. 하지만 일급객체의 속성으로 변수에 할당된 함수는 곧바로 할당이 해제 되지 않고, 이때 함수 내부의 변수의 값 역시 남아있게 된다. 🥘 일급객체는 변수에 할당될 수 있으며, 다른 함수의 인자로 사용될 수 있고, 다른 함수의 결과로서 리턴될 수 있다. 함수 내부에서 이 선언된 변수에 접근할 수 있는 함수를 클로저 라고 한다. 이 클로저를 통해서 Java의 객체의 private 함수처럼 외부에서 메서드를 통해서만 변경이 가능한 함수 내부의 변수를 만들 수 있다. const closure = () => { let count = 0; function showC..