개발자
-
[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.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.23] RESTful API 개념개발 블로깅/Server&DataBase 개념 2019. 4. 23. 08:57
RESTful이란 단어를 처음 들어본게 2015년...인턴생활하면서 처음으로 ajax를 사용해볼 때 들어본 것 같다...무려 4년 전이다. 근데 단어만 들어봤지, 이게 대체 뭐하는 녀석인지 어떤 개념인지 잘 몰랐고, 찾아봐도 이해가 잘 되지 않았는데, 요즘 웹 분야로 계속 공부를 하다보니 조금 느낌이 와닿는 것 같기도... RESTful을 알기 전에 REST가 뭔지 먼저 이해를 해야한다. # REST란? 자원을 이름(자원의 표현)으로 구분하여 자원의 정보를 주고 받는 모든 일의 의미한다. 그냥 쉽게 자원에 이름을 붙여서 주고받는 행위! 여기서 말한 자원에는 변수에 담긴 데이터 뿐 아니라, 문서, 그림, 파일 등 소프트웨어에서 사용되는 모든 것을 말함. ex) DB의 학생 정보가 자원이면, 'student..
-
[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.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..