바르고 뜨겁게

노드는 런타임 가상머신(Vm)이다.노드를 깔면 노드안에 가상머신이 있기 때문에 어느 환경에서나 자바스크립트를 사용가능하다.원래 자바스크립트는 웹브라우저내에서 동작하지만 노드의 등장으로 웹브라우저 밖에서도 사용할 수 있게 되었다. node 결과는 크롬의 개발자 도구의 console 창과 똑같다. 둘다 REPL(Read, Evaluate, Print, Loop) 방식을 사용하기 때문이다.노드의 특징: 이벤트기반, 논블로킹 I/O모델, 싱글쓰레드 이벤트 기반 (event-driven)호출스택과 태스크큐에 작업이 없더라도, 이벤트 리스너가 이벤트를 기다리고 있는 것 논블로킹 I/O호출스택에서 태스크큐로 보내서 눈에 보이는 코드와 다르게 실행 순서를 바꾸는 개념자바스크립트는 싱글쓰레드이기 때문에 동시작업이 불가능..

async/await은 ES2017 부터 지원//// Promise 사용 //// Users.findOne('kim') .then((user) => { console.log(user); return Users.update('kim', 'jeong'); }) .then((updateUser) => { console.log(updateUser); return Users.remove('jeong'); }) .then((removeUser) => { console.log(removeUser); }) .catch((err) => { console.error(error); }); console.log('종료'); // 종료가 먼저 호출되고 promise가 실행된다. ​ ​ //// async/await 사용 ///..

ES2015 이전에는 콜백형태로 비동기를 사용했다.콜백형태의 단점: 계속해서 콜백 내에서 작업해야되며 깊이가 깊어져 시안성이 낮다ES2015 Promise가 등장하면서 직관적으로 코딩이 가능하다.Users.findOne('kim', (err,user)=>{ if(err){ return console.error(err) } console.log(user); ​ // 한번 콜백을 사용하면 계속 콜백안에서 작업해야된다. Users.update('kim', 'jeong', (err, updateUser)=>{ if(err){ return console.error(err) } console.log(updateUser); Users.remove('jeong', (err, removeUser)=>{ if(err){ ..

REST 문법 (배열)순서대로 넣는게 아니라, 남은 요소를 다 넣고을땐 아래처럼 하면 된다.rest로 여러개의 변수를 모아서 배열로 만든다.const array = ['nodeJs', {}, 10, true]; ​ const [node, obj, ...bool] = array; bool; // [10, true]const m = (x,y) => console.log(x,y); m(5,6) // 5, 6 m(5,6,7,8,9) // 5, 6 ​ const n = (x, ...y) => console.log(x,y); n(5,6,7,8,9) // 5, [6,7,8,9]

var candyMachine = { status: { name: 'node', count: 5, }, getCandy: function(){ this.status.count--; return this.status.count; } } ​ var status = candyMachine.status; var getCandy = candyMachine.getCandy;var status = candyMachine.status;위와 같이 변수이름과 속성이름이 같을때 ES2015에선 간단하게 표현할 수 있는 문법을 제공한다.const a = 객체.a const b = 객체.bconst { a,b } = 객체const candyMachine = { status: { name: 'node', count: 5, }, ..

function(매개변수) { return 리턴값 } 을 (매개변수)=>{ return 리턴값 }으로 표현 가능const add = function(x, y){ return x + y; }const add = (x, y) => { return x + y; } 중간 처리과정이 없고 리턴만 있는 경우 더 줄일 수 있다.(매개변수) => 리턴값const add = (x, y) => x + y;단, 화살표 함수와 function 은 차이점이 있다.this가 가르키는 대상이 다름.function 내부의 this는 외부의 this와 다르기때문에 따로 변수에 빼서 사용했어야 했음.화살표 함수는 함수 내부의 this를 외부의 this와 같게 만들어 준다.

사용법child: Container( alignment: Alignment(0.0, 0.0),상수 이름으로도 사용 가능하다.Alignment.bottomCenter 하단 중앙 Alignment(0.0, 1.0)Alignment.bottomLeft 왼쪽 하단 모서리 Alignment(-1.0, 1.0)Alignment.bottomRight 오른쪽 하단 Alignment(1.0, 1.0)Alignment.center 수평 및 수직 중심 Alignment(0.0, 0.0)Alignment.centerLeft 왼쪽 끝 Alignment(-1.0, 0.0)Alignment.centerRight 오른쪽 끝 Alignment(1.0, 0.0)Alignment.topCenter 중앙 상단 Alignment(0.0, -..

Column - children: [] 형태로 안에 있는 Widget 들을 세로로 쌓아서 배치한다.Row - children: [] 형태로 안에 있는 Widget 들을 가로로 배치한다.Flexible - 자식이 공간을 모두 채운다 (부모가 Column, Row 에 따라서 가로, 세로를 채움)Container - 자식 위젯을 컨트롤 하기 위한 용도로 많이 사용된다 (margin, alignment)...TextField - 이용자에게 값을 입력받기 위해 사용한다. controller가 반드시 필요하다. import 'package:flutter/material.dart'; ​ class ConcertInsert extends StatelessWidget { TextEditingController _tec ..

var obj = { a: 1, b: 2 };위 와 같이 사용하는것을 객체 리터럴이라고 한다.ES2015 이후로는 객체리터럴이 좀더 사용하기 편리하도록 변경되었다.var sayLog = function(){ console.log('Log') }; var es = 'ES'; ​ var oldObject = { sayHello : function(){ console.log('Hello') }, sayLog : sayLog }; ​ oldObject[es + 6] = 'Fantastic';const newObject = { sayHello(){ console.log('hello'); }, sayLog, [es + 6] : 'Fantastic' };sayHello : function(){} 을 sayHello(..

다음과 같이 자바스크립트에서 이벤트를 캐치해서 사용이 가능하다.단, 주의할점은 window.addEventListener("resize", handleResize())상기와 같이 호출함수 자리에 handleResize() 처럼 사용하면 이벤트가 발생됬을대 함수가 호출되는게 아니라즉시 호출되어 버린다. .addEventListener("이벤트이름", 호추함수명) - 이벤트리스너"resize"// event 파라미터는 어디서생성되는가? 자바스크립트가 자동으로 함수에 객체를 붙인다. function handleResize(event){ console.log("사이즈변경 핸들러 호출 : ", event); } ​ window.addEventListener("resize", handleResize); // ("이..