JavaScript
-
[2019.05.06] 코드에 DB 쿼리문은 그만! 유용한 Sequlize개발 블로깅/Server&DataBase 개념 2019. 5. 6. 10:37
기존에 웹 API 개발에 DB를 연동하여 사용하려면, 쿼리 명령어를 문자열로 저장하고 사용을 했어야 했다. DB연결 부분 생략 .... /* 쿼리 결과 값이 필요 없는 경우 */ var query = `insert into users(name) values('name')`; connection.query(query); /* 쿼리 결과 값을 받아올 경우 */ var query = `select * from users`; connection.query(query, function(error, rows, fields) { if(!error){ console.log(rows); console.log(JSON.parse(JSON.stringify(rows))) // 이렇게 해야 제대로 object 방식으로 사용 ..
-
[2019.04.24] API 통신 방식 -express개발 블로깅/Server&DataBase 개념 2019. 4. 24. 20:56
express방식을 이용하면 http 방식보다 조금 더 편리하고 강력하게 서버 기능을 구현할 수 있다. 확실히 express 방식으로 구현하니까 소스코드가 엄청나게 줄어들었다. # 통신을 위한 틀 var express = require('express'); const cors = require('cors'); var app = express(); app.use(cors()); app.use(express.json()); app.get('/getTest', function(req,res){ res.send(JSON.stringify({a:'pass1'})) }) app.post('/postTest', function(req,res){ console.log('---->',req.body); res.send(..
-
[2019.04.23] 자바스크립트 event Loop 개념개발 블로깅/Javascript 개념 2019. 4. 23. 12:12
자바스크립트에서 event Loop란, 그냥 자바스크립 내에서 돌아가는 함수 호출 방식을 말한다. 우선 일반적으로 하나의 함수가 끝나야 그 다음 함수가 호출되는 동기적 방식, 그리고 순서와 상관없이 함수가 끝날 때까지 기다리지 않고 다음 함수가 호출되는 비동기적 방식이 있다. # 싱글 스레드와 멀티 스레드 위 그림을 보면, 멀티 스레드는 한번에 여러 작업을 할 수 있다. 함수 여러개 처리를 동시에 한다. 싱글 스레드는 한번에 하나의 함수처리 밖에 못한다. 자바스크립트에는 setTimeout 등과 같이 비동기적 함수로 실행시킬 수 있는 방식이 있다. 그러면 자바스크립트는 비동기 방식의 언어일까? 자바스크립트는 싱글 스레드이다. 그러면 어떻게 비동기적 방식으로 함수를 돌릴 수 있는 것일까? 이 비동기적 방식..
-
[2019.04.23] node.js에 대해 알아보자개발 블로깅/Server&DataBase 개념 2019. 4. 23. 08:03
나는 node.js를 공부하기 전에 node.js라고 하면, 예전에는 php, sprint과 같이 javascript만으로는 서버환경을 구성할 수 없어서 javascript를 이용한 서버환경을 만들어주는 백엔드 라이브러리라고 생각했다. 그러나 그게 맞다. 한가지 몰랐던 점은, 서버 환경 뿐 아니라, API서버도 쉽게 개발할 수 있다는 것이다. 노드란? V8 엔진으로 만들어진 자바스크립트 런타임이다. # V8 크롬에서 사용하는 자바스크립트 엔진, 자바스크립트를 기계어로 컴파일 해준다. 컴파일 하지 않고 사용하는 자바스크립트를, 기계어로 컴파일 한다. # runtime 프로그래밍 언어가 구동되고 있는 환경 다시 정리하면, node.js란, 자바스크립트를 기계어로 컴파일 해주는 엔진인 V8로 빌드된, 자바스크..
-
[2019.04.21]WebPack 사용법 #2 - webpack.config.js 설정개발 블로깅/Modern script 2019. 4. 21. 23:31
이전 사용법 #1에서는 webpack 명령어를 이용하여 직접 번들파일을 생성해주는 방식을 작업해 보았다. 그러나 웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다. 그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정한다. bundle 파일을 자동으로 생성해주는 작업을 위한 설정 - webpack.config.js webpack을 자동으로 사용하기 위한 설정을 하기 위해서는 'webpack.config.js' 이라는 파일을 하나 생성해 줘야한다. 이 파일에 webpack에 관한 정보가 들어가게 된다. const path = require('path'); module.exports = { entry: pa..
-
[2019.04.17] CommonJS란?개발 블로깅/Modern script 2019. 4. 17. 16:26
개념은 간단하다. '.js' 파일 간의 어떻게 의존성을 가지게 할지 정해주는 것이다. 우선 commonJS라는 개념이 존재하는 이유는, 자바스크립트를 범용적으로 모듈화를 높이기 위함! ES6 리액트 기준으로만 설명 // test1.js function MSG1(){ console.log('1'); } function MSG2(){ console.log('2'); } export {MSG1, MSG2} 위 코드를 보면, test1.js에서 MSG1, MSG2의 함수를 export 한다. export는 다른 곳에서 쓸 수 있게 내보내 주는 것. export 키워드 뒤에는 내 보낼 함수 혹은 변수명을 {}괄호로 묶어줘서 보낸다. 이름을 꼭 맞춰주어야 한다. // test2.js import {MSG1, MSG..
-
[2019.04.17] ES6 문법 - default parameter개발 블로깅/Modern script 2019. 4. 17. 12:27
함수에서 매개변수를 호출할 때 넣어주는 데이터가 없으면, 함수에서는 해당 매개변수가 undefined가 된다. function testFunc(argu1, argu2){ console.log(argu1); // 1 console.log(argu2); // undefined } testFunc(1); 그런데 ES6 문법에서는 매개변수가 선언이 되었는데, 호출 시 값이 들어오지 않으면 초기화 해줄 수 있다. function testFunc(argu1, argu2 = 2){ console.log(argu1); // 1 console.log(argu2); // 2 } testFunc(1); 위와 같이 매개변수에 들어오는 값이 없으면 초기화 해 줄 수 있다. # Default parameter 활용법 functi..
-
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise개발 블로깅/Modern script 2019. 4. 14. 18:05
서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야? 맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식! 나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다. # 비동기 서버 요청의 초기 방식 XML Http Request 왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. # 비동기 방식 Ajax란? 그리고 Ajax 방식 중 최신기술인 fetch API 이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 ..