정보처리기사를 공부하며 모듈(Module)에 대해 정의 정도만 기억하고 있었다."하나의 기능의 하나의 파일로 구성된 형태"최근 '2020 프로그래머스 Dev-Matching' 문제를 풀며 모듈에 대해 다뤄볼 기회가 생겼다.평소에 사용하고 있던 코드가 모듈로 작동하고 있
DOM : HTML, XML 문서의 프로그래밍 인터페이스Virtual DOM(가상돔)을 살펴보기 전에 DOM에 대해 알아보자.DOM은 HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용된다.HTML이 화면에 보이는 구조를 문서로 만든 단순 텍스
node.js express 미들웨어bodyParser 은 요청의 본문을 해석해주는 node.js 모듈이다.클라이언트가 보내는 post와 put request의 body로부터 파라미터를 편리하게 추출한다.우선, bodyParser가 없을 때의 문제점을 살펴보자.아래와
파라미터로 함수를 전달하는 함수콜백함수(Callback Function)이란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.콜백함수는 이미 우리의 코드 속에서 자주 사용되고 있다.예를 들어, forEach 함수의 경우 함수 안에 익명의 함수를 넣어서 f
\+ : 문자열을 우선시한다.그 외 ( - / \* / / 등 ) : 숫자를 우선시한다. 산술연산시 boolean은 숫자로 바뀌려는 노력을 한다. 산술 연산시 객체는 toString화 된다.따라서 '오버라이딩' 해준다. toString과 valueOf 중 valueO
기본형(원시 타입, Primitive Type)숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol)참조형(Reference Type) : 객체(Object)배열(Array), 함수(Function), 날
데이터 타입의 종류 기본형(원시 타입, Primitive Type) 숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol) 참조형(Reference Type) : 객체(Object) 배열(Array),
자바스크립트는 세 가지 방식으로 변수를 선언한다.기존의 선언 방식 var , 그리고 ES6 문법에서 등장한 let 과 const 가 있다.새로운 변수 선언 방식과 타입스크립트의 등장으로 자바스크립트에도 좀 더 체계가 잡힌 것을 알 수 있다.예제를 통해 세 가지 방식의
실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체선언된 변수를 위로 끌어올린다. (호이스팅)외부 환경 정보를 구성한다.this 값을 설정한다.스택(Stack)은 출입구가 하나인 LIFO(Last In First Out) 구조이다.스택에 a, b, c,
Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임과거 자바스크립트는 런타임이 브라우저 밖에 존재하지 않았고, 이러한 한계를 극복하기 위해 Node.js가 나왔다. 즉, 서버에서 자바스크립트를 동작할 수 있도록 하는 환경(플랫폼)이다.Nod
default 버전과 현재 사용 중인 버전은 다를 수 있다.아래의 명령어로 default 버전은 v12.19.0이 되지만, 현재 사용 버전은 v14.16.0 이다.현재 사용 버전도 default로 맞추려면 다시 nvm use v12.19.0을 입력한다.https
몇일 전 개발한 프로젝트를 운영에 배포하는 도중 나의 Mac에 깔린 Node가 이상하게 꼬여있는 것을 발견하였다. 리스트에는 없는 노드 버전이 디폴트 버전으로 설정되어 있었다. 당장은 문제가 없었지만, 앞으로 생길 문제들을 고려하여 Node.js를 삭제 후 다시 설치
Node.js란 서버에서 자바스크립트를 동작할 수 있도록 하는 환경(플랫폼)이다.즉, 코드를 통해서 서버를 직접 만들고 실행할 수 있다.web_server/index.htmlweb_server 라는 폴더를 만들어 간단한 html을 작성해주었다.이제 이 파일을 실행할 서
'실행 컨텍스트' 란? 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 선언된 변수를 위로 끌어올린다. (호이스팅) 외부 환경 정보를 구성한다. this 값을 설정한다. 스코프(Scope) 스코프란 식별자에 대한 유표범위이다. ES5까지의 자바스
기본형(원시 타입, Primitive Type)숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol)참조형(Reference Type) : 객체(Object)배열(Array), 함수(Function), 날
다른 코드의 인자로 넘겨주는 함수콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다.setInterval 함수는 첫 번째 매개
자바스크립트에서 this 는 함수를 호출할 때 결정된다.함수를 어떤 방식으로 호출하느냐에 따라 그 값이 달라지며 즉, 실행 컨텍스트가 생성될 때 함께 결정된다.전역 공간에서 this 는 전역 객체를 가리킨다.브라우저 환경에서의 전역객체는 window 이고 Node.js
연이어 호출되는 함수들 중 마지막 함수만 호출되도록 하는 것 (입력이 끝날 때 한 번)디바운싱은 최종 결과가 중요한 경우 사용한다.예를 들어 ajax 요청이 있다.위 코드는 한 글자 칠 때마다 ajax 요청이 실행된다.'ㅁ', '미ㄴ'와 같은 요청은 제대로 된 검색 결
특정 화면 요소에서 이벤트가 발생했을 때,해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성위의 코드에서 최하위 div 태그 <div class="three"></div>를 클릭하면다음과 같은 결과가 실행된다.브라우저는 특정 화면 요소에서 이벤트가
자바스크립트는 프로토타입(Prototype) 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(Prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로토타입의 개념 어떤 생성자
우리는 위 코드에서 1초 간격으로 hi가 5번 출력되기를 기대했지만, 실행 결과는 1초 후 hi가 동시에 5번 출력된다. Promise, async, await 비동기 문법은 모두 사용했지만 원하는대로 실행되지 않는다.forEach 를 사용했을 때, 비동기 처리가 되지
객체란 이름(name)과 값(value)로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. 프로퍼티 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.객체 리터럴 사용Object 생성자 사용ESMA6 전까지 자바스크립트에는 클
다음 예시는 fruitA 객체에 fruitB 객체를 복사한 것이다. for...in 루프를 사용하여 새로운 배열에 직접 복사해주었다.Object.assign(obj1, obj2)obj2의 모든 속성들을 obj1에 복사하며, 같은 속성이 있을 경우 덮어쓴다. 함수의 파라
필요한 상황에서 동적으로 파일을 import 할 수 있다. 필요한 상황에서만 임포트 시킬 수 있다.Promise.all() 은 모든 작업이 성공해야 실행되는 반면, Promise.allSettled() 는 도중에 실패 되더라도 모든 실행을 할 수 있다. a ?? b 문
초기 자바스크립트는 모듈을 불러오거나 내보내는 방법이 없어 하나의 파일에 모든 기능를 작성해야 했다. 이런 불편함을 해결하기 위해 CJS, AMD, UMD, ESM이 등장하였고 모듈로서 사용할 수 있게 되었다.자바스크립트를 브라우저에서 뿐만 아니라, 서버사이드 애플리케
private npm registry 필요한 이유 npm이란 Node Pacakage Manager로 Node.js의 패키지를 관리할 수 있는 도구이다. npm을 사용해서 npm 저장소에 있는 패키지를 쉽게 install하고 관리할 수 있게 된다. npm 저장소에
첫 번째 인자에 넣은 값을 표시한다.함수나 코드가 실행된 횟수를 계산할 수 있다.레이블과 함께 console.count 를 호출하면 카운터를 구분할 수 있다.초기화 하려면 console.countReset을 사용한다.특정 작업에 걸리는 시간을 파악한다.측정하려는 코드
package.json dependencies 애플리케이션 동작과 직접적으로 연결된 패키지 런타임(실행) 시 필요한 패키지 devDependencies 개발할 때 필요한 라이브러리 실제 배포할 때 포함되지 않기 때문에 빌드 시간을 줄일 수 있다. (빌드 안함) 예 )