자바스크립트
-
[2019.04.27] Promise 꿀팁 - util 모듈 promisify()개발 블로깅/Server&DataBase 개념 2019. 4. 27. 15:53
node.js의 내장함수인 util모듈 중에 promisify라는 함수가 있다. 이것을 쓰면, 비동기로 돌리려는 함수를 promise로 감싸주지 않고 사용할 수 있다. 그래서 지금부터 이 Promise를 조금 더 잘 다룰 수 있도록 하는 util promisify()함수를 소개해보려고 한다. 안녕하세요~! // hello.txt const fs = require('fs'); fs.readFile('./hello.txt', 'utf-8', (err, result) => { console.log(result); // '안녕하세요~!' }); // util.js 위와 같이 hello.txt와 utiltest.js 파일이 있다. util.js은 node.js 내장함수인 fs모듈을 이용하여 hello.js파일의 ..
-
[2019.04.26] 자바스크립트의 비동기 특징과 비동기 방식을 다루는 법개발 블로깅/Modern script 2019. 4. 26. 19:29
자바스크립트는 싱글 스레드이다. 그래서 비동기 방식의 함수를 정말 많이 내장하고 있다. # 비동기 방식의 특징 동기적 함수들은 절대 비동기 함수를 기다려주지 않는다. 그래서 비동기 방식의 함수는 동기적 방식의 함수들이 처리를 다 하면, 그제서야 이벤트 큐에서 하나씩 가져와서 처리가 된다. 그래서 비동기적 방식의 함수를 호출 후 처리해야할 작업은, 처리할 함수를 콜백으로 넘기는 등 전부 비동기 함수 쪽에 몰아 넣어야 한다. # 비동기 방식의 필요성 자바스크립트는 네트워크 상 웹 브라우저에서 사용하는 언어이다. 그러므로 자바스크립트는 통신이라는 개념을 가지고 있다. 통신 중 어떤 함수가 일 처리가 길어지면, 웹 브라우저는 계속 멈춤 상태가 되고 기다려야 된다. 통신 중 계속 기다려야 되는 상황을 방지하기 위..
-
[2019.04.24] 실시간 통신 API - webSocket개발 블로깅/Server&DataBase 개념 2019. 4. 24. 23:55
웹소켓이라는 통신 모듈을 사용하면, 꼭 클라이언트가 요청을 하지 않아도 서버 내에서 특정 데이터 변경이나 외부에서 이벤트를 발생하면, 클라이언트에게 신호를 보내는 방식이 있다. 이 방식을 통해, 기존에 서버에게 주기적으로 요청을 보내서 받아왔던 실시간 데이터를, 소켓을 이용하여 서버에게 응답을 받으면 된다. 소켓 모듈 설치 npm i -D socket.io // 서버 전용 소켓 npm i -D socket.io-client // 클라이언트 전용 서버 전용과 클라이언트 전용 소켓 모듈이 따로 있다. # websocket 특징 get, post등과 같은 http method를 가지지 않는다. 특정 통신을 위한 키를 가진다. 데이터를 전달할 때, stringify 등의 데이터 처리를 안해줘도 된다. , con..
-
[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] API 서버를 만들어보자 - http 방식개발 블로깅/Server&DataBase 개념 2019. 4. 23. 11:22
node.js를 이용한 API를 직접 만들어 볼 기회가 올 줄이야. 정말 내가 원하는 작업이였다...ㅜㅜ (그렇다고 백엔드를 갈구하는 편은 아니다..) 지금부터 API 서버를 만들어 보는 작은 프로젝트를 작업해보자. 프로젝트로 쓸 디렉토리 생성 mkdir serverProject cd serverproject module 관리자 package.json 생성 npm init -y 서버 개발 중 코드를 작업 후 저장하면 바로 적용되는 nodemon 모듈을 로컬로 설치 (새로고침을 안해도 됨) npm i -D nodemon package.json에 nodemon 설정 (npm start 명령어로 바로 실행 시킬 수 있도록 설정) { "name": "testServer", "version": "1.0.0", "..
-
[2019.04.22] WebPack 사용법 #4 - babel 세팅개발 블로깅/Modern script 2019. 4. 22. 12:11
브라우저 내에서는 ES6 이상의 문법을 호환하지 않는다. 그럼 우리는 어떻게 ES6문법을 이용하여 개발이 가능한 것인가. 바로 babel이란 모듈이, ES6 문법을 브라우저에 사용할 수 있는 방식인 ES5으로 바꿔준다. 이 babel을 사용하게 위해서는 모듈을 설치하고 webpack에 설정을 해 주어야 한다. 그러면 babel을 사용하는 법을 알아보자. 이전 글에 작업했던 webpack에 이어서 한다. # babel 모듈 설치 npm i -D babel-cli babel-preset-env babel-core 위 세개의 모듈은 babel을 사용하게 위해서 필요로 한 필수 모듈이다. 설치를 하면 package.json에서 babel 관련 버전이 표시되는 것을 확인할 수 있다. 그리고 해당 root경로에 '..
-
[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..