카테고리: JavaScript

[자바스크립트] 비동기 처리 2부 - Promise

많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다.이번 포스트에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서

[자바스크립트] 비동기 처리 1부 - Callback

자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다.이번 포스트에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는

Vue CLI 3 사용법

2018년 8월 10일 Vue CLI 3가 정식 릴리즈되었습니다. Github 릴리즈 페이지: https://github.com/vuejs/vue-cli/releases Evan You의 포스트: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb Vue CLI는 React의 creat

GraphQL API 간단하게 호출하기

GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서 알아보겠습니다. 아래에 소개된 방법들로 GraphQL API 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다. 내장 Web UI많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해

웹팩(Webpack) 개발 편의 기능

웹팩은 자바스크립트 개발자들이 좀 더 쾌적한 개발 경험을 할 수 있도록 여러가지 개발 편의 기능을 제공합니다. 이번 포스트에서는 웹팩을 사용하면서 개발 편의성을 개선시킬 수 방법에 대해서 알아보겠습니다. 관련 포스트웹팩에 대한 지식이나 경험이 전혀 없으신 분들을 아래 포스트를 먼저 읽어보시면 따라오시기가 좀 더 수월하실 겁니다. 웹팩(Webpack) 기본

웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)

React나 Vue, Angular와 같은 자바스크립트 프레임워크를 기반으로 프로젝트를 하다보면 webpack.config.js라는 파일과 자주 마주치게 됩니다. 바로 웹팩 설정 파일인데요. 이번 포스트에서는 이 설정 파일을 기본으로 한 웹팩 기본 설정법에 대해서 알아보도록 하겠습니다. 웹팩에 대한 기본 개념이나 사용법을 모르시는 분은 지난 포스트를 먼저

웹팩(Webpack) 기본 사용법 (CLI)

자바스크립트 프레임워크로 React를 사용하든 Vue를 사용하든 Angular를 사용하든 항상 웹팩(Webpack)이라는 녀셕을 만나게 됩니다.보통 구글링해서 겨우 필요한 설정만 바꾸면서 사용하고 했었는데 이 번에 시간을 내서 웹팩에서 대해 한 번 공부를 해보았습니다. 웹팩(Webpack)은 기본적으로 자바스크립트 모듈 번들러(JavaScript Modul

자바스크립트 객체 복제 방법

자바스크립트에서 의외로 객체의 복제가 쉽지 않을 수 있습니다. 예를 들어 다음과 같은 객체가 있다고 해보겠습니다. 12345678910111213const original = { num: 1000, bool: true, str: 'test', func: function () { console.log('fu

NodeJS로 ES6 코드 실행하기

ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(NodeJS)에서 실행이 안 되는 경우가 종종있습니다. 이럴 경우 어쩔 수 없이 예전 자바스크립트 문법으로 코드를 재작성하기도 하는데요. 이번 포스트에서는 자바스크립트 Transpiler인 Babel을 이용하여 이 문제를 해결해보겠습니다. NodeJS에서 ES6 코드 실행 오류먼

자바스크립트 ES6 모듈 내보내기/불러오기 (import)

자바스크립트 개발을 하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES6(ES2015)에서 새롭게 도입된 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고